Centrer deux boutons horizontalement

Question

J'essaie de disposer deux boutons (avec des images qui fonctionnent bien) l'un à côté de l'autre et de les centrer horizontalement. C'est ce que j'ai jusqu'à présent:

<LinearLayout Android:orientation="horizontal" Android:layout_below="@id/radioGroup"
              Android:layout_width="wrap_content" Android:layout_height="wrap_content"
              Android:layout_gravity="center_horizontal|center">
    <Button
            Android:id="@+id/allow"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_below="@id/radioGroup"
            Android:layout_gravity="center_horizontal"
            Android:drawableLeft="@drawable/accept_btn"
            Android:text="Allow"/>
    <Button
            Android:id="@+id/deny"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_toRightOf="@id/allow"
            Android:layout_below="@id/radioGroup"
            Android:layout_gravity="center_horizontal"
            Android:drawableLeft="@drawable/block_btn"
            Android:text="Deny"/>
</LinearLayout>

Malheureusement, ils sont toujours alignés sur le côté gauche. Toute aide est appréciée! Yves

Modifier :

Malheureusement, aucun des commentaires ou suggestions ne fonctionne jusqu'à présent. C'est pourquoi j'essaie de fournir maintenant une mise en page complète simplifiée avec un RelativeLayout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
            Android:layout_width="fill_parent" Android:layout_height="wrap_content"
            Android:layout_centerHorizontal="true">
    <TextView Android:text="@+id/TextView01" Android:id="@+id/TextView01"
          Android:layout_width="wrap_content" Android:layout_height="wrap_content"/>
    <Button
        Android:id="@+id/allow"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_below="@id/TextView01"
        Android:text="Allow"/>
    <Button
        Android:id="@+id/deny"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_toRightOf="@id/allow"
        Android:layout_alignTop="@id/allow"
        Android:text="Deny"/>
</RelativeLayout>

J'ai essayé toutes les combinaisons d'attributs dans les éléments LinearLayout et Button sans succès. D'autres idées?

Answer 1

Ceci est ma solution:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="fill_parent" Android:layout_height="wrap_content"
    Android:layout_centerHorizontal="true">

    <TextView
        Android:text="@+id/SomeText"
        Android:id="@+id/TextView01"
        Android:layout_width="wrap_content" Android:layout_height="wrap_content" />

    <LinearLayout
        Android:orientation="horizontal"
        Android:background="@Android:drawable/bottom_bar"
        Android:paddingLeft="4.0dip"
        Android:paddingTop="5.0dip"
        Android:paddingRight="4.0dip"
        Android:paddingBottom="1.0dip"
        Android:layout_width="fill_parent" Android:layout_height="wrap_content"
        Android:layout_below="@+id/TextView01">

        <Button
            Android:id="@+id/allow"
            Android:layout_width="0.0dip" Android:layout_height="fill_parent"
            Android:text="Allow"
            Android:layout_weight="1.0" />

        <Button
            Android:id="@+id/deny"
            Android:layout_width="0.0dip" Android:layout_height="fill_parent"
            Android:text="Deny"
            Android:layout_weight="1.0" />

    </LinearLayout>
</RelativeLayout>

Answer 2

Je sais que vous avez déjà trouvé une solution, mais cela pourrait également vous être utile. Le TextView vide utilisé comme référence centrale peut également servir de bourrage entre les boutons en augmentant le paramètre DIP. Il gère également les changements d'orientation de l'écran.

<RelativeLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Button
        Android:id="@+id/button1"
        Android:text="Left"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentLeft="true"
        Android:layout_toLeftOf="@+id/centerPoint" />

    <TextView
        Android:id="@+id/centerPoint"
        Android:text=""
        Android:layout_width="0dip"
        Android:layout_height="wrap_content"
        Android:layout_centerHorizontal="true" />

    <Button
        Android:id="@+id/button2"
        Android:text="Right"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentRight="true"
        Android:layout_toRightOf="@+id/centerPoint" />

</RelativeLayout>

Capture d'écran du résultat:

Answer 3

