CODEWITHSUNDEEP
androidandroid-layoutandroid-imagebutton
Kelvin C Ricafort
Kelvin C Ricafort

Reputation: 331

Button alignment in android

I have an app in android, where 6 ImageButtons must be auto aligned (equally): 3 at the top and 3 at the bottom.

I have tried this:

<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:background="@color/Black"
    android:contentDescription="@string/getting_started"
    android:scaleX="0.7"
    android:scaleY="0.7"
    android:onClick="imageButton2"
    android:src="@drawable/gettingstarted" />

<ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_toLeftOf="@+id/imageButton2"
    android:background="@color/Black"
    android:contentDescription="@string/introduction"
    android:scaleX="0.7"
    android:scaleY="0.7"
    android:onClick="imageButton1"
    android:src="@drawable/introduction" />

<ImageButton
    android:id="@+id/imageButton3"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@+id/imageButton2"
    android:background="@color/Black"
    android:contentDescription="@string/get_going"
    android:scaleX="0.7"
    android:scaleY="0.7"
    android:onClick="imageButton3"
    android:src="@drawable/getgoing" />

I would like to have this in the screenshot below

enter image description here

Upvotes: 1

Views: 218

Answers (5)

Kanwaljit Singh
Kanwaljit Singh

Reputation: 4387

Try this. Make changes in image name and description according to your requirement. 

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal" >

   <ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="@color/Black"
    android:contentDescription="@string/getting_started"
    android:scaleX="0.7"
    android:scaleY="0.7"
    android:onClick="imageButton1"
    android:src="@drawable/gettingstarted" />

<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="@color/Black"
    android:contentDescription="@string/introduction"
    android:scaleX="0.7"
    android:scaleY="0.7"
    android:onClick="imageButton2"
    android:src="@drawable/introduction" />

<ImageButton
    android:id="@+id/imageButton3"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="@color/Black"
    android:contentDescription="@string/get_going"
    android:scaleX="0.7"
    android:scaleY="0.7"
    android:onClick="imageButton3"
    android:src="@drawable/getgoing" />

</LinearLayout>

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal" >

   <ImageButton
    android:id="@+id/imageButton4"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="@color/Black"
    android:contentDescription="@string/getting_started"
    android:scaleX="0.7"
    android:scaleY="0.7"
    android:onClick="imageButton4"
    android:src="@drawable/gettingstarted" />

<ImageButton
    android:id="@+id/imageButton5"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="@color/Black"
    android:contentDescription="@string/introduction"
    android:scaleX="0.7"
    android:scaleY="0.7"
    android:onClick="imageButton5"
    android:src="@drawable/introduction" />

<ImageButton
    android:id="@+id/imageButton6"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="@color/Black"
    android:contentDescription="@string/get_going"
    android:scaleX="0.7"
    android:scaleY="0.7"
    android:onClick="imageButton6"
    android:src="@drawable/getgoing" />

</LinearLayout>

Upvotes: 1

Maxwell
Maxwell

Reputation: 562

try this, i used button instead of image button, you can change it to the image button

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
      >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:orientation="horizontal"
        android:layout_weight="1">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" 
        android:layout_gravity="center"
        android:layout_weight="1"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
         android:layout_gravity="center"
         android:layout_weight="1" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
         android:layout_gravity="center" 
         android:layout_weight="1"/>

   </LinearLayout>

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

    android:layout_weight="1">
        <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" 
        android:layout_gravity="center"
        android:layout_weight="1"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
         android:layout_gravity="center"
         android:layout_weight="1" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
         android:layout_gravity="center" 
         android:layout_weight="1"/>
     </LinearLayout>

  </LinearLayout>

Upvotes: 0

Hariharan
Hariharan

Reputation: 24853

Try this..

<LinearLayout 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"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#000000"
            android:contentDescription="@string/getting_started"
            android:scaleX="0.7"
            android:scaleY="0.7"
            android:onClick="imageButton2"
            android:src="@drawable/gettingstarted" />

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#000000"
            android:contentDescription="@string/introduction"
            android:scaleX="0.7"
            android:scaleY="0.7"
            android:onClick="imageButton1"
            android:src="@drawable/introduction"  />

        <ImageButton
            android:id="@+id/imageButton3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#000000"
            android:contentDescription="@string/get_going"
            android:scaleX="0.7"
            android:scaleY="0.7"
            android:onClick="imageButton3"
            android:src="@drawable/getgoing" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#000000"
            android:contentDescription="@string/getting_started"
            android:scaleX="0.7"
            android:scaleY="0.7"
            android:onClick="imageButton2"
            android:src="@drawable/gettingstarted"  />

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#000000"
            android:contentDescription="@string/introduction"
            android:scaleX="0.7"
            android:scaleY="0.7"
            android:onClick="imageButton1"
            android:src="@drawable/introduction" />

        <ImageButton
            android:id="@+id/imageButton3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#000000"
            android:contentDescription="@string/get_going"
            android:scaleX="0.7"
            android:scaleY="0.7"
            android:onClick="imageButton3"
            android:src="@drawable/getgoing" />
    </LinearLayout>

</LinearLayout>

Upvotes: 0

bliveinhack
bliveinhack

Reputation: 50

u can use something like 

  LinearLayout [Vertical]
         |
         |
          LinearLayout [Horizontal]
                  |
                  |
                   Your 3 Buttons with weight="1"

          LinearLayout [Horizontal]
                  |
                  |
                   Your 3 Buttons with weight="1"

Upvotes: 0

akohout
akohout

Reputation: 1811

You can use 2 LinearLayouts with orientation horizontal. These two LinearLayouts are placed within another LinearLayout with orientation vertical.

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

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

        <ImageButton
android:id="@+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="@color/Black"
android:contentDescription="@string/getting_started"
android:scaleX="0.7"
android:scaleY="0.7"
android:onClick="imageButton2"
android:src="@drawable/gettingstarted" />

 <ImageButton
android:id="@+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toLeftOf="@+id/imageButton2"
android:background="@color/Black"
android:contentDescription="@string/introduction"
android:scaleX="0.7"
android:scaleY="0.7"
android:onClick="imageButton1"
android:src="@drawable/introduction" />

<ImageButton
android:id="@+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="@+id/imageButton2"
android:background="@color/Black"
android:contentDescription="@string/get_going"
android:scaleX="0.7"
android:scaleY="0.7"
android:onClick="imageButton3"
android:src="@drawable/getgoing" />

   </LinearLayout>

You can give the ImageButtons a weight of 1 and a width of 0dp, so that they automatically take 1/3 of the width.

Upvotes: 0

Related Questions