Xamarin Android: Create Android Navigation Drawer Layout Using Support Design

Anbu Mani

10y87.6k79100Article

79 Comments

Join the conversation! Your thoughts help the community grow.

Bhavesh Ghul8y ago
I am Create Android Navigation Drawer Layout Design Is Complied but how to Manage Select Menu that Time Selected Menu Layout Open...???
karthik bandi8y ago
Where my main.axml file contains three image buttons....Can i implement navigation drawer with existed design
- Anbu Mani8y ago
  Check that icon have in drawable folder
karthik bandi8y ago
How can i implement this with already existed design in main.axml
Maha Azzam8y ago
I have so many errors in the cs file and the style file
- Anbu Mani8y ago
  What Errors your getting ?
am se8y ago
Hi ,in mainActivity.xaml i load a fragment under *include layout=@layout / toolbar"* but not displayed. why ?
- Anbu Mani8y ago
  Please Check Page Content,Sometimes page names getting issues
Terrer Sandman8y ago
I followed your code and it says that the drawerLayout does not exist in the current context. Not only that, other name too.
mohtashim siddiq8y ago
I know the article is old. But if you could add some more detail it would be helpful
- Anbu Mani8y ago
  Sure...I will update soon thanks
mohtashim siddiq8y ago
Hi I am new to xamarin. Could you just explain the article why are we adding things and whats the pupose.
- Anbu Mani8y ago
  Its will be help to make Master page like Menus
zohre rafiei8y ago
Hi . thank u . i try to add a button in my main page above navigation layout but this button creat on toolbar. how i can do it well?
- Anbu Mani8y ago
  Hi..You can create separate page fro toolbar then add this page...
Hossein Rezapour8y ago
Hi. I try to add a listview and textview to show any items in my main page, but i don't know how can i do that.In which part can I use this tool? how can i do this in main.xml?
- Anbu Mani8y ago
  Above Navigation Layout Create Separate Layout then inside you can use all those ur requirements
ahmad hamdi8y ago
Just a question , how can make right to left navigation toolbar and menu drawer? layout thanks
- Anbu Mani8y ago
  Just Change this Line :; Android:layout_gravity="right"
ahmad hamdi8y ago
Hello mr.mani thanks for your project
Akid Hourieh8y ago
How I can move it to the right side ?! please answer me
- Anbu Mani8y ago
  If You need this Drawer Right Side,you can change android:layout_gravity="right"
- Akid Hourieh8y ago
  Thx for answer but it doesn't work when i change the android:layout_gravity to right the program crashed , help me bro
anesu mugomba8y ago
Hi. how do i change fragments on menu item click?
- Anbu Mani8y ago
  Hi Thanks for your query..Please check below comments.Already i give the solution
Ripdaman Singh9y ago
Hi, you post i so good, please help me, How to open new Activity when clicked on Menu button, and also how to add App logo on ActivityBar. Please help me as soon as.
- Anbu Mani9y ago
  Hi Thanks for your query... OnCreate() HomeNavigationView.NavigationItemSelected += HomeNavigationView_NavigationItemSelected;
- Anbu Mani9y ago
  Private void HomeNavigationView_NavigationItemSelected(object sender, NavigationView.NavigationItemSelectedEventArgs e) { var menuItem = e.MenuItem; menuItem.SetChecked(!menuItem.IsChecked); Intent intent; switch (menuItem.ItemId) { case Resource.Id.YOUR_ID: intent = new Intent(this, typeof(Go_TeamPage)); StartActivity(intent); break; } }
- Ripdaman Singh9y ago
  You are so good, Please help me also how to add the app Logo on ActionBar. for reference, please see the image by using the link. https://drive.google.com/open?id=0BzjOFkNmwGmPWTNYZWc2WnQzanM
Nelson John9y ago
To which layout and where do i add custom content? like adding buttons textviews etc to the body...
- anesu mugomba8y ago
  Hi nelson, if you got the solution can you please help me
Ali M9y ago
How add tab to main page now? i add ActionBar.NavigationMode = ActionBarNavigationMode.Tabs; AddTab("Tab One"); AddTab("Tab Two"); AddTab("Tab Three"); but i have error
- Ali M9y ago
  How can add tab to main page now?
