Mobile Design Patterns&Navigation

Information’s extracted from Mobile Design Pattern Gallery: UI Patterns for Mobile Applications, I recommend you to read this book because has a lot of great content.

“Good navigation, like good design, is invisible.”

 

Springboard (Launchpad)

Use grid layout for items of equal importance, or an irregular layout to emphasize some items more than others.

Common layouts are 3×3, 2×3, 2×2, 1×2

image

 

Old versions but it’s showing great details about this pattern.

image

imageimage

 

Profile information can be added.

image

 

List menu

Works well for long titles or those that require sub text. All internal screens should offer an option for returning to List Menu.

image

image

image

 

Tabs

Tabs navigation is not OS neutral since each OS has their own guidelines for tab location and design.

image

image

image

 

Gallery

Surfaces individual pieces of content for navigation (articles, recipes, photos or products) can be arranged in a carousel, grid or slideshow.

Works great for frequently updated content.

image

image

 

Dashboard

image

Advertisements

Motorola in Android enterprise development

Check this presentations about a project called MX from Motorola, created to support enterprise development with Android.

 

Frame animation

This type of animation shows a sequence of images in order.
http://developer.android.com/guide/topics/resources/animation-resource.html

 

Create anim.xml under res/anim:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Start the animation form code:

ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);

rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
rocketAnimation.start();

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Create a custom list

The example below will show a list that represents some menu options with a picture attached.

image

To create a custom list we need to:

  • Extend activity from ListActivity
  • Update layout for activity to contain a ListView and set the default id (@android:id/list)
  • Create a new layout for the list item
  • Create a new string array as data for the list
  • Add to your project some pictures

 

Create arrays.xml in res/values

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string-array name="options">
        <item>About</item>
        <item>Contact</item>
        <item>Settings</item>
    </string-array>

</resources>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Update the main layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ListView
        android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Create list_item.xml in res/layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:padding="10dp" >

    <ImageView
        android:id="@+id/imageViewMenuIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:scaleType="fitStart"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textViewMenuOption"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:gravity="left"
        android:paddingLeft="10dp"
        android:text="TextView"
        android:textSize="25sp" />

</LinearLayout>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Update activity class to look like this one:

public class CustomListWithArrayActivity extends ListActivity {

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);
        setListAdapter(new MenuOptAdapter(this, R.layout.list_item,
                R.id.textViewMenuOption, getResources().getStringArray(
                        R.array.options)));
    }

    private class MenuOptAdapter extends ArrayAdapter<String> {

        private String[] data = null;

        public MenuOptAdapter(Context context, int resource,
                int textViewResourceId, String[] objects) {

            super(context, resource, textViewResourceId, objects);
            this.data = objects;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            // inflate the new layout into list row
            LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View row = inflater.inflate(R.layout.list_item, parent, false);

            // grab the text from array and put it in the
            // text view control
            TextView tv = (TextView) row.findViewById(R.id.textViewMenuOption);
            tv.setText(data[position]);

            // a way of setting the image view control
            // of an item list
            ImageView iv = (ImageView) row.findViewById(R.id.imageViewMenuIcon);
            if (data[position].equals("About")) {
                iv.setImageResource(R.drawable.cube);
            } else if (data[position].equals("Contact")) {
                iv.setImageResource(R.drawable.database);
            } else {
                iv.setImageResource(R.drawable.direction);
            }

            // return the new build as we want
            return row;
        }

    }
}
 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

More about LayoutInflater can be found at http://developer.android.com/reference/android/view/LayoutInflater.html.