Centrar un botón en un diseño lineal

338

Estoy usando un diseño lineal para mostrar una pantalla inicial bastante ligera. Tiene 1 botón que se supone que se centra en la pantalla tanto horizontal como verticalmente. Sin embargo, no importa lo que intente hacer, el botón se alineará en el centro. He incluido el XML a continuación, ¿alguien puede señalarme en la dirección correcta?

<?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>
xml  android  layout 
— themaninthesuitcase
fuente
66
Lo que me solucionó en un LinearLayout con alineación horizontal fue establecerlo layout_widthen "wrap_content". ¡Posteriormente layout_gravityhicieron lo que se suponía que debía hacer!
— Alguien en alguna parte
Si estrictamente necesita usar LinearLayout, creo que esto debería funcionar: stackoverflow.com/questions/18051472/…
— Antonio

Respuestas:

374

Si desea centrar un elemento en el medio de la pantalla, no utilice un, LinearLayoutya que están destinados a mostrar una serie de elementos en una fila.

Use un RelativeLayouten su lugar.

Entonces reemplace:

android:layout_gravity="center_vertical|center_horizontal"

para la RelativeLayoutopción relevante :

android:layout_centerInParent="true"

Entonces su archivo de diseño se verá así:

<?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
fuente
38
Hay instancias en las que necesita usar LinearLayout y centrar contenido. Esta no debería ser la respuesta aceptada. Sería mejor sugerir utilizar un RelativeLayout si es posible, y si no, cómo centrarse en un LinearLayout.
— stevebot
Sin mencionar el hecho de que un RelativeLayout requiere mucho más tiempo de ejecución debido a la forma en que deben medirse sus dimensiones, mientras que un LinearLayout es súper sencillo y mucho más eficiente.
— Trevor Hart
436

Centro utilizando un diseño lineal:

<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
fuente
11
LinearLayout es más simple y liviano en comparación con un RelativeLayout, debería ser un poco más rápido.
— SurlyDre
3
Estaba usando layout_gravity en lugar de gravedad. cambiando a android: gravity = "center" me arregló esto. error de principiante.
— ackushiw
¡@ackushiw también fue mi problema!
— Denny
Al menos para mí, el atributo android: gravity = "center" LinearLayout hizo el truco. ¡Gracias hermano!
— tthreetorch
42

¿Has intentado definir android:gravity="center_vertical|center_horizontal"dentro del diseño y la configuración android:layout_weight="1"de la imagen?

— rui
fuente
2
¡Me gusta esta opción que me permite mantener mi LinearLayout! (Sin embargo, no tuve que configurar android:weight="1"el botón para centrarlo.)
— Sébastien el
44
android: gravity no funciona para mí en LinearLayout horizontal, pero android: layout_gravity sí.
— jfritz42
35

Un método de uso común que funciona con diseño lineal es establecer una propiedad en el botón de imagen

android:layout_gravity="center"

Puede elegir si alinear a la izquierda, alinear al centro o alinear a la derecha cada objeto en el diseño lineal. Tenga en cuenta que la línea anterior es exactamente la misma que

android:layout_gravity="center_vertical|center_horizontal"
— hopcraft
fuente
44
Agregue la propiedad android: gravity = "center" en el diseño principal, que contiene su botón (componentes secundarios).
— Shekh Akther
también necesita android.orientation = "vertical" más el layout_gravity en el padre, también conocido como el elemento LInearLayout ...
— Joe Healy
8

Si usa LinearLayoutpuede agregar centro de gravedad:

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

fácil con esto

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

El código anterior funcionará.

— Vish
fuente
2

muestra completa y de trabajo de mi máquina ...

<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>
Expandir fragmento

— Joe Healy
fuente
solo puede usar 'android: layout_below' en hermanos de 'RelativeLayout'
— jazz
2

Según la documentación de Android para los atributos XML de Android: layout_gravity , podemos hacerlo fácilmente :)

<?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
fuente
1
android: layout_gravity = "center" funciona bien :) gracias!
— Amine Soumiaa
1

Establecer en verdadero android:layout_alignParentTop="true"y android:layout_centerHorizontal="true"en el botón, así:

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

ingrese la descripción de la imagen aquí

— Oskar
fuente
0

También puedes probar este código:

<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>
— usuario4058115
fuente
¿Puedes explicar cómo esto es diferente de las respuestas ya proporcionadas?
— EWit
0

solo use (para hacerlo en el centro de su diseño)

        android:layout_gravity="center"

y use 

         android:layout_marginBottom="80dp"

         android:layout_marginTop="80dp"

cambiar de posición

— Mohamed Adel
fuente
0

También puede ajustar el ancho de la LinearLayout de wrap_contentuso 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
fuente
0

Esto es trabajo para mí.

android:layout_alignParentEnd="true"
— Marci
fuente
-2

¿Intentaste esto?

  <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>
— John Varghese
fuente
-2

utilizar

android: layout_centerHorizontal = "true"

— Mayank Mishra
fuente
1
En realidad vogon101, esta es una propiedad válida en un RelativeLayout. :) Sin embargo, no responde la pregunta, porque el usuario estaba usando un LinearLayout y quería centrarse tanto vertical como horizontalmente.
— Sarah
-7

Sería más fácil usar diseños relativos, pero para diseños lineales, generalmente centro, asegurándome de que el ancho coincida con el padre: 

    android:layout_width="match_parent"

y luego solo dé márgenes a derecha e izquierda en consecuencia. 

    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
— usuario2090145
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.