Android 4.0 Sub-Title (section) Label Styling [closed]

Question

So I was looking at the Android Dev Design site for ICS and all of the apps have these subtitles/section headers:

I was wondering if anyone knew the custom styling to achieve labels that look like this. I couldn't find any label Views that looked like this in the Android SDK but I really like the way these look.

Thanks in Advance!

Carburize

Answer 1

So this is what I ended up using:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="sectionHeader" parent="android:Widget.Holo.Light.TextView">
        <item name="android:drawableBottom">@drawable/section_header</item>
        <item name="android:drawablePadding">4dp</item>
        <item name="android:layout_marginTop">8dp</item>
        <item name="android:paddingLeft">4dp</item>
        <item name="android:textAllCaps">true</item>
        <item name="android:textColor">@color/emphasis</item>
        <item name="android:textSize">14sp</item>
    </style>
</resources>

Where @drawable/section_header is:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:width="1000dp" android:height="2dp" />
    <solid 
        android:color="@color/emphasis"/>
</shape>

And @color's:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="emphasis">#31b6e7</color>
    <color name="bg_gray">#cecbce</color>
</resources>

Carburize

This doesn't make the blue line stick out over the text below, for instance in a GridLayout with a TextView below. I guess that's because they don't use TextViews in the screenshot. What should the proper behavior be? – Sharitasharity

tips for noobs: the top code should be in res/values/sectionHeader.xml. The @colors part should be in res/values/colors.xml. Usage: set style="@style/sectionHeader" on a textview where you want this header. Use margin="15dp" on that textview – Conservatory

This is close, but you'll want to modify it slightly like the style in annie's answer: textStyle of bold. paddingLeft of 8dp instead of 4, and I would make the drawable's height 1dp instead of 2. Also, add an 8dp paddingBottom. – Capybara

Answer 2

Brandon's right; you'll need to do custom work for now to get the blue style, which is kind of frustrating since it's peppered throughout the new design guide.

Unfortunately, you can't reference Widget.Holo.Light.TextView.ListSeparator as a parent of a custom style, because it's private.

But if you're interested in just the gray line, you can use the stock Android style inline:

style="?android:attr/listSeparatorTextViewStyle"

This will at least get you to the gray line, all caps style:

Brandon's answer will get you to the custom blue style.

FYI, if you want to subclass exactly from the current (v15) Android style for List Separators, the combined styles used in Android for Widget.TextView.ListSeparator and Widget.Holo.Light.TextView.ListSeparator that you can copy over to a new style are:

<item name="android:background">@drawable/list_section_divider_holo_light</item>
<item name="android:textAllCaps">true</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">?android:textColorSecondary</item>
<item name="android:textSize">14sp</item>
<item name="android:gravity">center_vertical</item>
<item name="android:paddingLeft">8dip</item>

You'll have to copy the drawables over to your own directories though, since they're private.

Cafeteria

Answer 3

I'm not sure exactly which style it is, but the preferences app uses that too (or something very similar). It's a section header. Also, the TextField has the textAllCaps set to true. You can probably find it in the resources folder of the SDK if you look for the textAllCaps :)

Henni

FYI, this is only available for API Level 14 and earlier. You'll have to set to all caps programmatically or use special all-caps strings in your string resource files to get this working before Level 14. – Cafeteria

14 and later, but yes, you're right. – Henni

Answer 4

I say, to draw the line just use a View, with height set tu 1dp or so. You can set the color using background attribute

Ciaphus