List Fragments - Part 3

Start course
1h 33m

This course explores fragment operators in Kotlin. You'll learn about the different types of fragments and how you can use them.

Learning Objectives

  • Understand the basics of fragments, including where and why we use them
  • Learn how to create them
  • Learn how to change fragments inside an activity with another fragment
  • Learn about fragment backtrack, list fragments, and dialog fragments

Intended Audience

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


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


Well, hi everyone. All right, we're back. Yes. So in this video, we're going to get the position value like I promised. It's going to be in the second fragment, and then we're going to show the city images on the screen. Let's get to it. So, we're going to need to show the image in an image view in the second fragment. So for this, I want to open the design file  of the second fragment, and first, I want to delete the text view, and then I will change the FrameLayout to LinearLayout. Also, the orientation of this layout will be vertical.

All right. So, now I can add an image view to the design area. So, I'll drag and drop the image view component to the component tree. I will adjust the gravity property   of the linear layout to be center, and that way, image view is centered from the design area. All right, so I'll need to adjust the height and width of the image view to 300dp. All right, so now we need to control the ID. The  ID of the image view is, again, image view. So, we'll pass over to the Kotlin section of the second fragment. So first, I will needed to find the image view component. So, for this I'll just need to create an object from the image view class in the second fragment class, but outside the onCreateView method here. You follow? So, I'll just write lateinit var imageView : ImageView. So now, on the onCreateView function, I should see the image view object to the image view component. So, I'll write imageView = But here, we're not going to be able to use the fine view by ID function directly.

Now, we can access the design of the second fragment, and then we can use the find view by ID function. Right? So for this, I'll just create an object from the view class, and all right. val view : View = So now, we can assign the fragment designed to this view object. So, I'll cut this code line, and paste it right side of the  =. And it's all thanks to this code, we can inflate the fragment design. So now, we can write the view object after the return keyword. So, by using the view object we can use the find view by ID function now. So, I'll write view.findViewByID(). Inside parenthesis  ( And now, I've got to get the position value that I sent from the second activity. So for this, we'll use the arguments keyword. All right, arguments.getInt() I'll write keyword and default value. So, the keyword was positioned, right? And the default value can be 0. Also, the argument can be null. So for this, I'll just put a question mark. And lastly, I've got to assign it to a container. So, I'll write val position at the beginning of the code here.

Now, according to this position value, I will create a when statement. But before we do that, I need to add images to the project that I want to show. So, I'll just open the images that I've provided in that folder. So, I'll copy these five images, paste them into the drawable folder. So, I want to show you the images. So, you can add, of course, any images that you want into the drawable folder. But these are the ones that come with the package here. All right, so firstly, I want to create the when statement. So, I write when, position, inside curly brackets,   I'll  write the conditions. If position 0, after the lambda, I write imageView.setImageResource ( Obviously, the first city was Berlin on the list.

Okay so, that shows the image of the city and image view. So now, I want to duplicate this code just by pressing 'Ctrl' and 'D' together on a keyboard, and the second city will be according to: if position equals one. Only, I'm going to change the city name which is Athens. So now, I can just repeat that same process for the other cities. Third image is Roma. Fourth image is, I won't even attempts pronouncing Tokyo in Japanese. The fifth image is Amsterdam, or whatever images you have chosen to put in there. So, with all that, the process here is completed. So, I want to run the application, just make sure that it's working logically, like I laid it out. So, the application opens, so when I click 'Berlin' from the list, there's the image of Berlin, and I'll click the 'Back' button, so the first activity is opening again. So, when I click 'Athens', hey look, there's Athens, what do you know? So, the application's working without any errors, and that's a great thing because that's just really efficient. Okay? So, that is the list fragment lesson, it's all done, now you know how. Of course, it's going to be useful to you later on if you don't quite see how it all works together, but we're going to take a short break here, and in the next lesson, we're going to talk about the dialog fragment. I have a whole lot of fun with that prepared. So, I want to see you then.

About the Author
Learning Paths

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