Adding more screens to an Android app

In this tutorial, you will learn how to add multiple screens to an Android app. We will use the existing Android Temperature Converter app from one of the earlier tutorials to look at how to add more screens to apps and link each screen with buttons.

This is what the two screens of the app will look like:

Watch the video below or scroll down to read the step-by-step instructions and sample code.

Video

Step 1

Drag a Space element on to the screen underneath the buttons and text view items.

Step 2

Now go to the Layout tab on the Properties panel and change Height to 100dp.

Step 3

Drag a Button element on to the screen under the Space element. Rename its Id to @+id/helpButton and change the Text value to Help. This button will link to a ‘Help’ screen that will provide information on how to use the app or how to get support. Save the file.

Step 4

Next to the layout folder, click the cog icon and then Add and New File…

Step 5

Select a new Android Layout and call it Help. Then click New.

Step 6

Your new Help.axml file should appear in the layout folder. Add a Text (Large) element to the top of the screen and change the Text value to Instructions. Then add a Multiline Text element to the screen, change its Text value to be the instructions for the app.

Step 7

Now add a Button element. Change its Text value to Go back and its Id to @+id/backButton. Save the file.

Step 8

Now go to the project folder and click on the cog icon. Click Add and New File…

Step 9

Create a new Activity file called HelpActivity. Click New. This file will contain the code for the Help screen.

Step 10

Open the HelpActivity.cs file and add the following line of code to link the Help.axml screen file to the HelpActivity.cs code file. Save the file.

Step 11

The next thing to do is to go back to the MainActivity.cs file to link the Help button to the Help.axml screen. Firstly, define the Help button in the code by adding these lines of code.

Step 12

Create a click event for the helpButton Button element.

Step 13

Add the following line of code to the top section of the MainActivity.cs file.

Step 14

Inside the new HelpButton_Click method, add the following code. We will create a new intent that will open the other screen (the Help screen) when the button is clicked.

Step 15

Now go back to the HelpActivity.cs file and add this code for the Back home button so that when the user presses that button they will go back to the main screen. Save your files.

That’s it! Now go and test your app. It should have two screens like the ones shown below that open when you click on the buttons linking the screens.

Sample code

Here is the C# sample code for the MainActivity.cs file:

using Android.App;
using Android.Widget;
using Android.OS;

using Android.Content;

namespace TemperatureConverter
{
  [Activity (Label = "TemperatureConverter", MainLauncher = true, Icon = "@mipmap/icon")]
  public class MainActivity : Activity
  {
    Button cButton;
    Button fButton;
    TextView resultTextView;
    EditText temperatureTextEdit;

    Button helpButton;

    protected override void OnCreate (Bundle savedInstanceState)
    {
      base.OnCreate (savedInstanceState);

      // Set our view from the "main" layout resource
      SetContentView (Resource.Layout.Main);

      cButton = FindViewById<Button> (TemperatureConverter.Resource.Id.cButton);
      fButton = FindViewById<Button> (TemperatureConverter.Resource.Id.fButton);
      resultTextView = FindViewById<TextView> (TemperatureConverter.Resource.Id.resultTextView);
      temperatureTextEdit = FindViewById<EditText> (TemperatureConverter.Resource.Id.temperatureTextEdit);

      helpButton = FindViewById<Button> (TemperatureConverter.Resource.Id.helpButton);

      cButton.Click+= CButton_Click;
      fButton.Click+= FButton_Click;

      helpButton.Click+= HelpButton_Click;
    }

    void HelpButton_Click (object sender, System.EventArgs e)
    {
      var intent = new Intent (this,typeof(HelpActivity));
      StartActivity(intent);
    }

    void FButton_Click (object sender, System.EventArgs e)
    {
      float temp = float.Parse (temperatureTextEdit.Text);
      float fResult = temp * 1.8f + 32f;
      resultTextView.Text = fResult.ToString () + " degrees Fahreheit";
    }

    void CButton_Click (object sender, System.EventArgs e)
    {
      float temp = float.Parse (temperatureTextEdit.Text);
      float cResult = (temp - 32f) / 1.8f;
      resultTextView.Text = cResult.ToString () + " degrees Celsius";
    }
  }
}

Here is the sample C# code for the HelpActivity.cs file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;

namespace TemperatureConverter
{
  [Activity (Label = "HelpActivity")]			
  public class HelpActivity : Activity
  {
    Button backButton;

    protected override void OnCreate (Bundle savedInstanceState)
    {
      base.OnCreate (savedInstanceState);

      // add this line of code to link this file to the Help screen
      SetContentView (Resource.Layout.Help);

      backButton = FindViewById<Button> (TemperatureConverter.Resource.Id.backButton);
      backButton.Click+= BackButton_Click;

    }

    void BackButton_Click (object sender, EventArgs e)
    {
      var intent = new Intent (this,typeof(MainActivity));
      StartActivity(intent);
    }
  }
}