Thursday, 5 January 2017

Android Material Design Sliding Navigation Drawer





Hello Friends Today i am going to write an important code of material design sliding navigation drawer . Please follow me step by step ....

Download Full Source Code from here

1. http://viid.me/qu50SE
2. http://verified-download.com/file/36c_J


Step 1 : Create a Project with package name > com.demo.ritesh and create a MainActivity along with activity_main layout file 

Step 2 : open your build.gradle file and add this code and sync your project
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) compile 'com.android.support:appcompat-v7:25.1.0' compile 'com.android.support:design:25.1.0' testCompile 'junit:junit:4.12'} After add this code the complete build.gradle file is :
apply plugin: 'com.android.application' android { compileSdkVersion 25 buildToolsVersion "25.0.2" defaultConfig { applicationId "com.demo.ritesh" minSdkVersion 10 targetSdkVersion 25 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) compile 'com.android.support:appcompat-v7:25.1.0' compile 'com.android.support:design:25.1.0' testCompile 'junit:junit:4.12'}
Step 3 : open your res > value >colors.xml (if not available create new
colors.xml in res >values folder) and paste this code .



<?xml version="1.0" encoding="utf-8"?><resources> <color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color>
</resources> </resources>


Step 4 : open your res > value >dimens.xml (if not available create new
dimens.xml in res >values folder) and paste this code .

<resources>
 <dimen name="nav_header_vertical_spacing">6dp</dimen> 
<dimen name="nav_header_height">180dp</dimen> 
 <dimen name="activity_horizontal_margin">16dp</dimen> 
 <dimen name="activity_vertical_margin">16dp</dimen> 
 <dimen name="fab_margin">16dp</dimen> 
</resources>

Step 5 : open your res > value >strings.xml  and paste this code .

<resources> <string name="app_name">MaterialDrawerExample</string> <string name="navigation_drawer_open">Open navigation drawer</string> <string name="navigation_drawer_close">Close navigation drawer</string> <string name="action_settings">Settings</string> <string name="action_home">Home</string> <string name="action_album">Album</string> <string name="action_favourite">Favourite</string> <string name="action_share">Share</string> </resources>
Step 6 : open your res > value >strings.xml  and paste this code .
<resources>
  <string name="app_name">MaterialDrawerExample</string> 
  <string name="navigation_drawer_open">Open navigation drawer</string> 
<string name="navigation_drawer_close">Close navigation drawer</string> 
 <string name="action_settings">Settings</string> 
<string name="action_home">Home</string> 
 <string name="action_album">Album</string> 
 <string name="action_favourite">Favourite</string> 
 <string name="action_share">Share</string> 
</resources>


Step 7 : open your activity_main.xml and paste this code
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="start"> <include layout="@layout/app_bar_main" android:layout_width="match_parent" android:layout_height="match_parent" /> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer" /> </android.support.v4.widget.DrawerLayout> Step 8 : Create new layout app_bar_main.xml and paste this code


<?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" 
 android:fitsSystemWindows="true" 
 
tools:context="com.demo.ritesh.MainActivity"> 
 <android.support.design.widget.AppBarLayout 
  android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 
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="?attr/colorPrimary" 
 app:popupTheme="@style/AppTheme.PopupOverlay" /> 
</android.support.design.widget.AppBarLayout> 
 <include layout="@layout/content_main" /> 
 <android.support.design.widget.FloatingActionButton 
  android:id="@+id/fab" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_gravity="bottom|end" 
 android:layout_margin="@dimen/fab_margin" 
 app:srcCompat="@android:drawable/ic_dialog_email" /> 
</android.support.design.widget.CoordinatorLayout>

Step 9 : Create new layout  content_main.xml  and paste this code

<?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:id="@+id/content_main" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 
 android:paddingBottom="@dimen/activity_vertical_margin" 
 
 android:paddingLeft="@dimen/activity_horizontal_margin" 
 
 android:paddingRight="@dimen/activity_horizontal_margin" 
 
 android:paddingTop="@dimen/activity_vertical_margin" 
 
 app:layout_behavior="@string/appbar_scrolling_view_behavior" 
 
 tools:context="com.demo.ritesh.MainActivity" 
 
 tools:showIn="@layout/app_bar_main"> 
<FrameLayout 
 
 android:id="@+id/frame_container" 
 
 android:layout_width="match_parent" 
 
 android:layout_height="match_parent" /> 
</RelativeLayout>

Step 10: your manifest.xml look like this
<?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" 
  package="com.demo.ritesh"> 
<application 
 
 android:allowBackup="true" 
 
 android:icon="@mipmap/ic_launcher" 
 
 android:label="@string/app_name" 
 
 android:supportsRtl="true" 
 
 android:theme="@style/AppTheme"> 
 <activity 
 
 android:name=".MainActivity" 
 
 android:label="@string/app_name" 
 
 android:theme="@style/AppTheme.NoActionBar"> 
 <intent-filter> 
 <action android:name="android.intent.action.MAIN" /> 
 <category android:name="android.intent.category.LAUNCHER" /> 
 </intent-filter> 
 </activity> 
 </application> 
</manifest>

Step 11 : Create new side_nav_bar.xml in drawable and paste this code
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle"> 
<gradient 
  android:angle="135" 
 android:centerColor="#4CAF50" 
 android:endColor="#2E7D32" 
 android:startColor="#81C784" 
 android:type="linear" /> 
</shape>

