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.
(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:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="@+id/textView2"
android:textSize="20sp"
android:textColor="#ff0000" />
</LinearLayout>
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.
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
- If a Rendering Problems message is displayed when viewing layouts see the article Android Studio Rendering Problems.
- See the other Android examples on Tek Eye.
Author:Daniel S. Fowler Published: Updated: