CODEWITHSUNDEEP
androidandroid-layout
waylonion
waylonion

Reputation: 6976

Create a ListView cell with a structured layout

How can I create a ListView item cell that is structured like so:

Title View----------------------------------------Date View

Subject View------------------------------Category View

With the Title View aligned to the left and the Date View aligned to the right.

The Subject View is also aligned to the left and the Category View aligned to the right.

The Subject View and Category View are below the top two views.

I would also like Title View to take 66% of the width and Date View to take 34% of the width.

Subject View should take 50% and Category View should take 50%.

This is what I have so far but it displays both Subject View and Category View strangely:

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

<TextView 
    android:id="@+id/homework_list_item_titleTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="4dp"
    android:paddingRight="4dp"
    />

<TextView 
    android:id="@+id/homework_list_item_dateTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/homework_list_item_titleTextView"
    android:paddingLeft="4dp"
    android:paddingRight="4dp"
    android:paddingTop="4dp"
    />

<TextView 
    android:id="@+id/homework_list_item_classTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/homework_list_item_dateTextView"
    android:paddingLeft="4dp"
    android:paddingRight="4dp"
    android:paddingTop="4dp"
    android:text="IB Math HL"
    />

<TextView 
    android:id="@+id/homework_list_item_typeTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/homework_list_item_titleTextView"
    android:paddingLeft="4dp"
    android:paddingRight="4dp"
    android:paddingTop="4dp"
    android:text="Homework"
    />

</RelativeLayout>

EDIT: Should I alternatively use LinearLayouts instead of RelativeLayout?

Upvotes: 1

Views: 106

Answers (1)

Onik
Onik

Reputation: 19959

Should I alternatively use LinearLayouts instead of RelativeLayout?

Taking into consideration that you'd like to divide the views proportionally, it's easier to use LinearLayouts and the weight attribute. Here is the layout:

<?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="wrap_content"
    android:orientation="vertical" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="100" >

    <TextView 
        android:id="@+id/homework_list_item_titleTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:paddingTop="4dp"
        android:layout_weight="66"
        android:text="Title View 66%" />

    <TextView 
        android:id="@+id/homework_list_item_dateTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:paddingTop="4dp"
        android:layout_weight="34"
        android:text="Date View 34%" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="100" >

    <TextView 
        android:id="@+id/homework_list_item_classTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:paddingTop="4dp"
        android:layout_weight="50"
        android:text="Subject View 50%" />

    <TextView 
        android:id="@+id/homework_list_item_typeTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:paddingTop="4dp"
        android:layout_weight="50"
        android:text="Category View 50%" />

</LinearLayout>

</LinearLayout>

And here is how it's look like:

screenshot

Upvotes: 1

Related Questions