In this tutorial, we’ll learn more about Fragments — what are they, how to use them, and how to create them.

What Are Fragments?

A Fragment represents a portion of the user interface. You can combine multiple fragments in a single activity to build a multi-pane UI and reuse a fragment in multiple activities.

A fragment must always be hosted in an activity, and the fragment's lifecycle is directly affected by the host activity's lifecycle.

In essence, we’ll use Fragments as our screens. Each screen of our app will be represented as a Fragment. Whenever we navigate to another screen, we will display another Fragment.

How Do I Create a Fragment?

Step 1

In the Project Structure View, navigate to the package that contains the MainActivity. Right-click it, and then click New > Fragment > Fragment (Blank):

Step 2

Time to configure our new Fragment!

Make sure “Create layout XML” is checked. This will generate the XML layout file for us — how convenient.

Check “Include fragment factory methods?”

Check “Include interface callbacks?”

Source language is naturally Kotlin

Name it NewMovieFragment

The newly-created Fragment may seem a little overwhelming at first, but fear not, we’ll break it down into smaller, more manageable chunks, so you’ll know exactly what’s going on.

First of all, what are these constants doing OUTSIDE of the class?

Those are simply static constants and that’s how we define them in Kotlin. If you’d like a more in-depth explanation, read this blog post. We can delete those as we won’t be passing any arguments to this Fragment.

Next up are instance variables and the onCreatemethod.

No need to explain the Strings. You may wonder about the OnFragmentInteractionListener type. This listener will be used to communicate with our activity. Our MainActivity will implement this listener. You will see the assignment in just a second.

If you haven’t coded in Kotlin before, you may also wonder about this strange argument?.letexpression. arguments is a nullable type; it can be null. The question mark ?is also known as a Safe Call operator in Kotlin. letsimply executes a block of code. In this case, if arguments is null, this block of code will not be executed.

As mentioned above, we won’t need any arguments, so this lets the statement, along with param1 and param2 instance variables, be removed.

onCreateViewmethod is next in line. This method is responsible for inflating the appropriate XML layout for this Fragment. If you click CMD + Click or CTRL + Click on the name of the layout file (fragment_new_movie), the IDE will take you straight to it.

Next is the onButtonPressedmethod, which showcases how we interact with the listener and how we can pass an argument back to our activity. Notice the safe call operator after the listener, because the listener may be null. It takes in Uri type as an argument. We won’t need this, for now, so let’s go ahead and delete this method also.

onAttach and onDetach are up. The code in onAttach will ensure that our MainActivity does, in fact, implement the OnFragmentInteractionListenerlistener. If it doesn’t, a RuntimeException will get thrown. onDetachsimply resets the listener to null.

Then, we have the interface definition for OnFragmentInteractionListener. It defines one method for now, onFragmentInteraction. Our MainActivity will have to implement this method.

Last but not least is a construct that allows us to instantiate a Singleton pattern in Kotlin.

As you can see, it takes in two arguments. Let’s remove those then the rest of the code becomes obsolete and we’re left with this

Fragments are not so scary after all, huh? Now that we have our new shiny Fragment, it would be good to use it and tell the MainActivityto display it for us.

Let’s go back to the MainActivitylayout file: activity_main.xml and replace all of its contents with

We’ll use the FrameLayoutto display our new Fragment in it. We’ve assigned it an id of flContent, which we’ll refer to in the code. Also notice that this FrameLayout width and height is set to match_parent, meaning it will take up the whole screen, which is exactly what we want.

Here, we are using the supportFragmentManager to begin a transaction. The transaction doesn’t get executed until the commit() method is called, which is advantageous when you are looking to make multiple changes at the same time. In this case, we’re only calling replace() on whatever is already displayed in flContent.

You can go ahead and run this code, but we’ll be faced with a nasty exception. Do you know what it is?

I hope you do! Our MainActivty is not implementing OnFragmentInteractionListener! Let’s fix that. Again, in our MainActivity, we must declare inheritance on OnFragmentInteractionListener.It’s easily achieved:

If we run the code now, everything should be fine and dandy. You’ll see this screen

Conclusion

In this tutorial, we got a bit more intimate with Fragments. It’s important that you understand their structure because they are quite important in the Android ecosystem. You will find yourself creating them all of the time.

In the next tutorial, we’ll be working with the UI layer and you’ll get familiar with the Layout Editor and some of its widgets.