
<p class="p1">This tutorial is about how to create a fragment and include it in an activity with the help of an example.</p> 
 
 
 
<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-block-buttons-is-layout-flex"> 
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background" style="background-color: #520599;" href="https://github.com/arunk7839/AndroidFragmentDemo" target="_blank" rel="noreferrer noopener"><strong>DOWNLOAD CODE</strong></a></div> 
</div> 
 
 
 
<h3 class="wp-block-heading" id="create"><span style="color: #000080;"><strong><span class="devsite-heading" role="heading" aria-level="2">Create a fragment class</span></strong></span></h3> 
 
 
 
<p class="p1">To create a fragment, we have to define a fragment class, which extends the class <span style="color: #008000;"><strong><span class="s1">Fragment</span></strong></span> and overrides the necessary methods.</p> 
 
 
 
<pre class="wp-block-preformatted p1"><b>class </b>FragmentOne : Fragment() { 
 
<span class="Apple-converted-space"> </span><b>override fun </b>onCreateView( 
 
<span class="Apple-converted-space"> </span>inflater: LayoutInflater, container: ViewGroup?, 
 
<span class="Apple-converted-space"> </span>savedInstanceState: Bundle? 
 
<span class="Apple-converted-space"> </span>): View? { 
 
<span class="Apple-converted-space"> </span><strong><span style="color: #008000;"><i>// Inflate the layout for this fragment</i></span></strong> 
 
<i><span class="Apple-converted-space"> </span></i><b>return </b>inflater.inflate(R.layout.<strong><span style="color: #0000ff;"><i>fragment_one</i></span></strong>, container, <b>false</b>) 
 
<span class="Apple-converted-space"> </span>}</pre> 
 
 
 
<p><span style="color: #0000ff;"><strong>FragmentOne</strong></span>: subclass of Fragment.</p> 
 
 
 
<p class="p1"><span style="font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; color: #000000;"><span style="color: #0000ff;"><strong>fragment_one:</strong></span> </span><span style="font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;"> layout of <span style="color: #0000ff;"><strong>fragmentOne,</strong></span> which is defined in a separate XML file with the name</span><strong style="font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;"><span style="color: #008000;"> fragment_one.xml.</span></strong></p> 
 
 
 
<h3 class="wp-block-heading" id="add"><span style="color: #000080;"><strong><span class="devsite-heading" role="heading" aria-level="2">Add a fragment to an activity</span></strong></span></h3> 
 
 
 
<p class="p1">To add a fragment to any activity, you can follow any of the following 2 approaches:</p> 
 
 
 
<ul class="ul1 wp-block-list"> 
<li class="li1"><span style="color: #0000ff;"><b>Add a fragment via XML</b></span></li> 
<li class="li1"><span style="color: #0000ff;"><b>Add a fragment programmatically</b></span></li> 
</ul> 
 
 
 
<p class="p1">In either case, you need to add a <strong><span style="color: #0000ff;"><a style="color: #0000ff;" href="https://developer.android.com/reference/androidx/fragment/app/FragmentContainerView"><span class="s3">FragmentContainerView</span></a></span></strong> which extends the <strong><span style="color: #008000;">FrameLayout</span></strong> view group.</p> 
 
 
 
<p class="p1">It is strongly recommended to always use a <strong><span class="s4">FragmentContainerView</span></strong> as the container for fragments, as <span class="s4">FragmentContainerView</span> includes fixes specific to fragments that other view groups such as <span class="s4">FrameLayout</span> do not provide.</p> 
 
 
 
<h4 class="p1 wp-block-heading"><span style="color: #000080;"><b>Add a fragment via XML</b></span></h4> 
 
 
 
<ul class="wp-block-list"> 
<li class="p1">To add a fragment to your activity layout&#8217;s XML, use a <span style="color: #008000;"><strong><span class="s4">FragmentContainerView</span></strong></span> element.</li> 
<li><span style="color: #000000;"><span class="s4">In </span><span class="s4">FragmentContainerView,</span></span><strong><span style="color: #0000ff;"><span class="s4"> android: name</span></span> </strong>or<strong> <span style="color: #0000ff;">class </span></strong>attribute specifies the class name of the <span class="s4">Fragment</span> to instantiate.</li> 
</ul> 
 
 
 
<pre class="wp-block-preformatted p1"><span class="s4"><;androidx.fragment.app.FragmentContainerView</span> 
 
<span class="s4"> xmlns:android="http://schemas.android.com/apk/res/android"</span> 
 
<span class="s4"> android:id="@+id/fragment_container_view"</span> 
 
<span class="s4"> android:layout_width="match_parent"</span> 
 
<span class="s4"> android:layout_height="match_parent"</span> 
 
<span class="s4"> <span style="color: #008000;"><strong>android:name="com.example.ExampleFragment"</strong></span> />;</span></pre> 
 
 
 
<p class="p1">When the activity&#8217;s layout is inflated, the specified fragment is instantiated, <strong><span style="color: #0000ff;"><a style="color: #0000ff;" href="https://developer.android.com/reference/androidx/fragment/app/Fragment#onInflate(android.content.Context,%2520android.util.AttributeSet,%2520android.os.Bundle)"><span class="s3">onInflate()</span></a> </span></strong>is called on the newly instantiated fragment, and a <span style="color: #008000;"><strong><span class="s4">FragmentTransaction</span></strong></span> is created to add the fragment to the <span class="s4">FragmentManager</span>.</p> 
 
 
 
<h5 class="p4 wp-block-heading"><span style="color: #000080;"><b>Implementation of Fragment via XML</b></span></h5> 
 
 
 
<p class="p1">In this example, we will see how to statically add two fragments to an activity, by adding two <strong><span class="s4">FragmentContainerView</span></strong> elements directly in our app&#8217;s main layout XML file.</p> 
 
 
 
<p>The <strong><span style="color: #0000ff;">activity_main.xml</span></strong> defines the activity layout which consists of two <strong><span style="color: #008000;">FragmentContainerView</span></strong> elements with different <span style="color: #008000;"><strong>class</strong></span> attributes (<strong>FragmentOne and FragmentTwo</strong>).</p> 
 
 
 
<p><strong><span style="color: #0000ff;">activity_main.xml</span> </strong></p> 
 
 
 
<pre class="wp-block-preformatted"><;?xml version="1.0" encoding="utf-8"?>; 
<;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:orientation="vertical" 
 tools:context=".MainActivity">; 
 
 <;androidx.fragment.app.FragmentContainerView 
 android:id="@+id/fcv_one" 
 <strong><span style="color: #008000;">class="com.c1ctech.androidfragmentdemo.FragmentOne"</span></strong> 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:layout_weight="5" />; 
 
 <;androidx.fragment.app.FragmentContainerView 
 android:id="@+id/fcv_two" 
 <strong><span style="color: #008000;">class="com.c1ctech.androidfragmentdemo.FragmentTwo"</span></strong> 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:layout_weight="5" />; 
 
<;/LinearLayout>;</pre> 
 
 
 
<p>The <strong><span style="color: #008000;">fragment_one.xml</span> </strong>defines the layout of the fragment with the name <span style="color: #008000;"><strong>FragmentOne</strong></span>.</p> 
 
 
 
<p><span style="color: #0000ff;"><strong>fragment_one.xml</strong></span></p> 
 
 
 
<pre class="wp-block-preformatted"><;?xml version="1.0" encoding="utf-8"?>; 
<;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:background="@android:color/holo_orange_light" 
 tools:context=".FragmentOne">; 
 
 <;TextView 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_centerInParent="true" 
 android:text="FragmentOne" 
 android:textColor="@android:color/white" 
 android:textSize="30sp" 
 android:textStyle="bold" />; 
 
<;/RelativeLayout>;</pre> 
 
 
 
<p>The <strong><span style="color: #0000ff;">FragmentOne</span></strong> defines the subclass of Fragment corresponding to the layout <span style="color: #008000;"><strong>fragment_one.xml.</strong> </span></p> 
 
 
 
<p><span style="color: #0000ff;"><strong>FragmentOne.kt</strong></span></p> 
 
 
 
<pre class="wp-block-preformatted">package com.c1ctech.androidfragmentdemo 
import android.os.Bundle 
import androidx.fragment.app.Fragment 
import android.view.LayoutInflater 
import android.view.View 
import android.view.ViewGroup 
 
class FragmentOne : Fragment() { 
 
 override fun onCreateView( 
 inflater: LayoutInflater, container: ViewGroup?, 
 savedInstanceState: Bundle? 
 ): View? { 
<span style="color: #008000;"><strong> // Inflate the layout for this fragment 
</strong></span> return inflater.inflate(R.layout.fragment_one, container, false) 
 } 
}</pre> 
 
 
 
<p>Similarly, the layout XML file and the class for the second fragment ( <strong>FragmentTwo </strong>) will be:</p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>
 
 
 
 
<p><strong><span style="color: #0000ff;">fragment_two.xml</span></strong></p> 
 
 
 
<pre class="wp-block-preformatted"><;?xml version="1.0" encoding="utf-8"?>; 
<;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:background="@android:color/holo_blue_bright" 
 tools:context=".FragmentTwo">; 
 
 <;TextView 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_centerInParent="true" 
 android:text="FragmentTwo" 
 android:textColor="@android:color/white" 
 android:textSize="30sp" 
 android:textStyle="bold" />; 
 
<;/RelativeLayout>;</pre> 
 
 
 
<p><span style="color: #0000ff;"><strong>FragmentTwo.kt</strong></span></p> 
 
 
 
<pre class="wp-block-preformatted">package com.c1ctech.androidfragmentdemo 
 
import android.os.Bundle 
import androidx.fragment.app.Fragment 
import android.view.LayoutInflater 
import android.view.View 
import android.view.ViewGroup 
 
class FragmentTwo : Fragment() { 
 
 override fun onCreateView( 
 inflater: LayoutInflater, container: ViewGroup?, 
 savedInstanceState: Bundle? 
 ): View? { 
<span style="color: #008000;"><strong> // Inflate the layout for this fragment 
</strong></span> return inflater.inflate(R.layout.fragment_two, container, false) 
 } 
}</pre> 
 
 
 
<p>There is no need to make any changes in the activity while adding the fragment via XML to an activity.</p> 
 
 
 
<p class="p1"><span style="color: #0000ff;"><strong>When you run the app it will look like this:</strong></span></p> 
 
 
 
<figure class="wp-block-image is-resized"> 
<figure id="attachment_2601" aria-describedby="caption-attachment-2601" style="width: 379px" class="wp-caption alignnone"><img class="wp-image-2601" src="https://c1ctech.com/wp-content/uploads/2021/04/AndroidCreateFragmentViaXmlDemo.png" alt="" width="379" height="674" /><figcaption id="caption-attachment-2601" class="wp-caption-text"><span style="color: #0000ff;"><strong>An activity containing two fragments with different UI.</strong></span></figcaption></figure> 
</figure> 
 
 
 
<h4 class="p1 wp-block-heading"><span style="color: #000080;"><b>Add a fragment programmatically</b></span></h4> 
 
 
 
<p class="p1">To dynamically add a fragment to your activity&#8217;s layout, the layout should include a <strong><span class="s4" style="color: #008000;">FragmentContainerView</span></strong> to serve as a fragment container, as shown in the following example:</p> 
 
 
 
<pre class="wp-block-preformatted p1"><span class="s4"><;androidx.fragment.app.FragmentContainerView</span> 
 
<span class="s4"> xmlns:android="http://schemas.android.com/apk/res/android"</span> 
 
<span class="s4"> android:id="@+id/fragment_container_view"</span> 
 
<span class="s4"> android:layout_width="match_parent"</span> 
 
<span class="s4"> android:layout_height="match_parent" />;</span></pre> 
 
 
 
<ul class="wp-block-list"> 
<li class="p1">Instead of using <span style="color: #008000;"><strong><span class="s4">android:name </span></strong><span class="s4"><span style="color: #000000;">or</span></span><strong><span class="s4"> class</span></strong></span> attribute ( instantiate the specific fragment automatically), a <strong><span style="color: #0000ff;"><a style="color: #0000ff;" href="https://developer.android.com/reference/androidx/fragment/app/FragmentTransaction"><span class="s3">FragmentTransaction</span></a></span></strong> is used to instantiate a fragment and add it to the activity&#8217;s layout.</li> 
<li class="p1">While your activity is running, you can make fragment transactions such as <span style="color: #008000;"><strong>adding</strong></span>, <strong><span style="color: #008000;">removing</span></strong> or <strong><span style="color: #008000;">replacing</span></strong> a fragment.</li> 
</ul> 
 
 
 
<h5 class="p4 wp-block-heading"><span style="color: #000080;"><b>Implementation of F</b><b>ragment programmatically</b></span></h5> 
 
 
 
<p class="p1">In this example, we will see how to dynamically add fragments to an activity on click of buttons, by adding only one <strong><span class="s4">FragmentContainerView</span></strong> element in our app&#8217;s main layout XML file.</p> 
 
 
 
<p class="p1">The <strong><span style="color: #0000ff;">activity_main.xml</span></strong> defines the activity layout which consists of a <strong><span style="color: #008000;">FragmentContainerView</span></strong> element and two buttons, on click of which we will add different fragments in <strong><span style="color: #008000;">FragmentContainerView</span></strong> element at run time.</p> 
 
 
 
<p><strong><span style="color: #0000ff;">activity_main.xml</span></strong></p> 
 
 
 
<pre class="wp-block-preformatted"><;?xml version="1.0" encoding="utf-8"?>; 
<;androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:app="http://schemas.android.com/apk/res-auto" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 tools:context=".MainActivity">; 
 
 <;Button 
 android:id="@+id/btn_fragmentOne" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:text="FragmentOne" 
 android:textAllCaps="false" 
 android:textSize="20sp" 
 android:background="@android:color/holo_orange_light" 
 app:layout_constraintEnd_toEndOf="parent" 
 app:layout_constraintStart_toStartOf="parent" 
 app:layout_constraintTop_toTopOf="parent" />; 
 
 <;Button 
 android:id="@+id/btn_fragmentTwo" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:layout_marginTop="5dp" 
 android:text="FragmentTwo" 
 android:textAllCaps="false" 
 android:textSize="20sp" 
 android:background="@android:color/holo_blue_bright" 
 app:layout_constraintEnd_toEndOf="@+id/btn_fragmentOne" 
 app:layout_constraintStart_toStartOf="@+id/btn_fragmentOne" 
 app:layout_constraintTop_toBottomOf="@+id/btn_fragmentOne" />; 
 
 <;androidx.fragment.app.FragmentContainerView 
 android:id="@+id/fragment_container_view" 
 android:layout_width="match_parent" 
 android:layout_height="0dp" 
 android:layout_marginTop="5dp" 
 app:layout_constraintBottom_toBottomOf="parent" 
 app:layout_constraintEnd_toEndOf="parent" 
 app:layout_constraintStart_toStartOf="parent" 
 app:layout_constraintTop_toBottomOf="@+id/btn_fragmentTwo" />; 
 
<;/androidx.constraintlayout.widget.ConstraintLayout>;</pre> 
 
 
 
<p>The code for the main activity class <span style="color: #008000;"><b>MainActivity.kt</b></span> will be as follows:</p> 
 
 
 
<p><span style="color: #0000ff;"><b>MainActivity.kt</b></span></p> 
 
 
 
<pre class="wp-block-preformatted">package com.c1ctech.androidfragmentdemo 
import androidx.appcompat.app.AppCompatActivity 
import android.os.Bundle 
import androidx.fragment.app.add 
import androidx.fragment.app.commit 
import kotlinx.android.synthetic.main.activity_main.* 
 
class MainActivity : AppCompatActivity() { 
 override fun onCreate(savedInstanceState: Bundle?) { 
 super.onCreate(savedInstanceState) 
 setContentView(R.layout.activity_main) 
 
 btn_fragmentOne.setOnClickListener { 
 <strong><span style="color: #008000;"> supportFragmentManager.commit { 
 add<;FragmentOne>;(R.id.fragment_container_view)</span></strong> 
 } 
 } 
 
 btn_fragmentTwo.setOnClickListener { 
 <strong><span style="color: #008000;"> supportFragmentManager.commit { 
 add<;FragmentTwo>;(R.id.fragment_container_view)</span></strong> 
 } 
 } 
 } 
}</pre> 
 
 
 
<p class="p1">In the above code, to add the fragment dynamically to the activity:</p> 
 
 
 
<ul class="wp-block-list"> 
<li class="p1">The <strong><span style="color: #008000;"><a style="color: #008000;" href="https://developer.android.com/reference/androidx/fragment/app/FragmentManager"><span class="s1">FragmentManager</span></a></span></strong> is used to create a <span style="color: #008000;"><strong><span class="s2">FragmentTransaction</span></strong></span>.</li> 
<li class="p1">Then, to instantiate the fragment <span style="color: #008000;"><strong><a style="color: #008000;" href="https://developer.android.com/reference/androidx/fragment/app/FragmentTransaction#add(int,%20java.lang.Class%3C?%20extends%20androidx.fragment.app.Fragment%3E,%20android.os.Bundle)"><span class="s1">FragmentTransaction.add()</span></a></strong></span> is used, passing in the <span class="s2">ViewGroup</span> ID of the container in the layout and the fragment class we want to add and then commited the transaction.</li> 
</ul> 
 
 
 
<p><span style="color: #0000ff;"><strong>When you run the app it will look like this:</strong></span></p> 
 
 
 
<figure class="wp-block-image is-resized"> 
<figure id="attachment_2649" aria-describedby="caption-attachment-2649" style="width: 337px" class="wp-caption alignleft"><img class="wp-image-2649" src="https://c1ctech.com/wp-content/uploads/2021/07/Screenshot_1625131945.png" alt="" width="337" height="599" /><figcaption id="caption-attachment-2649" class="wp-caption-text"><span style="color: #0000ff;"><strong>Button FragmentOne is clicked</strong></span></figcaption></figure> 
<figure id="attachment_2650" aria-describedby="caption-attachment-2650" style="width: 336px" class="wp-caption alignleft"><img class="wp-image-2650" src="https://c1ctech.com/wp-content/uploads/2021/07/Screenshot_1625131941.png" alt="" width="336" height="597" /><figcaption id="caption-attachment-2650" class="wp-caption-text"><span style="color: #0000ff;"><strong>Button FragmentTwo is clicked</strong></span></figcaption></figure> 
</figure>