Coders' Guidebook

How to add navigational buttons to your Android app

Similar to how a website is made up of multiple webpages, an android app comprises multiple user interfaces. For example, an app for an online store may have separate user interfaces for the homepage, products, checkout and support sections. The content of each user interface is organised by a layout. This tutorial will cover how to create user interface layouts and use buttons to navigate between them.

Adding a new user interface layout

When you start a new project, Android Studio will often create an XML file called activity_main.xml by default. This is the user interface layout the app will load first (unless advised otherwise). To create another layout click Project > app > res and right-click the layout folder. Select New > Layout resource file.

layoutresourcefile.png

In the New Resource File window enter the file name for the new layout (e.g. 'second_layout') then press OK. The other options can be left at their default values in this example.

newresource.png

Android Studio will now create and open a new file called second_layout.xml (or the file name you entered). The file can be found in the layout folder alongside the activity_main.xml file.

Adding buttons to the layout

We will now add some buttons which the user can press to navigate between the different layouts. Open the activity_main.xml file in Design mode then navigate to the Buttons category in the Palette. Locate the Button object and drag and drop it onto the layout.

addbutton.png

Select the button you just added and open the Attributes panel. Change the id attribute to 'button1' and the text attribute to 'Go to second layout'.

buttonatt.png

You may notice a red warning sign in the top right-hand corner.

redwarning.png

The warning sign is there because of two errors in the layout: missing constraints on our button and hardcoded text. There is a separate tutorial on how to resolve these errors. In brief, you simply click the infer constraints button in the editor window and 'Fix' button in the hardcoded text warning.

infer.png hardcode2.png

Now you have an error-free button in the activity_main.xml layout, you can switch to the second_layout.xml layout and add a button there too. You may notice the button looks a little different when dragged and dropped onto the second_layout.xml layout. It stretches across the width of the layout and does not create a missing constraints error. This is because the second_layout.xml file uses a vertical linear layout, while the activity_main.xml file uses a constraint layout. The differences between these different layout formats will be explored further in later tutorials.

buttonlinear.png

Select the button and open the Attributes panel. Change the id to 'button2' and the text to 'Go to first layout'. Lastly, resolve the hardcoded text warning in the same way as before.

buttonatt2.png

Making the buttons operational

We'll now write the code which makes the buttons functional. Functions are written in the MainActivity.kt file. If it is not already open in Android Studio then you can find the file by clicking Project > app > java > folder for your project.

mainactivity.png

Kotlin functions begin with the fun keyword followed by the name of the function. We will name our functions loadMain and loadSecond because they will load the main and second layouts, respectively. The full code for our functions will look like this:

fun loadMain( v: View) {
    setContentView( R.layout.activity_main)
}

fun loadSecond( v: View) {
    setContentView( R.layout.second_layout)
}

The functions should be added below the override fun onCreate(savedInstanceState: Bundle?) function:

newfunction.png

In the brackets following the function name are the details of any arguments the function takes. The above functions take the argument v: View. At present, View is in red because Android Studio does not recognise this argument. To resolve this, click the View word then press the alt and enter keys on your computer keyboard. In the resulting dropdown menu, select Import to import the View class into the MainActivity.kt file.

importview.png

The View word should now no longer be red for either function.

The contents of the functions are written within the curly braces. setContentView( R.layout.activity_main) means that when the function is called, the activity_main.xml layout will be displayed to the user. Likewise, setContentView( R.layout.second_layout) will display the second_layout.xml file.

Once the functions have been written, the only thing that remains to do is enable the buttons to call the functions when they are pressed. To do this, navigate back to the activity_main.xml file and select the button. In the Attributes panel, search for the onClick attribute and assign it the value loadSecond. This will ensure the loadSecond function will be called when the button is pressed and the user will navigate to the second layout.

loadsecond.png

Do the same thing with the button in the second_layout.xml file, only this time set the onClick attribute to loadMain. This will allow the user to navigate from the second layout to the main layout by pressing the button.

The user should now be able to use the buttons to navigate between the two layouts of your app!

<<< Previous

Next >>>