Home > DeveloperSection > Articles > Leveraging Action bar in android : List Navigation

Leveraging Action bar in android : List Navigation


Android Android 
Ratings:
0 Comment(s)
 1653  View(s)
Rate this:

Leveraging Action bars in Android: List Navigation

 

In my previous posts we learn some basic characteristics and tab navigation ,

    Leveraging action bar in Android

    Leveraging Action bar in android : Tab Navigation

 

Now here we learn how to show action bar items in List navigation mode

 

The final action bar navigation mode is list navigation. With list navigation enabled, a drop-down spinner widget is in place of the title and subtitle text elements. This is only convention; the action bar will allow a title and navigation list to be displayed at the same time side by side, but there is often not enough visible real estate (at least on a handset device) to effectively display both items.

Note: The implementation here is implemented using AppCompat  Support Library v7 , but it can be easily modified to work with native API’s . The only changes are that each activity must extend Activity instead of ActionBarActivity, and each call to getSupportActionBar() should be replace to getActionBar().

 

Pre-Requisites:

1.       Ellipse SDK

2.       Android SDK

3.       ADT plugin

Or Android Studio and a compatible version of JAVA SDK

Install and configure the above utilities.

Now create a new Android project namely “ActionBarApplicationTest”.

 

Implementation objective:

To show the list navigation mode for Action bar items where the items are displayed in drop down list view on action bar.

Code Implementation:

 

First of all update your activity_main. xml as follows:

 

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin"

    tools:context=".MainActivity">

 

    <TextView

        android:text="@string/hello_world"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/txt"

        android:textSize="28dp" />

 

</LinearLayout>

 

 

Now navigate toMainActivity.java and add this code:

 

package com.example.msclient010.actionbarapplicationtest;

 

import android.content.Context;

import android.os.Bundle;

import android.support.v7.app.ActionBar;

import android.support.v7.app.ActionBarActivity;

import android.view.Menu;

import android.view.MenuItem;

import android.widget.ArrayAdapter;

import android.widget.TextView;

import java.util.ArrayList;

import java.util.List;

 

 

public class MainActivity extends ActionBarActivity implements android.support.v7.app.ActionBar.OnNavigationListener {

 

//adapter for holding the list navigation  

 ArrayAdapter<String> adapter;

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

 

        //getting action bar instance

        android.support.v7.app.ActionBar actionbar = getSupportActionBar();

 

        //Enables taps on the home logo

        actionbar.setHomeButtonEnabled(true);

        //Display home with the "up" arrow indicator

        actionbar.setDisplayHomeAsUpEnabled(true);

 

        //Set the Title text

        actionbar.setTitle("My Title");

        //Set the sub title

        actionbar.setSubtitle("Sub-Title");

 

        //List navigation

        //Apply the appropriate theme to ActionBar item views

        Context context = getSupportActionBar().getThemedContext();

 

        //Add list items to be displayed on action bar in a list

        List<String> spinnerItem = new ArrayList<>();

        spinnerItem.add("Item1");

        spinnerItem.add("Item2");

        spinnerItem.add("Item3");

        spinnerItem.add("Item4");

        spinnerItem.add("Item5");

 

        //Creating an array adapter to hold list items

        adapter = new ArrayAdapter<String>(context, android.R.layout.simple_spinner_item, spinnerItem);

 

        //setting adapter to drop down list view

        adapter.setDropDownViewResource(android.R.layout.simple_dropdown_item_1line);

 

        //Attach a selection listener

        actionbar.setListNavigationCallbacks(adapter, (android.support.v7.app.ActionBar.OnNavigationListener) this);

 

        //apply navigation list mode to action bar

        actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);

 

 

    }

 

 

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.menu_main, menu);

        return true;

    }

 

    @Override

    public boolean onOptionsItemSelected(MenuItem item) {

 

        if (item.getItemId() == android.R.id.home) {

            return true;

        }

 

        return super.onOptionsItemSelected(item);

    }

 

 

    /* OnNavigationListener Callback Methods */

    @Override

    public boolean onNavigationItemSelected(int itemPosition, long itemId) {

 

        //getting text view reference for text to be displayed on Screen

        TextView txt = (TextView) findViewById(R.id.txt);

 

        //Getting the selected item text from the list

        String itemTxt = adapter.getItem(itemPosition).toString();

 

        //setting the selected item text to main text

        txt.setText(itemTxt);

        return true;

    }

}

 

 

Code Explanation:

 

·         To enable the list, we must only pass the adapter we’ve created and an OnNavigationListener callback to react to selection events, and then set the navigation mode on the action bar.

·         We create a drop-down spinner by using the standard adapters and resources from the framework, and we create a simple static list of creatively named items.

·         Take note of the Context we pass into the ArrayAdapter instance. Normally, we would just use the activity and pass a this pointer into the constructor.

·         However, it is common that the action bar uses a slightly different set of themes or styles to display itself (one such theme is Theme.Holo.Light.DarkActionBar) than the rest of the activity uses. This can create visual elements that don’t look correct as action bar elements.

·         To avoid this problem, we pass the Context offered by getThemedContext(), which provides the appropriate styles for widgets inflated into the action bar

 

Running the application:

Hit on run button,

 

Click on the item next to title bar, a drop- down list will appear consists of action bar items

 

 

Select on any item the corresponding view will be shown on the screen

 

 

 

Next post will involve the locking behavior of UI :Locking Activity Orientation in Android

 

Thanks for reading this post.

Happy Coding!! J

 


Don't want to miss updates? Please click the below button!

Follow MindStick