Tek Eye Logo

Tek Eye

Change ListView Text Color in Android

Not happy with the default layout of items in a ListView. It is straightforward to provide your own layout to change the ListView item's visual formatting, such as text color, or font size, background color, etc. To change ListView text color in Android a custom layout is used for the list items. (Instead of using one of Android's default layouts.) This custom layout can be modified to change the font attributes of the list items, color, bold, size, etc.

Android Logo

(This change text color in ListView tutorial assumes that Android Studio is installed, a basic App can be created and run, and the code in this article can be correctly copied into Android Studio. Adapt the data and code to meet your own requirements. When entering code in Studio add import statements when prompted by pressing Alt-Enter. In this article Amercian color spelling is used and not UK colour in line with the Android SDK)

How to Set Text Color in Android ListView

This Android ListView tutorial assumes that you have a simple one line per entry text list up and running in an Android App. If not see the Tek Eye article Add a Simple List to an App.

Open the App project in Android Studio. Add a new layout file to the project using the Project explorer. To do this use the File menu or context menu (normally right-click) on app in the Project explorer. Select New then XML and Layout XML File. Set the Layout File Name, here called listrow, leave the Root Tag at LinearLayout and Target Source Set unchanged at main. Click Finish and listrow.xml will be created in the res/layout folder.

With listrow.xml open in the Design window use the Palette to drop a Plain TextView from the Widgets list onto the new layout. Now change some of the layout and TextView Properties. Highlight the layout (click a blank area of the device screen shown in the Design window or click LinearLayout in the Component Tree) and change layout:width and layout:height to wrap_content. Select the TextView and change the required font (text) Properties, e.g. set textSize to 20sp (scaled pixels) and textColor to #ff0000 to change the ListView text color to red. If you click on the Text tab the XML should be similar to this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:text="New Text"
        android:textColor="#ff0000" />

In the following line of code an ArrayAdapter is created to link a ListView declared as coffeeList to a string array called coffeeChoices. The ArrayAdapter is given the layout listrow and the textView2 id:

coffeeList.setAdapter(new ArrayAdapter<String>(this, R.layout.listrow, R.id.textView2, coffeeChoices));

Run the App to try out the ListView font changes.

Red Text ListView

Play with the other layout and TextView properties to see the effect they have. E.g. open textStyle under the Properties list and check bold and italic. The code is available in redlist.zip for download with an instructions.txt on how to import the project into Studio.

See Also

Author:  Published:  Updated:  

markdown CMS Small Logo Icon ↓markdown↓ CMS is fast and simple. Build websites quickly and publish easily. For beginner to expert.

Articles on:

Android, HTML, ↓markdown↓ CMS, VPS, Computing, Computer History