Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 570
Brandon Avatar asked Apr 04 '12 22:04

Brandon


2 Answers

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> 
like image 51
Brandon Avatar answered Sep 21 '22 19:09

Brandon


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.

like image 38
annie Avatar answered Sep 18 '22 19:09

annie