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. Click OK.

Add a Studio Resource

Set the id of the TextView in the new layout file to text1, and set a textSize of 24sp. The layout_width is match_parent and layout_height is wrap_content. Finally maxlines is set to 1.

TextView Attributes

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="24sp">

</TextView>

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);

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. Click OK, other values remain as default (Source set is main, Directory name is values, no Chosen qualifiers).

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.)

The Widget.TextView.SpinnerItem style is assigned to the parent attribute of the new MySpinnerLook style (prefixed with @android:style/). The TextSize attribute is removed from the my_spinner.xml TextView layout file. It becomes an item (android:textSize) 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">24sp</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. The my_spinner.xml will now 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"
    style="@style/MySpinnerLook">

</TextView>

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.