Android Developer Fundamentals V2

User Interaction

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android
AndroidDeveloper
DeveloperFundamentals V2 User
FundamentalsV2 Usernavigation
navigation Commons Attribution 4.0 International
Creative Commons Attribution 4.0 International License

1
License.
Creative Commons Attribution 4.0 International License
4.4 User navigation

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

2
License.
Creative Commons Attribution 4.0 International License
Contents
● Back navigation
● Hierarchical navigation
○ Up navigation
○ Descendant navigation
● Navigation drawer for descendant navigation
○ Lists and carousels for descendant navigation
○ Ancestral navigation
○ Lateral navigation

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

3
License.
Creative Commons Attribution 4.0 International License
Two forms of navigation
Back (temporal) navigation
● Provided by the device's Back button
● Controlled by the Android system back stack

Ancestral (Up) navigation

● Up button provided in app bar
● Controlled by defining parent Activity for child
Activity in the AndroidManifest.xml
This work is licensed under a Creative
Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

4
License.
Creative Commons Attribution 4.0 International License
 Back
Navigation

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

5
License.
Creative Commons Attribution 4.0 International License
Navigation through history of screens
1. Historys starts from Launcher

2. User clicks the Back button

to navigate to previous screens
in reverse order

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

6
License.
Creative Commons Attribution 4.0 International License
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

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

7
License.
Creative Commons Attribution 4.0 International License
Overriding onBackPressed()

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

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

8
License.
Creative Commons Attribution 4.0 International License
Hierarchical
Navigation

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

9
License.
Creative Commons Attribution 4.0 International License
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

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

10
License.
Creative Commons Attribution 4.0 International License
Example of a screen hierarchy
1. Parent 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 Activity for parent screen Headline Headline Headline
● Use Activity or Fragment for
children screens
3 Story Story Story

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

11
License.
Creative Commons Attribution 4.0 International License
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
This work is licensed under a Creative
Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

12
License.
Creative Commons Attribution 4.0 International License
Descendant
Navigation

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

13
License.
Creative Commons Attribution 4.0 International License
 Descendant navigation
Descendant navigation News App

● Down from a parent screen Top Stories Tech News Cooking

to one of its children Headline Headline Headline

Headline Headline Headline
Headline Headline Headline
● From the main screen to a Headline Headline Headline

list of headlines to a story

Story Story Story

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

14
License.
Creative Commons Attribution 4.0 International License
Master/detail flow
● Side-by side on tablets ● Multiple screens on phone

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

15
License.
Creative Commons Attribution 4.0 International License
Controls for descendant navigation
● Navigation drawer
● 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

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

16
License.
Creative Commons Attribution 4.0 International License
Navigation
Drawer

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

17
License.
Creative Commons Attribution 4.0 International License
Navigation drawer

Descendant navigation
1. Icon in app bar
2. Header
3. Menu items

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

18
License.
Creative Commons Attribution 4.0 International License
Layouts for for navigation drawer
Create layouts:
● A navigation drawer as the Activity layout root ViewGroup
● A navigation View for the drawer itself
● An app bar layout that includes room for a navigation icon button
● A content layout for the Activity that displays the navigation drawer
● A layout for the navigation drawer header

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

19
License.
Creative Commons Attribution 4.0 International License
Navigation drawer Activity layout
1. DrawerLayout is root view
2. CoordinatorLayout contains
app bar layout with a Toolbar
3. App content screen layout
3

4. NavigationView with layouts for

header and selectable items
4

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

20
License.
Creative Commons Attribution 4.0 International License
Steps to implement navigation drawer

1. Populate navigation drawer menu with item titles and icons

2. Set up navigation drawer and item listeners in the Activity
code
3. Handle the navigation menu item selections

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

21
License.
Creative Commons Attribution 4.0 International License
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

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

22
License.
Creative Commons Attribution 4.0 International License
Ancestral
Navigation

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

23
License.
Creative Commons Attribution 4.0 International License
Ancestral navigation (Up button)
● Enable user to go up from a section
or child screen to the parent

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

24
License.
Creative Commons Attribution 4.0 International License
Declare parent of child Activity—AndroidManifest

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

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

25
License.
Creative Commons Attribution 4.0 International License
 Lateral
Navigation

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

26
License.
Creative Commons Attribution 4.0 International License
 Tabs and swipes
Lateral navigation News App

● Between siblings Top Stories Tech News Cooking

Headline Headline Headline
● From a list of stories to a Headline Headline Headline
Headline Headline Headline
list in a different tab Headline Headline Headline

● From story to story under

the same tab Story Story Story

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

27
License.
Creative Commons Attribution 4.0 International License
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

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

28
License.
Creative Commons Attribution 4.0 International License
Best practices with tabs

● Lay out horizontally

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

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

29
License.
Creative Commons Attribution 4.0 International License
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. Use PagerAdapter to manage screens (each screen is a Fragment)
6. Set a listener to determine which tab is tapped

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

30
License.
Creative Commons Attribution 4.0 International License
 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"/>

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

31
License.
Creative Commons Attribution 4.0 International License
 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" />

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

32
License.
Creative Commons Attribution 4.0 International License
 Create a tab layout in onCreate()

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);

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

33
License.
Creative Commons Attribution 4.0 International License
 Add the view pager in onCreate()

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

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

This work is licensed under a Creative

Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

34
License.
Creative Commons Attribution 4.0 International License
 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) {} });
This work is licensed under a Creative
Creative Commons Attribution 4.0 International License

Android Developer Fundamentals V2 User navigation Commons Attribution 4.0 International

Creative Commons Attribution 4.0 International License

35
License.
Creative Commons Attribution 4.0 International License
END

Android Developer Fundamentals V2 38