![\"Fragments](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/06\/Fragments-interact-with-activity-in-various-devices.jpg\")
<\/a><\/p>\nSo to understand this, let\u2019s take the example shown in the above picture. Here you can see we are considering two devices: Tablet and a Handset. Let\u2019 see how fragments interact through activity in both devices.<\/p>\n
In Tablet, we have only one activity called Activity 1. In this activity, we have two fragments Fragment A and Fragment B. If the user selects something in Fragment A, then that is displayed on Fragment B. Here, we don\u2019t require another activity to perform this thing.<\/p>\n
Whereas in the handset, we require two activities as the device\u2019s screen size is comparatively tiny than tablets. Hence we would need two activities to perform the same task. In Activity 1, we have fragment A where the user selects something. In Activity 2, we have fragment B, where the user can view his selection.<\/p>\n
Lifecycle of Fragments in Android<\/h2>\n
Fragments depend upon the activity for its existence and have a lifecycle similar to Android Activity. Below is an image that summarizes the Fragment Lifecycle.<\/p>\n
Following are the methods that are implemented depending on the requirement we have. All these methods contribute to the proper functioning of a fragment. Let\u2019s see each of them in detail.<\/p>\n To initialize a fragment with the respective activity, we use the above method. Using this method, the fragment gets fully initialized. It is called once the fragment is associated with its activity, allowing the fragment to interact with the activity context and access its properties.<\/p>\n This method is used to create a fragment and initialize the necessary components. We may want to retain these essential components even if the fragment is paused or stopped and then resumed. It is called to perform the initial setup, such as inflating views and setting up resources.<\/p>\n This method is used to return the UI layout of the fragment to the user. This method is invoked at the time when the fragment is created. If you don\u2019t have any design with your fragment then just return null.<\/p>\n This method is invoked after the onCreateView(). This method signifies that the activity is ready to host your fragment. After this method is invoked, we can access the fragment view by using findViewById().<\/p>\n This method is invoked immediately after the fragment is visible on the user\u2019s device. It marks the point where the fragment becomes visible and interactive to the user, often used to initialize components that require user input.<\/p>\n This method is invoked immediately when the fragment comes back into focus. It signifies that the fragment is now active and the user can interact with it. This method is typically used to resume any paused tasks or animations.<\/p>\n This method is invoked whenever the fragment goes out of focus or is inactive for some duration. It allows you to save any state changes or pause ongoing tasks that should not continue while the fragment is not in the foreground.<\/p>\n This method is invoked when the fragment is not visible to the user anymore.<\/p>\n This method is invoked to clear up the resources used by the fragment. It is called just before the fragment is going to be destroyed. It allows you to clean up resources related to the fragment’s view, such as bitmap recycling or stopping services.<\/p>\n This method is invoked to destroy the fragment and clean up its state. It is the final cleanup call before the fragment is completely removed from memory. Use this method to release resources and save any persistent state.<\/p>\n This method is invoked to detach a fragment from host activity. It marks the end of the fragment’s association with its activity and provides an opportunity to perform final cleanup before the fragment is destroyed.<\/p>\n Fragments can be used in a project by following the below steps:<\/p>\n We know that fragments are required to be present in an activity. A fragment individually can\u2019t exist, and hence we should know how to place a fragment with an activity. There are two ways to do this:<\/p>\n Using this method, you can place the fragment through the XML file. The demerit of this method is you can\u2019t change the fragment on runtime. If you wish to change the fragment with another, you need to edit the XML code again.<\/p>\n While placing the fragment you should ensure that the fragment class extends FragmentActivity or AppCompatActivity.<\/p>\n Below is an implementation of the same.<\/p>\n Unlike the static method here, you can change the fragments on runtime. You need to add a frame layout, and then through fragment transaction, you can place fragments during runtime. Below is an implementation of the same.<\/p>\n Now to create the fragment transaction, you can use the below code.<\/p>\n We know that fragment is placed in an activity. To find a fragment in your project, you have several methods. You can use the below to locate the required fragment:<\/p>\n Using this, we can find the fragment based on its ID. You need to use the findFragmentByID() method in this case.<\/p>\n Using this, we can find the fragment based on its name. You need to use the findFragmentByName() method in this case.<\/p>\n Using this, we can find the fragment based on the view pager on which the fragment is registered. You need to use the getRegisteredFragment() method in this case.<\/p>\n The fragment is a part of the activity, and if in case the fragment needs to communicate to the other fragments. Then it can\u2019t do it directly. It needs to communicate through its parent activity to perform a task.<\/p>\n So, it becomes essential for us to understand how a fragment can communicate with its root activity. Following are the methods which you can do to achieve the task.<\/p>\n Whenever we want to share data or communicate between the fragments, we can create a standard view model. The view model allows multiple fragments to interact and communicate.<\/p>\n For example:<\/strong><\/p>\n Using an interface also you can connect multiple fragments. You just need to create an interface in your first fragment. Now, you need to implement the designed interface in your activity. Directly by calling the other fragment from your activity, you can simply connect the interface.<\/p>\n Now you need to implement the above interface in your Main Activity. You can do that using the below code.<\/span><\/p>\n Now you can create the updateMsg() method in your Fragment Two, and this will do your task.<\/span><\/p>\n Sometimes there can be a need to have a fragment inside another fragment. This can be achieved by simply placing another FrameLayout inside the existing layout of the fragment. This helps you to keep a fragment inside another. For example:<\/strong><\/p>\n So, here you can see the linear layout is the layout of the root fragment. In this root fragment, we are creating a child fragment using the frame layout container.<\/p>\n Following are the steps using which you can create fragments in Android. We will show you how to create a layout similar to WhatsApp, having three fragments: Chats, Status, Calls.<\/p>\n 1:<\/strong> Open your Android Studio.<\/p>\n 2: <\/strong>Click on Create New Project.<\/p>\n 3: <\/strong>Select Empty Activity and proceed.<\/p>\n 4: <\/strong>Enter your application name. In my case, it\u2019s \u201cTechVidvanFragments.\u201d Next, select Kotlin from the dropdown. For the API level, select API 22 for now.<\/p>\n 5: <\/strong>Now open your app-level Gradle file and paste the below dependency in the dependencies. Now click on sync.<\/p>\n 6: <\/strong>Now go to res—> values —>themes and paste the below code.<\/p>\n themes.xml<\/strong><\/p>\n 7:<\/strong> Now open your activity_main.xml file and copy-paste the below code.<\/p>\n activity_main.xml<\/strong><\/p>\n 8: <\/strong>Now, go to your project structure. Select your package and right-click. Then select New—> Fragments —> Fragments(Blank).\u00a0<\/span><\/p>\n You will see a screen like below. Keep the name as ChatsFragment and proceed.\u00a0<\/span><\/p>\n Similarly, create two other fragments named StatusFragment and CallsFragment. <\/span>Now copy the below codes in respective fragments and their layout files.<\/span><\/p>\n fragment_chats.xml<\/strong><\/p>\n ChatsFragemnt.kt<\/strong><\/p>\n fragment_status.xml<\/b><\/p>\n StatusFragemnt.kt<\/b><\/p>\n fragment_calls.xml<\/b><\/p>\n CallsFragemnt.kt<\/b><\/p>\n 9: <\/strong>Now, you need to create a new kotlin class. Just select your package —> Right-click —> Click on New and Select Kotlin Class and enter the name as \u201cViewPagerAdapter.\u201dNow just copy the below code into ViewPagerAdapter.kt file.<\/p>\n ViewPagerAdapter.kt<\/strong><\/p>\n 10:<\/strong> Now, come to your Main Activity file and paste the below code there.<\/span><\/p>\n MainActivity.kt<\/strong><\/p>\n So, now you can run your application and see the output.\u00a0<\/span><\/p>\n You can find three tabs: Chats, Status, and Fragments.\u00a0<\/span><\/p>\n<\/a><\/p>\nMethods of Fragments in Android<\/h2>\n
1. onAttach()<\/h3>\n
2. onCreate()<\/h3>\n
3. onCreateView()<\/h3>\n
4. onActivityCreated()<\/h3>\n
5. onStart()<\/h3>\n
6. onResume()<\/h3>\n
7. onPause()<\/h3>\n
8. onStop()<\/h3>\n
9. onDestroyView()<\/h3>\n
10. onDestroy()<\/h3>\n
11. onDetach()<\/h3>\n
How to use Android Fragments?<\/h2>\n
\n
Android Fragments with Activity<\/h2>\n
1. Static method<\/h3>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:orientation=\"vertical\" >\r\n\r\n <fragment\r\n android:name=\"com.TechVidvan.android.MyFragment\"\r\n android:id=\"@+id\/static_fragment\"\r\n android:layout_width=\"match_parent\" \r\n android:layout_height=\"match_parent\" \/>\r\n\r\n<\/LinearLayout>\r\n<\/pre>\n
2. Dynamic method<\/h3>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:orientation=\"vertical\" >\r\n <FrameLayout\r\n android:id=\"@+id\/fragment_placeholder\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\">\r\n <\/FrameLayout>\r\n<\/LinearLayout>\r\n<\/pre>\n
val transaction = fragmentSupportManager.beginTransaction()\r\n transaction.replace(R.id.host,new TechVidvanFragment())\r\n transaction.commit()\r\n<\/pre>\n
Fragment Instance in Android<\/h2>\n
1. By ID:<\/h3>\n
2. By Tag:<\/h3>\n
3. By Pager<\/h3>\n
Android Fragment and Activity Communication<\/h2>\n
1. View Model<\/h3>\n
class TechVidvanViewModel : ViewModel() {\r\nprivate val mutable_Item = MutableLiveData<Item>()\r\nval selectedItem: LiveData<Item> get() = mutable_item\r\n\r\nfun selectItem(item: Item) {\r\nmutable_item.value = item\r\n}\r\n}<\/pre>\n2. Interface<\/h3>\n
class FragmentOne : Fragment() {\r\n\r\n lateinit var listener: TextClickedListener\r\n\r\n \/\/defining Interface\r\n interface TextClickedListener {\r\n fun sendText(text: String)\r\n }\r\n\r\n fun setOnTextClickedListener(callback: TextClickedListener) {\r\n this.listener = callback\r\n }\r\n\r\n }\r\n}\r\n<\/pre>\nclass MainActivity :Activity(), FragmentOne.TextClicked {\r\n fun onAttachFragment(fragment: Fragment) {\r\n if (fragment is FragmentOne) {\r\n fragment.setOnTextClickedListener(this)\r\n }\r\n }\r\n override fun sendText(text: String) {\r\n \/\/ Call FragmentTwo\r\n val callingFragmentTwo = getSupportFragmentManager().findFragmentById(R.id.fragment_two) as FragmentTwo\r\n \/\/calling the updateMsg method of the FragmentTwo\r\n callingFragmentTwo.updateMsg(text)\r\n }\r\n}\r\n<\/pre>\nNesting Fragments within Fragment in Android<\/h2>\n
\nThis process is also known as Fragment Nesting.<\/p>\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nandroid:orientation=\"vertical\" >\r\n<TextView\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:text=\"The root Fragment\" \/>\r\n<FrameLayout\r\nandroid:id=\"@+id\/child_fragmentr\"\r\nandroid:layout_width=\u201d200dp\"\r\nandroid:layout_height=\"400dp\" \/>\r\n<\/LinearLayout><\/pre>\n
Implementation of Android Fragments<\/h2>\n
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n\/\/Add Material Dependency\r\n implementation 'com.google.android.material:material:1.3.0'\r\n<\/pre>\n
<\/a><\/p>\n<resources xmlns:tools=\"http:\/\/schemas.android.com\/tools\">\r\n <!-- Base application theme. -->\r\n <style name=\"Theme.TechVidvanFragment\" parent=\"Theme.MaterialComponents.DayNight.NoActionBar\">\r\n <!-- Primary brand color. -->\r\n <item name=\"colorPrimary\">@color\/green<\/item>\r\n <item name=\"colorPrimaryVariant\">@color\/green<\/item>\r\n <item name=\"colorOnPrimary\">@color\/white<\/item>\r\n <!-- Secondary brand color. -->\r\n <item name=\"colorSecondary\">@color\/teal_200<\/item>\r\n <item name=\"colorSecondaryVariant\">@color\/teal_700<\/item>\r\n <item name=\"colorOnSecondary\">@color\/black<\/item>\r\n <!-- Status bar color. -->\r\n <item name=\"android:statusBarColor\" tools:targetApi=\"l\">?attr\/colorPrimaryVariant<\/item>\r\n <!-- Customize your theme here. -->\r\n <\/style>\r\n<\/resources>\r\n<\/pre>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout\r\n xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n tools:context=\".MainActivity\">\r\n\r\n <com.google.android.material.appbar.AppBarLayout\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:id=\"@+id\/top_bar\">\r\n\r\n <com.google.android.material.tabs.TabLayout\r\n android:id=\"@+id\/tabs\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"wrap_content\"\r\n app:tabBackground=\"@color\/green\"\r\n app:tabGravity=\"fill\"\r\n app:tabInlineLabel=\"true\"\r\n app:tabMode=\"fixed\"\r\n app:tabTextColor=\"@color\/d_green\"\r\n app:tabSelectedTextColor=\"@color\/white\"\r\n \/>\r\n <\/com.google.android.material.appbar.AppBarLayout>\r\n\r\n <androidx.viewpager.widget.ViewPager\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:id=\"@+id\/view_pager\"\r\n android:layout_below=\"@+id\/top_bar\"\/>\r\n\r\n<\/RelativeLayout><\/pre>\n
<\/a><\/p>\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<FrameLayout \r\n xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n tools:context=\".ChatsFragment\">\r\n \r\n <TextView\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:gravity=\"center\"\r\n android:textSize=\"40sp\"\r\n android:textColor=\"@color\/black\"\r\n android:text=\"TechVidvan Chat Fragment\" \/>\r\n\r\n<\/FrameLayout>\r\n<\/pre>\n
package com.example.techvidvanfragment\r\n\r\nimport android.os.Bundle\r\nimport androidx.fragment.app.Fragment\r\nimport android.view.LayoutInflater\r\nimport android.view.View\r\nimport android.view.ViewGroup\r\n\r\nclass ChatsFragment : Fragment() {\r\n\r\n override fun onCreate(savedInstanceState: Bundle?) {\r\n super.onCreate(savedInstanceState)\r\n arguments?.let {\r\n }\r\n }\r\n\r\n override fun onCreateView(\r\n inflater: LayoutInflater, container: ViewGroup?,\r\n savedInstanceState: Bundle?\r\n ): View? {\r\n \/\/ Inflate the layout for this fragment\r\n return inflater.inflate(R.layout.fragment_chats, container, false)\r\n }\r\n}<\/pre>\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n tools:context=\".StatusFragment\">\r\n\r\n <TextView\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:gravity=\"center\"\r\n android:textSize=\"40sp\"\r\n android:textColor=\"@color\/black\"\r\n android:text=\"TechVidvan Status Fragment\" \/>\r\n\r\n<\/FrameLayout><\/pre>\n
package com.example.techvidvanfragment\r\n\r\nimport android.os.Bundle\r\nimport androidx.fragment.app.Fragment\r\nimport android.view.LayoutInflater\r\nimport android.view.View\r\nimport android.view.ViewGroup\r\n\r\nclass StatusFragment : Fragment() {\r\n\r\n override fun onCreate(savedInstanceState: Bundle?) {\r\n super.onCreate(savedInstanceState)\r\n arguments?.let {\r\n }\r\n }\r\n\r\n override fun onCreateView(\r\n inflater: LayoutInflater, container: ViewGroup?,\r\n savedInstanceState: Bundle?\r\n ): View? {\r\n \/\/ Inflate the layout for this fragment\r\n return inflater.inflate(R.layout.fragment_status, container, false)\r\n }\r\n\r\n}<\/pre>\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n tools:context=\".CallsFragment\">\r\n\r\n <TextView\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:gravity=\"center\"\r\n android:textSize=\"40sp\"\r\n android:textColor=\"@color\/black\"\r\n android:text=\"TechVidvan Calls Fragment\" \/>\r\n\r\n<\/FrameLayout><\/pre>\n
package com.example.techvidvanfragment\r\n\r\nimport androidx.fragment.app.Fragment\r\nimport androidx.fragment.app.FragmentManager\r\nimport androidx.fragment.app.FragmentPagerAdapter\r\n\r\nclass ViewPagerAdapter(supportFragmentManager: FragmentManager):FragmentPagerAdapter(supportFragmentManager,\r\n BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT)\r\n{\r\n private val fragment_list = ArrayList<Fragment>();\r\n private val fragment_title = ArrayList<String>();\r\n\r\n override fun getCount(): Int\r\n {\r\n return fragment_list.size;\r\n }\r\n\r\n override fun getItem(position: Int): Fragment {\r\n return fragment_list[position];\r\n }\r\n\r\n override fun getPageTitle(position: Int): CharSequence? {\r\n return fragment_title[position];\r\n }\r\n\r\n fun addFragementToPager(fragment: Fragment, title:String)\r\n {\r\n fragment_list.add(fragment);\r\n fragment_title.add(title);\r\n }\r\n\r\n}<\/pre>\npackage com.example.techvidvanfragment\r\n\r\nimport androidx.fragment.app.Fragment\r\nimport androidx.fragment.app.FragmentManager\r\nimport androidx.fragment.app.FragmentPagerAdapter\r\n\r\nclass ViewPagerAdapter(supportFragmentManager: FragmentManager):FragmentPagerAdapter(supportFragmentManager,\r\n BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT)\r\n{\r\n \/\/creating array to store the fragments\r\n private val fragment_list = ArrayList<Fragment>();\r\n\r\n \/\/this array will store their title\r\n private val fragment_title = ArrayList<String>();\r\n\r\n override fun getCount(): Int\r\n {\r\n \/\/returns the count of fragments\r\n return fragment_list.size;\r\n }\r\n\r\n override fun getItem(position: Int): Fragment \r\n {\r\n \/\/ returns the fragment based on the position\r\n \/\/ user selected\r\n return fragment_list[position];\r\n }\r\n\r\n override fun getPageTitle(position: Int): CharSequence? \r\n {\r\n \/\/ returns the fragment title of the fragment\r\n return fragment_title[position];\r\n }\r\n\r\n fun addFragementToPager(fragment: Fragment, title:String)\r\n {\r\n \/\/function to add fragments in array\r\n fragment_list.add(fragment);\r\n fragment_title.add(title);\r\n }\r\n\r\n}\r\n<\/pre>\npackage com.example.techvidvanfragment\r\n\r\nimport androidx.appcompat.app.AppCompatActivity\r\nimport android.os.Bundle\r\nimport androidx.viewpager.widget.ViewPager\r\nimport com.google.android.material.tabs.TabLayout\r\n\r\nclass MainActivity : AppCompatActivity()\r\n{\r\n \/\/declaring view pager\r\n \/\/and tab layout\r\n lateinit var pager:ViewPager;\r\n lateinit var tabLayout:TabLayout;\r\n\r\n override fun onCreate(savedInstanceState: Bundle?)\r\n {\r\n super.onCreate(savedInstanceState)\r\n setContentView(R.layout.activity_main)\r\n\r\n val adapter = ViewPagerAdapter(supportFragmentManager)\r\n\r\n \/\/Setting up the fragements and the title using the\r\n \/\/adapter class\r\n adapter.addFragementToPager(ChatsFragment(), \"Chats\")\r\n adapter.addFragementToPager(StatusFragment(), \"Status\")\r\n adapter.addFragementToPager(CallsFragment(), \"Calls\")\r\n\r\n \/\/setting up the adapter\r\n \/\/to our view pager\r\n pager = findViewById(R.id.view_pager);\r\n pager.adapter = adapter;\r\n\r\n \/\/Setting up the tabs with\r\n \/\/the view pager\r\n tabLayout = findViewById(R.id.tabs);\r\n tabLayout.setupWithViewPager(pager);\r\n\r\n }\r\n}\r\n<\/pre>\n<\/a><\/p>\n