Use Navigation Drawer with Tabs in Android.
Navigation drawers provide access to destinations and app functionality, switching tabs. Tabs can either be permanently on-screen or controlled by a navigation menu icon. Navigation drawers are consumed for, with five or more top-level targets, two or more levels of navigation hierarchy, Fast navigation between unrelated target.
Firstly create new project like
File -> new project -> Name it as like NavigationDraweerwithTabs -> select minimum SDK like 14 ->select Navigation Drawer Activity.
Goto app_bar_main.xml
- Under Toolbar add TabLayout.
- Here added three tabs more
- Remove FloatingActionButton.
- Give TabLayout id as tabs.
- Make tabMode scrollable.
Here is,
app_bar_main.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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="com.example.nipu.navigationwithtabs.MainActivity"> <include layout="@layout/content_main" /> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#008080" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="#008080" app:popupTheme="@style/AppTheme.PopupOverlay" /> <android.support.design.widget.TabLayout app:tabMode="scrollable" android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="One" /> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Two" /> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Three" /> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Four" /> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Five" /> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Six" /> </android.support.design.widget.TabLayout> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout>
Remove floatingActionButton code portion from MainnActivity.java
- Create java class tabpagerAdapter which extends FragmentStatePagerAdapter.
- Using ALT+ENTER implements all the methods and constructor.
- Add an Override method getPageTitle charsequence type which returns tabs String type array with position.
- Add viewpager in content_main.xml.
- Create six blank fragments with xml. In tabpagerAdapter, Overridden method getItem() add switch statement to add corresponding tabs.
- Overridden method getItem() return the number of tabs.
Here is,
content_main.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout 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" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.example.nipu.navigationwithtabs.MainActivity" tools:showIn="@layout/app_bar_main"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> </android.support.constraint.ConstraintLayout>
tabpagerAdapter.java
package com.example.nipu.navigationwithtabs;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
public class tabpagerAdapter extends FragmentStatePagerAdapter {
String[] tabarray = new String[]{"One","Two","Three","Four","Five","Six"};
Integer tabnumber = 6;
public tabpagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public CharSequence getPageTitle(int position) {
return tabarray[position];
}
@Override
public Fragment getItem(int position) {
switch (position)
{
case 0:
one one1 = new one();
return one1;
case 1:
two two2 = new two();
return two2;
case 2:
three three3 = new three();
return three3;
case 3:
four four4 = new four();
return four4;
case 4:
five five5 = new five();
return five5;
case 5:
six six6 = new six();
return six6;
}
return null;
}
@Override
public int getCount() {
return tabnumber;
}
}
Now goto,
MainActivity.java
- Initialize TabLayout, Viewpager.
- Create object tabpagerAdapter and set with viewpager
- Set viewpager with TabLayout.
Here is code for,
MainActivity.java
package com.example.nipu.navigationwithtabs;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TabLayout tabLayout =(TabLayout)findViewById(R.id.tabs);
ViewPager Pager =(ViewPager)findViewById(R.id.viewpager);
tabpagerAdapter Tabpageradapter = new tabpagerAdapter(getSupportFragmentManager());
Pager.setAdapter(Tabpageradapter);
tabLayout.setupWithViewPager(Pager);
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
}
@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.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);
}
@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();
if (id == R.id.nav_camera) {
// Handle the camera action
} else if (id == R.id.nav_gallery) {
} else if (id == R.id.nav_slideshow) {
} else if (id == R.id.nav_manage) {
} else if (id == R.id.nav_share) {
} else if (id == R.id.nav_send) {
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
}
youtube link: https://goo.gl/WKGN3H
project link: https://goo.gl/RWmGeG