List Fragments - Part 1

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.


Alright, hello everyone. So, in this video, we're going to talk about the List Fragment. Now, we call fragments List Fragment if they include a list view inside. I know, you probably could have guessed that, right.

But as an example, a group of data is shown in list format in this frame. So, by clicking any data from the list, you can make some processes happen. Alright, so in fact, you can think of the List Fragment as the usage of list view and fragment. I want to talk about this a little bit more because list view usage is a little different in fragment. So, List Fragment contains list view features, but also because of its flexible work environment, you'll see more benefit. So, it's worth the effort to put in now so that, you can learn it. But you know what, I'm going to stop talking. We're going to go to android studio, break it down, see how it works, get you moving. I want to show you the finished application first so, you can see where we're going.

So, you see here there's a list view. These are city names, list of city names. Now the list view is inside a fragment. As you know, the fragment is inside the main activity. So watch this, though. When I click any city in the list, a new activity opens, and inside that activity, there's another fragment. Inside that fragment, well, you can see a city picture of that chosen city. Alright, so, if you are a step ahead of me, yeah. This is from Android studio's official web page, example design of a List Fragment but what we're going to do is create a mobile version of that design. So, that way, you can make a similar design for tablets. Let's go back to our application.

So, when I click the back button, we'll go back to the List Fragment inside the activity. And if you click another city then, you'll see another picture of the chosen city. And like I said in this example, there are two activities and there are two fragments being used. Okay? So, let's get into it and develop. So, first up, I want to create a new project so, I'll click 'File', select 'New', 'New project'. So, on this page, I want to select the Empty Activity, click 'Next'. Alright, so, what to name it? It'll be List Fragment. The programming language will be Kotlin Minimum SDK '21' and finally, click the 'Finish' button.

Now, we got our new project. There it is created successfully. So, I'll open up the activity_main.xml, click on the eye icon and select "Show System UI and I will also delete the "TextView". Now in the main activity I want to show a fragment. So, I will add a FrameLayout under the ConstraintLayout. Width and the height of the Frame layout will be match_parent. Also, I will define the constraints of the Frame layout and lastly I'll give an id to this component and the id can just be called Frame.

Now, I can create my new fragment. Select the project package folder, right click, select 'New', 'Fragment'. Now, notice there is a List Fragment option. I'm not going to use it though because when I choose a List Fragment, android studio comes in with too many methods so, I don't want to use too many of them in this example because that can be confusing. We're just going to do this bare bones. That way, we'll just avoid creating any unnecessary methods at unnecessary times. Let's stick to the facts, Mack. So, in other words, select Fragment (Blank).

Now, I will write the name MyListFragment. So, after I click on the finish button, android studio creates a fragment. But again, I'm going to delete anything that's unnecessary. So, in this class just the onCreateView function will remain, okay? Alright, so, now we can continue. So, if you pay attention here, the myFirstFragment inherits from the fragment class but this time it should inherit from the ListFragment class, not the Fragment class. So, that's why I'm writing ListFragment here. Now, that fragment has all the features of ListFragment. So, now we've got to add that fragment into the main activity.

So, in the main activity there is a FrameLayout below the ConstraintLayout. I will add the fragment to this frame layout and we'll move on over to the Kotlin code section of the main activity, and of course, you already know how to add the fragment to the Main Activity, right? Won't leave you on your own, though. Just create an object from the fragmentManager class, val fragmentManager : Fragment Manager = supportFragmentManager. Then I'll create an object, the fragmentTransaction class, "val fragmentTransaction : FragmentTransaction = fragmentManager.beginTransaction(). Now, I can create an object from the fragment class and I'm going to add it. So, val myListFragment = MyListFragment(). Now, I'll write in fragmentTransaction.add and I'll write in the two necessary parameters. The first one is the ID of the frame layout, The second parameter is myListFragment. And then I can finally write fragmentTransaction.commit() and that'll finish the process. That way, mylistFragment gets added to the main activity. So, let's work over this MyListFragment.

