Android Relative Layout

Question

I am looking for what is the best layout to use to accomplish the following in android. This resembles a row that would be repeated.

The current row is composed of 5 view controls (Two images and three text labels).

I am pretty sure that I can handle it using a nested Table Layout. However, from what I read so far. It can be handled much better using a relative layout.

Any ideas? It would be great if you can include a sample layout in your post.

Thanks,

Answer 1

usually, i'll go with ListView since i can dynamically add up more item from another layout for each row. The benefit for using ListView compared to TableLayout is that you can still scroll down the screen if the contents of your rows exceeded what the screen can contain.

But you can also wrap the TableLayout with a ScrollView to achieve the same thing.

It's just about your preference on how you like to code it. On user side, you can achieve pretty much a similar result of UI with both layout.

Example of what i do:

1) In my main layout i had this ListView as the container.

<ListView android:id="@+id/summary" android:layout_width="match_parent" android:layout_height="match_parent" />

2) Then i created another layout called row.xml for every row that will be added repeatedly to the ListView.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="4dp">

<ImageView
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:id="@+id/icon"
    android:layout_gravity="center_vertical|left"
    android:src="@drawable/green_alert"
    android:layout_marginRight="12dp"
    android:layout_marginLeft="6dp"/>

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

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:id="@+id/tvPNO"
            android:layout_gravity="center_vertical"
            android:textStyle="bold"
            android:maxLines="1"
            android:ellipsize="end"
            android:text="PNO: 001.01"
            android:textColor="#C5EAF8" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:id="@+id/tvEntry"
            android:layout_gravity="center_vertical"
            android:gravity="right"
            android:textStyle="bold"
            android:maxLines="1"
            android:ellipsize="end"
            android:text="Entry: 1"
            android:textColor="#C5EAF8" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:id="@+id/tvDefoliator"
            android:layout_gravity="center_vertical"
            android:minLines="1"
            android:ellipsize="end"
            android:text="Defoliator: Mahasena Corbetti" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:id="@+id/tvLpF"
            android:layout_gravity="center_vertical"
            android:gravity="right"
            android:minLines="1"
            android:ellipsize="end"
            android:text="Larvae: 10" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="35"
            android:gravity="left">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/tvOryctes"
                android:layout_gravity="center_vertical"
                android:minLines="1"
                android:ellipsize="end"
                android:text="Oryctes: " />
            <CheckBox
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:focusable="false"
                android:clickable="false"
                android:id="@+id/cbOryctes" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="35"
            android:gravity="center">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/tvTermite"
                android:layout_gravity="center_vertical"
                android:minLines="1"
                android:ellipsize="end"
                android:text="Termite: "/>
            <CheckBox
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:focusable="false"
                android:clickable="false"
                android:id="@+id/cbTermite"/>
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="30"
            android:gravity="right">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/tvRat"
                android:layout_gravity="center_vertical"
                android:minLines="1"
                android:ellipsize="end"
                android:text="Rat: " />
            <CheckBox
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:focusable="false"
                android:clickable="false"
                android:id="@+id/cbRat" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

I use 1 image and some other views inside, it might be similar to what you wish to achieve.

Answer 2

Relative Layouts are in most cases what you should use. You can position views inside the Relative Layout with attributes like

android:alignParentTop="true" // This puts the view at the top of the Relative Layout

or

android:layout_below="@id/view" // This puts the view below another view

I can't test it right now, but here's how I would implement your example with a Relative Layout:

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

    <ImageView
            android:id="@+id/ivBigImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
        android:src="@drawable/bigImage" 
            android:layout_centerVertical="true" />

        <ImageView
            android:id="@+id/ivSmallImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/smallImage"
            android:layout_toRightOf="@id/ivBigImage"/>

        <TextView 
            android:id="@+id/tvTextOne"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Plus"
            android:layout_toRightOf="@id/ivSmallImage" />

        <TextView 
            android:id="@+id/tvTextTwo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Google Plus"
            android:layout_toRightOf="@id/ivBigImage" 
            android:layout_below="@id/ivSmallImage/>

        <TextView 
            android:id="@+id/tvTextThree"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="use to do some social networking"
            android:layout_toRightOf="@id/ivBigImage" 
            android:layout_below="@id/tvTextTwo/>


</RelativeLayout>

Of course you should never hardcode strings like I did in this example :D