Je ne sais pas si vous avez réellement trouvé une bonne réponse à cette question, mais je l'ai fait en créant une table de rangée, en définissant la largeur sur fill_parent et en fixant la gravité au centre, puis en plaçant les deux boutons à l'intérieur.

    <TableRow Android:layout_width="fill_parent"
    Android:layout_height="wrap_content" Android:gravity="center">
    <Button Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Test" Android:width="100dip"></Button>
    <Button Android:layout_width="wrap_content" 
        Android:text="Test" Android:layout_height="wrap_content"
        Android:width="100dip"></Button>
</TableRow>

Answer 4

Si vous recherchez une solution rapide entièrement RelativeLayout, voici ce qui fonctionne: .. L’élément View factice est invisible et centré horizontalement . Les deux boutons sont alignés à gauche ou à droite.

<RelativeLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res/com.be.Android.stopwatch"
Android:orientation="vertical"
Android:layout_width="fill_parent"
Android:layout_height="fill_parent"
Android:layout_gravity="center_horizontal">

<View Android:id="@+id/dummy"  Android:visibility="visible" Android:layout_height="0dip" Android:layout_width="1dip" Android:background="#FFFFFF" Android:layout_centerHorizontal="true"/>

<ImageButton Android:id="@+id/button1" Android:layout_height="25dip" Android:layout_alignTop="@+id/dummy" Android:layout_toLeftOf="@+id/dummy" Android:layout_width="50dip"/>

<ImageButton Android:id="@+id/button2" Android:layout_height="25dip" Android:layout_alignTop="@+id/dummy"  Android:layout_toRightOf="@+id/dummy"   Android:layout_width="50dip"/>

</RelativeLayout>

Answer 5

Je centre deux boutons de cette façon:

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:orientation="horizontal" >
    <LinearLayout
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_weight="1"
        Android:orientation="vertical" >
        <Button
            Android:id="@+id/button1"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center"
            Android:text="@string/one" />
    </LinearLayout>
    <LinearLayout
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_weight="1"
        Android:orientation="vertical" >
        <Button
            Android:id="@+id/button2"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center"
            Android:text="@string/two" />
    </LinearLayout>
</LinearLayout>

Answer 6

Les attributs nommés Android:layout_foo sont LayoutParams - arguments du parent de la vue. Essayez de définir Android:gravity="center" sur la LinearLayout au lieu de Android:layout_gravity. L'un affecte la manière dont la LinearLayout disposera ses enfants en lui-même, l'autre affecte la façon dont le parent de LinearLayout doit la traiter. Vous voulez l'ancien.

Answer 7

Cela semble être une très vieille question, mais j'ai eu le même problème aussi. J'ai dû placer deux boutons l'un à côté de l'autre au centre de l'écran (horizontalement). J'ai fini par placer les deux boutons dans une mise en page linéaire et de placer la mise en page linéaire dans une mise en page relative avec la gravité réglée au centre.

---

MISE À JOUR: J'ai trouvé une solution encore plus simple:

<LinearLayout Android:layout_height="wrap_content" Android:layout_width="wrap_content"
              Android:layout_centerHorizontal="true">
    <Button Android:text="status" Android:layout_height="wrap_content" Android:layout_width="wrap_content"/>
    <Button Android:text="fly" Android:layout_height="wrap_content" Android:layout_width="wrap_content"/>
</LinearLayout>

---

C'est ce que j'avais avant:

    <RelativeLayout Android:layout_height="wrap_content" Android:layout_width="match_parent"
                    Android:id="@+id/actionButtons" Android:layout_below="@id/tripInfo" Android:gravity="center">

        <LinearLayout Android:layout_height="wrap_content" Android:layout_width="wrap_content">
            <Button Android:text="status" Android:layout_height="wrap_content" Android:layout_width="wrap_content" />
            <Button Android:text="fly" Android:layout_height="wrap_content" Android:layout_width="wrap_content" />
        </LinearLayout>



    </RelativeLayout>

Answer 8

Utilisez une mise en page au lieu de linéaire et définissez gravité comme Android: gravity = "center" . 

Les dispositions relatives offrent de meilleures performances et une meilleure évolutivité si vous exécutez votre application avec des périphériques de tailles différentes.

