Hello, Android Multiscreen: Quickstart

Handling navigation with Xamarin.Android

PDF for offline use
Sample Code:

Let us know how you feel about this

Translation Quality


0/250

last updated: 2017-03

This two-part guide expands the Phoneword application to handle a second screen. Along the way, basic Android Application Building Blocks are introduced with a deeper dive into Android architecture.

Hello, Android Multiscreen Quickstart

In the walkthrough portion of this guide, you'll add a second screen to the Phoneword application to keep track of the history of numbers called using the app. The final application will have a second screen that displays the call history as illustrated by the screenshot on the right:

Example app screenshots

The accompanying Deep Dive reviews what was built and discusses architecture, navigation, and other new Android concepts encountered along the way.

Requirements

Because this guide picks up where Hello, Android leaves off, it requires completion of the Hello, Android Quickstart. If you would like to jump directly into the walkthrough below, you can download the completed version of Phoneword (from the Hello, Android Quickstart) and use it to start the walkthrough.

Walkthrough

In this walkthrough you'll add a Call History screen to the Phoneword application.

  1. Open the Phoneword project in Xamarin Studio:

    Open the Phoneword project

  2. Start by editing the user interface. Open the Main.axml file from the Solution Pad:

    Open Main.axml

  3. From the Toolbox, drag a Button onto the design surface and place it below the Call button:

    Drag a new button

  4. In the Properties Pad, change the button Id to @+id/CallHistoryButton:

    Set the id to CallHistoryButton

  5. Set the Text property of the button to @string/callHistory. The Android Designer will interpret this literally, but you're going to make a few changes so that the button's text shows up correctly:

    Set the call history button text

  6. Expand the values node under the Resources folder in the Solution Pad and double-click the string resources file, Strings.xml:

    Open Strings.xml

  7. Add the callHistory string name and value to the Strings.xml file and save it:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <string name="callHistory">Call History</string>
        <string name="ApplicationName">Phoneword</string>
    </resources>

    The Call History button text should update to reflect the new string value:

    Button reflects new string value

  8. With the Call History button selected on the design surface, open the Behavior tab in the Properties Pad and double-click the Enabled checkbox to disable the button. This will cause the button to become darker on the design surface:

    Disable the Call History button

  9. Create a second Activity to power the second screen. In the Solution Pad, click the gray gear icon next to the Phoneword project and choose Add > New File...:

    Add new file

  10. From the New File dialog, choose Android > Activity, name the Activity CallHistoryActivity, then click Add:

    Name the file CallHistoryActivity

  11. Replace the template code in CallHistoryActivity with the following:

    using System;
    using System.Collections.Generic;
    using Android.App;
    using Android.OS;
    using Android.Widget;
    namespace Phoneword
    {
        [Activity(Label = "@string/callHistory")]
        public class CallHistoryActivity : ListActivity
        {
            protected override void OnCreate(Bundle bundle)
            {
                base.OnCreate(bundle);
                // Create your application here
                var phoneNumbers = Intent.Extras.GetStringArrayList("phone_numbers") ?? new string[0];
                this.ListAdapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, phoneNumbers);
            }
        }
    }

    In this class, a ListActivity is created and populated programmatically, so you don't have to create a new layout file for this Activity. This is explained in more detail in the Hello, Android Multiscreen Deep Dive.

  12. This app collects phone numbers (that the user has dialed on the first screen) and passes them to the second screen. The phone numbers are stored as a list of strings. To support lists, add the following using directive to the top of the MainActivity class:

    using System.Collections.Generic;

    Next, create an empty list that can be filled with phone numbers. The MainActivity class will look like this:

    [Activity(Label = "Phoneword", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        static readonly List<string> phoneNumbers = new List<string>();
        ...// OnCreate, etc.
    }
  13. In the MainActivity class, add the following code to register the Call History button (place this line after the callButton declaration):

    Button callHistoryButton = FindViewById<Button> (Resource.Id.CallHistoryButton);
  14. Add the following code to the end of the OnCreate method to wire up the Call History button:

    callHistoryButton.Click += (sender, e) =>
    {
        var intent = new Intent(this, typeof(CallHistoryActivity));
        intent.PutStringArrayListExtra("phone_numbers", phoneNumbers);
        StartActivity(intent);
    };
  15. The next step is to extend the Call button's functionality to add a phone number to the list of numbers and enable the Call History button whenever the user dials a new number. Change the code of the Neutral Button in the Alert Dialog to reflect this:

    callDialog.SetNeutralButton("Call", delegate
    {
        // Add dialed number to list of called numbers.
        phoneNumbers.Add(translatedNumber);
        // Enable the Call History button
        callHistoryButton.Enabled = true;
        // Create intent to dial phone
        var callIntent = new Intent(Intent.ActionCall);
        callIntent.SetData(Android.Net.Uri.Parse("tel:" + translatedNumber));
        StartActivity(callIntent);
    });

    Save and build the application to make sure there are no errors.

  16. Deploy the application to an emulator or device. The following screenshots illustrate the running Phoneword application:

    Example screenshots

  1. Open the Phoneword application in Visual Studio:

    Open Phoneword

  2. Start by editing the user interface. Open the Main.axml file from the Solution Explorer:

    Open Main.axml

  3. From the Toolbox, drag a Button onto the design surface and place it below the Call button:

    Drag a new button

  4. In the Properties pane, change the button Id to @+id/CallHistoryButton:

    Set the button id

  5. Set the Text property of the button to @string/callHistory. The Android Designer will interpret this literally, but you're going to make a few changes so that the button's text shows up correctly:

    Set the call history button text

  6. Expand the values node under the Resources folder in the Solution Explorer and double-click the string resources file, Strings.xml:

    Open Strings.xml

  7. Add the callHistory string name and value to the Strings.xml file and save it:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <string name="callHistory">Call History</string>
        <string name="ApplicationName">Phoneword</string>
    </resources>

    The Call History button text should update to reflect the new string value:

    Button reflects new string value

  8. With the Call History button selected on the design surface, find the enabled setting in the Properties pane and set its value to false to disable the button. This will cause the button to become darker on the design surface:

    Disable call history button

  9. Create a second Activity to power the second screen. In the Solution Explorer, right-click the Phoneword project and choose Add > New Item...:

    Add a new file

  10. In the Add New Item dialog, choose Visual C# > Activity and name the Activity file CallHistoryActivity.cs:

    Rename to CallHistoryActivity.cs

  11. Replace the template code in CallHistoryActivity.cs with the following:

    using System;
    using System.Collections.Generic;
    using Android.App;
    using Android.OS;
    using Android.Widget;
    namespace Phoneword
    {
        [Activity(Label = "@string/callHistory")]
        public class CallHistoryActivity : ListActivity
        {
            protected override void OnCreate(Bundle bundle)
            {
                base.OnCreate(bundle);
                // Create your application here
                var phoneNumbers = Intent.Extras.GetStringArrayList("phone_numbers") ?? new string[0];
                this.ListAdapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, phoneNumbers);
            }
        }
    }

    In this class, you're creating a ListActivity and populating it programmatically, so you don't need to create a new layout file for this Activity. This is discussed in more detail in the Hello, Android Multiscreen Deep Dive.

  12. This app collects phone numbers (that the user has dialed on the first screen) and passes them to the second screen. The phone numbers are stored as a list of strings. To support lists, add the following using directive to the top of the MainActivity class:

    using System.Collections.Generic;

    Next, create an empty list that can be filled with phone numbers. The MainActivity class will look like this:

    [Activity(Label = "Phoneword", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        static readonly List<string> phoneNumbers = new List<string>();
        ...// OnCreate, etc.
    }
  13. In the MainActivity class, add the following code to register the Call History button (place this line after the callButton declaration):

    Button callHistoryButton = FindViewById<Button> (Resource.Id.CallHistoryButton);
  14. Add the following code to the end of the OnCreate method to wire up the Call History button:

    callHistoryButton.Click += (sender, e) =>
    {
        var intent = new Intent(this, typeof(CallHistoryActivity));
        intent.PutStringArrayListExtra("phone_numbers", phoneNumbers);
        StartActivity(intent);
    };
  15. Extend the Call button's functionality to add a phone number to the list of numbers and enable the Call History button whenever the user dials a new number. Change the code of the Neutral Button in the Alert Dialog to reflect this:

    callDialog.SetNeutralButton("Call", delegate
    {
        // add dialed number to list of called numbers.
        phoneNumbers.Add(translatedNumber);
        // enable the Call History button
        callHistoryButton.Enabled = true;
        // Create intent to dial phone
        var callIntent = new Intent(Intent.ActionCall);
        callIntent.SetData(Android.Net.Uri.Parse("tel:" + translatedNumber));
        StartActivity(callIntent);
    });

    Save and build the application to make sure there are no errors.

  16. Deploy the application to an emulator or device. The following screenshots illustrate the running Phoneword application:

    Example screenshots

Congratulations on completing your first multi-screen Xamarin.Android application! Now it's time to dissect the tools and skills you just learned – next up is the Hello, Android Multiscreen Deep Dive.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.