CODEWITHSUNDEEP
androidandroid-layout
Anmol Wadhwa
Anmol Wadhwa

Reputation: 329

How to create three evenly spaced buttons

I am new to android development and I was just wondering how can I create three evenly spaced buttons at the bottom of the screen. I was also wondering what style I could use to make these buttons appear neat and tidy.

The code I have written so far.

 <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
        <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_height="0dip"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView 
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="@string/Fragment1"
                android:id="@+id/worldTextView" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
        <Button
            android:id="@+id/Button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/Button1"
           />

            <Button
                android:id="@+id/Button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/Button2"

                 />

            <Button
             android:id="@+id/Button3"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/Button3"
            />
   </LinearLayout>

Upvotes: 0

Views: 1818

Answers (7)

Raghunandan
Raghunandan

Reputation: 133560

Use android:layout_width="0dp" and android:layout_weight="1" and make the width of linear layout android:layout_width="match_parent"

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent" // wrap_content to match_parent
        android:layout_height="fill_parent"
        android:orientation="vertical" >

    <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_height="0dip"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView 
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Fragment1"
                android:id="@+id/worldTextView" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent" // wrap_content t0 match_parent
            android:layout_height="wrap_content"
            android:orientation="horizontal">
        <Button
            android:id="@+id/Button1"
            android:layout_width="0dp" 
            android:layout_weight="1"  // specify the layout weight
            android:layout_height="wrap_content"
            android:text="@string/Button1"
           />

            <Button
                android:id="@+id/Button2"
                 android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="@string/Button2"

                 />

            <Button
             android:id="@+id/Button3"
              android:layout_weight="1"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:text="@string/Button3"
            />
   </LinearLayout>
   </LinearLayout>

snap shot

enter image description here

Edit:

You can also use a relative layout.

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Fragment1" />

    <LinearLayout
                android:layout_width="match_parent" 
                android:layout_height="wrap_content"
                 android:layout_alignParentBottom="true"
                android:orientation="horizontal">
            <Button
                android:id="@+id/Button1"
                android:layout_width="0dp" 
                android:layout_weight="1"  
                android:layout_height="wrap_content"
                android:text="Button1"
               />

                <Button
                    android:id="@+id/Button2"
                     android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:text="Button2"

                     />

                <Button
                 android:id="@+id/Button3"
                  android:layout_weight="1"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:text="Button3"
                />
       </LinearLayout>


       </RelativeLayout>

Upvotes: 0

matthewrdev
matthewrdev

Reputation: 12170

To evenly space your buttons, you can set each buttons android:layout_width to 0 and its android:layout_weight to 1 to make the width of each button the same.

<LinearLayout
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal">
    <Button
        android:id="@+id/Button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/Button1"
        android:layout_weight="1"/>
    <Button
        android:id="@+id/Button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/Button2" 
        android:layout_weight="1"/>
    <Button
        android:id="@+id/Button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/Button3"
        android:layout_weight="1"/>
</LinearLayout>

Your linear layout will also need a layout_width that is non-zero and does not depend on its children (eg wrap_content). I've used fill_parent in this example but you could also use match_parent or a hard coded value such as 55dp.

This tutorial is a decent in-depth guide on using android:layout_weight.

Upvotes: 1

Jitesh Dalsaniya
Jitesh Dalsaniya

Reputation: 1917

Give LinearLayout a weightSum attribute and its child assign layout_weight attribute like in below code.

Then give height and width of parent and child match_parent this will allow your layout to adjust there height and width according to screen resolution and parent layout height and width.

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:weightSum = "3">
    <Button
        android:id="@+id/Button1"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/Button1"
       />

        <Button
            android:layout_weight="1"
            android:id="@+id/Button2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/Button2"

             />

        <Button
         android:layout_weight="1"
         android:id="@+id/Button3"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:text="@string/Button3"
        />

Upvotes: 0

Biraj Zalavadia
Biraj Zalavadia

Reputation: 28484

Try this way

<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
        <Button
            android:id="@+id/Button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/Button1"
            android:layout_weight="1"
           />

            <Button
                android:id="@+id/Button2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="@string/Button2"
                android:layout_weight="1"
                 />

            <Button
             android:id="@+id/Button3"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:text="@string/Button3"
             android:layout_weight="1"
            />
   </LinearLayout>

Upvotes: 0

Alfa
Alfa

Reputation: 619

Use Relative Layout.. Too many Linear Layouts will cause over burden while rendering the xml layout file.

Upvotes: 1

Ketan Ahir
Ketan Ahir

Reputation: 6728

you should use android:layout_weight for all three buttons. 

 <Button
   android:id="@+id/Button1"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="@string/Button1"
   android:layout_weight="1"/>

Upvotes: 0

khubaib
khubaib

Reputation: 535

Keep your three button in a different layout(Linear layout with orientation horizontal) at the bottom and give weight to each button and layout_width as zero.

Upvotes: 1

Related Questions