Tek Eye Logo

Tek Eye

Changing Android Spinner Text Size with Styles

The article Load Values into an Android Spinner showed how a Spinner is set up. It was stated in the article that the Spinner definition in the layout file does not define the View that the data being displayed uses. That is assigned when the Adapter that links the data to the Spinner is created. The previous article used the existing Android simple_spinner_item as the View for the data items. This has implications if the size of the Spinner text, or the color of the text needs to be changed. This tutorial covers changing the style of the text values in an Android Spinner.

Android Logo

(This Android Spinner styling 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. The example code can be changed to meet your own requirements. When entering code in Studio add import statements when prompted by pressing Alt-Enter.)

Create a New Studio Project

Create a new project in Android Studio, here called Spinner Style. An Empty Activity is used with other settings left at their default values. Follow the article Load Values into an Android Spinner to get a working Spinner running.

Why Using android:textSize on Spinner Does Not Work

The Properties list in Studio for the Spinner does not have a text size attribute (android:textSize), unlike, for example a TextView. This means trying to change the size of the text being displayed with android:textSize or android:textAppearance attributes on the Spinner definition is a no go.

Maybe a Custom Layout?

The solution to changing the Android Spinner text size is to pass in a custom layout. Instead of using an Android default layout like simple_spinner_item. Here a new Android layout XML file is created in the res/layout folder. Highlight the folder in the Project explorer and use the context menu (normally right-click) or the File menu and choose New, then Layout resource file. Call the file my_spinner.xml. Set the Root element to a TextView.

Add a Studio Resource

Set the ID of the TextView in the layout file to text1 and set a textSize of 22sp. The layout_width is match_parent and layout_height is wrap_content. Finally maxlines is set to 1. The my_spinner.xml will be similar to this:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxLines="1"
    android:textSize="22sp" />

Pass the new layout to the ArrayAdapter creation (the id has to be text1 for the Adapter to use the View), replacing android.R.layout.simple_spinner_item with R.layout.my_spinner:

ArrayAdapter adapter = ArrayAdapter.createFromResource(
    this,
    R.array.context_names,
    R.layout.my_spinner);

Bigger Text in an Android Spinner

The text in the Spinner is now larger, but the default styling has been lost. This could be solved by assigning colors to the TextView, however, this would remove the Spinner styling from any theme that is being used on the device. Fortunately by using the Android feature that allows for the styling on Views to inherit from existing styles it is possible to get the Spinner back to the default theme but with the text size increase.

Extend the Default Theme

To achieve this create a new style XML file. Highlight the the res/values folder and use the context menu (normally right-click) or the File menu and choose New, then Values resource file, give it a name, here it is called my_styles.xml, the name is not important as long as a file of the same name does not exist.

In the new file a style element is defined. The name attribute given here is MySpinnerLook. This new style will inherit from an existing Android style. These can be viewed in Android's styles.xml file (not the project's styles.xml). The Android styles.xml can be viewed in the platforms/android-X/data/res/values folder, under the android-sdk folder. With X being the API level of the current Android platform.

In the platform styles.xml is found the Widget.TextView.SpinnerItem style. This is assigned to the parent attribute of the MySpinnerLook style (prefixed with @android:style/). The TextSize attribute is removed from the TextView layout file and it becomes an item in the new style file. The my_styles.xml file will be similar to this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MySpinnerLook" 
        parent="@android:style/Widget.TextView.SpinnerItem">
        <item name="android:textSize">22sp</item>
    </style>
</resources>

With the my_spinner.xml file no longer having the TextSize attribute the link to the new style file is with a style attribute pointing to MySpinnerLook:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxLines="1"
    style="@style/MySpinnerLook" />

The text is now bigger and with the correct font color. The new my_styles.xml file can be used to customise the Spinner text as required.

Android Spinner Style Change

The Spinner styling source code is available in styling_spinner.zip or from the Android Example Projects page.

Summary

In summary to change the text size (or other style attributes) for a Spinner either:

  1. Create a custom TextView layout.
  2. Change the text size with the android:textSize attribute.
  3. Change the text color with android:textColor.

Or:

  1. Create a custom style.
  2. Use @android:style/Widget.TextView.SpinnerItem as the parent style.
  3. Change the text size with the android:textSize attribute.

See Also

Archive Comments

Adil on March 28, 2012 at 12:20 pm said: Thanks for this. Went through loads of tutorials and this was the only one that made sense!

Pawan on May 6, 2013 at 12:54 pm said: Very nice tutorial.

Author:  Published:  Updated:  

ShareSubmit to TwitterSubmit to FacebookSubmit to Google+Submit to LinkedInSubmit to redditPrint Page

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, VPS, Computing, IT, Computer History, ↓markdown↓ CMS



Free Android Projects and Samples:

Android Examples, Android List Examples, Android UI Examples