ali ali9y ago
One Question : How To set Direction Of Navigation Drawer to Right Side ?
- ali ali9y ago
  I Find it : set android:supportsRtl="true" in manifest file and so add below code to mainActivity.cs : Window.DecorView.LayoutDirection = LayoutDirection.Rtl;
- Anbu Mani9y ago
  Android:layout_gravity="right" (or) android:layout_gravity="end" Change this one
ali ali9y ago
Thanks For Your Article , Only have One main Notice : in this Article You must use Android Support Design Library Packages Version 23.1.1.1 . at now this package Updated to 25.0.1 and this new version do not work correctly for this Article.
- Anbu Mani9y ago
  Thanks for your information,then I will update
Vaibhav Patil9y ago
Ok thanks i'll try that
Vaibhav Patil9y ago
Please help me with this. I have JsonValue weatherResults = json["weatherObservation"]; when i try to extract data using location.Text = weatherResults["stationName"]; I get whole json string again and eventually program breaks. What should i do ? I have referenced following link : https://developer.xamarin.com/recipes/android/web_services/consuming_services/call_a_rest_web_service/
- Anbu Mani9y ago
  Hi I think u aware of what are the parameters returns the API,so Just Create New Class and Deserialize the Json Data,hope this way working
Vaibhav Patil9y ago
You're the genius :) , I have posted this question on stackoverflow no over answered it correctly. Thank you very much for answer. Are you on stackoverflow, if you're then please post your profile url, I want to follow you on stackoverflow too. Thanks you again. Keep doing good work
- Anbu Mani9y ago
  Https://stackoverflow.com/users/7882018/anbu-m
Vaibhav Patil9y ago
OnOptionsItemSelected(IMenuItem item) Not working. Debugger not even hitting it. I am trying to implement menu item click but nothing working. Please if possible create Navigation menu click tutorial or post some code here. TIA
- Anbu Mani9y ago
  OnCreate() HomeNavigationView.NavigationItemSelected += HomeNavigationView_NavigationItemSelected;
- Anbu Mani9y ago
  Private void HomeNavigationView_NavigationItemSelected(object sender, NavigationView.NavigationItemSelectedEventArgs e) { var menuItem = e.MenuItem; menuItem.SetChecked(!menuItem.IsChecked); Intent intent; switch (menuItem.ItemId) { case Resource.Id.YOUR_ID: intent = new Intent(this, typeof(Go_TeamPage)); StartActivity(intent); break; } }
Vaibhav Patil9y ago
Nice tut. Just you have to mention which library supports which sdkbuild tools. Beginners definitely stuck there.
- Anbu Mani9y ago
  Yes Correct ,but its not possible to working beginners
Alireza King9y ago
Sorry my question is wrong how can I change items background in navigation
- Anbu Mani9y ago
  <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_height="match_parent" android:layout_width="300dp" android:layout_gravity="start" android:fitsSystemWindows="true" app:headerLayout="@layout/nav_header" />
- Anbu Mani9y ago
  Set here ur Background color
Alireza King9y ago
Thanks your samples are geat
Shahul Kt9y ago
Hai i want add user name dynamically how can i do that???
- Anbu Mani9y ago
  Hi.. Its Easy..U need to implement UserName Code this Place .. public override bool OnCreateOptionsMenu(IMenu menu)
Shahul Kt9y ago
I got this error when i open main design Bridge [resources.resolve] Couldn't resolve resource @layout/tool mono.android.DesignerException: You must specifiy a valid layout reference. The layout ID @layout/tool is not valid. at mono.android.DesignerException.fromThrowable(DesignerException.java:43)
- Anbu Mani9y ago
  Hi..please check the tool layout name and if u need add the text in main page,just set Layout inside textbox..its possible ..please try it
Shahul Kt9y ago
I want add some text in main
Yuri Dias9y ago
I'm getting some errors because of the actionbar: 'SetSupportActionBar' does not exist in the current context, 'supportActionBar does not exist in the current context'... any suggestion ? thanks
- Anbu Mani9y ago
  Hi,Try to install Support.V4 Dll Lib file
