Android Fragment Tutorial With Example For Beginners

Android Fragment Tutorial With Example For Beginners is the today’s leading topic.

In this article, I will cover about the fragment implementation and it’s usage.

You may have noticed one thing while using the android app of WhatsApp that they have slider tabs on the main page.

Mainly, there are three parts in the main screen of WhatsApp, Chats, Status and Call. When you slide horizontally among these three tabs, every tab have different layout but they are not opening in new activity.

Instead, all three are changing inside specific and static rectangle place only. Here, they have used fragments for layout of these three tabs.

Fragment Basic Information

Fragment is one kind of sub-activity which actually runs in the activity itself.

Similar to activity, fragment have both XML file for layout designing and a JAVA class for logical purpose.

Fragment is a modular section of any activity which has its own lifecycle, receives its own input events, and which you can add or remove while the activity is running (sort of like a “sub activity” that you can reuse in different activities).

To build a multi pane User Interface, you can combine multiple fragments in a single activity.

You can also make reuse fragments in more than one activity.

A fragment must be hosted by any activity. Every fragment’s lifecycle is directly affected by it’s parent activity’s lifecycle.

For example, when the activity is paused, so are all fragments in it, and when the activity is destroyed, so are all fragments.

However, you change the state of any fragment (such as add or remove) when the activity is in running mode.

Android also provides the feature to add the fragment to the backstack similar to that the backstack of activity.

When you add a fragment as a part of your activity layout, it lives in a ViewGroup inside the activity’s view hierarchy and the fragment defines its own view layout.

Design Pattern For Fragment

Android introduced fragments in Android 3.0 (API level 11 – honeycomb).

Main aim for this is to support more dynamic and flexible UI designs on large screens, such as tablets.

In the larger screen of the tablet, there is much more space to combine and interchange the UI components effectively.

This is where fragments help us to create such type of designs without handling the complex view hierarchy.

When you divide the activity’s layout into various components using fragments, you are able to change the activity’s look and feel at the runtime.

To understand the fragment easily let us take the example of an news application.

Here, at the left sidebar we can use one fragment to show the list of an articles.

At the right side, another fragment will show whole article in depth. These both fragments are in the same activity.

Take a look at the below image (Image credit goes here)

android fragment tutorial

Two fragments in single Activity

Now for the same application, consider the screen of mobile device. It is relatively small compare to the tablet.

So in this case, we can create two activities. First activity will hold the first fragments with the lists of the articles.

When the user clicks on any article from the list, we will open another activity with second fragment which will show up the whole article.

Here, we have created both the fragment such that we can use them with single activity as well as with separate activities. Hence, fragments have demonstrated the re usability feature.

So now we can summarize that a fragment is a kind of sub-activity that enable us to creat emulti pane User Interface for activity.

We can use fragment when we want to have an activity which changes the user interface of the specific limited place on the screen with user input.

After this much information, you have enough basic idea about the importance of the fragment in android app development.

Now let us create practical examples with android studio to see how the theory of fragment actually works in android app.

Fragments Examples In Android Studio

Let us create two fragments example in android studio to see the practical execution of fragments.

First example will contain simple and basic fragment implementations.

In this example, we will create a fixed space into the area of activity. In this fixed space, we will show up two fragments one by one.

Meaning is that, one fragment will fill entire space when we click on the first button from activity.

When we click the second button from activity, second fragment will entirely replace the first fragment.

Step 1. Layout Writings

In the activity_main.xml file, add the below source code

I have added two textview and framelayout in the above XML file.

FrameLayout will hold the specific place in which we will create our fragment.

In short, design and UI widget of the fragment will be visible in the framelayout.

On the click event of both textviews, we will make different fragments.

Step 2. Making Fragments

Make a new fragment and give it a name FragmentOne.

Compiler will create two files : fragment_fragment_one.xml and FragmentOne.java 

Add the following source code in fragment_fragment_one.xml file

I have taken one textview in this file.

Parent tag of this file is the framelayout.

In the FragmentOne.java file, write down the following lines

Using this file, you can control the UI widget of this fragment.

In onCreateView() method, compiler will inflate the fragment_fragment_one.xml file. Thus, it will get the view of  fragment_fragment_one.xml file.

Now prepare another fragment and give it a name FragmentTwo.

Two files for this fragment are fragment_fragment_two.xml and FragmentTwo.java

Source code for fragment_fragment_two.xml looks like the below

Same as the fragment_fragment_one.xml file, it also has one textview.

FragmentTwo.java should have the below coding lines

This file will inflate fragment_fragment_two.xml to create the look and feel of the second fragment.

Step 3. Last Change

Finally, change the source code for MainActivity.java as per the below one

As we have seen in the activity_main.xml file, there are two textviews in the main file.

Click events of these textviews are written in this file.

On the click of first textview, compiler will open the first fragment. (FragmentOne.java)

Another textview will open the second fragment. (FragmentTwo.java)

Compiler is using the addFragment() method to open a new fragment.

Code structure for addFragment() method is as the following

This method has three parameters.

First one is the name of the fragment which we want to open in the framelayout.

Second one is the boolean. If it’s value is true then compiler will add this fragment to the backstack.

If the value is false, then it won’t add the fragment in backstack.

To know more about backstack read,

Android Fragment Backstack example

Last one is the tag in the string format which acts as a identifier for the fragment.

This method will use FragmentManager and FragmentTransaction class to create a fragment.

Below video demonstrate the final output of the above fragment example

Second Fragment Example

This example is about the demonstration about controlling the UI widgets of the fragments.

In this example, I will show you how to control the UI widgets like textview, button, Imageview etc. in the fragment’s java class.

We will create only one fragment in this example.

Inside this fragment, we will add one textview and two buttons.

When the user clicks the button, we change the value of the textview. Click event of both button will fill different text in the textview.

Prepare a new project in the android studio.

Select empty activity as a default activity to have pure clean project.

Step 1. Layout of Main

Your code for activity_main.xml file is as the below

This file has one textview and one framelayout.

Similar to above example, framelayout will hold the fragment.

While textview says that it is placed in the layout of activity so that we can differentiate the area of activity with the area of fragment.

Step 2. Blank Fragment

Create a new fragment and name it a Blank Fragment.

In the fragment_blank.xml file, add the below code structure.

One textview and two buttons are there in the above layout file.

We will change the value of the textview on the click event of both the buttons.

Now in the BlankFragment.java file, write down the following code block

In this file, I have written the code for the click event of both the buttons.

When the user clicks on the first button, Compiler will set the value of the textview as like “You clicked Button 1”

Similarly, on the click event of second button, a toast will pop up like “You clicked Button 2”.

Thus, you can see that we have learn how to control the click event and to change the value of textview from the JAVA file of the fragment.

Similarly, you can change the value of imageview, button text etc. from this JAVA class.

Step 3. Main JAVA file

Now in the MainActivity.java file, add the following source code

In this class, we will simply add the fragment in the container.

After this much code writings, you should get the output as per the below video.

 

 

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *