Design UI in android by using relative and linear - text and clickable images

Question

I am tried to design UI as shown below image. Here I want to design two textViews and three imageViews as shown here.

I tried this but after passing data to textViews dynamically it showing wrongly (overriding one text on another text)

This is my code:

<?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="90dip"
    android:orientation="horizontal"
    android:padding="5dip" >

    <!-- ListRow Left side navigation_image image -->

    <LinearLayout
        android:id="@+id/navigation_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="5dip"
        android:padding="3dip" >

        <ImageView
            android:id="@+id/navigation_marker_image_view"
            android:layout_width="30dip"
            android:layout_height="30dip"
            android:contentDescription="@string/navigation_image"
            android:clickable="true"
            android:focusable="false"
            android:src="@drawable/navigation_marker" />
    </LinearLayout>

    <TextView
        android:id="@+id/address_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/share_image_view"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/date_time_text_view"
        android:layout_toRightOf="@+id/navigation_image"
        android:textSize="12sp" />

    <TextView
        android:id="@+id/date_time_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/address_text_view"
        android:layout_alignParentRight="true"
        android:textStyle="bold"
        android:typeface="sans" />

    <ImageView
        android:id="@+id/share_image_view"
        android:layout_width="25dip"
        android:layout_height="25dip"
        android:layout_alignTop="@+id/favourite_image_view"
        android:layout_marginLeft="50dp"
        android:layout_toRightOf="@+id/favourite_image_view"
        android:contentDescription="@string/share_image"
        android:clickable="true"
        android:focusable="false"
        android:src="@drawable/share" />

    <ImageView
        android:id="@+id/edit_image_view"
        android:layout_width="25dip"
        android:layout_height="25dip"
        android:layout_alignLeft="@+id/address_text_view"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="29dp"
        android:contentDescription="@string/edit_buttonon_image"
        android:clickable="true"
        android:focusable="false"
        android:src="@drawable/edit" />

    <ImageView
        android:id="@+id/favourite_image_view"
        android:layout_width="25dip"
        android:layout_height="25dip"
        android:layout_alignTop="@+id/edit_image_view"
        android:layout_marginLeft="48dp"
        android:layout_toRightOf="@+id/edit_image_view"
        android:contentDescription="@string/favarouite_image"
        android:clickable="true"
        android:focusable="false"
        android:src="@drawable/favourite" />

</RelativeLayout>

How to get corrrect design as shown above, which should work properly. Thanks in advance..

Answer 1

I believe the TextView issues are arising from that 90dip height, the RelativeLayout is trying to put everything in there but doesn't have enough space and is ending up overlaying views.

Changing it to wrap_content should fix it. Unless you absolutely know that a fixed is going to big enough, don't use one.

Of course the above will cause the ImageViews to be pushed to the bottom, so remove from the edit_image_view

android:layout_alignParentBottom="true"

and adding this to the edit_image_view

android:layout_below="@+id/address_text_view"

but then you'll need to remove this from address_text_view to avoid the circular dependency

android:layout_above="@+id/share_image_view"

edit for clarity

Your relative layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="90dip"   <-- change to wrap_content
    android:orientation="horizontal"
    android:padding="5dip" >

<!-- ListRow Left side navigation_image image -->

<LinearLayout
    android:id="@+id/navigation_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_marginRight="5dip"
    android:padding="3dip" >

    <ImageView
        android:id="@+id/navigation_marker_image_view"
        android:layout_width="30dip"
        android:layout_height="30dip"
        android:contentDescription="@string/navigation_image"
        android:clickable="true"
        android:focusable="false"
        android:src="@drawable/navigation_marker" />
</LinearLayout>

<TextView
    android:id="@+id/address_text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/share_image_view" <-- remove this
    android:layout_alignParentRight="true"
    android:layout_below="@+id/date_time_text_view"
    android:layout_toRightOf="@+id/navigation_image"
    android:textSize="12sp" />

<TextView
    android:id="@+id/date_time_text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/address_text_view"
    android:layout_alignParentRight="true"
    android:textStyle="bold"
    android:typeface="sans" />

<ImageView
    android:id="@+id/share_image_view"
    android:layout_width="25dip"
    android:layout_height="25dip"
    android:layout_alignTop="@+id/favourite_image_view"
    android:layout_marginLeft="50dp"
    android:layout_toRightOf="@+id/favourite_image_view"
    android:contentDescription="@string/share_image"
    android:clickable="true"
    android:focusable="false"
    android:src="@drawable/share" />

<ImageView
    android:id="@+id/edit_image_view"
    android:layout_width="25dip"
    android:layout_height="25dip"
    android:layout_alignLeft="@+id/address_text_view"
    android:layout_alignParentBottom="true" <-- remove this
    android:layout_below="@+id/address_text_view"  <-- add this
    android:layout_marginLeft="29dp"
    android:contentDescription="@string/edit_buttonon_image"
    android:clickable="true"
    android:focusable="false"
    android:src="@drawable/edit" />

<ImageView
    android:id="@+id/favourite_image_view"
    android:layout_width="25dip"
    android:layout_height="25dip"
    android:layout_alignTop="@+id/edit_image_view"
    android:layout_marginLeft="48dp"
    android:layout_toRightOf="@+id/edit_image_view"
    android:contentDescription="@string/favarouite_image"
    android:clickable="true"
    android:focusable="false"
    android:src="@drawable/favourite" />

</RelativeLayout>

Answer 2

this UI is correct but you have to fix the textviews size to avoid overlapping of text:

<TextView
    android:id="@+id/address_text_view"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_above="@+id/share_image_view"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/date_time_text_view"
    android:layout_toRightOf="@+id/navigation_image"
    android:textSize="12sp" />

<TextView
    android:id="@+id/date_time_text_view"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_alignLeft="@+id/address_text_view"
    android:layout_alignParentRight="true"
    android:textStyle="bold"
    android:typeface="sans" />