Question

I need some help styling a ListView for an Android application. I am trying to look up how to do this type of styling, but I think I am searching on the wrong items.

My data consists of objects being returned by a ContentProvider and a CursorLoader is used to the access the data. The data will have section headers by date. Each item in a section has a category and I would like to color the left most border (margin or padding) with the color code for the category. See the layout xml below. The detail row consists of 3 lines of data with a button at the bottom left position.

Please see this Google Drawing for how the list should look.
Drawing of how I want to style the ListView

Is this formatting possible?

Thank you for any help.

<?xml version="1.0" encoding="utf-8"?>
<!-- 
 *  This file is part of MythTV for Android
 * 
 *  MythTV for Android is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  MythTV for Android is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with MythTV for Android.  If not, see <http://www.gnu.org/licenses/>.
 *   
 * This software can be found at <https://github.com/MythTV-Android/mythtv-for-android/>
 *
-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<LinearLayout
    android:id="@+id/upcoming_header_row"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="8dp"
    android:paddingRight="8dp" >

    <TextView
        android:id="@+id/upcoming_header_label"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="@color/body_text_1" />

</LinearLayout>

<LinearLayout
    android:id="@+id/upcoming_detail_row"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="8dp"
    android:paddingRight="8dp" >

    <TextView
        android:id="@+id/upcoming_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/body_text_1"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/upcoming_sub_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/body_text_1" />

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingLeft="8dp"
            android:paddingRight="8dp" >

            <TextView
                android:id="@+id/upcoming_channel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:textColor="@color/body_text_1" />

            <TextView
                android:id="@+id/upcoming_start_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:textColor="@color/body_text_1" />

            <Button
                android:id="@+id/upcoming_dont_record"
                android:layout_width="40dp"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:text="@string/btn_upcoming_dont_record"
                android:textColor="@color/body_text_1"
                android:textSize="@dimen/text_size_small" />

    </RelativeLayout>

</LinearLayout>

</LinearLayout>

Answer 1

You just need another LinearLayout in Horizontal orientation and then a View to hold the color. Nest your existing upcoming_detail_row inside the new LinearLayout as the second element and the new View (to hold the color) as the first element.

Then you can set the background color of that view programatically.

Here is an example adapted from your layout.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:id="@+id/upcoming_header_row"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="8dp"
    android:paddingRight="8dp" >

    <TextView
        android:id="@+id/upcoming_header_label"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#000000" />
</LinearLayout>

<LinearLayout
    android:id="@+id/newLayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <View
        android:id="@+id/view1"
        android:layout_width="10dp"
        android:layout_height="fill_parent"
        android:background="#ff0000" />

    <LinearLayout
        android:id="@+id/upcoming_detail_row"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="8dp"
        android:paddingRight="8dp" >

        <TextView
            android:id="@+id/upcoming_title"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="title"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#000000" />

        <TextView
            android:id="@+id/upcoming_sub_title"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="subtitle"
            android:textColor="#000000" />

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingLeft="8dp"
            android:paddingRight="8dp" >

            <TextView
                android:id="@+id/upcoming_channel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:text="channel"
                android:textColor="#000000" />

            <TextView
                android:id="@+id/upcoming_start_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="startTime"
                android:textColor="#000000" />

            <Button
                android:id="@+id/upcoming_dont_record"
                android:layout_width="40dp"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:text="button"
                android:textColor="#000000"
                android:textSize="14sp" />
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>