Fragment Creation

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 learn about creating a fragment. Alright. So, let's get started. First of all, I want to create a New Project. Also, the template of this project will be an Empty Activity. Now, on this page, we'll configure our project. So, the name of the project can be, I'm going to call it Fragments. Why not?

Now, I'm not going to change the Package name and the Save location. And, the programming language, of course, will be Kotlin, and the Minimum SDK level can be 21. So finally, I'll just click the 'Finish' button. Alright. So, you see our project is being created and, of course, it might take a little while, but that's alright. I'll just remind you that you need to wait for your project to be fully built.

Alright. Don't do anything until it has been successfully created, because just one little electron out of place, is going to wreak havoc. Alright. So, here is our project created. First of all, I want to open up the activity_main.xml file, and we can close the project directory for now. I'll click on the 'Eye icon' in the design area. From here, I can choose the Show System UI option. Alright, so the design area is going to look like a real phone screen. So finally, I'll just delete the TextView component. So now, let's create a fragment. I will create a new fragment to add that activity. So to create a fragment, after selecting the app folder from the Project directory, I'll select 'File', 'New', 'Fragment', 'Blank Fragment'. So, what do you think I'm going to call my fragment? I'm going to just write FirstFragment, and that'll be the name. So, click 'Finish'.

Now, Android Studio magically creates a fragment for us. And, fragments structures are really very similar to activity structures. Like activities, fragments also have sections where Kotlin codes are written, and the design section where xml codes are written. So, as you remember, while we were defining fragments, we said, "You can think of a fragment as a small activity particle." And, I'm serious. In other words, it's a small activity particle that works inside an activity. All right, so first of all, I want to delete the unnecessary code here, and only the Fragment class and the onCreateView function in this class will remain. So, I'm just deleting all the other code. So, I want to draw your attention to this. When we create fragments, Android studio creates both a Kotlin class and a layout file. So, that means we need a design and a Kotlin class in order to use fragments. So, did you notice this design is defined in the onCreateView() function.

So now, we're going to add that fragment to the MainActivity. I'm going to add that fragment directly to the ConstraintLayout. Or, I can add a FrameLayout and add the fragment to that FrameLayout. You see? Now, we could also define the sizes of the FrameLayout. But for now, I will not change the size of the FrameLayout, because now I want to just define the constraints of the FrameLayout, because the main layout is the ConstraintLayout. So, that means I'll just pin it to the top, the right, the bottom, and the left. Alright. So now, let's go to fragment, and here, see there's a TextView that writes Hello blank fragment. Alright. So, I'll change the width and the height of this TextView, and it'll be wrap_content. I'll change the text of the TextView component to be My First Fragment. Also, I want to increase the textSize a little bit: can be 24sp. And lastly, the text color should be black, in my humble opinion. So, did you notice, the fragment has a FrameLayout? So, I will pass over to the xml section, and I want to change the FrameLayout. Of course, you can add any layout that you want to, but I just want to add a LinearLayout. Also, the orientation of this linear layout can be vertical. So, let's change the background color. So for that, when we add the fragment to the activity, you can distinguish between the fragment and the activity. Should be right there. So, you can actually just choose whatever color you want. And lastly, I want to center this TextView. So for this, I'll just change the gravity property of the LinearLayout. And, gravity be center. So, in that way, we've completed the design of the fragment. So now, we can add this fragment to the activity, and we'll do this operation in the MainActivity.kt file. First of all, since we will show the fragment design inside the FrameLayout, we should give an id to the FrameLayout.

So, I'm just going to write frame as its id, and I will pass the MainActivity.kt file. So here, inside the onCreate function, I will create an object from the fragment manager class. I will write val fragmentManager: FragmentManager = support FragmentManager Alright. So, then I'll create an object from the fragment transaction class. I'll write, val FragmentTransaction: FragmentTransaction   = Fragment Manager.beginTransaction(). Alright. So, that code will start the process of running the fragment inside MainActivity by using the FragmentManager object. Now, it all makes sense. So, once that's all together, I need to create an object of the fragment class to add to the MainActivity. So, in this example, the fragment that I want to add is the first fragment. So, I'll create that fragment's object, and I'll just write in val firstFragment = FirstFragment then, I will write

Now, here the add method will add the fragment to the MainActivity. To be able to make this process happen, the add method will take two parameters. Alright. So, the first one is, all defining in which part that we're going to add the fragment inside the activity tool. So, we want to add the fragment inside of the FrameLayout. So for that, we must define FrameLayout here with its id. It's all right. ( So, the second parameter, is the name of the object which we created from the class fragment to add. And that is, the firstFragment. So finally, I will write fragmentTransaction.commit() and finish the process. So, from now on, when the MainActivity opens, the fragment will also be added. So, why don't we just run the application and you'll see. Alright. So, the application opens, fragment gets added on open.

Now, if you remember, we didn't actually do any design for the main activity; we just made a design for the fragment. But, look at this: when we added the fragment, we created to the MainActivity. We saw the fragment design when the activity opens. So, in its very simplest form, this is the process of creating a fragment and adding the created fragment to the activity. Alright. Don't worry, we're going to build on it. But for that, you got to stay tuned. So, I'll 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