Android ToolBar With Tab and Horizontal Swipe View

Android ToolBar With Tab and Horizontal Swipe View

In this tutorial we are going to learn how to implement Android ToolBar with Tab and horizontal Swipe View.

In my last android tutorial, we went through how to create Android Tab with Swipe Views, ViewPager, FragmentPagerAdapter in Android Studio. The android project makes use of the android ActionBar.

The Android ToolBar was released in other that developers will use it to replace the ActionBar. So if you try to recreate our previous tutorial by using a ToolBar instead of an ActionBar, your appication will create because all the calls for getActionBar() will return null.

If you have not work with Android ToolBar, you can learn more about Android ToolBar by reading my android tutorial on Android ToolBar Tutorial with Material Design.

We are going to create a new android project, thereafter we will make switch from ActionBar to ToolBar. In other to achieve our top navigation Tab with horizontal swipe, we are going to make use of SlidingTabLayout java class and SlidingTabStrip made available by Google Android Team.

Right now there is no simple android API that you can use to create a Tab component in android ToolBar.

You can download the SlidingTabLayout is Google developers guide website.

Now lets briefly show case what we will like to achieve in this android tutorial. The screen shot below represent the user interface.

androidTabs

Before we start, the first thing I will do is to list the environment and tools I used in this android tutorial but feel free to use whatever environment or tools you are familiar with.

Windows 7

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 19

To create a new android application project, following the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidToolBarWithTabAndSwipeView

Package: com.inducesmile.androidtoolbarwithtabandswipeview

In the add Activity to mobile window pop-up, select Blank Activity and click continue

Enter the name of the project as shown below

Keep other default selections.

Continue to click on next button until Finish button is active, then click on Finish Button

First we have to change our project Theme style. In other to use the Tool, we will let our AppTheme to inherit from Theme.AppCompat.Light.NoActionBar. We will also override the ActionBar default background color and Accent color.

The updated version of our project Styles.xml is as shown.

<resources>

<!-- Base application theme. -->

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

<!-- Customize your theme here. -->

<item name="colorPrimary">@color/color_primary</item>

<item name="colorPrimaryDark">@color/color_primary_dark</item>

<item name="colorAccent">@color/accent_color</item>

</style>

</resources>

Since we made use of colors in our Styles.xml file, we are going to create a colors.xml in our project values > colors.xml. Copy and paste the following code on this xml file.

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

<resources>

<color name="color_primary">#2196F3</color>

<color name="color_primary_dark">#1976D2</color>

<color name="accent_color">#536DFE</color>

<color name="black_color">#000000</color>

<color name="white_color">#ffffff</color>

</resources>

We have added some string resources in the Strings.xml file. So copy and paste the following code in the file.

<resources>

<string name="app_name">Android ToolBar with Swipe Tab</string>

<string name="hello_world">Hello world!</string>

<string name="action_settings">Settings</string>

<string name="logo_desc">App logo</string>

<string name="hello_blank_fragment">Hello blank fragment</string>

<string name="amino_title">Glycine</string>

<string name="amino_content">Click on the Navigation Drawer icon on the top left to selection a menu Click on the Navigation Drawer icon on the top left to selection a menu Click on the Navigation Drawer icon on the top left to selection a menu </string>

</resources>

activity_main.xml

The activity_main.xml file is the main layout file in our android project. It contain a parent ViewGroup that wraps other content of the layout.

In other to add the Toolbar View in the layout file, we used the code below.

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:minHeight="?attr/actionBarSize"

android:background="@color/color_primary"

android:layout_width="match_parent"

android:layout_height="64dp">

</android.support.v7.widget.Toolbar>

You can see that the android ToolBar is present in Android support library version 7.

To add the Tab component in our project, we are going to use this code.

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content">

<inducesmile.com.androidswipeviewandtoolbar.SlidingTabLayout

android:id="@+id/sliding_tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content">

</inducesmile.com.androidswipeviewandtoolbar.SlidingTabLayout>

</LinearLayout>

You will see that we are making use of the SlidingTabLayout we download from Android developers website. When you open the file, you will see that the SlidingTabLayout extends from the HorizontalScrollView – class SlidingTabLayout extends HorizontalScrollView

Finally, the layout also conatin a VeiwPager that will house the content of each Tab page. The ViewPager uses an Adapter to bind its data source to the page. The complete is as shown.

<android.support.v4.view.ViewPager xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/pager"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="inducesmile.com.completeorganicchemistry.AminoAcidActivity" />

The complete code for the main layout file (activity_main.xml) is shown.

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

android:orientation="vertical">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:minHeight="?attr/actionBarSize"

android:background="@color/color_primary"

android:layout_width="match_parent"

android:layout_height="64dp">

</android.support.v7.widget.Toolbar>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content">

<inducesmile.com.androidswipeviewandtoolbar.SlidingTabLayout

android:id="@+id/sliding_tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content">

</inducesmile.com.androidswipeviewandtoolbar.SlidingTabLayout>

</LinearLayout>

<android.support.v4.view.ViewPager xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/pager"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="inducesmile.com.completeorganicchemistry.AminoAcidActivity" />

</LinearLayout>

MainActivity.java

We are going to add some class member variables in this class to hold reference to objects of the class.

In the onCreate(Bundle savedInstanceState) method of the Activity class, we are going to add the following to get a handle for our ToolBar and also assign a description for the ToolBar.

Toolbar topToolBar = (Toolbar)findViewById(R.id.toolbar);

setSupportActionBar(topToolBar);

