Android UI pattern implementations

Most Android users may have recognized more and more common UI elements in Android applications these days. Widgets like ActionBar and QuickActions are a great approach to standardize the way Android applications are used. Google posted some design proposals and took the Twitter for Android app as a great example for Android design patterns. A more precise definition for these and more patterns can be found at androidpatterns.com.
Of course, I immediately needed to have some of these in my own applications. So I started looking for Google’s implementation examples or developer documentation – nothing! Not even a code snippet. Fortunately, I was not the only one with that problem. I found some pretty good implementations for ActionBar and QuickActions, but I was looking for a more “integrated” solution, so I continued my research. Hours of googling later, I found a video from a talk at Google I/O 2010, which pointed me at the Google I/O app, which seems to be a good reference. But I wanted a library, not an example implementation and so I kept on searching. Finally, I found this awesome project, which perfectly fits my needs: Greendroid!

Greendroid

… is the most complete library for android UI patterns I found by now. Just load the Greendroid project into Eclipse, add it as a library to your project and you’re ready to go! To give you an example, creating an ActionBar and filling it with items is as easy as this:

1. Put this into your XML layout:

<greendroid.widget.ActionBar
 	android:id="@+id/MyActionBar" 
	android:layout_height="@dimen/gd_action_bar_height"
	android:layout_width="fill_parent" />

2. Fill your ActionBar with items and a title:

@Override
	public void fillActionBar(final ActionBar mActionBar) {
		mActionBar.addItem(Type.Compose);
		mActionBar.addItem(Type.Refresh);
		mActionBar.addItem(Type.Locate);
		mActionBar.setTitle("My ActionBar");
		mActionBar.setOnActionBarListener(new OnActionBarListener() {

			@Override
			public void onActionBarItemClicked(int position) {
				switch(position) {
				case 0:
					// Compose action
					break;
				case 1:
					// Refresh action
					LoaderActionBarItem item = (LoaderActionBarItem) mActionBar.getItem(position);
					// Turn the item into a progress indicator
					item.setLoading(true);
					break;
				case 2:
					// Map action
					break;
 				default:
 					// Action for home button
					break;
 				}
 			}
	 });

I recommend you to take a look at their example application (also included in the repository) to see what else you can do with Greendroid. There isn’t really a documentation, but the example application is pretty much everything you need to understand how Greendroid should be used.

I hope we’ll see more applications use the UI patterns in the future to give the Android application landscape a more consistent look.
Have fun!

Advertisements

19 thoughts on “Android UI pattern implementations

  1. hi. i also want to use greendroid. but im having trouble adding it as a library project. i downloaded the folder that contains 3 more folders GDCatalog, GreenDroid, GreenDroid-GoogleAPIs

    should i import the folder that has these 3 folders? or should i import the GreenDroid folder only?

    i did try importing the folder that has those 3 folders in it, set it as a library project. after that, im stuck. the site does not say what to do next. only using a command line to execute a python script? even then, that .py file does not exist and there is no scripts folder in the GreenDroid folder

    please advise

    • As I understand it, those 3 folders should be seen seperately:

      // EDIT
      – GreenDroid: the core library. This is the code that will be mostly linked to your code
      – GreenDroid-GoogleAPIs: GreenDroid’s extension including Google APIs related features (GDMapActivity for instance)
      – GDCatalog: the demonstration application. This project contains a lot of snippet of code showing you how to use GreenDroid.

      So for using GreenDroid in your app, you just need the GreenDroid folder (and GreenDroid-GoogleAPIs, if you need map support).
      Go to File > Import and the choose “Import existing Projects into workspace”. There you choose the subfolder you want to import.

      Hope this helps!

  2. hi. now i was able to use it. partially… seems the problem was that it took time for eclipse to realize that it had to rebuild R.java when i imported the GreenDroid folder

    my problem now though is since im using a splash screen, the action bar is blank when the splash screen goes to the main activity class

  3. this is what my manifest file looks like
    my main application looks like this

    // deleted

    i purposely set splashscreen as activity instead of gdactivity because if i did, it adds an action bar with the home button and label
    but when it goes to the mainactivity, the actionbar does not contain anything, just a blank rectangle

    what i want is for the splash screen to not contain any action bar, then when it switches to the mainactivity, the action bar is there

    any thoughts?

    oh yeah, mainactivity extends gdactivity

    • I guess I know what’s going on (although you still did not give me the initalization code for your ActionBar object 😉 ).
      If your main activity extends GDActivity, try to change the type of your ActionBar like this:

      getActionBar().setType(Type.Normal);

      BTW: My first comment was wrong, I edited it. What you need to add as Library Project is GreenDroid, not GDCatalog

  4. hi! i do not have an initialization code for action bar. i thought that this is automatic if i inherit from GDActivity. i used the set type method, i now see a separator between the home icon and the action bar title

    but there is no home icon and title that is displayed. any ideas? if the cause is that i did not initialize the action bar, do you have a sample code? thank you

    • I think I remember running into the same problem. I’m currently using a workaround for this, which is making the title background transparent and setting a background image to the ActionBar. Try something like this:

      mActionbar.findViewById(R.id.gd_action_bar_title).setBackgroundColor(Color.TRANSPARENT);
      mActionbar.setBackgroundResource(R.drawable.gradientheader);
      
  5. hi. i figured it out. basing on your code. there really was no text in the title of the action bar. i thought the default title is the application name. i just cast it to textview and set the new title

    ((TextView) mActionbar.findViewById(R.id.gd_action_bar_title)).setText(“title here”)

  6. i did that but it didnt work. it was blank. hence the workaround i posted. thank you for helping out hackingmobile.

    i have one last question. im doing an animationtransition between 2 gdactivity. the actionbar also moves like if my animation is slide left. is there a way to have the actionbar stay still?

    i was thinking if this is not possible then id have to use a viewswitcher instead. any thoughts?

  7. hi. have you tried switching between 2 GDActivity ? because i always get unable to instantiate componentinfo exception. i can’t figure out why.

    this is my code

    Intent mainIntent = new Intent(MainActivity.this, LoginUI.class);
    startActivity(mainIntent);

    and in my xml

    the LoginUI GDActivity class merely calls setActionBarContentView(R.layout.login);

    any ideas? thank you

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