Styling ActionBar Spinner Navigation to look like it's title and subtitle

Question

I use Spinner navigation in my actionbar. Everything works fine except styling.

I would like the spinner nav to look like an actionbar which has a title and a subtitle:

But if I use spinner nav, I have to set the title and subtitle to empty string and provide my own spinner view. Which I do, but it looks like this:

QUESTION: What are the styles to make the spinner look the same as on the image above?

Note: I tried setting TextViews textAppearance to android:textAppearance="@android:style/TextAppearance.Medium" and android:textAppearance="@android:style/TextAppearance.Small" respectively, but it didn't work.

I use native Actionbar, not ABS.

Answer 1

The hieght of these items are defined in /<android-sdk>/platforms/android-15/data/res/values/dimens.xml file, like this:

<dimen name="action_bar_default_height">48dip</dimen>
<dimen name="action_bar_title_text_size">18dp</dimen>
<dimen name="action_bar_subtitle_text_size">14dp</dimen>
<dimen name="action_bar_subtitle_top_margin">-3dp</dimen>
<dimen name="action_bar_subtitle_bottom_margin">5dip</dimen>

(Details here: https://stackoverflow.com/a/11686495/989029)

You should redefine required values (Note that these values are different for various orientations, so you need several files as well) in your res folder and use them like this:

actionbar_spinner_item.xml:

<?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"
    android:layout_gravity="center_vertical"
    android:orientation="vertical"
    android:paddingLeft="5dp"
    android:paddingRight="5dp">

    <TextView
        android:id="@+id/action_bar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:singleLine="true"
        android:text="@string/title_activity_main"
        android:textSize="@dimen/action_bar_title_text_size"
        android:textColor="@android:color/primary_text_dark"
        android:textStyle="bold" />

    <TextView
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/action_bar_subtitle_top_margin"
        android:ellipsize="end"
        android:singleLine="true"
        android:textColor="@android:color/primary_text_dark"
        android:textSize="@dimen/action_bar_subtitle_text_size" />

</LinearLayout>

I use this layout in a custom ArrayAdapter in getView() method. From your screenshots I assume you know the details.

All this gives the following result, that looks as expected on all devices I've tested.