Xamarin: An Introduction to develop a soundcloud (Part 2)
Today I introduce the effective navigation in xamarin.android....
The root of my app will be a standard Android XML that will house three important items:
- DrawerLayout: Top-level container for an interactive drawer
- Your Content: What you want to display on your main activity (usually a fragment that is swapped out)
- NavigationView: Easy way of implementing the navigation drawer and inflating menu items
Here is the standard code for your Android XML:
In Main.xaml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="@android:color/white">
<!-- your content layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:titleTextColor="@android:color/background_light" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@android:color/white"
android:id="@+id/nav_view"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/navmenu" />
</android.support.v4.widget.DrawerLayout>
Add the menu:
You should note two attributes for NavigationView. Which such as app:headerLayout and app:menu.
app:headerLayout is the layout used for the header. app:menu is the menu resource inflated for the navigation items.
In navmenu.xml. That will just contain a few items for souncloud application.
<?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_music"
android:icon="@drawable/ic_filter_list_black_24dp"
android:title="All music genres" />
<item
android:id="@+id/nav_audio"
android:checked="true"
android:icon="@drawable/ic_fiber_new_black_24dp"
android:title="All audio genres" />
<item
android:id="@+id/nav_genre"
android:icon="@drawable/ic_toc_black_48dp"
android:title="Genres" />
<item
android:id="@+id/nav_download"
android:icon="@drawable/ic_get_app_black_48dp"
android:title="Download" />
</group>
<item android:title="Account">
<menu>
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_about"
android:icon="@drawable/ic_lock_open_black_48dp"
android:title="About me"/>
<item
android:id="@+id/nav_signout"
android:icon="@drawable/ic_perm_identity_black_48dp"
android:title="Sign in"/>
</group>
</menu>
</item>
</menu>
In drawer_header.xaml. This is the header layout. I use it for showing account when I login in souncloud. This code will show a email, fullname and register days.
<?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:layout_height="190dp"
android:background="@android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<FFImageLoading.Views.ImageViewAsync
android:id="@+id/imgThunbailUser"
android:layout_width="60dp"
android:layout_height="60dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/txtUsername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:textColor="#000000"
android:padding="5dp"
android:textSize="15dp" />
<TextView
android:id="@+id/txtlast_modified"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#CCCCCC"
android:layout_marginLeft="16dp"
android:layout_marginTop="5dp"
android:textSize="10dp"
android:padding="5dp"
android:textStyle="normal" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
In the end
Code behind setup
You have to do now is fill in a little bit of code behind to click events to open and close the drawer. react when a menu item is selected. An event handler to the navigationView is NavigationItemSelected event.
protected override void OnCreate (Bundle savedInstanceState)
{
base.OnCreate (savedInstanceState);
// Set our view from the "main" layout resource
//ActionBar.NavigationMode = ActionBarNavigationMode.Tabs;
SetContentView (Resource.Layout.Main);
navigationView = FindViewById<NavigationView> (Resource.Id.nav_view);
var mToolbar= FindViewById<Toolbar> (Resource.Id.toolbar);
mToolbar.Title = "Home";
//Toolbar will now take on default action bar chacracteritics
SetActionBar(mToolbar);
//ActionBar.Title = "home";
//Enable suppport action bar to display hamburger
//ActionBar.SetHomeAsUpIndicator(Resource.Drawable.icon_hambuger);
//ActionBar.SetDisplayHomeAsUpEnabled (true);
//Set menu hambuger
ActionBar.SetHomeAsUpIndicator (Resource.Drawable.ic_menu_white_24dp);
ActionBar.SetDisplayHomeAsUpEnabled (true);
drawerLayout = FindViewById<DrawerLayout> (Resource.Id.drawer_layout);
navigationView.NavigationItemSelected += NavigationView_NavigationItemSelected;
FragmentManager.BackStackChanged+= Fragmanager_BackStackChanged;
}
void NavigationView_NavigationItemSelected (object sender, NavigationView.NavigationItemSelectedEventArgs e)
{
e.MenuItem.SetChecked (true);
SwitchFragment (e.MenuItem.ItemId);
/*
if (e.MenuItem.ItemId != currentFragmentId) {
SwitchFragment (e.MenuItem.ItemId);
}
*/
drawerLayout.CloseDrawers ();
}
//Event Selected on nav menu
public override bool OnOptionsItemSelected (IMenuItem item)
{
switch (item.ItemId)
{
case Android.Resource.Id.Home:
drawerLayout.OpenDrawer (Android.Support.V4.View.GravityCompat.Start);
return true;
}
return base.OnOptionsItemSelected (item);
}
The picture just example.
https://materialdesignandroid.files.wordpress.com/2015/07/navigationview.png
See Also
- Xamarin: An Introduction to develop a soundcloud (Part 1)
- Xamarin: An Introduction to develop a soundcloud (Part 3)
- Xamarin: An Introduction to develop a soundcloud (Part 4)
- Xamarin: An Introduction to develop a soundcloud (Part 5)
- Xamarin: An Introduction to develop a soundcloud (Part 6)