Relative Layout in Android

Question

Below is the layout i am expecting Expected layout

The toolbar will always be placed at the bottom of the screen. The toolbar has 5 buttons, where 4 of them have the same height and width and one of the button would sit in the middle and slightly bigger than the other (please see the reference image below).

So far i've come up with this code:

<RelativeLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >    
        <RelativeLayout
            android:id="@+id/bottomMenuLeft"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal"
            android:background="@drawable/bg_gradation">
            <ImageButton
                android:id="@+id/bottomChat"
                android:layout_width="70dp"
                android:layout_height="60dp"
                android:scaleX="1.16"
                android:scaleY="1.16"
                android:padding="0dip"
                android:src="@drawable/chat_bottom_ic"/>

            <ImageButton
                android:id="@+id/bottomMarket"
                android:layout_width="80dp"
                android:layout_height="60dp"
                android:padding="0dip"
                android:scaleX="1.16"
                android:scaleY="1.16"
                android:layout_toRightOf="@id/bottomChat"
                android:src="@drawable/market_bottom_ic" />
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/bottomMenuCenter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal"
            android:background="@drawable/bg_gradation"
            android:layout_toRightOf="@id/bottomMenuLeft">
            <ImageButton
                android:id="@+id/bottomFinger"
                android:layout_width="95dp"
                android:layout_height="105dp"
                android:scaleX="1.50"
                android:scaleY="1.50"
                android:padding="0dip"
                android:src="@drawable/fingerprint_ic"/>
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/bottomMenuRight"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal"
            android:background="@drawable/bg_gradation"
            android:layout_toRightOf="@id/bottomMenuCenter">
            <ImageButton
                android:id="@+id/bottomCommunity"
                android:layout_width="70dp"
                android:layout_height="60dp"
                android:scaleX="1.16"
                android:scaleY="1.16"
                android:padding="0dip"
                android:src="@drawable/community_bottom_ic"/>

            <ImageButton
                android:id="@+id/bottomEvent"
                android:layout_width="70dp"
                android:layout_height="60dp"
                android:padding="0dip"
                android:scaleX="1.16"
                android:scaleY="1.16"
                android:layout_toRightOf="@id/bottomCommunity"
                android:src="@drawable/favorite_bottom_ic" />
        </RelativeLayout>
</RelativeLayout>

<!-- android:layout_gravity="start" tells DrawerLayout to treat
     this as a sliding drawer on the left side for left-to-right
     languages and on the right side for right-to-left languages.
     The drawer is given a fixed width in dp and extends the full height of
     the container. A solid background is used for contrast
     with the content view. -->
<ListView
    android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:background="#111"/>

However, this is the resulting layout:

Resulting layout from eclipse

When i run this layout on emulator (nexus 4) the buttons are aligning correctly. However, when i test it using different devices the layout would changes.

Could anyone help me with this?

EDIT #1

This is what i got so far... Everything is align at the top. I've tried to make modification to this (in an attempt to align it at the bottom):

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true">

    <LinearLayout
    android:id="@+id/bottomMenu"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@drawable/bg_gradation"
    android:weightSum="1" >
        <ImageButton
        android:id="@+id/bottomFinger"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".2"
        android:src="@drawable/chat_bottom_ic" />

        <ImageButton
            android:id="@+id/bottomChat"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/market_bottom_ic" />

        <ImageButton
            android:id="@+id/bottomMarket"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/fingerprint_ic" />

        <ImageButton
            android:id="@+id/bottomCommunity"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/community_bottom_ic" />

        <ImageButton
            android:id="@+id/bottomEvent"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/favorite_bottom_ic" />
    </LinearLayout>
</RelativeLayout>

Attempt 1

EDIT 2

So i ended up with this code in my XML:

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
    <LinearLayout
    android:id="@+id/bottomMenu"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center|bottom"
    android:layout_alignParentBottom="true"
    android:background="@drawable/bg_gradation"
    android:weightSum="1" >
        <ImageButton
        android:id="@+id/bottomFinger"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".2"
        android:src="@drawable/chat_bottom_ic" />

        <ImageButton
            android:id="@+id/bottomChat"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/market_bottom_ic" />

        <ImageButton
            android:id="@+id/bottomMarket"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/fingerprint_ic" />

        <ImageButton
            android:id="@+id/bottomCommunity"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/community_bottom_ic" />

        <ImageButton
            android:id="@+id/bottomEvent"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/favorite_bottom_ic" />
    </LinearLayout>
</RelativeLayout>

<!-- android:layout_gravity="start" tells DrawerLayout to treat
     this as a sliding drawer on the left side for left-to-right
     languages and on the right side for right-to-left languages.
     The drawer is given a fixed width in dp and extends the full height of
     the container. A solid background is used for contrast
     with the content view. -->
<ListView
    android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:background="#111"/>

Which is the closest thing i could get to the reference. I had to wrap my entire LinearLayout with RelativeLayout to ensure that my toolbar stays at the bottom. However this still does not answer the question exactly, since i am trying to achieve the layout as seen on the reference.

Edit 2

Have you checked your image size ? Is it same as other images size ? @username55 — GrIsHu, Dec 31 '13 at 04:59
you need to work it out on different screen size, too. http://developer.android.com/guide/practices/screens_support.html — Pete Houston, Dec 31 '13 at 05:00
@GrlsHu that is the challenge i am facing. The button in the middle is not having the same size as the rest of them. I'll try your suggestion in a sec. Thanks for the help. — Jeremy, Dec 31 '13 at 05:17
@xjaphx Thank you for the suggestion, but before that i should get this layout fix first. — Jeremy, Dec 31 '13 at 05:17
Instead of relative layout, make use of Linear Layout and its weight attribute, so it can be managed in any devices as such. — Joyal, Dec 31 '13 at 05:33

