Problems buidling grid like ui with RelativeLayout

Question

I want a responsive home screen like this:

enter image description here

The pictures have been drawn using MS Paint

Each menu item (image + label) has been implemented as a compound view (LinearLayout containing ImageView and TextView)...the layout file of the compound view is as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_gravity="center"
android:gravity="center" >

<ImageView
    android:id="@+id/menu_item_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center" >
</ImageView>

<TextView
    android:id="@+id/menu_item_label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:textSize="15sp" >
</TextView>

</LinearLayout>

I cannot achieve a design like the above pictures. I have used RelativeLayout

Here is the layout code.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativeLayout1"
    android:layout_height="match_parent"
    android:layout_width="match_parent" >

    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/offer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/privilege" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_toRightOf="@+id/offer" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>


    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/notice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_toRightOf="@+id/privilege" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>



    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/contact"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/offer" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/services"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_toRightOf="@+id/contact" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>


    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/complaint"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_toRightOf="@+id/services" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>


    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/etoken"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/contact" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/locator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_toRightOf="@+id/etoken" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>


    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/product"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_toRightOf="@+id/locator" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

</RelativeLayout>

Here is the result

enter image description here

The leftmost items are being displayed correctly, but the rest of the items are not displayed correctly. The middle column and right column items all use the layout_toRightOf property, so I have know idea why they are not displaying correctly.

check this link out i used it before maybe it will help you http://www.androidhive.info/2011/12/android-dashboard-design-tutorial/ — Giant, Nov 12 '13 at 04:15
@Raghunandan I tried GridView.....I had a GridView set to fill the whole screen, but I cannot make the columns auto-resize to fit screen... here is the result https://plus.google.com/photos/102225478892794066094/albums/5945222547987659473 and the code is here http://pastebin.com/Zt0TjRjE ..... **I colored the GridView red to verify that it is indeed filling up the screen** — Shuaib, Nov 12 '13 at 04:22
@Shuaib set the vertical and horizontal spacing between items so that it fills the whole screen. use gridview its exactly what you need — Raghunandan, Nov 12 '13 at 04:25
you can use weight for the items within linear layout as mentioned by zohreh — Tamilselvan Kalimuthu, Nov 12 '13 at 05:00

score 2 · Accepted Answer · edited Nov 12 '13 at 06:55

you can implement it by Linearlayout or grideview too.if you use Linearlayout your code is same this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:weightSum="3" 
android:background="#FF0000" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:weightSum="3"
    android:background="#00FF00" >

    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/offer"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/privilege"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>


    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/notice"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:weightSum="3"
    android:orientation="horizontal" 
    android:background="#0000FF" >

    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/contact"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>


    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/services"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/complaint"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

</LinearLayout>

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:weightSum="3"
        android:orientation="horizontal"
        android:background="#00FF00" >

    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/etoken"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>


    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/locator"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/product"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

</LinearLayout>

</LinearLayout>

First of all, thanks a lot for taking the pain to write that whole lot of working code. But I am still not getting the desired look. I want the grid to be centered...but since each nested LinearLayout takes exactly 1/3 screen space, it cannot be centered.........**if I add padding-top and padding-bottom to the parent LinearLayout then I get the desired layout**....but I want to know if there is a better way? — Shuaib, Nov 12 '13 at 06:23
if you delete android:weightSum="3" from parent and replace all of android:layout_height="0dp" with android:layout_height="wrap_content" I think you earn thing that you want.but I think best way is using from a custom view group same that @ Hak Hak says in above — zohreh, Nov 12 '13 at 06:52

score 0 · Answer 2 · answered Nov 12 '13 at 04:52

0

The another solution to your problem is to use TableLayout and TableRows WithIn this TableLayout. You should use two separates layouts one for your Vertical Screen View and one for Horizental Screen View.

answered Nov 12 '13 at 04:52

waqas

342
1
3
17

I tried TableLayout....note that each menu item is different in size....so in TableLayout the middle column, for instance, does not appear aligned as like in the first picture – Shuaib Nov 12 '13 at 05:04

Problems buidling grid like ui with RelativeLayout

2 Answers2