CODEWITHSUNDEEP
androidandroid-layoutandroid-relativelayout
hashiCode
hashiCode

Reputation: 509

android: using relative layout to position view elements inside a list item

I'm trying to design a list item similar to the image below (source), using a RelativeLayout.

enter image description here

In my case, the itens will be:

  1. ImageView (interval_icon)
  2. Simple TextView (interval_start)
  3. Another TextView (interval_end)

The code is something like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingTop="@dimen/activity_horizontal_margin"
android:paddingBottom="@dimen/activity_horizontal_margin"
android:gravity="center"
android:minHeight="?android:attr/listPreferredItemHeight" >

    <ImageView
       android:layout_width="wrap_content"
       android:layout_height="fill_parent"
       android:src="@drawable/image"
       android:layout_alignParentLeft="true"
       android:id="@+id/interval_icon"
    />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="Start"
        android:id="@+id/interval_start"
        android:layout_toRightOf="@+id/interval_icon"
        android:layout_alignParentRight="true"
       />


    <TextView
        android:id="@+id/interval_end"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="End"
        android:layout_below="@+id/interval_start"
        android:layout_toRightOf="@+id/interval_icon"/>

</RelativeLayout>

But the result is like that:

enter image description here

In this case the two editText are in the middle of the image. What modification i need to do to position my itens like in the sample image?

Upvotes: 1

Views: 2813

Answers (2)

user1460340
user1460340

Reputation:

It can be achieved by putting TextView's in a layout and use the material design list components sheet which the link you have provided.

enter image description here

Here is what I did to make it Material

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/listPreferredItemHeight"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/interval_icon"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="20dp"
        android:src="@drawable/ic_action_heart_48d" />

    <RelativeLayout
        android:id="@+id/rel1"
        android:layout_width="wrap_content"
        android:layout_height="62dp"
        android:paddingLeft="72dp"
        android:paddingRight="16dp">

        <TextView
            android:id="@+id/interval_start"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:paddingBottom="2dp"
            android:text="Start"
            android:singleLine="true"
            android:textColor="#000000"
            android:textSize="16sp" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="62dp"
        android:layout_below="@+id/rel1"
        android:layout_centerVertical="true"
        android:paddingLeft="72dp"
        android:paddingRight="16dp">


        <TextView
            android:id="@+id/interval_end"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:text="End"
            android:singleLine="true"
            android:textColor="#000000"
            android:textSize="16sp" />

    </RelativeLayout>


</RelativeLayout>

The XML android:layout_centerVertical="true" makes layout to move to center of the parent layout vertically. Further adding some paddings to meet Material Guidelines gives it required look and feel. And also you can make changes to size of ImageView or TextView as you want despite guidelines followed in code.

Cheers, Gaurav

Upvotes: 3

banking
banking

Reputation: 500

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="?android:attr/listPreferredItemHeight"
android:paddingBottom="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_horizontal_margin">

<ImageView
    android:id="@+id/interval_icon"
    android:layout_width="30dp"
    android:layout_height="50dp"
    android:layout_alignParentLeft="true"
    android:src="@drawable/image" />

<TextView
    android:id="@+id/interval_start"
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@id/interval_icon"
    android:layout_toRightOf="@+id/interval_icon"
    android:text="Start" />

<TextView
    android:id="@+id/interval_end"
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:layout_below="@+id/interval_start"
    android:layout_marginTop="10dp"
    android:layout_toRightOf="@+id/interval_icon"
    android:text="End" />

Upvotes: 3

Related Questions