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 .







































































Posted by



at







































3 comments:








  1. Sielmat KȚP15 January 2017 at 11:49
    Man this is very helpfull. Thank you for sharing your code. 
    ReplyDelete
  2. Unknown15 January 2017 at 23:56
    thanks dear..
    ReplyDelete
  3. Unknown27 May 2017 at 00:52
    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




































        

      









Subscribe to:
Post Comments (Atom)