CODEWITHSUNDEEP
javaandroidlistviewcolorsborder
marcelofb
marcelofb

Reputation: 69

How to show a left colored border on each ListView row?

How to show only a left colored border on each ListView row?

I have a 5 degree termometer for user reputation and I want to show the respective colors at the left border of each listview row.

Like this link

Thanks guys!!

Upvotes: 1

Views: 291

Answers (3)

mikehc
mikehc

Reputation: 1028

The easiest way would be to create a dummy View in your item layout. That way you can easily change the color of the background when you bind the layout to the data. Something like this:

item_list_layout.xml

<LinearLayout     
    xmlns:android="http://schemas.android.com/apk/res/android">
    <View 
        android:id="@+id/termometherIndicator"
        android:height="match_parent" android:width="4dp"
        android:background="@color/default_color" />
    <LinearLayout ....>
        <!-- The rest of the item layout goes here -->
    </LinearLayout>
</LinearLayout>

Then get the view reference in code behind using the Id and change the background color to whatever you need.

Upvotes: 1

S. Czop
S. Czop

Reputation: 620

The ListView row should be an horizontal LinearLayout, and include this at the beginning, as a first child, followed by the TextView:

<View
android:id="@+id/reputationColor"
android:layout_width="4dp" //Aproximately the size from your image
android:layout_height="36dp" //About the size of a List Row, but less, as seen in your image
android:layout_gravity="top"
/>

You will need a CustomAdapter for your ListView, which you can find a full example in here

Inside the CustomAdapter, you can set the colour programatically with 

View reputationColor = (View)findViewById(R.id.reputationColor); 
switch (reputation) {
case 1:
reputationColor.setBackgroundColor(#ff0000);
break; //Include other cases up to 5
default:
break;
}

For more information on CustomAdapters, go to the following websites:

Upvotes: 1

Stepan
Stepan

Reputation: 1431

You can add a panel to the leftmost part of your app. In that panel you can place one of the predefined images of thermometer. You only have 5 levels, right? Once value changes - select corresponding image of thermometer reading and redraw gui element.

Upvotes: 0

Related Questions