Right, so, I want to add a ListView to that fragment so, I'll delete the TextView here. Now, in the xml section, I'll change the FrameLayout to LinearLayout. Also, the orientation of this layout is going to be vertical. So, now I can add the List view. Now, in case you're wondering, you can see the ListView component in the Legacy section. So, I'm going to drag and drop it to the component tree. Now I'll give an id to the List view. Now to make an important point, you cannot write the id to List View directly in the List Fragment. For the id, you must pass to the xml section and inside the xml tab of the ListView, that's where you define it. So, after writing android:id="@android:id/list" and you've got to write it exactly like that otherwise, the List Fragment won't recognize the List View. We'll go back to the design section and see the id of the List Fragment as @android:id/list. Now we can fill in the List View.

So, do you remember when we were defining the required array for list view in the strings.xml file? Doesn't matter because I'll show you now. I'm opening the string.xml file from the project directory. I'll open a new tag by pressing the < on the keyboard and select the string-array from here. All right, so, I've got to give a name to this array and I'm just going to make the name Cities. So, I'll close the tag just by pressing the 'Shift' and 'Less than' keys together on the keyboard. I'll create a new tag between the string-array tags and this tag will be the item tag. So, I got to write each element that I want to appear in the list view between the item tags. Right?

So, for now I'm just going to write five city names. I'm going to make the first city be Berlin, second one Athens, third city is Tokyo, fourth city Rome , fifth city Amsterdam. There's our array created . Now we can move on over to the fragment class and write the necessary codes. Firstly, I want to override a new method. So, the method that I will call is the onViewCreated(). I will write my processes inside of that method. So, first of all, I will create an Array adapter. So, I'll write, val arrayAdapter = ArrayAdapter.createFromResource(), and now this method takes three parameters. First context, so, if you remember while in an activity we could write statements like this or getApplicationContext or this@main_activity but because we are now not in an activity, we are in a Kotlin class, we're going to need to write the activity object from fragment activity as the context here. I'll show you. Now, the second one is the name of the array that contains elements that will be added inside of the List View. Alright, so here, the city names that I want to add inside List View. So, all I need to do is write R.array.cities. third parameter, that's just the name of the layout which I'll use inside the List View. Now, can you remember back when we did the List View?

If we don't want to make that special design for the list view, we could use one of the ready-made layouts, So I'll write android.R.Layout.simple_List_item_1. Now, obviously this is a type of layout that's already prepared in android studio, showing one element in every section. That's cool for right now.

So, notice the first parameter is underlined because the activity parameter can be null. So, we need to resolve this error. We can solve this in a couple of different ways. The first is to write the requireActivity() method inside of activity as the first parameter. And okay, so, that makes that warning go away. But let's look at the second method. So, here I want to write activity again. So, if you click on the red lamp here, hyou're going to see an option Wrap with let . Well, you can check for nullable expressions using the LET keyword in Kotlin. So, I'm going to choose this option. Notice here now that there is a ?. let after the activity statement and the other codes are enclosed in curly braces. It also added an it keyword.

So, now I want to explain this "let keyword because look at what it can do. So what it means is that it's going to check the activity parameter first and if it's not empty, the code inside the curly brackets will work. The it keyword here also represents the activity parameter. Alright, so, put that in the back of your head and we're going to continue. So, here by writing listAdapter = arrayAdapter, I'll add the adapter to list view and now the elements inside the array are added to List View. So cool, let's run the application and watch it work. So, the application opened, we can see the city names in the list but when I click on a city, there's no process yet but that's okay. We're going to complete that in video shortly. I just wanted to show you that, right? Now, if you look in here, just adding a list, a list view is very simple, right? It just needs a short code row. So, the process was so simple because you're using less fragments and that's really cool. So, we'll take a little break here, and I want to see you in the next video.


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