Après, à titre d'exemple, XML et l'interface utilisateur résultante:

    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="80dp"
        Android:background="@Color/custom1"
        Android:gravity="center" >

        <TextView
            Android:id="@+id/tv1"
            Android:layout_width="wrap_content"
            Android:layout_height="50dp"
            Android:background="@color/Red"
            Android:gravity="center"
            Android:layout_marginRight="80dp"
            Android:text="Text11111" />

        <TextView
            Android:id="@+id/tv2"
            Android:layout_width="wrap_content"
            Android:layout_height="50dp"
            Android:layout_toRightOf="@id/tv1"
            Android:background="@color/Yellow"
            Android:gravity="center"
            Android:text="Text22222" />
    </RelativeLayout>

Answer 9

J'ai enveloppé deux LinearLayout horizontaux comme suit:

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:orientation="horizontal"
    Android:gravity="center"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content" >

    <LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:orientation="horizontal"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" >

vos widgets d'interface utilisateur ici 

</LinearLayout> </LinearLayout>

Answer 10

C’est ce que j’ai fait. J’ai enveloppé une mise en page linéaire avec une mise en page linéaire dont la gravité est définie sur center_horizontal. Ensuite, je règle la largeur de la présentation linéaire enveloppée sur la largeur en pixels des boutons combinés. Dans cet exemple, les boutons ont une largeur de 100px. J'ai donc défini la disposition linéaire enveloppée sur 200px.

Exemple xml:

<?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"
    Android:gravity="center_horizontal">
    <TextView Android:layout_width="fill_parent"
        Android:layout_height="200px"
        Android:text="This is some text!"
        Android:background="#ff333333" />
    <LinearLayout Android:layout_height="wrap_content"
        Android:id="@+id/linearLayout1"
        Android:layout_width="200px">
        <Button Android:id="@+id/button1"
        Android:layout_height="wrap_content"
        Android:text="Button 1"
        Android:layout_width="100px">
        </Button>
        <Button Android:id="@+id/button2"
        Android:layout_height="wrap_content"
        Android:text="Button 2"
        Android:layout_width="100px">
        </Button>
    </LinearLayout>
</LinearLayout>

Answer 11

Ceci est ma solution en utilisant relativeLayout:

<RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:gravity="center">

        <Button
            Android:id="@+id/reject_btn"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="@string/reject"/>

        <Button
            Android:id="@+id/accept_btn"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="@string/accept"
            Android:layout_toRightOf="@id/reject_btn"/>
    </RelativeLayout>

Answer 12

Je ressens votre douleur, j'ai dû ajuster un peu les choses et faire en sorte que celle-ci fonctionne.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content">

 <Button 
     Android:id="@+id/Button01"
     Android:layout_alignParentLeft="true"
     Android:layout_width="75dp"
     Android:layout_height="40dp"
     Android:layout_marginTop="15dp"
     Android:layout_marginLeft="60dp"
     Android:text="No" />

 <Button 
     Android:id="@+id/Button02"
     Android:layout_alignParentRight="true"
     Android:layout_width="75dp"
     Android:layout_height="40dp"
     Android:layout_marginTop="15dp"
     Android:layout_marginRight="60dp"
     Android:text="Yes" />

 <TextView
    Android:id="@+id/centerPoint"
    Android:layout_toRightOf="@id/Button01"
    Android:layout_toLeftOf="@id/Button02"
    Android:text=""
    Android:layout_width="0dip"
    Android:layout_height="wrap_content"
    Android:layout_centerHorizontal="true"
    />

</RelativeLayout>

Answer 13

Utilisez RelativeLayout au lieu de LinearLayout et définissez son Android_layout:gravity="center_horizontal" ou une méthode très non optimale consiste à définir le Android_padding de LinearLayout avec des valeurs de pixel alignant le centre.

Answer 14

La manière la plus élégante de procéder sans introduire de composants redondants ni de groupes de vues est d'utiliser un espacement. Vous pouvez utiliser des éléments d'espace avec layout_weight dans une présentation linéaire pour obtenir l'effet souhaité:

