Android Developer Fundamentals

Lesson 4

1
4.3 Screen Navigation

2
Contents
● Back navigation
● Hierarchical navigation
○ Up navigation
○ Descendant navigation
○ Navigation drawer for descendant navigation
○ Lists and carousels for descendant navigation
○ Ancestral navigation
○ Lateral navigation
3
Two forms of navigation
Temporal or back navigation
● provided by the device's back button
● controlled by the Android system's back stack

Ancestral or up navigation
● provided by the app's action bar
● controlled by defining parent-child relationships between
activities in the Android manifest
4
Back Navigation

5
Navigation through history of screens
1.Historys starts from Launcher

2.User clicks the Back button to

navigate to the previous screens in
reverse order

6
Changing Back button behavior
● Android system manages the back stack and Back button
● If in doubt, don't change
● Only override, if necessary to satisfy user expectation

For example: In an embedded browser, trigger browser's default back

behavior when user presses device Back button

7
Overriding onBackPressed()

@Override
public void onBackPressed() {
// Add the Back key handler here.
return;
}

8
Hierarchical
Navigation

9
Hierarchical navigation patterns
● Parent screen—Screen that enables navigation down to child
screens, such as home screen and main activity
● Collection sibling—Screen enabling navigation to a collection
of child screens, such as a list of headlines
● Section sibling—Screen with content, such as a story

10
 Example of a screen hierarchy
1.Parent screen 1 News App

2.Children: collection siblings 2 Top Stories Tech News Cooking

3.Children: section siblings Headline Headline Headline
Headline Headline Headline
Headline Headline Headline
Use activities or fragments to Headline Headline Headline

implement a hierarchy
3 Story Story Story

11
Types of hierarchical navigation
● Descendant navigation
○ Down from a parent screen to one of its children
○ From a list of headlines to a story summary to a story
● Ancestral navigation
○ Up from a child or sibling screen to its parent
○ From a story summary back to the headlines
● Lateral navigation
○ From one sibling to another sibling
○ Swiping between tabbed views

12
Descendant
Navigation

13
 Descendant navigation
Descendant navigation News App
● Down from a parent screen to
Top Stories Tech News Cooking
one of its children Headline Headline Headline
● From the main screen to a list Headline Headline Headline
Headline Headline Headline
of headlines to a story Headline Headline Headline

Story Story Story

14
Master/detail flow
● Side-by side on tablets ● Multiple screens on phone

15
Controls for descendant navigation

● Buttons, image buttons on main screen

● Other clickable views with text and icons
● Arranged in horizontal or vertical rows, or as a grid
● List items on collection screens

16
Navigation
Drawer for
Descendant
Navigation

17
Navigation drawer

1.Icon in app bar

2.Header
3.Menu items

18
Steps for navigation drawer

1.Create layouts for drawer, drawer header, drawer menu items, app
bar, activity screen contents
2.Add navigation drawer and item listeners to activity code
3.Handle the navigation drawer menu item selections

19
Navigation drawer activity layout
1.DrawerLayout is root view
2.CoordinatorLayout contains
app bar layout with a Toolbar
3.App content screen layout
4.NavigationView with layouts for 3

header and selectable items

4

20
Other descendant navigation patterns
● Vertical list, such as RecyclerView
● Vertical grid, such as GridView
● Lateral navigation with a Carousel
● Multi-level menus, such as the Options menu
● Master/detail navigation flow

21
Ancestral
Navigation

22
Ancestral navigation (Up button)
● Enable user to go up from a section
or child screen to the parent

23
Declare activity’s parent in Android manifest

<activity android:name=".OrderActivity"
android:label="@string/title_activity_order"
android:parentActivityName="com.example.android.
optionsmenuorderactivity.MainActivity">
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value=".MainActivity"/>
</activity>

24
 Lateral
Navigation

25
 Tabs and swipes
Lateral navigation News App
● Between siblings
Top Stories Tech News Cooking
● From a list of stories to a list Headline Headline Headline
Headline
in a different tab Headline Headline
Headline
Headline Headline
● From story to story under the Headline Headline Headline

same tab
Story Story Story

26
Benefits of using tabs and swipes
● A single, initially-selected tab—users have
access to content without further
navigation
● Navigate between related screens without
visiting parent

27
Best practices with tabs

● Lay out horizontally

● Run along top of screen
● Persistent across related screens
● Switching should not be treated as history

28
 Steps for implementing tabs
1.Define the tab layout using TabLayout
2.Implement a fragment and its layout for each tab
3.Implement a PagerAdapter from FragmentPagerAdapter or
FragmentStatePagerAdapter
4.Create an instance of the tab layout
5.Manage screen views in fragments
6.Set a listener to determine which tab is tapped
See Practical for coding details; summary in following slides

29
 Add tab layout below Toolbar
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/toolbar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

30
 Add view pager below TabLayout

<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="@id/tab_layout" />

31
 Create a tab layout in onCreate()
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

32
 Add the view pager in onCreate()

final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);

final PagerAdapter adapter = new PagerAdapter (
getSupportFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(adapter);

33
 Add the listener in onCreate()
viewPager.addOnPageChangeListener(
new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.addOnTabSelectedListener(
new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());}
@Override
public void onTabUnselected(TabLayout.Tab tab) {}
@Override
public void onTabReselected(TabLayout.Tab tab) {} });
34
Learn more
● Navigation Design guide
d.android.com/design/patterns/navigation.html
● Designing effective navigation
d.android.com/training/design-navigation/index.html
● Creating a Navigation Drawer
d.android.com/training/implementing-navigation/nav-drawer.html
● Creating swipe views with tabs
d.android.com/training/implementing-navigation/lateral.html

35
What's Next?

● Concept Chapter: 4.3 C Screen Navigation

● Practical: 4.3 P Using the App Bar and Tabs for Navigation

36
END

37