After finishing the migration from Actionbarsherlock to appcompat described in the first Post on modernizing android UIs, it turns out there are even more things to modernize in terms of android UIs.

Tabs and design support library

If you used Tabs within the ActionBar, after migrating to appcompat-v7 API 22 you might recognize a warning, that tells you that they are now deprecated.

In order to modernize those, you should use the design support library that was added to the Android SDK with API level 22. Similar to the appcompat -v7, the design support library provides backports of material design components of Android lollipop (5.x) for older versions of Android.

Here’s the steps that rid you of the deprecation warning

Add the design library to your eclipse workspace and link it with your project in pretty much the same way as appcompat described in the first Post. The library can be found on the following path: <sdkdir>/extras/android/support/design.
Import it into eclipse as Existing Android Code Into Workspace, change the build target to level 22, and link the appcompat project with it.

Add the following to maven

<dependency>
<groupId>com.android.support</groupId>
<artifactId>design</artifactId>
<version>${android.compatibility.version}</version>
<type>aar</type>
</dependency>

Change your code to use the new TabLayout as described here. A complete example is the cheesesquare app: activity_main.xml, include_list_viewpager.xml, MainActivity.java
Once you’re done with this and have the design support library up an running, you could modernize your app by using more of the library’s features like navigation drawers, floating labels and buttons, snackbars, collapsing toolsbars, etc. See this blog post for more features.

The screenshots bellow show a before-after comparison – deprecated tabs vs material design tabs.

Checkboxes to switches

Android API level 14 introduces the switch component, that according to google should be used when only one option is available. For API levels < 14 there’s no such thing as switches. So we’ll have to rely on checkboxes there. Here’s how to replace checkbox preferences by switches for devices running API level 14 and above

In a preference XML, replace CheckBoxPreference by SwitchPreference (see commit ab16eb1997dfba743abcd488b6b20de71b5c3ff0 for an example).
However, If you want to keep compatibility with API levels < 14, you’re only choice is to keep redundant copies of the same preferences.xml in
- res/xml/ that contains the preferences with CheckBoxPreferences and
- res/xml-v14/ that contains the same file with SwitchPreferences.

Another before-after comparison is shown bellow – checkboxes vs switches.

AppCompat-v7, API-22 with checkboxes — Preferences: AppCompat-v7, with checkboxes

Using Action Buttons

Action Buttons are icons that realize the most important actions on the actionBar if there is enough room to display them. These could have been used in Actionbarsherlock already, but if you still didn’t modernized them then it’s about time 🙂

One reason for not using action buttons might be that you don’t have suitable icons. Here’s the solution: Google provides a huge amount of material design icons under open source (CC-BY) license. They can be found on this site, or you can just clone their git repository.

So it’s as easy as that

Choose proper icons for your actions and copy them to your res/drawable-xyz folders

Add icon tags to your menu.xml like so

    <item
        android:id="@+id/action_refresh"
        android:icon="@drawable/ic_refresh_white_24dp"
        android:title="@string/action_refresh"
        app:showAsAction="ifRoom"/>

And that’s it. See bellow for an example. For an example see the commit that realized this change.