Android - UI Patterns Tutorial

In this chapter we will look at the different UI Patterns which are available by android to design apps that behave in a consistent and foreseeable way.

UI Patterns components

A good android application should follow following UI patterns −
  • Action Bar
  • Confirming and Acknowledging
  • Settings
  • Help
  • Selection
Now we will discuss the above mentioned UI Patterns in detail.

Action Bar

The action bar is a dedicated bar at the top of each screen that is generally persistent throughout the app. It provides you several key function which are as following −
  • Makes important actions prominent and accessible
  • Supports consistent navigation and view switching within apps
  • Reduces clutter by providing an action overflow for rarely used actions
  • Provides a dedicated space for giving your app an identity

Action Bar Components

Action Bar has four major components which can be seen in the following image.
Anroid UI Patterns Tutorial
These components name and functionality is discussed below −
Sr.NoAction Bar Components
1App Icon
The app icon establishes your app's identity. It can be replaced with a different logo or branding if you wish.
2View control
If your app displays data in different views, this segment of the action bar allows users to switch views.
3Action buttons
Show the most important actions of your app in the actions section.
4Action overflow
Move less often used actions to the action overflow.

Confirming and Acknowledging

When a user invokes a action on your app's UI, it is a good practice to confirmor acknowledge that action through a toast or a dialog box.
There is a difference between Confirming and Acknowledging.

Confirming

When we ask the user to verify that they truly want to proceed with a action that they just invoked, it is called confirming. As you can see in the following image −
Anroid UI Patterns Tutorial

Acknowledging

When we display a toast to let the user know that the action they just invoked has been completed, this is called acknowledging, As you can see in the following image −
Anroid UI Patterns Tutorial

Settings

The place in your app where users can indicate their preferences for how your app should behave is called as Settings. The use of settings can benefit your app's users in the following ways −
  • Settings help user to predetermine that what will happen in certain situations
  • Use of settings in your app help users to feel in control

Placement of Settings

It is preferred by the android developers to always make "settings" option part of action overflow which is mentioned above. As users did not frequently use this option so the common practice is to place it below all other items except "Help". As you can see in the following picture −
Anroid UI Patterns Tutorial

Help

Some of your app users may run into some difficulty while using your app and they will be looking for some answers, and they want them within the app. So always make "help" part of your app.

Placement of Help

Like "Settings" the standard design of placing "Help" option is in action overflow. Always make it very last item in the menu and always label it "Help". Even if your app screen has no other action overflow items, "Help" should appear there. As you can see this in the following picture −
Anroid UI Patterns Tutorial

Selection

Android 3.0 version changed the long press gesture to the global gesture to select data. The long press gesture is now used to select data, combining contextual actions and selection management functions for selected data into a new element called the contextual action bar (CAB).

Using Contextual Action Bar (CAB)

The selection CAB is a temporary action bar that overlays your app's current action bar while data is selected. It appears after the user long presses on a selectable data item. As you can see in the following picture −
Anroid UI Patterns Tutorial
From the CAB bar user can perform following actions −
  • Select additional data items by touching them
  • Trigger an action from the CAB that applies to all highlighted data items
  • Dismiss the CAB via the navigation bar's Back button or the CAB's checkmark button

Comments

Post a Comment

Popular posts from this blog

Android - TextureView Tutorial

Image
If you want to display a live video stream or any content stream such as video or an OpenGL scene, you can use TextureView provided by android in order to do that. In order to use TextureView, all you need to do is get its SurfaceTexture.The SurfaceTexture can then be used to render content. In order to do this, you just need to do instantiate an object of this class and implement SurfaceTextureListener interface. Its syntax is given below: private TextureView myTexture ; public class MainActivity extends Activity implements SurfaceTextureListener { protected void onCreate ( Bundle savedInstanceState ) { myTexture = new TextureView ( this ); myTexture . setSurfaceTextureListener ( this ); setContentView ( myTexture ); } } After that, what you need to do is to override its methods. The methods are listed as follows − @Override public void onSurfaceTextureAvailable ( SurfaceTexture arg0 , int arg1 , int arg2 ) { } @Override
Read more

Android - Notifications

Image
A  notification  is a message you can display to the user outside of your application's normal UI. When you tell the system to issue a notification, it first appears as an icon in the notification area. To see the details of the notification, the user opens the notification drawer. Both the notification area and the notification drawer are system-controlled areas that the user can view at any time. Android  Toast  class provides a handy way to show users alerts but problem is that these alerts are not persistent which means alert flashes on the screen for a few seconds and then disappears. To see the details of the notification, you will have to select the icon which will display notification drawer having detail about the notification. While working with emulator with virtual device, you will have to click and drag down the status bar to expand it which will give you detail as follows. This will be just  64 dp  tall and called normal view. Above expanded form can have
Read more

Android - Multitouch Tutorial

Image
Multi-touch gesture happens when more then one finger touches the screen at the same time. Android allows us to detect these gestures. Android system generates the following touch events whenever multiple fingers touches the screen at the same time. Sr.No Event & description 1 ACTION_DOWN For the first pointer that touches the screen. This starts the gesture. 2 ACTION_POINTER_DOWN For extra pointers that enter the screen beyond the first. 3 ACTION_MOVE A change has happened during a press gesture. 4 ACTION_POINTER_UP Sent when a non-primary pointer goes up. 5 ACTION_UP Sent when the last pointer leaves the screen. So in order to detect any of the above mention event , you need to override onTouchEvent()  method and check these events manually. Its syntax is given below − public boolean onTouchEvent ( MotionEvent ev ){ final int actionPeformed = ev . getAction (); switch ( actionPeformed ){ case MotionEvent . ACTION_DOWN :{ break ; }
Read more