Skip to main content

Fragment Introduction

Introduction to Fragments in Kotlin Android

Fragments are an important component in Android development that allow developers to create modular and reusable UI components. They represent a portion of the user interface or behavior of an activity and can be combined with other fragments to create a flexible and responsive UI.

In this tutorial, we will explore the features and usage of fragments in Kotlin Android. We will cover the basics of fragments, how to create and add them to an activity, and how to communicate between fragments.

Features of Fragments​

Fragments offer several features that make them a powerful tool for building Android applications:

  1. Modularity: Fragments allow you to break down your UI into smaller, self-contained components. This promotes code reusability and maintainability.

  2. Lifecycle: Fragments have their own lifecycle, which is tied to the lifecycle of the hosting activity. This allows you to handle events and manage resources specific to each fragment.

  3. UI Flexibility: Fragments can be combined and rearranged dynamically to create different layouts for different screen sizes or orientations. This makes it easier to create responsive UIs that adapt to different devices.

  4. Back Stack Management: Fragments can be added to a back stack, allowing users to navigate between different fragments using the back button. This provides a seamless navigation experience for the user.

  5. Communication: Fragments can communicate with each other and with the hosting activity using interfaces or shared view models. This allows for easy data exchange and interaction between different components of your application.

Creating Fragments in Kotlin​

To create a fragment in Kotlin, you need to create a new Kotlin class that extends the Fragment class. Here is an example of a simple fragment:

class MyFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_my, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        // Perform any additional setup or UI initialization here
    }
}

In the example above, the onCreateView method is responsible for inflating the layout for the fragment and returning the root view. The onViewCreated method is called after the view has been created, allowing you to perform any additional setup or UI initialization.

Adding Fragments to an Activity​

To add a fragment to an activity, you need to use the FragmentManager and a FragmentTransaction. Here is an example of how to add a fragment to an activity:

val fragmentManager = supportFragmentManager
val fragmentTransaction = fragmentManager.beginTransaction()
val fragment = MyFragment()

fragmentTransaction.add(R.id.fragment_container, fragment)
fragmentTransaction.commit()

In the example above, we obtain an instance of the FragmentManager using the supportFragmentManager property. We then start a new FragmentTransaction, create an instance of our fragment, and add it to the activity using the add method. Finally, we commit the transaction to apply the changes.

Note that R.id.fragment_container refers to the ID of the container view in the activity's layout file where the fragment will be added.

Communicating Between Fragments​

Fragments can communicate with each other and with the hosting activity using interfaces. Here is an example of how to set up communication between two fragments:

  1. Create an interface in the first fragment to define the communication contract:
interface OnDataClickListener {
    fun onDataClicked(data: String)
}
  1. Implement the interface in the hosting activity:
class MainActivity : AppCompatActivity(), OnDataClickListener {

    override fun onDataClicked(data: String) {
        // Handle the data click event
    }

    // Rest of the activity code
}
  1. Pass the interface implementation to the second fragment:
class SecondFragment : Fragment() {

    private lateinit var onDataClickListener: OnDataClickListener

    override fun onAttach(context: Context) {
        super.onAttach(context)
        onDataClickListener = context as OnDataClickListener
    }

    // Rest of the fragment code
}
  1. Trigger the callback method in the second fragment:
button.setOnClickListener {
    onDataClickListener.onDataClicked("Clicked data")
}

In the example above, the first fragment defines an interface OnDataClickListener that has a method onDataClicked to handle the data click event. The hosting activity implements this interface and provides the implementation for the method. The second fragment receives the interface implementation through the onAttach method and triggers the callback method when a button is clicked.

Fragment Examples​