Now Playing Tracks

Android App Tricks: Custom Settings Dividers

Soon after I released URL Shortener [0], few people asked me how I implemented certain features in the app. Following +Cyril Mottier's initiative when Capitaine Train was launched, I thought it would be a good idea to humbly contribute to the Android community by sharing some tricks and things I've learned along the way.

If you have an app with a fair amount of features, chances are you have a Settings activity. Some will argue Settings are not necessary altogether, but sometimes one option can’t fit all. There is actually a good article in Android documentation about when to “make it a setting” or not [1].

Luckily, Android has a nice set of APIs making it easy to create simple Settings. You don’t have to bother creating custom layouts, views and listeners or a lot of boilerplate code. You can build Settings using subclasses of the Preference class, all defined in an XML file [2].

As a result, Settings look the same in all apps - and that’s a good thing. People statistically never go to Settings though (in URL Shortener, it’s less than 0.5% of visits according to Google Analytics). Another good reason not to invest much time on it and stick to standards.

Still, I felt Settings were a bit too boring with default grey text and titles, making it hard to quickly navigate between sections. A cheap way to fix this is to customize dividers with your brand color. I think it gives the screen a much more appealing touch.

All you have to do is giving your SettingsActivity a custom theme in AndroidManifest.xml, and override listSeparatorTextViewStyle.

<activity
  android:name=”SettingsActivity”
  android:theme=”@style/MyAppTheme.Settings”/>
  
<style name=”MyAppTheme.Settings”>
  <item name=”android:listSeparatorTextViewStyle”>@style/ListSeparatorTextView</item>
</style>

You just need to provide a custom text color and a 9-patch [3] for the underline.
Unfortunately, the default Widget.TextView.ListSeparator from Holo is private, meaning you can’t simply extend it that way:

<style name=”ListSeparatorTextView” parent=”android:Widget.TextView.ListSeparator”>
  <item name=”android:background”>@drawable/list_section_divider</item>
  <item name=”android:textColor”>@color/theme_primary</item>
</style>

Instead, you need to extend the closest public parent and apply the full style of ListSeparator:

<style name=”ListSeparatorTextView” parent=”@android:style/Widget.TextView.ListSeparator”>
  <item name=”android:layout_width”>match_parent</item>
  <item name=”android:textAllCaps”>true</item>
  <item name=”android:background”>@drawable/list_section_divider</item>
  <item name=”android:layout_height”>wrap_content</item>
  <item name=”android:textStyle”>bold</item>
  <item name=”android:textColor”>@color/theme_primary</item>
  <item name=”android:textSize”>14sp</item>
  <item name=”android:gravity”>center_vertical</item>
  <item name=”android:paddingStart”>8dp</item>
</style>

The good thing? Material Design already takes care of using your colorAccent for Settings dividers. So if you plan your app’s theme to extend some android:Theme.Material.xxx in values-v21, it will be done for free (but only for Android L and above).

#android #AndroidAppTricks  

[0] https://play.google.com/store/apps/details?id=com.tdevaux.googleurlshortener
[1] http://developer.android.com/design/patterns/settings.html
[2] http://developer.android.com/guide/topics/ui/settings.html
[3] https://drive.google.com/file/d/0B8bJ81jFo9yQV1JaZzJjYTA5X1k/edit?usp=sharing

http://click-to-read-mo.re/p/9HoD/5253c1f1

We make Tumblr themes