Saturday, June 6, 2020

android kotlin - Toolbar back button example

Toolbar Back Button
The following kotlin tutorial will demonstrate to us how we can show a back button on the Toolbar and how we can navigate back to the previous activity using the Toolbar back button click event in an android application.

To do this we selected an android theme that has an ActionBar. We create two Activity screens so that we can navigate between them. The first Activity is the main activity. In this main activity kotlin file, we called the support ActionBar and set a title for it. We also put a Button widget on this main activity and we navigate to the second activity using its click event. The Intent is used to navigate from the main activity to the other activity.

We created another Activity named the second activity. We navigate this activity from the main activity using the main activity Button’s click event. But how can we navigate from the second activity to the main activity because in this second activity we don’t place any Button or action widget?

Android manifest XML file holds both activity details. In the second activity tag, we placed an attribute named ‘parentActivityName’ and set its value to the main activity. So when we navigate to the second activity the ActionBar’s Toolbar display a back button on it. When users click the back button from the Toolbar they navigate back to the main activity.

So our app navigation is ready. We go to the second activity using the main activity Button click event and we navigate back to the main activity using the second activity Toolbar’s back button click event. We don’t have to write any code on the second activity kotlin file to display back navigation on the second activity Toolbar.

This android kotlin tutorial code is written in an android studio IDE. Copy the code and paste it into your android studio IDE and run it on an emulator to see how we display the Toolbar back button in an android application.

And how we configure the manifest file and choose a theme to make this tutorial. We displayed screenshots of the emulator screen, which also help you to understand the code without running it on an android device or emulator.
MainActivity.kt

package com.cfsuman.kotlintutorials

import android.content.Intent
import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity


class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Get the widgets reference from XML layout
        val button = findViewById<Button>(R.id.button)

        supportActionBar?.apply {
            title = "Kotlin - Toolbar back button example"
        }

        button.setOnClickListener {
            val intent = Intent(this,SecondActivity::class.java)
            startActivity(intent)
        }
    }
}
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#DCDCDC"
    android:padding="24dp">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Go To Second Activity"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
SecondActivity.kt

package com.cfsuman.kotlintutorials

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle


class SecondActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_second)

        supportActionBar?.apply {
            title = "Second Activity"

            /*
               Show back button on toolbar
               On back button press, it will navigate to parent activity
            */
            //setDisplayHomeAsUpEnabled(true)
            //setDisplayShowHomeEnabled(true)
        }
    }
}
activity_second.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#DCDCDC" />
AndroidManifest.xml [part]

<activity
	android:name=".SecondActivity"
	android:exported="false"
	android:parentActivityName=".MainActivity" />
<activity
	android:name=".MainActivity"
	android:exported="true" >
	<intent-filter>
		<action android:name="android.intent.action.MAIN" />
		<category android:name="android.intent.category.LAUNCHER" />
	</intent-filter>
</activity>