Centrer un bouton dans une disposition linéaire


339

J'utilise une disposition linéaire pour afficher un écran initial assez léger. Il a 1 bouton qui est censé se centrer à l'écran à la fois horizontalement et verticalement. Cependant, peu importe ce que j'essaie de faire, le bouton alignera le haut au centre. J'ai inclus le XML ci-dessous, quelqu'un peut-il m'orienter dans la bonne direction?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <ImageButton android:id="@+id/btnFindMe" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal"
        android:background="@drawable/findme"></ImageButton>

</LinearLayout>

6
Ce qui l'a corrigé pour moi dans un LinearLayout avec alignement horizontal était de définir layout_width"wrap_content". Par la suite, ils ont layout_gravityfait ce qu'ils étaient censés faire!
Quelqu'un Quelque part

Si vous avez strictement besoin d'utiliser LinearLayout, je pense que cela devrait fonctionner: stackoverflow.com/questions/18051472/…
Antonio

Réponses:


374

Si vous souhaitez centrer un élément au milieu de l'écran, n'utilisez pas LinearLayoutcar ils sont destinés à afficher un certain nombre d'éléments dans une rangée.

Utilisez RelativeLayoutplutôt un .

Remplacez donc:

android:layout_gravity="center_vertical|center_horizontal"

pour l' RelativeLayoutoption pertinente :

android:layout_centerInParent="true"

Ainsi, votre fichier de mise en page ressemblera à ceci:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/RelativeLayout01" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageButton android:id="@+id/btnFindMe" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/findme"></ImageButton>

</RelativeLayout>

38
Dans certains cas, vous devez utiliser un contenu linéaire et un contenu central. Cela ne devrait pas être la réponse acceptée. Il serait préférable de suggérer d'utiliser un RelativeLayout si possible, et sinon comment centrer dans un LinearLayout.
stevebot

Sans parler du fait qu'un RelativeLayout est beaucoup plus intensif en temps d'exécution en raison de la façon dont ils doivent mesurer leurs dimensions, tandis qu'un LinearLayout est super simple et beaucoup plus efficace.
Trevor Hart

437

Centrer à l'aide d'un LinearLayout:

<LinearLayout
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <ImageButton
        android:id="@+id/btnFindMe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/findme" />
</LinearLayout>

11
LinearLayout est plus simple et plus léger par rapport à un RelativeLayout, devrait être un peu plus rapide.
SurlyDre

3
J'utilisais layout_gravity au lieu de gravity. changer pour android: gravity = "center" a corrigé cela pour moi. erreur de débutant.
ackushiw

@ackushiw était aussi mon problème!
Denny

Au moins pour moi, l'attribut LinearLayout de gravity = "center" a fait l'affaire. Merci mon ami!
tthreetorch

42

Avez-vous essayé de définir l' android:gravity="center_vertical|center_horizontal"intérieur de la mise en page et le réglage android:layout_weight="1"de l'image?


2
J'aime cette option qui me permet de conserver mi LinearLayout! (Je n'ai cependant pas eu à régler android:weight="1"le bouton pour le centrer.)
Sébastien

4
android: gravity ne fonctionne pas pour moi dans un LinearLayout horizontal, mais android: layout_gravity le fait.
jfritz42

35

Une méthode couramment utilisée qui fonctionne avec une disposition linéaire consiste à définir une propriété sur le bouton d'image

android:layout_gravity="center"

Vous pouvez choisir d'aligner à gauche, d'aligner au centre ou d'aligner à droite chaque objet dans la disposition linéaire. Notez que la ligne ci-dessus est exactement la même que

android:layout_gravity="center_vertical|center_horizontal"

4
Ajoutez la propriété android: gravity = "center" dans la disposition parent - qui contient votre bouton (composants enfants).
Shekh Akther

vous avez également besoin de android.orientation = "vertical" plus le layout_gravity dans le parent, alias l'élément LInearLayout ....
Joe Healy


8

