Bundle in Android with Example

What are Bundles in Android?

In this tutorial, we are going to learn on How to use bundles in our android application using Kotlin as a programming language.

Bundle is a class in android which is used to pass data from one activity to another activity within an android application. We can pass data using key and value pairs using bundles. We can pass the data using the key and can use that same key to retrive the data which is passed for that key.

Implementation

We will be creating a simple application in which we will be simply displaying an edit text so that users will be able to enter the input message. Then we will be providing a button which will be used to pass the data from one activity to another using a bundle. We will be following a step by step guide to implement a toast message in an android application.

Step 1 : Creating a new project in Android Studio

Navigate to Android studio as shown in below screen. In the below screen click on New Project to create a new Android Studio Project.

After clicking on New Project you will get to see the below screen.

Inside this screen we have to simply select Empty Activity and click on Next. After clicking on next you will get to see the screen below.

Inside this screen we have to simply specify the project name. Then the package name will be generated automatically.

Note − Make sure to select the Language as Kotlin.

After specifying all the details click on Finish to create a new Android studio project.

Once our project has been created we will get to see 2 files which are open i.e activity_main.xml and MainActivity.kt file.

Step 2 : Working with activity_main.xml

Navigate to activity_main.xml. If this file is not visible. To open this file. In the left pane navigate to app>res>layout>activity_main.xml to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <!-- creating text view for displaying heading-->
   <TextView
      android:id="@+id/idTVHeading"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_above="@id/idEdtMsg"
      android:layout_margin="20dp"
      android:gravity="center"
      android:text="Bundle in Android"
      android:textAlignment="center"
      android:textAllCaps="false"
      android:textColor="#FF000000"
      android:textSize="20sp"
      android:textStyle="bold" />


   <!-- edit text for entering the message-->
   <EditText
      android:id="@+id/idEdtMsg"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:layout_margin="20dp"
      android:hint="Enter your message" />

   <!-- creating a button to  copy text to clip board-->
   <Button
      android:id="@+id/idBtnPassData"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_below="@id/idEdtMsg"
      android:layout_margin="20dp"
      android:text="Pass Data using Bundle"
      android:textAllCaps="false" />

</RelativeLayout>

Explanation − In the above code the root element is a Relative layout in android. This layout is a view group which is used to align all the elements within it relative to each other. We can relatively align all elements within Relative Layout with the help of ids or positions.

Inside this relative layout the first view which we have created is Text View. It is used to display a simple text message. Inside this text view widget we have specified its width as match_parent so that it will take the complete width of the mobile device and height as wrap content to take the text height.We are specifying id for our text view which is a unique identifier for that widget. We can use this id to perform some operations of this text view such as overriding a new text to it. Then we are adding a layout above param to align this text view layout above of our edit text with the help of edit text view id. Then we are adding margin for our text view from all sides. After that we are adding a text as a parameter inside which we will be specifying the value which we have to show inside our Text View. After specifying text we are specifying the text alignment. This will align the text inside the text view widget to the center of the widget. Then we are specifying text color as black, text size as 20sp and lastly specifying the text style as bold.

After adding a text view we are adding an edit text which we will be using to take the input from the user. Inside this widget we are firstly specifying id which for our edit text which we will be using for getting the data from this edit text which is entered by the user. Then we are specifying the layout width as match_parent and height as wrap content. After that to align this edit text to the center of the screen we are adding the layout center in parent. Then we are adding margin from all sides of our edit text. And lastly we are specifying the hint for our edit text which will inform the user what he has to give input in that edit text.

After adding edit text we are adding a button which will be used to pass the data from one activity to another activity. Inside our button we are firstly specifying the id for our button which we will be using to add a click listener to it. Then we are specifying height as wrap content and width for our button as match_parent. Then we are adding margin for our button from all sides as 20dp. After that we are specifying the text for our button. Lastly we are adding textAllCaps as false for our button to give the same text font as our text which we are specifying in the text tag.

At last we are adding a closing tag for our Relative Layout as the text view and button is enclosed in our relative layout.

Step 3 : Creating a new Empty Activity

Navigate to app option in your project tab then right click on it>New>Activity>EmptyActivity and name your activity as shown below.

Step 3 : Working with MainActivity.kt

Navigate to MainActivity.kt. If this file is not visible. To open this file. In the left pane navigate to app>java>your app’s package name>MainActivity.kt to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

package com.example.gptapp

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

class MainActivity : AppCompatActivity() {

   // creating variables for edit text and button on below line.
   lateinit var messageEdt: EditText
   lateinit var passDataBtn: Button

   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
      // initializing variable for video view on below line.
      messageEdt = findViewById(R.id.idEdtMsg)
      passDataBtn = findViewById(R.id.idBtnPassData)

