In Android app development, a fragment is a very important component. Fragments are modules that make up part of the user interface (UI) and can manage their own lifecycle independently. By using fragments, you can transition between different screens and create reusable UI components. This tutorial will explore how to utilize fragments using Kotlin in detail.<\/p>\n
A fragment is a component that includes a small part of the UI within an activity. An activity represents a single screen that interacts with the user, but various fragments can be used to compose multiple UIs within a single activity. Fragments are very useful for the following reasons:<\/p>\n
Fragments have their own lifecycle. The lifecycle of a fragment depends on the activity, but lifecycle methods are called independently. The main lifecycle methods of a fragment include:<\/p>\n
onAttach()<\/code>: Called when the fragment is attached to the activity.<\/li>\nonCreate()<\/code>: Called to perform initialization tasks for the fragment.<\/li>\nonCreateView()<\/code>: Called to create the UI for the fragment.<\/li>\nonActivityCreated()<\/code>: Called after the activity’s creation is complete.<\/li>\nonStart()<\/code>: Called when the fragment starts becoming visible to the user.<\/li>\nonResume()<\/code>: Called when the fragment is interacting with the user.<\/li>\nonPause()<\/code>: Called when the fragment stops interacting with the user.<\/li>\nonStop()<\/code>: Called when the fragment is no longer visible to the user.<\/li>\nonDestroyView()<\/code>: Called when the fragment’s UI is destroyed.<\/li>\nonDetach()<\/code>: Called when the fragment is detached from the activity.<\/li>\n<\/ul>\nCreating a Basic Fragment<\/h2>\n
Now, let’s create a simple fragment using Kotlin. Start a new project and follow the steps below.<\/p>\n
1. Create a Fragment Class<\/h3>\n
Create a Kotlin class for the fragment that inherits from Fragment<\/code>. For example, let’s create a fragment named SampleFragment<\/code>:<\/p>\npackage com.example.myapp\n\nimport android.os.Bundle\nimport android.view.LayoutInflater\nimport android.view.View\nimport android.view.ViewGroup\nimport androidx.fragment.app.Fragment\n\nclass SampleFragment : Fragment() {\n\n override fun onCreateView(\n inflater: LayoutInflater, \n container: ViewGroup?, \n savedInstanceState: Bundle?\n ): View? {\n \/\/ Inflate the layout file to be used in the fragment.\n return inflater.inflate(R.layout.fragment_sample, container, false)\n }\n}<\/code><\/pre>\n2. Create a Layout File<\/h3>\n
Create a layout XML file used by the fragment. Write the res\/layout\/fragment_sample.xml<\/code> file as follows:<\/p>\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:orientation=\"vertical\">\n\n <TextView\n android:id=\"@+id\/sampleTextView\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"Hello, Fragment!\" \/>\n\n<\/LinearLayout><\/code><\/pre>\n3. Use the Fragment in an Activity<\/h3>\n
Now the created fragment is ready to be used in an activity. Add a FrameLayout<\/code> to the activity’s layout file to create space for the fragment:<\/p>\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:orientation=\"vertical\">\n\n <FrameLayout\n android:id=\"@+id\/fragment_container\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\/>\n\n<\/LinearLayout><\/code><\/pre>\n4. Add the Fragment to the Activity<\/h3>\n
In the activity’s onCreate<\/code> method, dynamically add the fragment:<\/p>\npackage com.example.myapp\n\nimport android.os.Bundle\nimport androidx.appcompat.app.AppCompatActivity\nimport androidx.fragment.app.FragmentManager\n\nclass MainActivity : AppCompatActivity() {\n\n override fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n setContentView(R.layout.activity_main)\n\n \/\/ Add the Fragment using FragmentManager.\n if (savedInstanceState == null) {\n val fragment = SampleFragment()\n supportFragmentManager.beginTransaction()\n .add(R.id.fragment_container, fragment)\n .commit()\n }\n }\n}<\/code><\/pre>\nSwitching Between Fragments<\/h2>\n
Now let’s create multiple fragments and learn how to switch between them. As a simple example, we will implement a feature that switches to another fragment when a button is clicked.<\/p>\n
1. Create a Second Fragment<\/h3>\n
Create a second fragment named SecondFragment<\/code> and add a layout that includes a button:<\/p>\npackage com.example.myapp\n\nimport android.os.Bundle\nimport android.view.LayoutInflater\nimport android.view.View\nimport android.view.ViewGroup\nimport androidx.fragment.app.Fragment\nimport kotlinx.android.synthetic.main.fragment_second.*\n\nclass SecondFragment : Fragment() {\n\n override fun onCreateView(\n inflater: LayoutInflater, \n container: ViewGroup?, \n savedInstanceState: Bundle?\n ): View? {\n return inflater.inflate(R.layout.fragment_second, container, false)\n }\n\n override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n super.onViewCreated(view, savedInstanceState)\n\n \/\/ Switch the fragment on button click.\n button.setOnClickListener {\n val firstFragment = SampleFragment()\n fragmentManager?.beginTransaction()\n ?.replace(R.id.fragment_container, firstFragment)\n ?.addToBackStack(null)\n ?.commit()\n }\n }\n}<\/code><\/pre>\n2. Create a Layout File for the Second Fragment<\/h3>\n
Create the layout file for the second fragment as follows:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:orientation=\"vertical\">\n\n <Button\n android:id=\"@+id\/button\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"Back to Sample Fragment\"\/>\n\n<\/LinearLayout><\/code><\/pre>\n3. Add Fragment Switching<\/h3>\n
In the existing SampleFragment<\/code>, add a method for switching to the second fragment when a button is clicked:<\/p>\nclass SampleFragment : Fragment() {\n \/\/ omitted...\n\n override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n super.onViewCreated(view, savedInstanceState)\n\n \/\/ Switch to the second fragment on button click.\n val button = view.findViewById