Xamarin Android: Master Detail View

Introduction

Master detail view means a simple design flow, where a list of items is displayed to the user in the first screen also called  Master View and when a user selects  any item from the list, then he/she is navigated to another view called Detail View containing all the details of the selected item. For example in Gmail android application, in the first view all the emails are displayed in a list and when we click on any email, then the contents of the email are shown in another screen. One more point that we need to consider is that, when user navigates to detail view, then there a back button at the top using which we can navigate back to original screen (Master View) again.

In this article, we will implement a similar concept. We will create a master view containing a simple button. When user click on that button, he/she will navigate to detail view having back button at the top. So let`s get started.

Steps:

1. To get started, open Visual Studio 2015 and select File menu, New, then Project option. It will open a project dialog box as shown below (F:1)
   
   
   
   
2. Select the Blank App (Android) project template and enter the name of the project as MasterDetailApp and click on Ok button. After clicking on Ok button, a blank Xamarin Android application will be created.
   
   
3. Blank App (Android) project template will create a default activity for us (MainActivity.cs file with android layout Main.axml). Main.axml file will be our master view. Replace the content of Main.axml file with the following code.
   
   

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
           android:orientation="vertical"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent">
       <TextView
           android:text="Master View"
           android:textAppearance="?android:attr/textAppearanceMedium"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:gravity="center"
           android:id="@+id/textView1"
           android:paddingTop="20dp"
           android:paddingBottom="20dp" />
       <Button
           android:id="@+id/btnClick"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:text="Click To Navigate" />
   </LinearLayout>

   Above code will add a TextView with simple text "Master View" and a button using which we can navigate to our detail screen.
   
   
4. Now we need to add another activity which will be our detail view. To add another activity, right click on project and select Add=>New Item option as shown below (F:2)
   
   
   
   It will open up a dialog box. Select the Activity item template and name it as DetailActivity.cs as shown below (F:3).
   
   
   
   
5. We also need to add an Android Layout file which will represent the UI for our detail activity. To add an Android Layout file, right click on Resources\layout folder and select Add, then New Item option (Shown in step 4). It will open a dialog box as shown in image (F:3). Select the Android Layout item template and name it as Detail.axml and then click on Ok button.
   
   
6. Add the following code in Detail.axml file.
   
   

   <?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:minWidth="25px"
           android:minHeight="25px">
       <TextView
           android:text="Detail View"
           android:textAppearance="?android:attr/textAppearanceMedium"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:gravity="center"
           android:id="@+id/textView1" />
   </LinearLayout>

   Above code will add a TextView with simple text "Detail View".
   
   
7. Add the following code in DetailActivity.cs file.
   
   

   using Android.App;
   using Android.OS;
   namespace MasterDetailApp
   {
       [Activity(Label = "Detail Activity")]
       public class DetailActivity: Activity
       {
           protected override void OnCreate(Bundle savedInstanceState)
           {
               base.OnCreate(savedInstanceState);
               // Create your application here
               SetContentView(Resource.Layout.Detail);
           }
       }
   }

8. Now let`s go back to MainActivity.cs file and attach a click event handler to our button, so that when user click on it we can navigate to our detail activity. To attach click event to button, add the following code in MainActivity.cs file.
   
   

   using Android.App;
   using Android.Widget;
   using Android.OS;
   namespace MasterDetailApp
   {
       [Activity(Label = "Master Detail App", MainLauncher = true, Icon = "@drawable/icon")]
       public class MainActivity: Activity
       {
           protected override void OnCreate(Bundle bundle)
           {
               base.OnCreate(bundle);
               // Set our view from the "main" layout resource
               SetContentView(Resource.Layout.Main);
               // Get our button from the layout resource,
               // and attach an event to it
               Button button = FindViewById < Button > (Resource.Id.btnClick);
               button.Click += delegate
               {
                   StartActivity(typeof(DetailActivity));
               };
           }
       }
   }

   In above code, using the StartActivity() method we can navigate to our DetailActivity.cs.
   
   
9. Last step is to establish the master detail relationship between our Main Activity and Detail Activity. To add the relationship, we need to set the ParentActivity property of Activity attribute in DetailActivity.cs file as shown below (F:4).
   
   
   
   
10. Output of our application is as shown below (F:5)
    
    

Conclusion

In this article, we talked about how to create a master detail view in Xamarin Android application. I hope you enjoyed reading the article.