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>
la valise
la source
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>
Dave Webb
la source
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>
lancha90
la source
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?

rui
la source
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"
hopcraft
la source
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
10

Ajoute ça

android:gravity="center"

Dans LinearLayout.

Tanmay Sahoo
la source
1
devrait être android:gravity="center"
John Joe
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>`
Hans Pour
la source
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>
Javier
la source
5

Vous pouvez utiliser le RelativeLayout.

Amit kumar
la source
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.

Vish
la source
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>

Joe Healy
la source
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>
Reza Mamun
la source
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

Oskar
la source
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>
user4058115
la source
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

Mohamed Adel
la source
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"/>

A-Sharabiani
la source
0

Cela fonctionne pour moi.

android:layout_alignParentEnd="true"
Marci
la source
-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>
Varghese John
la source
-2

utilisation

android: layout_centerHorizontal = "true"

Mayank Mishra
la source
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"
user2090145
la source