Antonio Tedeschi9y ago
Thank you. So do I have to duplicate the menu for each page?
- Anbu Mani9y ago
  Cool :-) yes Correct
Antonio Tedeschi9y ago
I would like to set an activity when I select a menu
- Anbu Mani9y ago
  Private void NavigationView_NavigationItemSelected(object sender, NavigationView.NavigationItemSelectedEventArgs e) { var menuItem = e.MenuItem; menuItem.SetChecked(!menuItem.IsChecked); Intent intent; switch (menuItem.ItemId) { case Resource.Id.nav_BtnMyTeam: intent = new Intent(this, typeof(Go_TeamPage)); StartActivity(intent); break; } }
Antonio Tedeschi9y ago
In navigationView.NavigationItemSelected += (sender, e) => { .... }
Antonio Tedeschi9y ago
Where set the content when clic on item menu?
- Anbu Mani9y ago
  Use this code :- navigationView.NavigationItemSelected += navigationView_NavigationItemSelected;
Anbu Mani9y ago
Hi...use navigationView click event
alex vidal9y ago
How to use menu item click event?
Michael Peter10y ago
fantastic!
Bhavik Patel10y ago
Nice
- Anbu Mani10y ago
  Thanks
Ravi Kandel10y ago
Thanks for info!
- Anbu Mani10y ago
  Thanks
Anu V10y ago
Nice
- Anbu Mani10y ago
  Thanks
kalu singh rao10y ago
Nice...
- Anbu Mani10y ago
  Thanks
Abhijeet Singh10y ago
Good one...
- Anbu Mani10y ago
  Thanks

<?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:layout_height="210dp"
android:background="#0099ff"
android:padding="16dp"
android:orientation="vertical"
android:gravity="bottom">
<TextView
android:text="User Name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/navheader_username"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
</LinearLayout>

Step 13: Open Solution Explorer-> Project Name->Resources->layout, right click to Add->New Item. Open new Dialog box. Select axml file and give the name for toolbar.axml,

Step 14: Open Solution Explorer-> Project Name->Resources->Layout->toolbar.axml. Click to open Design View and the code, given below:

<?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"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

Step 15: Open Solution Explorer-> Project Name->Resources->Layout->Main.axml. Click to open Design View and the code, given below:

<?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="match_parent">
<android.support.v4.widget.DrawerLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="fill_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/toolbar" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_height="match_parent"
android:layout_width="300dp"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>

Step 16: After Design view creation, open Solution Explorer-> Project Name->MainActivity.cs and the steps, given below:

Step 17: Add below Namespaces and Theme Name,

using Android.Support.V7.App;
using Android.Support.V4.Widget;
using V7Toolbar = Android.Support.V7.Widget.Toolbar;
using Android.Support.Design.Widget;
[Activity(Theme = "@style/Theme.DesignDemo"])

Step 18: Create Drawer Layout and Navigation View variable, declare the Drawer Layout and Navigation View within the OnCreate().before to change the Activity to AppCompatActivity.

protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
drawerLayout = FindViewById < DrawerLayout > (Resource.Id.drawer_layout);
// Create ActionBarDrawerToggle button and add it to the toolbar
var toolbar = FindViewById < V7Toolbar > (Resource.Id.toolbar);
SetSupportActionBar(toolbar);
var drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, Resource.String.drawer_open, Resource.String.drawer_close);
drawerLayout.SetDrawerListener(drawerToggle);
drawerToggle.SyncState();
navigationView = FindViewById < NavigationView > (Resource.Id.nav_view);
setupDrawerContent(navigationView); //Calling Function
}
void setupDrawerContent(NavigationView navigationView)
{
navigationView.NavigationItemSelected += (sender, e) =>
{
e.MenuItem.SetChecked(true);
drawerLayout.CloseDrawers();
};
}
public override bool OnCreateOptionsMenu(IMenu menu)
{
navigationView.InflateMenu(Resource.Menu.nav_menu); //Navigation Drawer Layout Menu Creation
return true;
}

Step 19: Press F5 or build and run the Application.

Finally, we successfully created Xamarin Android Navigation Drawer Layout Android Support Design.