How to change the fontfamily of a Spinner?

Question

I use android studio to create an android app. I have the API version higher than 16, and i use the Support Library 26. I created a font family below res->font which i named "cairo_regular.ttf". In my android app, in one of my interface i use a Spinner with a drop down style to display the list of all countries, the following is the xml code:

<android.support.v7.widget.AppCompatSpinner
            android:id="@+id/spinner"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginTop="10dp"
            android:layout_marginRight="16dp"
            android:prompt="@string/spinner_title" />

I declared the adapter outside the constructor in the class java, i.e.:

final ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, countryTab);
            country.setAdapter(arrayAdapter);

I make also custom xml file in layout folder as the following:

<android.support.v7.widget.AppCompatTextView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/text1"
    style="?android:attr/dropDownItemStyle"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:ellipsize="marquee"
    android:singleLine="true"
    android:fontFamily="@font/cairo_regular"
    android:textAppearance="?android:attr/textAppearanceLargePopupMenu" />

I add in the custom xml file "android:fontFamily="@font/cairo_regular"" to change the font of the list of country in the spinner, but the font doesn't change. I want to know how can i change the fontfamilly of the Spinner in my app.

Answer 1

So let's try and Understand what happens when you write this Line of code when you try and populate your Spinner .

[ArrayAdapter<String> spinnerAdapter= new ArrayAdapter<>(getApplicationContext(), android.R.layout.simple_list_item_1, dataInsideSpinner); // here dataInsideSpinner is a List<>
spinnerAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);]

The android.R.layout.simple_list_item_1 is the the layout for Spinner's Item , or When it hasn't been selected (How it is generally on the screen) The android.R.layout.simple_dropdown_list is the layout that is rendered when you select the spinner and the Dropdown Items appear

So there are 2 ways that you can customise your spinner . It's either by changing the layout file by modifying the android.R.layout.simple_list_item_1 and android.R.layout.simple_dropdown_list or By changing it your Java File ! as mentioned in some answers Below . But this method seems to be easier and hassle free!

On doing this whenever you'd try and use these 2 files your spinner shall display the changes, (changes made in these files) .

Otherwise the Well preferred method would be is to write 2 Custom Layout files 1> custom_spinner_list_item 2> Custom_spinner_dropdown_item (on click renderred)

here's a snippet of how it's done. custom_spinner_list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/text1"
    style="?attr/spinnerDropDownItemStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ellipsize="marquee"
    android:fontFamily="@font/roman"
    android:singleLine="true"
    android:textAlignment="inherit"
    android:textColor="@color/black90opacity"
    android:textSize="14sp">

</TextView>

custom_spinner_dropdown_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/text1"
    style="?attr/spinnerDropDownItemStyle"
    android:layout_width="match_parent"
    android:layout_height="?attr/dropdownListPreferredItemHeight"
    android:ellipsize="marquee"
    android:fontFamily="@font/roman"
    android:singleLine="true"
    android:textAlignment="textStart"
    android:textColor="@color/black90opacity"
    android:textSize="14sp">

</TextView>

and Now use these Files in where you plug in data into your adapter

 ArrayAdapter<String> spinnerAdapter= new ArrayAdapter<>(getApplicationContext(), R.layout.custom_spinner_list_item.xml, dataInsideSpinner); // here dataInsideSpinner is a List<>
    spinnerAdapter.setDropDownViewResource(R.layout.custom_spinner_dropdown_item.xml);

Should be good to go ! :)

Answer 2

Here's how i do it :

FontCache Class:

import android.content.Context;
import android.graphics.Typeface;
import java.util.HashMap;


public class FontCache {

private static HashMap<String, Typeface> fontCache = new HashMap<>();

public static Typeface getTypeface(String fontname, Context context) {
    Typeface typeface = fontCache.get(fontname);

    if (typeface == null) {
        try {
            typeface = Typeface.createFromAsset(context.getAssets(), fontname);
        } catch (Exception e) {
            return null;
        }

        fontCache.put(fontname, typeface);
    }

    return typeface;
}
}

Then create a custom class that extends TextView :

public class MontserratRegularTextView extends android.support.v7.widget.AppCompatTextView {

public MontserratRegularTextView(Context context) {
    super(context);

    applyCustomFont(context);
}

public MontserratRegularTextView(Context context, AttributeSet attrs) {
    super(context, attrs);

    applyCustomFont(context);
}

public MontserratRegularTextView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);

    applyCustomFont(context);
}

private void applyCustomFont(Context context) {
    Typeface customFont = FontCache.getTypeface("fonts/Montserrat-Regular.otf", context);//your font path here
    setTypeface(customFont);
}
}

Then add it in your custom xml file you are making like this:

<com.example.myapplication.customFonts.MontserratRegularTextView
    android:id="@+id/user_email"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/nav_header_vertical_spacing"
    android:text="@string/nav_header_title"
     />

Hope this helps you!