Android 4.0 Sub-Title (section) Label Styling

Brandon picture Brandon · Apr 5, 2012 · Viewed 19.9k times · Source

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!

Answer

Brandon picture Brandon · Apr 12, 2012

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>