In this article we will see how to use the Design Support Library to create an android app with Material design Navigation Drawer and Swipe Tabs. Simplified user navigation is the most important challenge that every developer faces and by the usage of Navigation Drawer and Swipe Tabs it's really cool to do it.
Let start...
- AutoTabFragment.java
- LifeStyleTabFragment.java
- ExpoTabFragment.java
- BookmarkFragment.java
- HomeFragment.java
*Now add these dependencies to your project:
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:22.2.1'
compile 'com.android.support:design:22.2.1'
}
*Download and extract the icon set to res=>drawable folder DOWNLOAD.
*In addition to 'activity_main.xml',Create the following xml files in res=>layout folder:
- auto_tab_layout.xml
- bookmark_layout.xml
- expo_tab_layout.xml
- home_tab_layout.xml
- lifestyle_tab_layout.xml
- nav_header.xml
*Paste the below code to res=>values=>style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#139D57</item>
<item name="colorPrimaryDark">#9CC266</item>
</style>
</resources>
*Paste the below code to res=>values=>color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#000</color>
<color name="orange">#139D57</color>
<color name="white">#FFF</color>
</resources>
*Create navigation_drawer_menu.xml in res=>menu, and paste the below code to it:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="Home"
android:id="@+id/nav_item_home"
android:icon="@drawable/home"/>
<item android:title="Bookmarks"
android:id="@+id/nav_item_bookmark"
android:icon="@drawable/bookmark"/>
<item android:title="New Page"
android:id="@+id/nav_item_newp"
android:icon="@drawable/newp"/>
<item android:title="Others">
<menu>
<item
android:title="Backups"
android:icon="@drawable/backup"/>
<item
android:title="Store"
android:icon="@drawable/store"/>
</menu>
</item>
<group android:id="@+id/group_settings_id">
<item android:title="Notifications"
android:icon="@drawable/messages"/>
<item android:title="Help"
android:icon="@drawable/help"/>
</group>
</menu>
*Paste the below code to res=>layout=>activity_main.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/orange"
android:id="@+id/toolbar"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="MyCreativeCodes.in" />
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="@+id/drawerLayout"
>
<FrameLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/containerView">
</FrameLayout>
<android.support.design.widget.NavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="@+id/nav_drawer"
app:itemTextColor="@color/black"
app:headerLayout="@layout/nav_header"
app:menu="@menu/navigation_drawer_menu"
android:layout_marginTop="-24dp"
/>
</android.support.v4.widget.DrawerLayout>
</LinearLayout> <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="#fff"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Auto Tab"
android:textColor="@color/error_color"
android:textSize="50dp"
android:id="@+id/textView"
/>
</RelativeLayout>
*Paste the below code to res=>layout=>bookmark_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="#fff"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Bookmark Tab"
android:textColor="@color/error_color"
android:textSize="50dp"
android:id="@+id/textView"
/>
</RelativeLayout>
*Paste the below code to res=>layout=>expo_tab_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="#fff"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Expo Tab"
android:textColor="@color/error_color"
android:textSize="50dp"
android:id="@+id/textView"
/>
</RelativeLayout>
*Paste the below code to res=>layout=>home_tab_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
app:tabGravity="fill"
app:tabMode="fixed"
android:background="@color/material_blue_grey_800"
app:tabIndicatorColor="@color/orange"
app:tabSelectedTextColor="@color/orange"
app:tabTextColor="@color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout> *Paste the below code to res=>layout=>lifestyle_tab_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="#fff"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Life Style Tab"
android:textColor="@color/error_color"
android:textSize="50dp"
android:id="@+id/textView"
/>
</RelativeLayout> *Paste the below code to res=>layout=>nav_header.xml
This is the header section of the navigation drawer.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="150dp"
android:background="@drawable/headerbg"
android:id="@+id/headerlayout">
<ImageView
android:layout_width="156dp"
android:layout_height="match_parent"
android:id="@+id/imageView"
android:background="@drawable/account"
android:layout_gravity="center_horizontal" />
</LinearLayout>
That's for the res section, now copy and paste the below java codes to corresponding files:
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by jauhar xlr on 18/4/2016.
*/
public class AutoTabFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.auto_tab_layout,null);
return rootView;
}
} *LifeStyleTabFragment.java
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by Jauhar xlr on 4/18/2016.
* mycreativecodes.in
*/
public class LifStyleTabFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.lifestyle_tab_layout,null);
return rootView;
}
}
*ExpoTabFragment.java
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by Jauhar xlr on 4/18/2016.
* mycreativecodes.in
*/
public class ExpoTabFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.expo_tab_layout,null);
return rootView;
}
}
*BookmarkFragment.java
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by Jauhar xlr on 4/18/2016.
* mycreativecodes.in
*/
public class BookmarkFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.bookmark_layout,null);
return rootView;
}
}
*HomeFragment.java
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by Jauhar xlr on 4/18/2016.
* mycreativecodes.in
*/
public class HomeFragment extends Fragment {
public static TabLayout tabLayout;
public static ViewPager viewPager;
public static int int_items = 3 ;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
/**
*Inflate tab_layout and setup Views.
*/
View x = inflater.inflate(R.layout.home_tab_layout,null);
tabLayout = (TabLayout) x.findViewById(R.id.tabs);
viewPager = (ViewPager) x.findViewById(R.id.viewpager);
/**
*Set an Apater for the View Pager
*/
viewPager.setAdapter(new MyAdapter(getChildFragmentManager()));
/**
* Now , this is a workaround ,
* The setupWithViewPager dose't works without the runnable .
* Maybe a Support Library Bug .
*/
tabLayout.post(new Runnable() {
@Override
public void run() {
tabLayout.setupWithViewPager(viewPager);
}
});
return x;
}
class MyAdapter extends FragmentPagerAdapter{
public MyAdapter(FragmentManager fm) {
super(fm);
}
/**
* Return fragment with respect to Position .
*/
@Override
public Fragment getItem(int position)
{
switch (position){
case 0 : return new LifStyleTabFragment();
case 1 : return new AutoTabFragment();
case 2 : return new ExpoTabFragment();
}
return null;
}
@Override
public int getCount() {
return int_items;
}
/**
* This method returns the title of the tab according to the position.
*/
@Override
public CharSequence getPageTitle(int position) {
switch (position){
case 0 :
return "Life Style";
case 1 :
return "Auto";
case 2 :
return "Expo";
}
return null;
}
}
}
*MainActivity.java
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
/**
* Created by Jauhar xlr on 4/18/2016.
* mycreativecodes.in
*/
public class MainActivity extends AppCompatActivity{
DrawerLayout myDrawerLayout;
NavigationView myNavigationView;
FragmentManager myFragmentManager;
FragmentTransaction myFragmentTransaction;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/**
*Setup the DrawerLayout and NavigationView
*/
myDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
myNavigationView = (NavigationView) findViewById(R.id.nav_drawer) ;
/**
* Lets inflate the very first fragment
* Here , we are inflating the HomeFragment as the first Fragment
*/
myFragmentManager = getSupportFragmentManager();
myFragmentTransaction = myFragmentManager.beginTransaction();
myFragmentTransaction.replace(R.id.containerView, new HomeFragment()).commit();
/**
* Setup click events on the Navigation View Items.
*/
myNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem selectedMenuItem) {
myDrawerLayout.closeDrawers();
if (selectedMenuItem.getItemId() == R.id.nav_item_home) {
FragmentTransaction fragmentTransaction = myFragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.containerView, new HomeFragment()).commit();
}
if (selectedMenuItem.getItemId() == R.id.nav_item_bookmark) {
FragmentTransaction xfragmentTransaction = myFragmentManager.beginTransaction();
xfragmentTransaction.replace(R.id.containerView, new BookmarkFragment()).commit();
}
return false;
}
});
/**
* Setup Drawer Toggle of the Toolbar
*/
android.support.v7.widget.Toolbar toolbar = (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar);
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, myDrawerLayout, toolbar,R.string.app_name,
R.string.app_name);
myDrawerLayout.setDrawerListener(mDrawerToggle);
mDrawerToggle.syncState();
}
}
It's done, run your project to see the magic!
