User Navigation - Toolbar - Fragment - ViewPager - TabLayout

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/toolbar"
        android:layout_alignParentStart="true"></com.google.android.material.tabs.TabLayout>

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_centerHorizontal="true"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tab_layout"
        android:padding="16dp">

    </androidx.viewpager.widget.ViewPager>

</RelativeLayout>

Android Navigation (Toolbar - TabLayout - ViewPager - Fragment ).md

Navigation

App bar navigation

to declare that a activity is a child of another activity and show the back button in the appbar so that we the user clicks it it goes back to the parent activity we add the following code to the manifest:

android:parentActivityName=".MainActivity">

Toolbar

• In order to use a Toolbar rather than an app bar and app title, add the following attributes to the res > values > styles.xml file to hide the app bar and the title:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
   <!-- Other style attributes -->
   <item name="windowActionBar">false</item>
   <item name="windowNoTitle">true</item>
</style>

with that code the default appbar is removed.

we can add a toolbar to activity xml and then we should infiltrate it as the app bar.Visit Mainactivity to see how it is done.

    //To add the toolbar to the activity as the appbar.
    Toolbar toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

Tab navigation

there are two usage for this:

1. Lateral navigation from one category screen to another
2. Lateral navigation from one story screen to another

• The primary class used for tabs is TabLayout in the Android Design Support Library.
• ViewPager is a layout manager that allows the user to flip left and right through pages of data. ViewPager is most often used in conjunction with Fragment.
• Use one of the two standard adapters for using ViewPager: FragmentPagerAdapter or FragmentStatePagerAdapter.

1. FragmentPagerAdapter: Designed for navigating between sibling screens (pages) representing a fixed, small number of screens.
2. FragmentStatePagerAdapter: Designed for paging across a collection of screens (pages) for which the number of screens is undetermined. It destroys each Fragment as the user navigates to other screens, minimizing memory usage.

Add a PagerAdapter

The adapter-layout manager pattern lets you provide different screens of content within an Activity:

• Use an adapter to fill the content screen to show in the Activity.
• Use a layout manager that changes the content screens depending on which tab is selected.

1. We added a TabLayout and a PagerView to the xml of the activity.
2. We Added the PagerAdapter Class that extends FragmentStatePagerAdapter
3. We inflate the TabLayout in the mainactivity.
4. Use PagerAdapter to manage screen views
5. set a listener (TabLayoutOnPageChangeListener) to detect if a tab is clicked, and create the onTabSelected() method to set the ViewPager to the appropriate tabbed screen.

MainActivity.java

package mohammad.samandari.navigationdemo;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.viewpager.widget.ViewPager;

import android.content.Intent;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.TableLayout;

import com.google.android.material.tabs.TabLayout;

public class MainActivity extends AppCompatActivity {

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

        //To add the toolbar to the activity as the appbar.
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        //Inflate and TabLayout
        // Create an instance of the tab layout from the view.
        TabLayout tableLayout = findViewById(R.id.tab_layout);

        // Set the text for each tab.
        tableLayout.addTab(tableLayout.newTab().setText("Tab1"));
        tableLayout.addTab(tableLayout.newTab().setText("Tab2"));
        tableLayout.addTab(tableLayout.newTab().setText("Tab3"));

        // Set the tabs to fill the entire layout.
        tableLayout.setTabGravity(TabLayout.GRAVITY_FILL);

        // Use PagerAdapter to manage page views in fragments.
        // Each page is represented by its own fragment.
        final ViewPager viewPager = findViewById(R.id.viewPager);
        PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager(), tableLayout.getTabCount());
        viewPager.setAdapter(pagerAdapter);

        // Setting a listener for clicks.
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tableLayout));
        tableLayout.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) {
            }
        });
    }

    public void openActivity2 (View view) {
        Intent intent = new Intent(getApplicationContext(), Main2Activity.class);
        startActivity(intent);

    }
}

PagerAdapter.java

package mohammad.samandari.navigationdemo;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;

public class PagerAdapter extends FragmentStatePagerAdapter {

    //we added the following code to this class.

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

    @NonNull
    @Override
    public Fragment getItem (int position) {
        switch (position) {
            case 0: return new TabFragment1();
            case 1: return new TabFragment2();
            case 2: return new TabFragment3();
            default: return null;
        }
    }

    @Override
    public int getCount () {
        return mNumOfTabs;
    }
}

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

</resources>