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: enter image description here

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: enter image description here

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.

In my opinion you should create your custom xml for spinner's item and play with text size to make it like that. — hardartcore, Jul 12 '13 at 13:48
I would play with joy, but I'm pretty sure there are tons of different styles for different layouts. I know there are several different sizes for actionbar height and I can get them all with single `@dimen/abs__action_bar_default_height` (this is for actionbarsherlock actually, but there is similar value for regulas Actionbar). I'm looking for something similar here. — Michał Klimczak, Jul 12 '13 at 17:25

score 3 · Accepted Answer · edited May 23 '17 at 12:11

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. enter image description here

I'll be trying this solution in few days (and accepting it then), but it looks great. Thanks! — Michał Klimczak, Jul 18 '13 at 08:33
actually I think it can be done even easier by referencing those values directly like `android:textSize="@anroid:dimen/action_bar_title_text_size"` but I have to check it. Nevertheless, thanks for pointing me to those values — Michał Klimczak, Jul 18 '13 at 08:51
Dunno, eclipse never showed me these values in autocomplete until I reimported them in my own file. — Osman-pasha, Jul 20 '13 at 18:44
As I am continuing to work on my project, I've tweaked the answer a bit further. — Osman-pasha, Jul 20 '13 at 18:49
How to change action_bar_title by clicking on the navigation drawer list item. — madan V, Oct 31 '13 at 13:52

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

1 Answers1