score 1 · Answer 1 · edited May 23 '17 at 12:19

1

This can be handled by two scenarios

A) Creating a horizontal linear layout and and no of image buttons to it don't add 'width' attribute to the 'image buttons' add 'android:layout_weight="0.2"' attribute where like suppose 0.2 specify's 20 percent of the layout if we consider the complete linear layout 100%. i) Follow Url :Linear Layout and weight in Android

B) Create a separate image in according to the screen size of the and store in separated Drawable folder in res folder from where it gets the images in according to the screen size of the mobile where it is been installed.

Hope this helps you.

edited May 23 '17 at 12:19

Community

1
1

answered Dec 31 '13 at 06:09

Balu

1,069
2
10
24

Thanks for the suggestion, i will try this out and comeback again later. – Jeremy Dec 31 '13 at 07:57
soft of.. please refer to my Edit 1. – Jeremy Jan 02 '14 at 06:17

score 0 · Answer 2 · answered Dec 31 '13 at 05:05

Try this:

<LinearLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" android:weightSum="6">    

            <ImageButton
                android:id="@+id/bottomChat"
                android:layout_width="0dp"
                android:layout_height="60dp"
                android:scaleX="1.16"
                android:scaleY="1.16"
                android:padding="0dp"
                android:layout_weight="1"
                android:src="@drawable/chat_bottom_ic"/>

            <ImageButton
                android:id="@+id/bottomMarket"
                android:layout_width="0dp"
                android:layout_height="60dp"
                android:padding="0dip"
                android:scaleX="1.16"
                android:scaleY="1.16"
                android:layout_weight="1"
                android:src="@drawable/market_bottom_ic" />


            <ImageButton
                android:id="@+id/bottomFinger"
                android:layout_width="0dp"
                android:layout_height="105dp"
                android:scaleX="1.50"
                android:scaleY="1.50"
                android:padding="0dip"
            android:layout_weight="2"
                android:src="@drawable/fingerprint_ic"/>


            <ImageButton
                android:id="@+id/bottomCommunity"
                android:layout_width="0dp"
                android:layout_height="60dp"
                android:scaleX="1.16"
                android:scaleY="1.16"
                android:padding="0dip"
                android:layout_weight="1"
                android:src="@drawable/community_bottom_ic"/>

            <ImageButton
                android:id="@+id/bottomEvent"
                android:layout_width="0dp"
                android:layout_height="60dp"
                android:padding="0dip"
                android:scaleX="1.16"
                android:layout_weight="1"
                android:scaleY="1.16"
                android:src="@drawable/favorite_bottom_ic" />

</LinearLayout>

Hi thanks for the suggestion, i quickly copy-pasted your code sadly this makes my layout completely gone. But i think i get your idea of using linear layout. I'll try it my self as well to get it right. Thanks a lot. — Jeremy, Dec 31 '13 at 05:07

GrIsHu · Answer 3 · 2013-12-31T05:19:09.793

Try out with my code:

<LinearLayout
    android:id="@+id/bottomMenuRight"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal"
    android:weightSum="1" >

    <ImageButton
        android:id="@+id/bottomFinger"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight=".2"
        android:src="@drawable/ic_circle" />

    <ImageButton
        android:id="@+id/bottomChat"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight=".2"
        android:src="@drawable/ic_circle" />

    <ImageButton
        android:id="@+id/bottomMarket"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight=".2"
        android:src="@drawable/ic_circle" />

    <ImageButton
        android:id="@+id/bottomCommunity"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight=".2"
        android:src="@drawable/ic_circle" />

    <ImageButton
        android:id="@+id/bottomEvent"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight=".2"
        android:src="@drawable/ic_circle" />
</LinearLayout>

enter image description here

Hi i tried your layout, it display all the icons in the linear manner however the icon stretches from top to bottom. I already make sure that it has alignParentBottom set to true. Anyway, i'll try to make some adjusment. — Jeremy, Jan 02 '14 at 04:36

score 0 · Answer 4 · answered Dec 31 '13 at 06:13

First place the middle button, then give equal weight to left and right side of buttons.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/bottomMenuRight"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >

<ImageButton
    android:id="@+id/bottomFinger"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:src="@drawable/icon" />

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_toLeftOf="@+id/bottomFinger" >

    <ImageButton
        android:id="@+id/bottomChat"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:src="@drawable/icon" />

    <ImageButton
        android:id="@+id/bottomMarket"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:src="@drawable/icon" />
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_toRightOf="@+id/bottomFinger" >

    <ImageButton
        android:id="@+id/bottomCommunity"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:src="@drawable/icon" />

    <ImageButton
        android:id="@+id/bottomEvent"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:src="@drawable/icon" />
</LinearLayout>

</RelativeLayout>

AndRSoid · Answer 5 · 2013-12-31T05:09:15.017

-1

Using RelativeLayout extensively gives bad performance. For buttons use LinearLayout with "horizontal" orientation and "weight" attribute . Assign weight properly to buttons so that you can get the width of buttons as needed. To use "weight" attribute properly, view "width" should be 0.

Edit: Don't use hard coded width android:layout_width="150dp" . Instead make it match_parent.

edited Dec 31 '13 at 05:09

answered Dec 31 '13 at 04:59

AndRSoid

1,777
2
13
25

it depends, and his layout has no problem with `RelativeLayout`. – Pete Houston Dec 31 '13 at 05:01
Yes it is problem of RelativeLayout in both ways performance as well as functionality. LinearLayout is best suitable for this case as answered. – AndRSoid Dec 31 '13 at 05:19

Relative Layout in Android

5 Answers5