Android: UI Navigation Using Back Button


You have developed a fine Android application, implemented tabbed design or have multiple screens and there are lots of UI screens that will be shown on various buttons’ clicks. Now for a good user experience you must keep track of UI screens previously opened in order to provide user with facility to go back to previous window (It is an application not website, so back button will not be available like browser). For this you will need to provide a button/image to go back on every screen and disable device’s back button (else it will close app if not handle to do another action) OR you can use back button OR provide both facilities (and I prefer both).

Solution:

  1. Have one class level variable which will define which screen to show on Back Button press (e.g. GO_TO).
  2. Have one class level constant for each screen, define any unique value for identification (e.g. MAIN, ONE, TWO, THREE).
  3. Make separate Methods/Functions to show each Screen.
  4. Set GO_TO variable to previous screen’s corresponding constant (e.g. “ScreenOne” is shown from button in “MainScreen”, so set GO_TO = MAIN in method of showing ScreenOne).
  5. Implement “onClick” to define button navigation.
  6. Override  “onKeyDown” using conditions with help of GO_TO (see example code).
  7. Enjoy :-).

Example Code:

package com.adnan.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class TestDialogActivity extends Activity implements OnClickListener {

	private byte GO_TO = 0;
	private final byte CLOSE = -1;
	private final byte MAIN = 0;
	private final byte ONE = 1;
	private final byte TWO = 2;
	private final byte THREE = 3;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        showMainScreen();

        Button screenOneButton = (Button) findViewById(R.id.screen_one_btn);
        Button screenTwoButton = (Button) findViewById(R.id.screen_two_btn);
        Button screenThreeButton = (Button) findViewById(R.id.screen_three_btn);

        screenOneButton.setOnClickListener(this);
        screenTwoButton.setOnClickListener(this);
        screenThreeButton.setOnClickListener(this);
    }

    private void showMainScreen(){
    	GO_TO = CLOSE;
    	setContentView(R.layout.main);
    }

    private void showScreenOne(){
    	GO_TO = MAIN;

    	setContentView(R.layout.screen_one);

    	Button screenOneChild1Button = (Button) findViewById(R.id.screen_one_child1_btn);
        Button screenOneChild2Button = (Button) findViewById(R.id.screen_one_child2_btn);

        screenOneChild1Button.setOnClickListener(this);
        screenOneChild2Button.setOnClickListener(this);
    }

    private void showScreenTwo(){
    	GO_TO = MAIN;

    	setContentView(R.layout.screen_two);
    }

    private void showScreenThree(){
    	GO_TO = MAIN;

    	setContentView(R.layout.screen_three);

    	Button screenThreeChildButton = (Button) findViewById(R.id.screen_three_child_btn);
        screenThreeChildButton.setOnClickListener(this);
    }

    private void showScreenOneChild1(){
    	GO_TO = ONE;

    	setContentView(R.layout.screen_one_child1);
    }

    private void showScreenOneChild2(){
    	GO_TO = ONE;

    	setContentView(R.layout.screen_one_child2);
    }

    private void showScreenThreeChild(){
    	GO_TO = THREE;

    	setContentView(R.layout.screen_three_child);
    }

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.screen_one_btn:

			showScreenOne();
			break;
		case R.id.screen_two_btn:

			showScreenTwo();
			break;
		case R.id.screen_three_btn:

			showScreenThree();
			break;
		case R.id.screen_one_child1_btn:

			showScreenOneChild1();
			break;
		case R.id.screen_one_child2_btn:

			showScreenOneChild2();
			break;
		case R.id.screen_three_child_btn:

			showScreenThreeChild();
			break;
		default:
			break;
		}

	}

	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {

		boolean disableEvent = false;

		if (event.getAction()==KeyEvent.ACTION_DOWN && event.getKeyCode()==KeyEvent.KEYCODE_BACK) {
			if(GO_TO == MAIN) {

				showMainScreen();
				disableEvent = true;
			}else if(GO_TO == ONE) {

				showScreenOne();
				disableEvent = true;
			}else if(GO_TO == TWO) {

				showScreenTwo();
				disableEvent = true;
			}else if(GO_TO == THREE) {

				showScreenThree();
				disableEvent = true;
			}else if(GO_TO == CLOSE) {

				finish();
			}
		}
		return disableEvent;
	}
}