Action Bar - Sisoft Learningsisoft.in/references/android/ppt9.2_Adv_UI_Navigation_D4.pdf ·...

1

Action Bar

• Action bar: Top navigation bar at each screen

• The action bar is split into four different functional areas that apply to most apps.

• 1) App Icon 2)View Control

• 3) Action Buttons 4) Action Overflows

www.sisoft.in 2

Action Bar

www.sisoft.in 3

• Each definition is stored in a separate file in the res/menu folder.

• XML elements in menu file:

– <menu> : This is the root node for the file and can hold one or more <item> and <group> elements

– <item> : This is the single item in a menu. This may contain a nested <menu> element in order to create submenu

– <group>: An optional, invisible container for <items> element

www.sisoft.in 4

Action buttons/overflow

• <item> element supports following attributes:

• android:id A resource ID that's unique to the item, which allows the application can recognize the item when the user selects it

• android:icon A reference to a drawable to use as the item's icon.

• android:title A reference to a string to use as the item's title.

• android:showAsAction Specifies when and how this item should appear as an action item in the action bar

www.sisoft.in 5

www.sisoft.in 6

<?xml version=”1.0” encoding=”utf-8”?>

<menu xmlns:android=”http://schemas.android.com/apk/res/android”><item

android:id=”@+id/menu_refresh”android:title=”@string/refresh_mi” android:icon="@drawable/group_item1_icon"android:showAsAction="ifRoom|withText"

/>

<item android:id=”@+id/menu_settings”android:title=”@string/settings_mi” />

</menu>

www.sisoft.in 7

•This class is used to instantiate menu XML files into Menu objects• MenuInflater.inflate() method is used for this purpose

MenuInflater inflater = getMenuInflater();inflater.inflate(R.menu.game_menu, menu);

Max of six entries per menu are shown. Excess will be displayed as part of the More option

8www.sisoft.in

Option Menu

Options Menu/Action Bar

• For Android 2.3 or lower, users can reveal the options menu panel by pressing the Menu button

• To specify the options menu for an activity, override onCreateOptionsMenu()(fragments provide their own onCreateOptionsMenu() callback). In this method, you can inflate your menu resource (defined in XML) into the Menu provided in the callback

• When the user selects an item from the options menu (including action items in the action bar), the system calls activity's onOptionsItemSelected() method. This method passes the MenuItem selected.

9www.sisoft.in

Implementing Options Menu/Action Bar

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {

MenuInflater inflater = getMenuInflater();inflater.inflate(R.menu.game_menu, menu);return true;

}

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {

// Handle item selectionswitch (item.getItemId()) {

case R.id.new_game:newGame();return true;

case R.id.help:showHelp();return true;

default:return super.onOptionsItemSelected(item);

}}

10www.sisoft.in

Options Menu/Action Bar

• On Android 3.0 and higher, items from the options menu may be presented as the action bar as a combination of on-screen action items and overflow options

• The action bar is included in all activities that use the Theme.Holo theme (or one of its descendants),

• To request that an item appear directly in the action bar as an action button, include showAsAction="ifRoom" in the <item> tag

android:showAsAction="ifRoom“• When your activity starts, the system populates the

action items by calling your activity's onCreateOptionsMenu()

method and user selection of the option is handled by onOptionsItemSelected()

11www.sisoft.in

• You can change the visibility of the ActionBar at runtime. The following code demonstrates that.

ActionBar actionBar = getActionBar();

actionBar.hide(); // More stuff here...

actionBar.show();

• You can also change the text which is displayed alongside the application icon at runtime. The following example shows that:

ActionBar actionBar = getActionBar(); actionBar.setSubtitle("mytest"); actionBar.setTitle(“sisoft.in");

www.sisoft.in 12

Customizing the Action Bar

• The action bar shows an icon for the application, this is called the home icon.

• We can add an action to this icon. If you select this icon the onOptionsItemSelected() method will be called with the value android.R.id.home

• The recommendation is to return to the main activity in your program

• Split action bar: provides a separate bar at the bottom of the screen to display all action items (API 14+)

• To enable split action bar, Add uiOptions= "splitActionBarWhenNarrow" to each <activity> element or to the <application> element.

www.sisoft.in 13

Options for the ActionBar

• This code may not be required anymore, you can simply set the parentActivityName in the AndroidManifest.xml file, pointing to the parent activity.

www.sisoft.in 14

// If home icon is clicked return to main Activitycase android.R.id.home:

Intent intent = new Intent(this, OverviewActivity.class); intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); break;

<activity android:name=“in.sisoft.android.actionbar.customviews.SecondActivity" android:label="@string/app_name" android:parentActivityName="MainActivity">

</activity>

Options for the Actionbar

• NAVIGATION_MODE_STANDARD : Consists ofeither a logo or icon and title text with anoptional subtitle. Clicking any of theseelements will dispatch onOptionsItemSelectedto the host Activity with a MenuItem with itemID android.R.id.home.

• NAVIGATION_MODE_TAB: Offers tab navigation

• NAVIGATION_MODE_LIST: Offers a built in drop-down list()

www.sisoft.in 15

ActionBar: Navigation Modes

• Specify the Action Bar Mode to TabactionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

• Implement the ActionBar.TabListener interface. – This interface provides callbacks for tab events, such as when

the user presses one so you can swap the tabs.

• Add new Tabs using ActionBar.Tab and set Text, Icon and Listener

Tab tab1 = actionBar.newTab().setText("Tab " + (i + 1)).setTabListener(tabListener));

• Then add each tab to the action bar by calling addTab()– actionbar.addtab(tab1)

www.sisoft.in 16

ActionBar: Navigation Tab

• Create a SpinnerAdapter that provides the list of selectable items for the drop-down and the layout to use when drawing each item in the list.

• Implement ActionBar.OnNavigationListenerto define the behavior that occurs when the user selects an item from the list.

• During your activity's onCreate() method, enable the action bar's drop-down list by calling

setNavigationMode(NAVIGATION_MODE_LIST)

• Set the callback for the drop-down list with setListNavigationCallbacks()

www.sisoft.in 17

ActionBar: Drop Down Navigation

ToolBar

• A Toolbar is a generalization of action bars for use within application layouts.

• While an action bar is traditionally part of an Activity'sopaque window decor controlled by the framework,

• A Toolbar may be placed at any arbitrary level of nesting within a view hierarchy.

• An application may choose to designate a Toolbar as the action bar for an Activity using the setActionBar()method.

• Toolbar supports a more focused feature set than ActionBar.

www.sisoft.in 18

View Pager(Swipe Views)

www.sisoft.in 19

Viewpager is the best way to switchingamong view. It provide a way to swipe views fromleft to right and right to left. Viewpager providestrong way to swipe any views .

• It does not support in lower android version soadd the support library when you are usingviewpager in your application.

• ViewPagers source their views from PagerAdapters which give you have full control over the reuse and recycling of the views.

www.sisoft.in 20

To create viewpager do following steps.

1. Create a xml file and add the support library to use viewpager.

2. Then in MainActivity create object of ViewPagerAdapter classand set Adapter to ViewPager object using setAdapter method.

3. In ViewPagerAdapter class implement PagerAdapter to generatethe pages that the view shows.

www.sisoft.in 21

1. Create a xml file and add the support library to use viewpager.

www.sisoft.in 22

<RelativeLayout 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“

tools:context=".ViewPagerSimpleMainActivity" >

<RelativeLayout

android:id="@+id/relativeTextview"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_below="@+id/header"

android:padding="5dp" >

<android.support.v4.view.ViewPager

android:id="@+id/reviewpager"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#D2691E" />

</RelativeLayout>

</RelativeLayout> www.sisoft.in 23

2. Then in MainActivity create object ofViewPagerAdapter class and set Adapter toViewPager object using setAdapter

method.