      // adding click listener for button.
      passDataBtn.setOnClickListener {
         val msg = messageEdt.text.toString()

         // creating a bundle instance on below line
         val bundle = Bundle()
         // passing the data into the bundle
         bundle.putString(
            "message",
            msg
         )
         val intent = Intent(this@MainActivity, SecondActivity::class.java)
         // passing the bundle to the intent on below line.
         intent.putExtras(bundle)
         startActivity(intent)
      }
   }
}

Explanation − In the above code for MainActivity.kt file. Firstly we are creating a variable for the different views which we have created such as button and an edit text.

Now we will get to see the onCreate method. This is the default method of every android application. This method is called when the application view is created. Inside this method we are setting the content view i.e the layout file named activity_main.xml to set the UI from that file.

After specifying the view we are initializing our button variable named as passDataBtn and edit text variable named as messageEdt with its unique id which we have given in the activity_main.xml file.

After initializing our button and edit text with its unique id we are adding an on click listener for our button by calling setOnClickListner method. Inside that method we will be passing our data from one activity to another activity.

Inside onClickListner method we are creating a variable named as msg in which we are getting the data from our edit text and storing in it. After that we are creating and initializing variables for the bundle. After creating a variable for the bundle we are using that variable to pass the data using the key and value pair. We are passing key as message and data from the sg variable which we have taken from edit text. After that we are simply creating a variable for intent and passing the SecondActivity which we have to pass data when the user clicks the button. Then we are calling put extras to put the bundle which we have generated that we have to send to SecondActivity. After that we have to simply call startActivity to start our SecondActivity to view the data which we have passed.

Step 4 : Working with activity_second.xml

Navigate to activity_second.xml. If this file is not visible. To open this file. In the left pane navigate to app>res>layout>activity_second.xml to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".SecondActivity">

   <!-- creating text view for displaying heading-->
   <TextView
      android:id="@+id/idTVHeading"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_above="@id/idTVMessage"
      android:layout_margin="20dp"
      android:gravity="center"
      android:text="Bundle in Android"
      android:textAlignment="center"
      android:textAllCaps="false"
      android:textColor="#FF000000"
      android:textSize="20sp"
      android:textStyle="bold" />

   <!-- creating text view for displaying message which we passed from main activity-->
   <TextView
      android:id="@+id/idTVMessage"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:layout_margin="20dp"
      android:gravity="center"
      android:text="Message"
      android:textAlignment="center"
      android:textAllCaps="false"
      android:textColor="#FF000000"
      android:textSize="20sp"
      android:textStyle="bold" />
</RelativeLayout>

Explanation − In the above code the root element is a Relative layout in android. This layout is a view group which is used to align all the elements within it relative to each other. We can relatively align all elements within Relative Layout with the help of ids or positions.

Inside this relative layout the first view which we have created is Text View. It is used to display a simple text message. Inside this text view widget we have specified its width as match_parent so that it will take the complete width of the mobile device and height as wrap content to take the text height.We are specifying id for our text view which is a unique identifier for that widget. We can use this id to perform some operations of this text view such as overriding a new text to it. Then we are adding a layout above param to align this text view layout above of our another text view with the help of message text view id. Then we are adding margin for our text view from all sides. After that we are adding a text as a parameter inside which we will be specifying the value which we have to show inside our Text View. After specifying text we are specifying the text alignment. This will align the text inside the text view widget to the center of the widget. Then we are specifying text color as black, text size as 20sp and lastly specifying the text style as bold.

After adding a text view we are creating one more text view which we will be using to display the message which we will be passing from our MainActivity.

Step 5 : Working with SecondActivity.kt

Navigate to SecondActivity.kt. If this file is not visible. To open this file. In the left pane navigate to app>java>your app’s package name>SecondActivity.kt to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

package com.example.gptapp

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

class SecondActivity : AppCompatActivity() {
   lateinit var messageTV: TextView
   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_second)
      messageTV = findViewById(R.id.idTVMessage)
      // getting the bundle from the intent
      val bundle = intent.extras
      messageTV.text = bundle!!.getString("message")

   }
}

Explanation − In the above code we are firstly creating a variable for our message text view. Now inside on create method we are initializing this variable with its unique id which we have specified inside our activity_second.xml file. After that we are creating and initializing the variable for the bundle. Then we are getting the data from our bundle and setting its value to our message text view to display the data passed from MainActivity inside our SecondActivity.

After adding the above code now we have to simply click on the green icon in the top bar to run our application on a mobile device.

Note − Make sure you are connected to your real device or emulator.

Conclusion

In the above tutorial we learn What is bundle in android and How we can use it inside our android application to pass data from one activity to another activity.

Updated on: 14-Mar-2023

5K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements