android relative layout design

Question

enter image description here

I want to design this layout in android, what i have tried is this.

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

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp" >

<TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:textColor="#0196d5"
    android:text="Recent"
/>

<TextView 
    android:id="@+id/txtLikeCount"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#0196d5"
    android:layout_alignParentRight="true"      
    android:text="10"
/>

<TextView 
    android:id="@+id/txtCommentCount"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#0196d5"
    android:layout_alignRight="@id/txtLikeCount"
    android:text="20"
/>



</RelativeLayout>
<TextView
android:id="@+id/txtStatus"
android:layout_width="match_parent"
android:layout_height="match_parent" 
android:gravity="center"
android:text="Some text to show."
android:background="#0196d5"
android:textColor="#fff"
/>




</LinearLayout>

But this is showing textviews with text 10 and 20 overlapping each other. And also i didnt added image of thumb and balloon pop. But i will add it, just tell me the idea what i am doing wrong.

Secondly i am using relative layout for Top row, can i use linear layout?

Do two changes align `txtCommentCount` to `android:layout_alignParentRight="true"` and `txtLikeCount` to `android:layout_toLeftOf="@+id/txtCommentCount"` — ρяσѕρєя K, Jul 21 '14 at 08:36

score 2 · Answer 1 · answered Jul 21 '14 at 08:32

it is the expected behaviour for android:layout_alignRight. The documentation says

Makes the right edge of this view match the right edge of the given anchor view ID.

you should use instead android:layout_toRightOf or android:layout_toLeftOf depending on your needs

score 1 · Answer 2 · answered Jul 21 '14 at 08:32

Add android:layout_alignParentRight in txtCommentCount and android:layout_toLeftOf in txtLikeCount because you want txtCommentCount in parent right and txtLikeCount in left of txtCommentCount.

So use your layout as

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

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp" >

<TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:textColor="#0196d5"
    android:text="Recent"
/>

<TextView 
    android:id="@+id/txtLikeCount"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@+id/txtCommentCount"
    android:layout_alignParentRight="true"      
    android:textColor="#0196d5"
    android:text="10"
/>

<TextView 
    android:id="@+id/txtCommentCount"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#0196d5"
    android:layout_alignParentRight="true"      
    android:text="20"
/>



</RelativeLayout>
<TextView
android:id="@+id/txtStatus"
android:layout_width="match_parent"
android:layout_height="match_parent" 
android:gravity="center"
android:text="Some text to show."
android:background="#0196d5"
android:textColor="#fff"
/>




</LinearLayout>

score -1 · Accepted Answer · answered Jul 21 '14 at 08:37

Instead of RelativeLayout you can also achieve that view by using LinearLayout and weight attributes. And for images you can use compound drawable in textview.

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

    <TextView
        android:id="@+id/label"
        android:text="Some text"
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_weight="0"
        android:text="20"
        android:drawableLeft="@drawable/like"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_weight="0"
        android:text="30"
        android:drawableLeft="@drawable/dislike"
        android:layout_height="wrap_content" />

</LinearLayout>

android relative layout design

3 Answers3