Spinner with custom text font and color

Question

I want to use custom font and color in Spinner. I can't modify them directly in <spinner/>

Here's my code

<Spinner
                android:id="@+id/spinner2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="5pt"
                android:layout_marginTop="5pt"
                android:backgroundTint="#d9d9d9"
                android:entries="@array/dropdown_main" />

It should look like this:

Text font is Product Sans Bold, color is #333333

Answer 1

A heads up before you get started: To add the font, you'll either want to set a minimum API version of 26 or include the Support Library v26.0 (for support starting at API version 16). This example shows how to use the support library; the only real difference is the <font-family> using the app or res-auto namespace instead of android.

You can keep the spinner as is but add a theme value to your XML:

<Spinner
    android:id="@+id/spinner2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="5pt"
    android:layout_marginTop="5pt"
    android:backgroundTint="#d9d9d9"
    android:entries="@array/dropdown_main"
    android:theme="@style/SpinnerTheme"  />

Your styles.xml can contain the theme:

<style name="SpinnerTheme">
    <item name="android:textColor">#333333</item>
    <item name="android:fontFamily">@font/product_sans</item>
    <item name="android:textStyle">bold</item>
</style>

To add the font, you'll need to do a few things:

1. Add a font folder: Right-click your res folder and choose New > Android resource directory. Make sure you pick a resource type of "Font" (and probably the name as well.)
2. Add the Product Sans font file to your project from somewhere like https://befonts.com/product-sans-font.html.
3. Right-click the font folder under res and choose New > Font resource file. Name the file product_sans.xml.
4. List your added fonts:

Make sure you add the app namespace here if you're using the support library. Otherwise, if you're at SDK Version 26 or above, you can reference the android namespace.

<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:font="@font/product_sans_regular" app:fontWeight="400" app:fontStyle="normal" />
    <font app:font="@font/product_sans_italic" app:fontWeight="400" app:fontStyle="italic" />
    <font app:font="@font/product_sans_bold" app:fontWeight="700" app:fontStyle="normal" />
    <font app:font="@font/product_sans_bold_italic" app:fontWeight="700" app:fontStyle="italic" />
</font-family>

More info about fonts in your XML can be found here: https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml

Answer 2

Here you can make a custom xml file in layout folder where you can add this:

<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#333333"
android:padding="10dp"
android:textStyle="bold"  /> 

And then in your code mention it like this:

val adapter = ArrayAdapter.createFromResource(this, R.array.array_name, R.layout.custom_spinner) // where array_name consists of the items to show in Spinner
adapter.setDropDownViewResource(R.layout.custom_spinner) // where custom-spinner is mycustom xml file. 

And then set the adapter.