Modernizing android UIs part 1: Migrating from Actionbarsherlock to Material Design

This post shows by example the steps that are necessary for migrating an android application from Actionbarsherlock to Material Design (introduced in android KitKat/Version 5.x/API level 21/22), while keeping compatibility with at least android Gingerbread/Version 2.3 /API level 9). It uses the appcompat-v7 library on API level 22. The app that was migrated (nusic) in this example is developed using Eclipse, Maven and RoboGuice.

Before-after comparison

Let’s begin with some before-after screenshots:

ActionBarSherlock

ActionBarSherlock

AppCompat-v7, API-22

AppCompat-v7, API-22

02-nusic-abs-prefs

Preferences: ActionBarSherlock

Preferences: AppCompat-v7, API-22

Preferences: AppCompat-v7, API-22

Basic migration (appcompat-v7)

The following lists the steps that were implemented in order to change the app as depicted in the screenshots above.

  • Update Android SDK Tools
  • Eclipse
    • Setup Eclipse project for appcompat described here.
    • Link your project with it. Right click on your project | Properties | Android | Library | Add
      eclipse-choose-appcompat
    • Remove action bar sherlock. Same menu as above.
  • Set Up Maven Build
    • <repositories>
      <repository>
      <id>android</id>
      <url>file://${env.ANDROID_HOME}/extras/android/m2repository</url>
      </repository>
      </repositories>
      
    • <dependency>
      <groupId>com.android.support</groupId>
      <artifactId>appcompat-v7</artifactId>
      <version>${android.compatibility-v7.version}</version>
      <type>aar</type>
      </dependency>
      
  • Migrate from Actionbarsherlock to appcompat
    • styles.xml

      <!-- <style name="AppBaseTheme" parent="@style/Theme.Sherlock"> -->
       <style name="AppBaseTheme" parent="@style/Theme.AppCompat">
      
    • Replacing classes
      • RoboSherlockFragment -> RoboFragment
      • RoboSherlockFragmentActivity -> RoboActionBarActivity
      • RoboSherlockPreferenceActivity -> Write your own RoboAppCompatPreferenceActivity that looks like this (or as described here) but is derived from RoboPreferenceActivity (see here for the class that was used in the example).
        Then derive your class from it as before with RoboSherlockPreferenceActivity.
    • Replacing methods
      • getSherlockActivity() -> getActivity()
      • getSupportMenuInflater() -> getMenuInflater()
    • Fixing imports
      • android.view.Menu
      • android.support.v7.app.ActionBar
    • Updating proguard.cfg
      • Remove actionbarsherlock
      • Add
        # support4, appcompat-v7, design support
        -dontwarn android.support.**
        -keep class android.support.** { *; }
        -keep interface android.support.** { *; }
        

For further info please see

Advertisements

2 responses to “Modernizing android UIs part 1: Migrating from Actionbarsherlock to Material Design

  1. Pingback: Modernizing android UIs part 2: design support library, switches, action buttons | IT affinity!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s