54 votes

Centrer deux boutons horizontalement

J'essaie de disposer deux boutons (avec des images dessus qui fonctionnent bien) l'un à côté de l'autre et de les centrer horizontalement. C'est ce que j'ai fait 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 la bienvenue ! Yves

Modifier :

Malheureusement, aucun des commentaires ou suggestions ne fonctionne jusqu'à présent. C'est pourquoi j'essaie de fournir une mise en page simplifiée et complète maintenant 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 le LinearLayout et sur les éléments Button sans succès. Avez-vous d'autres idées ?

0 votes

Quelle est la taille des boutons ? S'adapteront-ils côte à côte comme vous le souhaitez ?

0 votes

Oui, ce n'est pas un problème du tout. Actuellement, ils apparaissent côte à côte, mais ils restent sur le côté gauche.

0 votes

Oh je vois quel est votre problème, j'ai mal lu le problème. Je pensais que vous disiez que vous n'arriviez pas à les aligner horizontalement.

103voto

russenreaktor Points 1762

Voici 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>

0 votes

Réponse brillante ! ressemble exactement à ces applications sur le marché. Merci beaucoup !

8 votes

La sauce secrète ici est le android:layout_weight="1.0" Spécifiez ceci pour chaque bouton dans votre LinearLayout horizontal et tous les boutons auront la même taille.

0 votes

C'est parfait, peut-on le faire sans utiliser la disposition linéaire intérieure. Puisque j'ai un problème similaire, mais 6 à 7 lignes avec 2 vues de texte chacune. Le rendu de l'activité est très lent, quelqu'un m'a dit que si je pouvais réduire l'arbre de mise en page, le rendu pourrait être plus rapide.

31voto

R Hughes Points 181

Je sais que vous avez déjà trouvé une solution, mais vous pourriez également trouver ceci utile. Le TextView vide utilisé comme référence centrale peut servir de padding entre les boutons en augmentant le paramètre dip. Il gère également bien 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 :

screen shot of the result

0 votes

Celui-ci ne fonctionne pas pour moi, pour une raison quelconque. J'utilise simplement un RelativeLayout à l'intérieur d'un ScrollView .

15voto

ninjasense Points 5934

Je ne sais pas si vous avez déjà trouvé une bonne réponse à cette question, mais j'y suis parvenu en créant un TableRow, en définissant la largeur sur fill_parent et la gravité sur center, 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>

0 votes

Alors comment les coller en bas de l'écran ? TableRow ne fonctionnera pas pour cela

6voto

funcoder Points 236

Si vous recherchez une solution rapide et complète de RelativeLayout, la solution suivante fonctionne bien. L'élément View fictif 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>

5voto

cve Points 41

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>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X