Si vous utilisez, LinearLayoutvous pouvez ajouter le centre de gravité:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">
            <Button
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            />
</LinearLayout>`

7

facile avec ça

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:visibility="visible" 
        android:gravity="center"
        android:orientation="vertical" >

        <ProgressBar
            android:id="@+id/pbEndTrip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:text="Gettings" />
    </LinearLayout>


5
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <ImageButton android:id="@+id/btnFindMe" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"
        android:layout_gravity = "center"
        android:background="@drawable/findme">
    </ImageButton>

</LinearLayout>

Le code ci-dessus fonctionnera.


2

échantillon complet et fonctionnel de ma machine ...

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity"
    android:gravity="center"
    android:textAlignment="center">


    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="My Apps!"
        android:id="@+id/textView"
        android:gravity="center"
        android:layout_marginBottom="20dp"
     />

    <Button
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:text="SPOTIFY STREAMER"
        android:id="@+id/button_spotify"
        android:gravity="center"
        android:layout_below="@+id/textView"
        android:padding="20dp"
        />

    <Button
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:text="SCORES"
        android:id="@+id/button_scores"
        android:gravity="center"
        android:layout_below="@+id/textView"
        android:padding="20dp"
        />


    <Button
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="LIBRARY APP"
        android:id="@+id/button_library"
        android:gravity="center"
        android:layout_below="@+id/textView"
        android:padding="20dp"
        />

    <Button
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="BUILD IT BIGGER"
        android:id="@+id/button_buildit"
        android:gravity="center"
        android:layout_below="@+id/textView"
        android:padding="20dp"
        />

    <Button
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="BACON READER"
        android:id="@+id/button_bacon"
        android:gravity="center"
        android:layout_below="@+id/textView"
        android:padding="20dp"
        />

    <Button
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="CAPSTONE: MY OWN APP"
        android:id="@+id/button_capstone"
        android:gravity="center"
        android:layout_below="@+id/textView"
        android:padding="20dp"
        />

</LinearLayout>


vous ne pouvez utiliser 'android: layout_below' que sur les frères et sœurs de 'RelativeLayout'
jazz

2

Selon la documentation Android pour les attributs XML d' Android: layout_gravity , nous pouvons le faire facilement :)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageButton android:id="@+id/btnFindMe" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="@drawable/findme"></ImageButton>

</LinearLayout>

1
android: layout_gravity = "center" fonctionne très bien :) merci!
Amine Soumiaa

1

Définissez sur true android:layout_alignParentTop="true"et android:layout_centerHorizontal="true"dans le bouton, comme ceci:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
     <Button
        android:id="@+id/switch_flashlight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/turn_on_flashlight"
        android:textColor="@android:color/black"
        android:onClick="action_trn"
        android:background="@android:color/holo_green_light"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:padding="5dp" />
</RelativeLayout>

entrez la description de l'image ici


0

Vous pouvez également essayer ce code:

<LinearLayout
            android:id="@+id/linear_layout"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:orientation="horizontal"
            android:weightSum="2.0"
            android:background="@drawable/anyBackground" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/img_mail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/yourImage" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical"
            android:layout_weight="1" >



<ImageView
            android:id="@+id/img_save"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:background="@drawable/yourImage" />
        </LinearLayout>
        </LinearLayout>

Pouvez-vous expliquer en quoi cela diffère des réponses déjà fournies?
EWit

0

utilisez simplement (pour le faire au centre de votre mise en page)

        android:layout_gravity="center" 

et utilise

         android:layout_marginBottom="80dp"

         android:layout_marginTop="80dp"

changer de position


0

Vous pouvez également définir la largeur de la LinearLayout à wrap_contentet de l' utilisation android:layout_centerInParent, android:layout_centerVertical="true":

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
>

<ImageButton android:id="@+id/btnFindMe" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"       
    android:background="@drawable/findme"/>


0

Cela fonctionne pour moi.

android:layout_alignParentEnd="true"

-2

Avez-vous essayé cela?

  <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mainlayout" android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5px"
android:background="#303030"
>
    <RelativeLayout
    android:id="@+id/widget42"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    >
    <ImageButton
    android:id="@+id/map"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="map"
    android:src="@drawable/outbox_pressed"
    android:background="@null"
    android:layout_toRightOf="@+id/location"
    />
    <ImageButton
    android:id="@+id/location"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="location"
    android:src="@drawable/inbox_pressed"
    android:background="@null"
    />
    </RelativeLayout>
    <ImageButton
    android:id="@+id/home"
    android:src="@drawable/button_back"
    android:background="@null"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5px"
android:orientation="horizontal"
android:background="#252525"
>
    <EditText
    android:id="@+id/searchfield"
    android:layout_width="fill_parent"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:background="@drawable/customshape"
    />
    <ImageButton
    android:id="@+id/search_button"
    android:src="@drawable/search_press"
    android:background="@null"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    />
</LinearLayout>
<com.google.android.maps.MapView
    android:id="@+id/mapview" 
    android:layout_weight="1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:clickable="true"
    android:apiKey="apikey" />

</TableLayout>

-2

utilisation

android: layout_centerHorizontal = "true"


1
En fait vogon101, c'est une propriété valide dans un RelativeLayout. :) Cela ne répond pas à la question, car l'utilisateur utilisait un LinearLayout et voulait centrer verticalement et horizontalement.
Sarah

-7

Il serait plus facile d'utiliser des dispositions relatives, mais pour les dispositions linéaires, je centre généralement en m'assurant que la largeur correspond au parent:

    android:layout_width="match_parent"

puis juste donner des marges à droite et à gauche en conséquence.

    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.