1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Sending Data Between Screens in Android App Development

Sending Data from Activity to Fragment - Part 1

Start course
Overview
Difficulty
Intermediate
Duration
1h 27m
Students
5
Description

This course explores how to send data from one screen to another in Android applications.

Learning Objectives

  • Learn how to send data from one activity to another activity
  • Learn how to send data from activity to fragment
  • Learn how to send data from fragment to activity
  • Learn how to send data from one fragment to another fragment

Intended Audience

This course is intended for anyone who wants to learn how to start building their own apps on Android.

Prerequisites

To get the most out of this course, you should have some basic knowledge of the fundamentals of Android.

Transcript

Well, hello everyone. So, in this video we are going to be sending data from activities to fragments, which of course was the second section of data transformation between screens, right? So, in the previous sections we've learned the use of fragments in detail. So, we're going to now learn how to transfer data from activity to fragment. Now at first we're going to need to create a new fragment. Then we'll be able to send data from activity to fragment. And then the last part of all that will be to get the sent data in the fragment and then show it to the user.

All right, so we're going to practice that process with our example application. So, we're going to go to Android Studio and get started. Now, you may have noticed I created a new project for this video. If you want to you can use your previous project, entirely up to you. But first let me show you the finished version. So, you'll see where we're going. So, we're going to develop an application that will show the value of the height to weight ratio. So, the calculation of height-weight ratios is called BMI, right? Stands for Body Mass Index. So, users are going to enter their weight in kilograms and height as centimeters. And then after clicking a calculate button, the body mass index of the user will be presented to the mass calculated.

Now, if BMI is higher than 25, means that the person is overweight. So, we're going to develop a very simple type of this kind of application because these values of course are going to be different for men and for women, for young, for old, depending. So, anyway, it's better to learn these methods, right? But if you do want to pursue that, all you have to do is just add more components in here so that you can collect more data from users. Anyway, staying on task and focused. The important thing is here we'll get information from the activity and write results in the fragment. So, we will send the received data to the fragment. Then we're going to process the data and show all of that to the user.

So, let's try the application. I'm going to write in 90 for the weight, 175 for the height. And after clicking 'Calculate' there's the BMI of 29. So, that means the user is overweight, right? Because the BMI is higher than 25. So, as you can see in this section that we see the result in is a fragment which has a title of 'My First Fragment'. Yeah, I left that there on purpose. So, I sent data to fragment by clicking the 'Calculate' button. Now you might be asking well, couldn't we just make this process without using fragments. Well, of course we could add a text view in the activity. Show the result in this text view. But our goal here is to learn how to send data from activity to fragment. So, that means that's what we're going to do.

All right, so after you learn this process well, you'll be able to develop way more useful applications, believe me. So, let's get into it. Let's develop. Firstly, I want to convert the constraint layout to linear layout. Also the orientation of the layout will be vertical. Okay, so now let's go to the design area. And what I'll do is I'll add to edit text under this linear layout. So, these edit text must be number edit texts because the user is going to enter numbers here. So, looking back at the application looks like we got to add a button. And of course to show the title, I'll need to add a text view. I'll add one more text view to show the explanation under the button. And for the last one I'm going to add a frame layout to the bottom to add the fragment, okay.

So, now I want to show the fragment inside that frame layout. Yes, so let's customize the design. First, I'll write BMI calculator at the top text views text, right? Then I'll change the color of the text view. That can be black. I'll increase font size. Let's make the font size 34. So, the center of the text. I will change the gravity value of the text view to be center. Now let's customize the edit text where we're going to enter data. So, here I will add a hint to edit texts, that way the user will know what data needs to be entered. So, for the hint here, I'm just going to write 'please enter your weight' and the second edit text hint section; please enter your height. Then I want to write calculate as button text.

Now, I mentioned the explanation text view. So, I'll write, if BMI is more than 25, it is considered overweight. Also I want to increase the text size a little bit. Then I'll make the width of the edit text to be 300dp. I'll make the buttons with wrap content. And you know what? Let's go ahead and center the explanation text. So, I'm just going to change the gravity property to center. Okay, so here I'm going to select all components by click 'Control' and to put some space between them, I'll just adjust the layout margin tab value for all these components to 20dp. So, I'll just change the gravity property of the linear layout, and gravity be center horizontal. And finally I'll just give an ID to these components.

Right, so for the ID of the first edit text, I'll write editTextWeight. For the second edit text, I will write editTextHeight, and for the button I'll just write buttonCalculate. Now I've also got to give an ID to the frame layout because I'm going to use it in the MainActivity.kt file to show the fragment. Right, so I'll write frame to its ID. All right, so that completes the section's design. Now, because we're going to show the results inside the fragment. Well, we haven't created our fragment yet. So, if you want, let's create a fragment now. In the previous section, I explained in detail how to create the fragment. So, you should have already done it already. Let's just select the app folder from the project directory. Then from menu, I'll select file, new, fragment and blank fragment. Now I'm going to name it. So, I will write BMIFragment and I'll click 'Finish'.

