Design of android xml layout

Question

I trying to design android listView like image below

But I get this

How to make the timeOut display beside timeIn and have a line between timeIn and timeOut ? Thanks.

xml

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

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="   Description   :  "
        android:layout_below="@+id/textView3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/Project"
        android:text="   Progress       :  "/>



    <TextView
        android:id="@+id/Project"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textStyle="bold"
        android:text="   Project  "
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:id="@+id/Description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView2"
        android:layout_alignBottom="@+id/textView2"
        android:layout_toRightOf="@+id/textView2"
        android:text="TextView" />

    <TextView
        android:id="@+id/Percentage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView3"
        android:layout_alignBottom="@+id/textView3"
        android:layout_toRightOf="@+id/textView3"
        android:text="TextView" />

    <TextView
        android:id="@+id/in"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TimeIn"
        android:paddingLeft="80dp"
        android:layout_toRightOf="@+id/Project"
        android:layout_alignParentRight="true"
        android:layout_marginRight="64dp" />

    <TextView
        android:id="@+id/out"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TimeOut"
        android:layout_toRightOf="@+id/in"
        android:layout_alignParentRight="true" />


</RelativeLayout>

try removing parent right attribute from both time in and out and also remove margin right from time in — Vivek Mishra, Jan 30 '16 at 17:17

score 0 · Answer 1 · answered Jan 30 '16 at 17:19

You are using android:layout_alignParentRight="true" for both your @+id/out and @+id/in TextViews.

Use it only for the one that would appear on the right, which in your case is timeOut. Timein TextView should use android:layout_toLeftOf of timeout TextView.

If you want to use a line between them, you can either use another TextView with "|" between them, or you can draw a View there.

score 0 · Accepted Answer · answered Jan 30 '16 at 17:30

Please try this xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="@dimen/activity_horizontal_margin">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/textView3"
        android:text="Description   :  "/>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/Project"
        android:text="Progress       :  "/>


    <TextView
        android:id="@+id/Project"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:text="Project  "
        android:textColor="@color/colorBlack"
        android:textStyle="bold"/>

    <TextView
        android:id="@+id/Description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView2"
        android:layout_alignBottom="@+id/textView2"
        android:layout_toRightOf="@+id/textView2"
        android:text="TextView"/>

    <TextView
        android:id="@+id/Percentage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView3"
        android:layout_alignBottom="@+id/textView3"
        android:layout_toRightOf="@+id/textView3"
        android:text="TextView"/>

    <TextView
        android:id="@+id/in"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/out"
        android:text="TimeIn | "/>

    <TextView
        android:id="@+id/out"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="TimeOut"/>

</RelativeLayout>

Hope it will help..!!

Thanks...do you have any idea on how to draw a small square in listView ? — , Jan 30 '16 at 17:32
you can make a shape drawable for that. just have a look at this http://stackoverflow.com/questions/6514114/square-shaped-layout-border-with-round-inside-edges — Mukesh Rana, Jan 30 '16 at 17:34

JCoder · Answer 3 · 2016-01-30T17:35:48.907

Try this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@android:color/darker_gray"
    android:padding="6dip">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/textView3"
        android:text="   Description   :  "
        android:textColor="@android:color/black" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/Project"
        android:text="   Progress       :  "
        android:textColor="@android:color/black" />


    <TextView
        android:id="@+id/Project"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:text="   Project  "
        android:textColor="@android:color/black"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/Description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView2"
        android:layout_alignBottom="@+id/textView2"
        android:layout_toRightOf="@+id/textView2"
        android:text="TextView"
        android:textColor="@android:color/black" />

    <TextView
        android:id="@+id/Percentage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView3"
        android:layout_alignBottom="@+id/textView3"
        android:layout_toRightOf="@+id/textView3"
        android:text="TextView"
        android:textColor="@android:color/black" />

    <LinearLayout
        android:id="@+id/container"
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/in"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/line"
            android:text="TimeIn"
            android:textColor="@android:color/black" />

        <LinearLayout
            android:id="@+id/line"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp"
            android:layout_toLeftOf="@+id/out"
            android:background="@android:color/black"
            android:orientation="horizontal">


        </LinearLayout>

        <TextView
            android:id="@+id/out"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:text="TimeOut"
            android:textColor="@android:color/black" />

    </LinearLayout>


</RelativeLayout>

Output of this code

score 0 · Answer 4 · answered Jan 30 '16 at 18:09

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

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/textView3"
    android:text="   Description   :  " />

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/textView2"
    android:layout_below="@+id/Project"
    android:text="   Progress       :  " />

<TextView
    android:id="@+id/Project"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:text="   Project  "
    android:textStyle="bold" />

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/in"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TimeIn" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" | " />

    <TextView
        android:id="@+id/out"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TimeOut" />

</LinearLayout>

Design of android xml layout

4 Answers4