Power By 专否社区

Android 4.0 Sub-Title (section) Label Styling

Go To StackoverFlow.com

64

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!

2012-04-04 22:59
by Brandon

69

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>
2012-04-12 02:34
by Brandon
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 - pjv 2012-12-20 17:59
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 textvie - Nino van Hooff 2013-02-27 14:16
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 - joepetrakovich 2013-09-07 19:17

52

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.

2012-05-09 00:29
by annie

2

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

2012-04-05 00:15
by dmon
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 - annie 2012-09-10 18:21
14 and later, but yes, you're right - dmon 2012-09-10 18:39

0

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

2013-02-08 20:11
by urSus
Ads