Cohort+Problem+8+-+Tab+Navigation

=Introduction=

If you are a Whatsapp user, you will notice that you can navigate among the various screens using tabs. In this example, we'll show you how to implement Tab Navigation.

=Resources=

Textbook Section 4.2 - [|App Bar and Options Menu] Textbook Section 4.3 - Lateral Navigation with Tabs and Swipes Practical Section 4.3 - Using the App Bar and Tabs

=What we'll cover=

Toolbar Widget
We've shown you how to make an **overflow menu** (the part with the three dots) in the **app bar.** In this example, we specify a **Toolbar** widget for the app bar. This ensures that your app bar works on a wide range of devices.

Tab Layout and View Pager
The tab layout is suitable if you have a small number of child screens that are related to each other. The ViewPager allows you to swipe left and right between the tabs.

Steps are as follows


 * 1) Define a TabLayout and a ViewPager widget in your app layout.
 * 2) The content in each tab is defined in a Fragment.
 * 3) Implement the PagerAdapter which then populates the ViewPager widget with the chosen fragment.
 * 4) Add a tab listener to determine which tab is tapped.

=Part 1 - Set Up=

and edit Your Gradle File
The grade file is under Gradle Scripts -> build.grade (Module: App). Add the following to the part with already similar code.

code format="make" compile 'com.android.support:design:26.+' compile 'com.android.support:support-v4:26.+' code For those of you who upgraded to Android Studio 3.0, look at the syntax there and follow it.

XML Layout using Relative Layout
Within a **relative layout** tag, put the following layout

code format="xml" 



 code

Recall
A fragment is a reusable portion of the UI.

How to create
To create a fragment, right-click on Java, New->Fragment->Fragment(Blank). In the window that appears,


 * you may have to adjust the name of the xml layout file if it gets too long
 * uncheck "include fragment factory methods?" and "include interface callbacks?"

Each fragment has its own class definition and inflates its own layout file. At this stage, you may proceed to populate each layout with a widget of your choice.

=Part 2 - Create the PagerAdapter=

Purpose
The pager adapter is the link between the fragments and the current screen. It fills the screen with the selected fragment.

Code Skeleton
Create a PagerAdapter class that extends FragmentStatePagerAdapter. The class definition has a red underline, so place your cursor there and press Alt+Enter to implement the methods.

code format="java" public class PagerAdapter extends FragmentStatePagerAdapter {

int mNumOfTabs;

public PagerAdapter(FragmentManager fm, int mNumOfTabs){ super(fm); this.mNumOfTabs = mNumOfTabs; }

//TODO 2.1 - implement the method skeleton by using Alt+Enter //TODO 2.2 - getItem takes in a position and returns a fragment //           depending on the position chosen //TODO 2.3 - getCount returns the number of tabs

} code With this code skeleton, implement the TODOs.

=Part 3 - Main Activity=

Code Skeleton
The code skeleton is below.

code format="java" public class MainActivity extends AppCompatActivity {

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_blank);

//TODO 3.1 get a reference to the toolbar and inflate it using setSupportActionBar //TODO 3.2 [go to res/values] put your tab names in the string resources //TODO 3.3 get a reference to the tab_layout widget //TODO 3.4 call the addTab method to add a tab //TODO 3.5 fill the space using setTabGravity method //TODO 3.6 get a reference to the viewPager widget //TODO 3.7 create an instance of the PagerAdapter class //TODO 3.8 assign the adapter to the viewPager using setAdapter //TODO 3.9 synchronise the tabs to the swipes by calling the viewPager.addOnPageChangeListener //TODO 3.10 respond to clicks on the tabs by calling tabLayout.addOnPageChangeListener

}

code

Most of the code is found in the android developer fundamentals course practical book section 4.3.

Hence, I just make a few points here.

In **TODO 3.1 - 3.5**, you are setting up the Tab layout.

In **TODO 3.6 - 3.8**, you are assigning the adapter to the viewPager widget. This allows the adapter to do its job of obtaining the fragment objects upon swiping and placing them in the container. By this stage, you will be able to swipe left and right.

However, notice something about the tabs - They are not in sync with the swiping. We are coupling the ViewPager widget with the Tabs.
 * TODO 3.9** corrects this using the TabLayoutOnPageChange listener.

Your user may want to "click" on the tabs instead, and **TODO 3.10** enables this.

=Part 4 - Watch this space=

Depending on the time that we have ...