topToolBar.setLogo(R.drawable.logo);

topToolBar.setLogoDescription(getResources().getString(R.string.logo_desc));

To implement the android Tab, we are going to create an object of the SectionsPagerAdapter class. The SectionsPagerAdapter is an inner adapter class that inherits from the FragmentPagerAdapter. It is uses the FragmentManager to manager individual Fragment class that is on focus. It is pass as a parameter to the ViewPager setAdapter method.

mViewPager = (ViewPager) findViewById(R.id.pager);

mViewPager.setAdapter(mSectionsPagerAdapter);

mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs);

mSlidingTabLayout.setViewPager(mViewPager);

The instance of our SlidingTabLayout we obtained will call its setViewPager()   method and the ViewPager object will be passed as its parameter.

Another important part of the code that is important to mention is the SectionPageAdapter. This innr adapter class has getItem(int position)  method that we will use to replace Fragment class that will be attach to the ViewPager. The code is as shown.

@Override

public Fragment getItem(int position) {

Fragment fragment = null;

switch (position){

case 0:

fragment = new GeneralFragment();

break;

case 1:

fragment = new Fragment();

break;

}

return fragment;

}

Also, you will notice that the MainActivity class implements ActionBar.TabListener which forces the class to implement three methods from the Interface as shown.

@Override

public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

mViewPager.setCurrentItem(tab.getPosition());

}

@Override

public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

}

@Override

public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

}

The complete code for our MainActivity.java file as as shown.

package inducesmile.com.androidswipeviewandtoolbar;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.app.FragmentTransaction;

import android.support.v4.view.ViewPager;

import android.support.v7.app.ActionBar;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.Menu;

import android.view.MenuItem;

import java.util.Locale;

public class MainActivity extends AppCompatActivity implements ActionBar.TabListener{

SectionsPagerAdapter mSectionsPagerAdapter;

ViewPager mViewPager;

static final String LOG_TAG = "SlidingTabsBasicFragment";

private SlidingTabLayout mSlidingTabLayout;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar topToolBar = (Toolbar)findViewById(R.id.toolbar);

setSupportActionBar(topToolBar);

topToolBar.setLogo(R.drawable.logo);

topToolBar.setLogoDescription(getResources().getString(R.string.logo_desc));

mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

// Set up the ViewPager with the sections adapter.

mViewPager = (ViewPager) findViewById(R.id.pager);

mViewPager.setAdapter(mSectionsPagerAdapter);

mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs);

mSlidingTabLayout.setViewPager(mViewPager);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.menu_main, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, so long

// as you specify a parent activity in AndroidManifest.xml.

int id = item.getItemId();

//noinspection SimplifiableIfStatement

if (id == R.id.action_settings) {

return true;

}

return super.onOptionsItemSelected(item);

}

@Override

public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

mViewPager.setCurrentItem(tab.getPosition());

}

@Override

public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

}

@Override

public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

}

public class SectionsPagerAdapter extends FragmentPagerAdapter {

public SectionsPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int position) {

Fragment fragment = null;

switch (position){

case 0:

fragment = new GeneralFragment();

break;

case 1:

fragment = new Fragment();

break;

}

return fragment;

}

@Override

public int getCount() {

return 2;

}

@Override

public CharSequence getPageTitle(int position) {

Locale l = Locale.getDefault();

switch (position) {

case 0:

return "General Properties".toUpperCase(l);

case 1:

return "Physical Properties".toUpperCase(l);

}

return null;

}

}

}

As I stated above about the getItem(int position)  method of the SectionPageAdapter, we are going to create two Fragment classes for our two Tabs.

The first Fragment class is GeneralFragment. Copy and paste this code in the file.

package inducesmile.com.androidswipeviewandtoolbar;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class GeneralFragment extends Fragment {

public GeneralFragment() {

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_general, container, false);

return view;

}

}

The layout file for the GeneralFragment class is fragment_general.xml. The code content of the file is as shown.

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

android:padding="16dp"

android:background="@color/white_color"

tools:context="inducesmile.com.completeorganicchemistry.GeneralFragment">

<TextView

android:id="@+id/amino_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:layout_marginTop="24dp"

android:text="@string/amino_title"

android:textStyle="bold"

android:textSize="16sp"

android:textColor="@color/black_color"

android:layout_centerHorizontal="true"/>

<ImageView

android:id="@+id/amino_image"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/amino_title"

android:layout_centerHorizontal="true"

android:layout_marginTop="32dp"

android:src="@drawable/tabimage"/>

<TextView

android:id="@+id/amino_content"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_marginLeft="16dp"

android:text="@string/amino_content"

android:layout_marginTop="24dp"

android:layout_below="@+id/amino_image"/>

</RelativeLayout>

Finally, we will create the second fragment class called PhysicalFragment class. Copy and paste this code to the class.

package inducesmile.com.androidswipeviewandtoolbar;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class PhysicalFragment extends Fragment {

public PhysicalFragment() {

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_physical, container, false);

return view;

}

}

The layout file that this Fragment class inflate is fragment_physical.xml. The layout file code is shown below.

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

android:padding="16dp"

tools:context="inducesmile.com.androidswipeviewandtoolbar.PhysicalFragment">

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:textSize="20sp"

android:textColor="@color/black_color"

android:text="@string/amino_content" />

</FrameLayout>

Now, when you run your application you will see the interface that looks similar to the sample that was shown earlier on.

You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

Remember to subscribe with your email so that you will be among the first to receive our new post once it is published.

Add a Comment