dynamic layout for 4 icons that must stay in a rational distance from each other in android

Question

i have this layout for bottom bar of my app:

but i want to make it like this:

actually i can but i want that , this layout works in every screen size. in fact, left icon sticks to left, right icon sticks to right, two center icon stay at center but all of them stay with a nice distance to each other. i don't use absolute values and i want this icons dynamically change his distance from others. my problem is how to layout them to achieve my goal.

this is my xml for this section:

 <LinearLayout
            android:id="@id/bar_l2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:gravity="center_horizontal" >

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/bottom_bar" >

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentRight="true"
                    android:gravity="center_horizontal"
                    android:orientation="horizontal" >

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

                        <ImageView
                            android:id="@+id/imageView1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/bar1" />

                    </LinearLayout>

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

                        <ImageView
                            android:id="@+id/imageView2"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/bar2" />

                    </LinearLayout>

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

                        <ImageView
                            android:id="@+id/imageView3"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/bar3" />

                    </LinearLayout>

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

                        <ImageView
                            android:id="@+id/imageView4"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_horizontal"
                            android:src="@drawable/bar4" />

                    </LinearLayout>

                </LinearLayout>

            </RelativeLayout>

        </LinearLayout>

Answer 1

This works fine

<LinearLayout
            android:id="@id/bar_l2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:gravity="center_horizontal" >

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/bottom_bar" >

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentRight="true"
                    android:gravity="center_horizontal"
                    android:orientation="horizontal" >

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_gravity="center"
                        android:layout_height="wrap_content" >

                        <ImageView
                            android:id="@+id/imageView1"
                           android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:src="@drawable/bar1" />

                    </LinearLayout>

                    <LinearLayout
                              android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_gravity="center"
                        android:layout_height="wrap_content" >

                        <ImageView
                            android:id="@+id/imageView2"
                           android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:src="@drawable/bar2" />

                    </LinearLayout>

                    <LinearLayout
                              android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_gravity="center"
                        android:layout_height="wrap_content" >

                        <ImageView
                            android:id="@+id/imageView3"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:src="@drawable/bar3" />

                    </LinearLayout>

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

                        <ImageView
                            android:id="@+id/imageView4"
                           android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_horizontal"
                            android:src="@drawable/bar4" />

                    </LinearLayout>

                </LinearLayout>

            </RelativeLayout>

        </LinearLayout>

Answer 2

This is what you need to do :

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal" xmlns:android="http://schemas.android.com/apk/res/android">

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bottom_bar"
    android:gravity="center_horizontal"
    android:orientation="horizontal"
    android:padding="30dp" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/bar1" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/bar2" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/bar3" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/bar4" />
</LinearLayout>

• What I have done here is set the background of parent LinearLayout as the background image and its orientation as horizontal.Most importantly its width as fill_parent . Hence it will cover the entire width of the parent .Padding will help you add desired spacing between image views.

• To make it fit all screen size properly instead of padding use android:weight attribute .

Hope it helps !