1

Estou utilizando 3 botões num Linear Layout. Gostaria de distribuir os espaços entre os botões.

Segue a imagem como exexmplo:

inserir a descrição da imagem aqui

xml da tela:

 <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="texto1"
            android:id="@+id/btn1"
            android:onClick="botao1"
            android:textSize="10dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="texto2"
            android:id="@+id/btn2"
            android:onClick="botao2"
            android:textSize="10dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="texto3"
            android:id="@+id/btn3"
            android:onClick="botao3"
            android:textSize="10dp" />

    </LinearLayout> 

2 Respostas 2

2

Além dos botões terá de usar uma view "vazia"(1) para representar os espaços antes, entre e depois de cada botão.

É utilizado atributo layout_weight para dimensionar os espaços de forma igual.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="15dp">

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight="1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="texto1"
        android:id="@+id/btn1"
        android:onClick="botao1"
        android:textSize="10dp" />

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight="1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="texto2"
        android:id="@+id/btn2"
        android:onClick="botao2"
        android:textSize="10dp" />

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight="1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="texto3"
        android:id="@+id/btn3"
        android:onClick="botao3"
        android:textSize="10dp" />

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight="1"/>
</LinearLayout>

(1) Se minSdkVersion for igual a 14 ou superior pode substituir

<View
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_weight="1"/>

por:

<Space
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"/>
5
  • você pode dar uma dica, adicionei mais uma fileira de botões tem como dar um pequeno espaço entre o botão de cima com o de baixo.
    – Vale
    Commented 21/03/2016 às 19:36
  • Se você duplicar o xml que eu postei para representar a nova fileira ela ficará 15dp abaixo da primeira. Inclua as duas em um LinearLayout.
    – ramaral
    Commented 21/03/2016 às 21:11
  • eu fiz isso um botão de cima ficou colado no outro de baixo
    – Vale
    Commented 22/03/2016 às 11:45
  • O LinearLayout tem android:layout_marginTop="15dp" logo deveriam ficar separados por 15dp
    – ramaral
    Commented 22/03/2016 às 12:00
  • 1
    estava faltando este código, deu certo.
    – Vale
    Commented 22/03/2016 às 12:12
2

Para adicionar espaçamento entres os botões você pode usar o layout_margin:

android:layout_margin="10dp" 
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"

Contudo, há várias formas para que eles sejam igualmente espaçados e aliados com a tela do usuário.

Um forma: Centralize os elementos do Linearlayout e coloque margens no segundo botão

<LinearLayout
        ...
        android:gravity="center">
        ...
        <Button
            ...
            android:id="@+id/btn2"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp">

LinearLayout com elementos centralizados e espaçados


Veja que a distância entre os botões são as mesma - 15dp - mas não é a mesma distância entre os lados do celular.

Outra forma:
Use o layout_weight para definir a quantos % o elemento irá ocupar do elemento pai.(Nesse caso 1/3 = 0.33333...)
Note que usei uma LinearLayout como intermediário para que o botão não ficasse esticado e sim o LinearLayout.

<LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_weight=".333333333">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="texto1"
                android:id="@+id/btn1"
                android:onClick="botao1"
                android:textSize="10dp"/>
        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_weight=".333333333">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="texto2"
                android:id="@+id/btn2"
                android:onClick="botao2"
                android:textSize="10dp"/>
        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_weight=".333333333">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="texto3"
                android:id="@+id/btn3"
                android:onClick="botao3"
                android:textSize="10dp"/>
        </LinearLayout>

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .