articles

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

Leveraging Action bar in android : List Navigation

Anonymous User4978 17-Feb-2015

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 to MainActivity.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 Contextwe 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,

Leveraging Action bar in android : List Navigation

 

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

 

Leveraging Action bar in android : List Navigation

 

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

 

Leveraging Action bar in android : List Navigation

 

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

Thanks for reading this post.

Happy Coding!!J

 


Updated 28-Dec-2019
I am a content writter !

Leave Comment

Comments

Liked By