Android 4.0 Sub-Title (section) Label Styling

AndroidAndroid LayoutStyling

Android Problem Overview


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

ICS 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!

Android Solutions


Solution 1 - Android

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>

Solution 2 - Android

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:

enter image description here

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.

Solution 3 - Android

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 :)

Solution 4 - Android

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBrandonView Question on Stackoverflow
Solution 1 - AndroidBrandonView Answer on Stackoverflow
Solution 2 - AndroidannieView Answer on Stackoverflow
Solution 3 - AndroiddmonView Answer on Stackoverflow
Solution 4 - AndroidurSusView Answer on Stackoverflow