www.sisoft.in 24

public class MainActivity extends Activity

{

int size=6;

ViewPager mypager;

@Override

protected void onCreate (Bundle savedInstanceState) {

super. onCreate (savedInstanceState);

setContentView (R.layout.activity_view_pager_simple_main);

ViewPagerAdapter adapter = new ViewPagerAdapter(MainActivity.this, size);

mypager = (ViewPager) findViewById(R.id.reviewpager);

mypager.setAdapter(adapter);

mypager.setCurrentItem(0);

}

www.sisoft.in 25

ViewPagerAdapter adapter = new ViewPagerAdapter(MainActivity. this, size);

In this line we cerate an object of ViewPagerAdapter class. Sowe create a class this name and create a constructor of thisclass and passes the argument from main activity class toViewPagerAdapter Class.

www.sisoft.in 26

public class ViewPagerAdapter{int noofpages ;Activity act;public ViewPagerAdapter (MainActivity mainactivity , int size){Noofpages =size; Act=mainactivity ;}

3. In ViewPagerAdapter class implementPagerAdapter to generate the pages thatthe view shows.

www.sisoft.in 27

In ViewPagerAdapter Class when we implement PagerAdapter

then we must override below methods at minimum :

1. instantiateItem(ViewGroup container , int position) :Create the page for the given position.

2. destroyItem(ViewGroup container , int position , Object ob) :Remove a page for the given position.

3. getCount(): Return the number of views available.

4. isViewFromObject(View v , Object ob ) : Determines whether apage View is associated with a specific key object as returnedby instantiateItem(ViewGroup, int). This method is required fora PagerAdapter to function properly.

www.sisoft.in 28

1. public int getCount()

@Override

public int getCount() {

// TODO Auto-generated method stub

return noofpages;

}

www.sisoft.in 29

2. public boolean isViewFromObject (View v, Object o)

@Override

public boolean isViewFromObject (View v, Object o) {

// TODO Auto-generated method stub

return v== ((View) o);

}

www.sisoft.in 30

3. public Object instantiateItem (View v, int pos)

Parameters

Container : The containing View in which the page will be shown.

Position: The page position to be instantiated.

Returns

Returns an Object representing the new page. This does not need to be a View, but can be some other container of the page.

www.sisoft.in 31

4. public void destroyItem (ViewGroup container, int position, Object object)

Parameters

Container: The containing View from which the page will be removed .

Position: The page position to be removed.

Object: The same object that was returned by instantiateItem(View, int).

www.sisoft.in 32

Activity

ViewPager with PageNumbers Example in Android

www.sisoft.in 33

<RelativeLayout 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“

tools:context=".ViewPagerSimpleMainActivity" >

<RelativeLayout

android:id="@+id/relativeTextview"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_below="@+id/header"

android:padding="5dp" >

<android.support.v4.view.ViewPager

android:id="@+id/reviewpager"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#D2691E" />

</RelativeLayout>

</RelativeLayout> www.sisoft.in 34

public class MainActivity extends Activity

{

int size=6;

ViewPager mypager;

@Override

protected void onCreate (Bundle savedInstanceState) {

super. onCreate (savedInstanceState);

setContentView (R.layout.activity_view_pager_simple_main);

ViewPagerAdapter adapter = new ViewPagerAdapter(MainActivity.this, size);

mypager = (ViewPager) findViewById(R.id.reviewpager);

mypager.setAdapter(adapter);

mypager.setCurrentItem(0);

}

www.sisoft.in 35

MainActivity.class

public class ViewPagerAdapter extends PagerAdapter

{

int noofpages;

Activity act;

View layout;

TextView pagenumber;

Button click;

public ViewPagerAdapter(

ViewPagerSimpleMainActivity viewPagerSimpleMainActivity, int size) {

// TODO Auto-generated constructor stub

noofpages=size;

act=viewPagerSimpleMainActivity;

}

www.sisoft.in 36

ViewPagerAdapter.class

@Override

public int getCount() {

// TODO Auto-generated method stub

return noofpages;

}

@Override

public boolean isViewFromObject(View arg0, Object arg1) {

// TODO Auto-generated method stub

return arg0 == ((View) arg1);

}

www.sisoft.in 37

ViewPagerAdapter.class

@Override

public Object instantiateItem(View container, int position)

{

LayoutInflater inflater = (LayoutInflater) act

.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

layout = inflater.inflate(R.layout.pages, null);

pagenumber = (TextView) layout.findViewById(R.id.pagenumber);

int pagenumberTxt=position + 1;

pagenumber.setText("Now your in Page No " +pagenumberTxt );

((ViewPager) container).addView(layout, 0);

return layout;

}

www.sisoft.in 38

ViewPagerAdapter.class

@Override

public void destroyItem(View arg0, int arg1, Object arg2) {

((ViewPager) arg0).removeView((View) arg2);

}

}

www.sisoft.in 39

ViewPagerAdapter.class

Run

www.sisoft.in 40

Navigation Drawer

www.sisoft.in 41

The navigation drawer is a panel that displays theapp’s main navigation options on the left edge ofthe screen. It is hidden most of the time, but isrevealed when the user swipes a finger from theleft edge of the screen or, while at the top level ofthe app, the user touches the app icon in theaction bar.

With navigation drawer, you can easily develop appwith YouTube or Google+ apps like navigation.

www.sisoft.in 42

www.sisoft.in 43

Create a Navigation Drawer

www.sisoft.in 44

• To add a navigation drawer, declare your userinterface with aDrawerLayout object as the root viewof your layout. Inside theDrawerLayout, add oneview that contains the main content for the screen(your primary layout when the drawer is hidden) andanother view that contains the contents of thenavigation drawer.

www.sisoft.in 45

DrawerLayout : DrawerLayout acts as a top-levelcontainer for window content that allows forinteractive "drawer" views to be pulled out from theedge of the window.

FrameLayout : FrameLayout is used to replace themain content using Fragments and it should bealways the first child of the layout for z-indexpurpose.

www.sisoft.in 46

XML Layout

www.sisoft.in 47

<android.support.v4.widget.DrawerLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/drawer_layout"android:layout_width="match_parent"android:layout_height="match_parent">

<!-- The main content view --><FrameLayout

android:id="@+id/frame_container"android:layout_width="match_parent"android:layout_height="match_parent" />

<!-- The navigation drawer list --><ListViewandroid:id="@+id/navList"android:layout_width="200dp"android:layout_height="match_parent"android:layout_gravity="left|start"android:background="#ffeeeeee"/>

</android.support.v4.widget.DrawerLayout>

This layout demonstrates some important layout characteristics:

1. The main content view (the FrameLayout above) must be the firstchild in the DrawerLayout because the XML order implies z-ordering andthe drawer must be on top of the content.

2. The main content view is set to match the parent view's width andheight, because it represents the entire UI when the navigation drawer ishidden.

3. The drawer view (the ListView) must specify its horizontal gravity withthe android:layout_gravityattribute. To support right-to-left (RTL)languages, specify the value with "start" instead of "left" (so the drawerappears on the right when the layout is RTL).

4. The drawer view specifies its width in dp units and the height matchesthe parent view. The drawer width should be no more than 320dp so theuser can always see a portion of the main content.

www.sisoft.in 48

www.sisoft.in 49

In main activity we do following things:

1. Initialize the Drawer List.

2. Handle Navigation Click Events

3. Add a Toggle Switch in the Action Bar

4. Listen for Open and Close Events

5. Open and Close with the App Icon

1. Initialize the Drawer List

1. The first thing in main activity is to initialize thenavigation drawer's list of items. Navigation draweroften consists of a ListView, which should bepopulated by an Adapter (suchas ArrayAdapter or SimpleCursorAdapter).

2. If the list of items present in resource file. Then weuse another coding to get those items.

www.sisoft.in 50

1. Coding

public class MainActivity extends Activity {

String[] arraylist = {"Android","Cupcake","Dunut","Eclair","Froyo“};DrawerLayout dl;ListView lv;ArrayAdapter<String> adapter;

@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);

lv = (ListView) findViewById(R.id.left_drawer);

adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,arraylist);

// Set the adapter for the list viewlv.setAdapter(adapter);

51www.sisoft.in

2. Coding

public class MainActivity extends Activity {

String[] arraylist ;ListView lv;ArrayAdapter<String> adapter;

@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);

lv = (ListView) findViewById(R.id.left_drawer);arraylist= getResources().getStringArray(R.array.titles);

adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,arraylist);

// Set the adapter for the list viewlv.setAdapter(adapter);

52www.sisoft.in

2. Handle Navigation Click Events

When the user selects an item in the drawer's list, the systemcalls onItemClick() on the OnItemClickListener givento setOnItemClickListener().

•

www.sisoft.in 53

Coding

lv.setOnItemClickListener(new OnItemClickListener(){@Override

public void onItemClick(AdapterView<?> parent, View v, int position, long id) {Toast.makeText(MainActivity.this, "Time for an upgrade!", Toast.LENGTH_SHORT).show();}

This is the minimum basic code we need for a navigation drawer, but there is much more we can do!

54www.sisoft.in

3. Enabling action bar app icon

• We can use the default icon providedby Android with a few more changes in ourActivity. We can show it by adding two lines inour onCreate() method.

www.sisoft.in 55

// enabling action bar app icon and behaving it as toggle buttongetActionBar().setDisplayHomeAsUpEnabled (true);getActionBar().setHomeButtonEnabled (true);

www.sisoft.in 56

• Let’s start with a few new member variable for thisnew object. We need one for the toggle, one forthe DrawerLayout we added to our layout, and aString that we will use to update the title in theAction Bar:

• private ActionBarDrawerToggle mDrawerToggle;

• private DrawerLayout mDrawerLayout;

• private String mActivityTitle;

ActionBarDrawerToggle1. This class provides a handy way to tie together the

functionality of DrawerLayout and theframework ActionBar to implement the recommendeddesign for navigation drawers.

When using the ActionBarDrawerToggle, you must call itfollowing methods corresponding to your Activity callbacks:

1. onPostCreate()

2. onConfigurationChanged()...

3. onOptionsItemSelected()

4. onPrepareOptionsMenu()

www.sisoft.in 57

• Note that the icon isn’t quite in sync with thedrawer. So we need to call onPostCreate() lifecyclemethod in our Activity.

• Inside onPostCreate(), call mDrawerToggle.syncState() tosync the indicator to match the current state of thenavigation drawer.

www.sisoft.in 58

protected void onPostCreate(Bundle savedInstanceState) {super.onPostCreate(savedInstanceState);// Sync the toggle state after onRestoreInstanceState has occurred.mDrawerToggle.syncState();

}

1. onPostCreate()

The other scenario we need to plan for to keep things in syncis when the configuration of the Activity changes, like, forexample, going from portrait to landscape or showing thesoft keyboard on the screen. We do this in theActivity’s onConfigurationChanged() method, which you mayneed to add:

www.sisoft.in 59

@Overridepublic void onConfigurationChanged(Configuration c)

{super. OnConfigurationChanged(c);// Pass any configuration change to the drawer togglesmDrawerToggle.onConfigurationChanged (c);

}

2. onConfigurationChanged()

1. This method should be called byyour Activity's onOptionsItemSelected method. If itreturns true, youronOptionsItemSelected methodshould return true and skip further processing.

www.sisoft.in 60

@Overridepublic boolean onOptionsItemSelected (MenuItem item) { // toggle nav drawer on selecting action bar app icon/title

if (mDrawerToggle.onOptionsItemSelected(item)) { return true;

}// Handle action bar actions click

switch (item.getItemId()) {case : R.id.action_settingsreturn true;

default : return super.onOptionsItemSelected(item);

}}

3. onOptionsItemSelected()

Called when invalidateOptionsMenu() is triggered

www.sisoft.in 61

Called when invalidateOptionsMenu() is triggered*/

@Overridepublic boolean onPrepareOptionsMenu (Menu menu) {

// if nav drawer is opened, hide the action itemsboolean d = mDrawerLayout.isDrawerOpen (mDrawerList);menu.findItem (R.id.action_settings).setVisible(!d);return super.onPrepareOptionsMenu(menu);

}

4) onPrepareOptionsMenu(Menu menu)

4. Make ActionBar app icon as a Toggle Button

• To do this firstly set mDrawerLayout nd mActivityTitle in onCreate().

• Using a toggle requires two String resources, so let’s add those in strings.xml.

www.sisoft.in 62

private ActionBarDrawerToggle mDrawerToggle;private DrawerLayout mDrawerLayout;

private String mActivityTitle;

mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout); mActivityTitle = getTitle().toString();

<string name="drawer_open">Open navigation drawer</string> <string name="drawer_close">Close navigation drawer</string>

5. Listen for Open and Close Events

www.sisoft.in 63

www.sisoft.in 64

We want to create a new ActionBarDrawerToggle instancethat uses the context, mDrawerLayout, and those two newstring resources we added, and then we need to implementtwo methods:

1. onDrawerOpened()

2. onDrawerClosed():

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.drawer_open, R.string.drawer_close)

private void setupDrawer()

{

}

{ /** Called when a drawer has settled in a completely open state. */

public void onDrawerOpened (View drawerView)

{ }

/** Called when a drawer has settled in a completely closed state. */ public void onDrawerClosed (View v) { } };

www.sisoft.in 65

At this point our toggle still won’t work. We need to add twomore lines to enable the drawer indicator (the lovelyhamburger menu) and then attach this new toggle object toour drawer layout. Add these two linesin setupDrawer() after mDrawerToggle is set:

private void setupDrawer () {mDrawerToggle. setDrawerIndicatorEnabled (true);mDrawerLayout. setDrawerListener (mDrawerToggle);}

www.sisoft.in 66

• When the drawer is opened, we can set a new title for theAction Bar (if we want). We also want to invalidate theoptions menu in case it needs to be recreated with differentoptions for when the navigation drawer is open:

/** Called when a drawer has settled in a completely open state. */

public void onDrawerOpened(View drawerView)

{

getActionBar().setTitle("Navigation!");

invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()

}

www.sisoft.in 67

And then when it is closed we will do the opposite. Revert thetitle (which we stored inmActivityTitle) and again invalidatethe options menu:

/** Called when a drawer has settled in a completely closed state. */public void onDrawerClosed(View view){super.onDrawerClosed(view);

getActionBar().setTitle(mActivityTitle);invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()

}

Run

www.sisoft.in 68

Context Menu

• There are two ways to provide contextual actions:

• In a floating context menu. A menu appears as a floating list of menu items (similar to a dialog) when the user performs a long-click (press and hold) on a view that declares support for a context menu. Users can perform a contextual action on one item at a time.

• In the contextual action mode. This mode is a system implementation of ActionMode that displays a contextual action bar at the top of the screen with action items that affect the selected item(s). When this mode is active, users can perform an action on multiple items at once (if your app allows it).

69www.sisoft.in

Using Context Menu

Long-press a textbox to invoke its Context Menu

Each view could have an associated Context Menu

70www.sisoft.in

Creating a floating context menu

• Register the View to which the context menu should be associated by calling registerForContextMenu()

and pass it the View. If your activity uses a ListView or GridView and you want each item to provide the same context menu, register all items for a context menu by passing the ListView or GridView to registerForContextMenu()

• Implement the onCreateContextMenu() method in your Activity or Fragment

• Implement onContextItemSelected(). When the user selects a menu item, the system calls this method so you can perform the appropriate action.

71www.sisoft.in