<LinearLayout Android:orientation="horizontal" Android:layout_below="@id/radioGroup"
        Android:layout_width="wrap_content" Android:layout_height="wrap_content"
        Android:layout_gravity="center_horizontal|center">
        <Space
            Android:layout_width="wrap_content"
            Android:layout_height="match_parent"
            Android:layout_weight="1" />
        <Button
            Android:id="@+id/allow"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_below="@id/radioGroup"
            Android:drawableLeft="@drawable/accept_btn"
            Android:text="Allow"/>
        <Button
            Android:id="@+id/deny"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_toRightOf="@id/allow"
            Android:layout_below="@id/radioGroup"
            Android:drawableLeft="@drawable/block_btn"
            Android:text="Deny"/>
        <Space
            Android:layout_width="wrap_content"
            Android:layout_height="match_parent"
            Android:layout_weight="1" />
    </LinearLayout>

Si vous attribuez un poids égal à layout aux deux éléments d’espace (peu importe les poids, c’est un ratio par rapport au total de tous les poids), les espaces occupent l’espace supplémentaire disponible. Cela force donc les boutons au milieu, auxquels aucun poids-mise en page ne leur a été attribué, de sorte qu'ils ne prennent pas d'espace supplémentaire, exactement ce qui leur est donné explicitement (la taille des images).

Answer 15

Cela a plutôt bien fonctionné pour moi:

<RadioGroup
    Android:id="@+id/ratingRadioGroup"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:orientation="horizontal"
    Android:layout_gravity="center_horizontal">
    <RadioButton
        Android:id="@+id/likeButton"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:checked="true"
        Android:text="@string/like"
        Android:paddingRight="20pt"/>
    <RadioButton
        Android:id="@+id/dislikeButton"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="@string/dislike" />
</RadioGroup>

Answer 16

Essayez d’avoir une vue au milieu avec une hauteur et une largeur de zéro, de la positionner au centre et de placer les deux boutons à droite et à gauche.

Regardez, cela fait partie d'une application que j'ai construite:

<RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">

<View
    Android:layout_width="0dp"
    Android:layout_height="0dp"
    Android:layout_centerInParent="true"
    Android:id="@+id/view_in_middle">
</View>

<Button

    Android:layout_width="120dp"
    Android:layout_height="wrap_content"
    Android:id="@+id/yes_button"
    Android:layout_marginRight="24dp"
    Android:layout_toLeftOf="@id/view_in_middle"
    Android:text="Yes" />

<Button

    Android:layout_width="120dp"
    Android:layout_height="wrap_content"
    Android:id="@+id/no_button"
    Android:text="No"
    Android:layout_marginLeft="24dp"
    Android:layout_toRightOf="@id/view_in_middle"
  />

</RelativeLayout>

Answer 17

En dessous du code, deux boutons sont alignés au centre Horizontal, aucun dp n’est donné. Donc, cela fonctionnera dans toutes les orientations et tous les écrans.

<LinearLayout
    Android:orientation="horizontal"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="center_horizontal"
    >

    <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Change password"
        Android:id="@+id/change_pwd_button"
        Android:layout_gravity="center_horizontal"
        Android:background="@Android:color/holo_blue_dark"
        Android:textColor="@Android:color/white"


        Android:padding="25px"/>
    <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Close"
        Android:id="@+id/change_pwd_close_btn"
        Android:layout_gravity="center_horizontal"
        Android:background="@Android:color/holo_blue_dark"
        Android:textColor="@Android:color/white"
        Android:layout_marginLeft="20dp"
        />
</LinearLayout>

Answer 18

cela fonctionne pour moi. simple et facile.

<RelativeLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">
                <LinearLayout
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_centerInParent="true"
                    >
                        <RelativeLayout
                            Android:layout_width="wrap_content"
                            Android:layout_height="wrap_content">
                                <Button
                                    Android:id="@+id/btn_one"
                                    Android:layout_width="wrap_content"
                                    Android:layout_height="wrap_content"
                                    Android:text="Button One"
                                    />
                                <Button
                                    Android:id="@+id/btn_two"
                                    Android:layout_width="wrap_content"
                                    Android:layout_height="wrap_content"
                                    Android:text="Button Two"
                                    Android:layout_toRightOf="@id/btn_one"
                                    />
                        </RelativeLayout>
                </LinearLayout>
        </RelativeLayout>