Step 12 : Create new side_nav_bar.xml in drawable and paste this code
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"> <gradient android:angle="135" android:centerColor="#4CAF50" android:endColor="#2E7D32" android:startColor="#81C784" android:type="linear" /> </shape>
Step 13 : Create new res >menu > activity_main_drawer.xml and paste this code

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/nav_home" android:icon="@drawable/ic_action_home" android:title="@string/action_home" /> <item android:id="@+id/nav_album" android:icon="@drawable/ic_action_album" android:title="@string/action_album" /> <item android:id="@+id/nav_favourite" android:icon="@drawable/ic_action_favourite" android:title="@string/action_favourite" /> <item android:id="@+id/nav_settings" android:icon="@drawable/ic_action_settings" android:title="@string/action_settings" /> </group> <item android:title="Communicate"> <menu> <item android:id="@+id/nav_share" android:icon="@drawable/ic_action_share" android:title="@string/action_share" /> </menu> </item> </menu> Step 14 : Create new res >menu > main.xml (optional menu) and paste this code
<?xml version="1.0" encoding="utf-8"?> 

 <menu xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:app="http://schemas.android.com/apk/res-auto"> 

<item android:id="@+id/action_settings" 
 
android:orderInCategory="100" 
  android:title="@string/action_settings" 
 app:showAsAction="never" /> 
<item android:id="@+id/action_home" 
  android:orderInCategory="100" 
 android:title="@string/action_home" 
 
app:showAsAction="never" /> 
<item android:id="@+id/action_share" 
  android:orderInCategory="100" 
 android:title="@string/action_share" 
 android:icon="@drawable/ic_action_share" 
 
app:showAsAction="always" /> 
</menu>

Step 15 : Open you MainActivity.java and paste this code

package com.demo.ritesh; 

import android.os.Bundle; 


import android.support.design.widget.FloatingActionButton; 


import android.support.design.widget.Snackbar; 


import android.support.v4.app.Fragment; 


import android.support.v4.app.FragmentManager; 


import android.support.v4.app.FragmentTransaction; 


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; 


import com.fragment.AlbumFragment; 


import com.fragment.HomeFragment; 


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); 


 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); 


 fab.setOnClickListener(new View.OnClickListener() { 


 @Override public void onClick(View view) { 


 Snackbar.make(view, "Clicked Floating Button", Snackbar.LENGTH_LONG) 


 .setAction("Action", null).show(); 


 } }); 


 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) { 


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


 return true; 


 } 
@Override public boolean onOptionsItemSelected(MenuItem item) { 


 int id = item.getItemId(); 


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


 Snackbar.make(getWindow().getDecorView(), "Settings", Snackbar.LENGTH_LONG) 


 .setAction("Action", null).show(); 


 return true; 


 } 
if (id == R.id.action_home) { 


 Snackbar.make(getWindow().getDecorView(), "Home", Snackbar.LENGTH_LONG) 


 .setAction("Action", null).show(); 


 return true; 


 } 
if (id == R.id.action_share) { 


 Snackbar.make(getWindow().getDecorView(), "Share", Snackbar.LENGTH_LONG) 


 .setAction("Action", null).show(); 


 return true; 


 } 
return super.onOptionsItemSelected(item); } 


 @Override public boolean onNavigationItemSelected(MenuItem item) { 


 // Handle navigation item clicks . int id = item.getItemId(); 


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


 gotoFragment(new HomeFragment()); 


 } else if (id == R.id.nav_album) { 


 gotoFragment(new AlbumFragment()); 


 } else if (id == R.id.nav_favourite) { 


 } else if (id == R.id.nav_settings) { 


 } else if (id == R.id.nav_share) { 


 } 
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); 


 drawer.closeDrawer(GravityCompat.START); 


 return true; 
 } 
private void gotoFragment(Fragment fragment) { 


 FragmentManager fm=getSupportFragmentManager(); FragmentTransaction ft=fm.beginTransaction(); 


 ft.replace(R.id.frame_container,fragment).commit(); } 


}



Step 16 : Create a package com.fragment
Step 17 : Create a fragment HomeFragment.java in com.fragment package

package com.fragment; 
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; 
import com.demo.ritesh.R; 


/** * Created by riteshsingh on 06/01/17. */ 
public class HomeFragment extends Fragment { 
 @Nullable @Override 
 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { 
View view=inflater.inflate(R.layout.home,container,false); 
 return view; 
} 
 @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { 
 super.onActivityCreated(savedInstanceState); } 
}



Step 18 : Create a layout home.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:text="Home" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:id="@+id/textView3" android:textSize="18sp" /> </RelativeLayout>

Step 19 : Create a fragment AlbumFragment.java in com.fragment package
package com.fragment; 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; import com.demo.ritesh.R; /** * Created by riteshsingh on 06/01/17. */ public class AlbumFragment extends Fragment {
 @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { 
 View view=inflater.inflate(R.layout.gallery,container,false); 
 return view; } 
 @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { 

 super.onActivityCreated(savedInstanceState); } 


}

Step 20 : Create a layout gallery.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:text="Album" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:id="@+id/textView2" android:textSize="18sp" /> </RelativeLayout>

Step 21 : Download this image and add in your drawable-hdpi folder
Step 20 : Run Your Project and enjoy .

4 comments:

  1. Man this is very helpfull. Thank you for sharing your code.

    ReplyDelete
  2. I simply want to say I’m very new to blogs and actually loved you’re blog site. Almost certainly I’m going to bookmark your blog post . You absolutely come with great well written articles. Thanks a lot for sharing your blog.
    Android training in chennai with placement | Android Training in chennai |Android Training in Velachery

    ReplyDelete
  3. This information is impressive; I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.Android Training institute in chennai with placement | Best Android Training in velachery

    ReplyDelete