Align and wrap imagebuttons in linearlayout

Question

I have a linearlayout that has imagebuttons aligned horizontally, at the bottom of the parent layout. This is exactly, what I want it to look like:

This is how I am doing it:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:background="@color/dim_foreground_disabled_material_dark"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/new_1"
            android:background="@drawable/_dashboard_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <ImageButton
            android:id="@+id/new_2"
            android:background="@drawable/_dashboard_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <ImageButton
            android:id="@+id/new_3"
            android:background="@drawable/_dashboard_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </LinearLayout>

I have also tried to give weightsum to the linearlayout , and assign weights to imagebuttons . But it stretches the aspect ratio of the drawables.

How should I use my layout to arrange them in the bottom of the view, evenly spaced, centrally placed and without any stretched out aspect ratios of drawables..

Answer 1

You can try in two ways as bellow

1) layout_weight & weightSum

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:background="@color/dim_foreground_disabled_material_dark"
        android:orientation="horizontal" 
        android:weightSum="1">

        <Button
            android:id="@+id/new_1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.33"
            android:text="A" />

        <Button
            android:id="@+id/new_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.33"
            android:text="B" />

        <Button
            android:id="@+id/new_3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.33"
            android:text="C" />
    </LinearLayout>

2) Either change to 'RelativeLayout'

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:background="@color/dim_foreground_disabled_material_dark"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/new_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  
             android:layout_alignParentLeft="true"                      
            android:text="A" />

        <Button
            android:id="@+id/new_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="B" />

        <Button
            android:id="@+id/new_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="C" />
    </RelativeLayout>

Answer 2

You have to used RelativeLayout like this.....

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@color/dim_foreground_disabled_material_dark">

    <ImageButton
        android:id="@+id/new_1"
        android:background="@drawable/_dashboard_1"
        android:layout_alignParentLeft="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ImageButton
        android:id="@+id/new_2"
        android:background="@drawable/_dashboard_2"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ImageButton
        android:id="@+id/new_3"
        android:background="@drawable/_dashboard_3"
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</RelativeLayout>

Answer 3

If you want to achieve this one using LinearLayout try this one..

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


    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton10"
        android:src="@mipmap/ic_launcher"
        android:layout_marginLeft="20dip"
        android:background="@android:color/transparent"/>
   <View android:layout_width="0dip"
         android:layout_weight="5"
         android:layout_height="1dip"/>
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton9"
        android:src="@mipmap/ic_launcher"
        android:background="@android:color/transparent"/>
    <View android:layout_width="0dip"
        android:layout_weight="5"
        android:layout_height="1dip"/>
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton8"
        android:src="@mipmap/ic_launcher"
        android:layout_marginRight="20dip"
        android:background="@android:color/transparent"/>
</LinearLayout>

Or if you are ok with relativelayout try this one...

    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:id="@+id/imageButton12"
        android:src="@mipmap/ic_launcher"
        android:background="@android:color/transparent"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton11"
        android:layout_centerInParent="true"
        android:src="@mipmap/ic_launcher"
        android:background="@android:color/transparent"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton13"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@mipmap/ic_launcher"
        android:background="@android:color/transparent"/>
</RelativeLayout>

Answer 4

Try -

<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="end|bottom"
                android:weightSum="3"
                android:background="@color/dim_foreground_disabled_material_dark"
                android:orientation="horizontal">


                <ImageButton
                    android:id="@+id/new_1"
                    android:src="@drawable/_dashboard_1"
                    android:adjustViewBounds="true"
                    android:scaleType="centerInside"
                    android:background="@null"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true" />

                <ImageButton
                    android:id="@+id/new_2"
                    android:src="@drawable/_dashboard_2"
                    android:adjustViewBounds="true"
                    android:scaleType="centerInside"
                    android:background="@null"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true" />

                <ImageButton
                    android:id="@+id/new_3"
                    android:src="@drawable/_dashboard_3"
                    android:adjustViewBounds="true"
                    android:scaleType="centerInside"
                    android:background="@null"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"  />

            </LinearLayout>