Now, do you remember? The fragment is really similar to activity. Remember back we needed a design file and a cotton class for the fragment. Right, so Android Studio created a new fragment. And I'm going to delete the unnecessary sections in the fragment class. Okay, so now we're going to design the fragment similar to that in the application. So, go over to the XML section of the fragment. First, I want to change the frame layout to linear layout. On the XML side, I'll delete the frame layout and write linear layout. Also the orientation value of this layout will be vertical. Then I want to change the background color of the linear layout so that you can see the difference of the fragment. That would be way more noticeable. So, I'll also change text views text. And that'll be BMI Fragment.

Now, of course I do this so that it will appear to you to be a fragment, right? You don't have to show the user that you used fragment, of course I'm doing it for you. It doesn't concern the user whatsoever. I don't mean to discount the user but you know, users only care about comfort and the good look of your design. So, what we're going to do is increase the font size of text view. Then I'll change the color of the text view, that can be black, that will make it more noticeable. So, to center the text, I'll just adjust the value of gravity to be center, value of the height will be wrap content. I'm going to add one more TextView under that TextView to write the result in. So, I'll adjust the color of the TextViews to be black.

So, what we're going to do is increase the font size of TextView, and I'll also make the bottom TextViews with wrap_content. And here, I'm going to make the gravity value of the linear layout to be center horizontal. That way the TextViews are all centered. So, I'm going to put some space in between the TextViews Adjust the value of the layout margin-top as 20dp. I'll give an ID to this TextView. All right. TextView results for its ID. And then lastly, I'll delete the text inside the TextView because this text will not be visible to the user until the result is written here.

Okay. So, that's the design of the fragment, that's ready to go. So, now we can start writing the necessary code. So, that means I will open the MainActivity.kt file and I'll define the EditText, right? lateinit var etWeight : EditText. lateinit var etHeight : EditText. Then, I'll define the button, lateinit var calculate : Button. And now let's match components with their IDs in the onCreate function. I'll write etWeight = findViewById(R.id.editTextWeight). And just like that I can see other components as well. etHeight = findViewById(R.id.editTextHeight). calculate = findViewById(R.id.buttonCalculate). And I just add a ClickListener to the calculate button. And then we'll go inside the onCreate method and create an object from the fragment manager class. And I will write val fm : FragmentManager = supportFragmentManager. Then I'll create an object from the fragment transaction class, and I'll write, val ft : FragmentTransaction = fm.beginTransaction.

So, do you remember to be able to work transactions I've got  to make these processes in here? And then I will create an object from the BMI fragment class. So, I'll write, val bmiFragment = BMIfragment. All right. So, that gets the data. And to be able to send the data, we must add data to the containers. So, first I will get the value of weight from the EditText. So, I'll write, val weight = etWeight.text.toString. And I've got to change it to an integer, so I will add the toInt() function at the end of the code. And I'll do the same thing for the value of height. So, val height = etHeight.text.toString.toInt. All right.

So, now I'm ready to send data to the fragment. Right now, my friends, I realized we've done a bit of a review more or less because you know all this about the transaction that we've done so far, but I want to point out something. What's really important is what we're about to do because from now on we will send data from the activity to a fragment. And if you remember, we were able to send data from activity to activity with the help of Intent but not going to be able to use Intent here. This is where using the bundle class comes in, all right?

So, we're going to use a bundle class to send data from the activity to the fragment. I repeat, bundle class, all right? I just want to point out to you that the usage of bundle class is very similar to the usage of Intent. So, why don't we just start doing the necessary actions and you'll get it? I know you will. So, for that, I will first create an object from the class of bundle. So, I'll write val bundle = bundle. Next line I'll write bundle.putInt. Now, the bundle method of putInt will take two parameters like the putExtra method in Intent, right? So, I'm going to tell you that in parallel. Anyway, the first one is a keyword, so I'll write weight as the keyword. Second parameter is data descent, so in here I'm putting weight.

Now, if you want to send string data, you can use the method of putString. I will send the user height with the same process, then I'll define where to send it. So, I will send data to the fragment whose name is BMI fragment. That's why I'm going to use the object that I created from its class. So, I just write the bmiFragment.arguments = bundle. So, that the two data will go to the fragment. See these two groups? Great. Now, by using the object of fragment transaction, we must work the fragment which we created. So, in other words, when the user clicks the calculate button, the fragment must be shown in the frame layer. That's why I write ft.add. And then this add method will take two parameters. And the first one we've got to define the layout where the fragment will be shown. So, here I write (R.Id.frame). And in that way, we define the frame layout.

The second parameter is the name of the object which we created from the class of BMI fragment. And what's that? BMI fragment. Another way to be consistent. And then lastly, I'll write ft.commit. So, that way, after the user clicks the calculate button, it's going to grab all that data. It's going to send it to the fragment with the bundle method and the fragment will be shown inside this frame layer. Cool. So, we're going to perform all the operations of receiving the sent data and displaying it in the TextView in the fragment class. Next time, we're going to continue where we left off in the next video, right? So, I'll leave you hanging for now, but I'll see you in the next video.

 

About the Author
Students
86
Courses
23
Learning Paths
1

Mehmet graduated from the Electrical & Electronics Engineering Department of the Turkish Military Academy in 2014 and then worked in the Turkish Armed Forces for four years. Later, he decided to become an instructor to share what he knew about programming with his students. He’s currently an Android instructor, is married, and has a daughter.

Covered Topics