We spent a lot of time talking about activities in the last few blog posts.\u00a0 As a reminder, activities are basically like one screen you see within an app.\u00a0 You might have a login activity that displays the login screen, and then a newsfeed activity showing a list of stories that you move to after logging in.\u00a0 But we often run in to situations where we don\u2019t really need or even want part of our layout to change between screens.\u00a0 For example, take this screencap of our app:<\/p>\n\n\n\n
![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4737\/files\/2021\/10\/ratings-fragment.jpg\")
This screencap shows that we have an activity with a top bar with menu and a bottom navigation bar.\u00a0 At the bottom, we have currently navigated to the ratings tab.\u00a0 The middle of the screen shows the layout associated with actually looking for a store to rate.\u00a0 If we were to instead want to navigate to another part of the app, we would click the appropriate button in the bottom navigation and the middle section would update.\u00a0 But there is one catch: All of the navigation setup and logic lives within this main activity.\u00a0 If each of these sections of the app I navigate to were to live in their own separate activities, I would once again have to spell out the top menu and bottom navigation layout and logic in the next activity as well.\u00a0 This repeated code in every activity is counter to the idea of keeping your code \u201cD.R.Y\u201d.<\/p>\n\n\n\n
There is a smarter way to approach this, and that is to only replace a part of the screen each time, by way of a fragment.\u00a0 Then, when we change the middle, we only code what is actually changing, and tell the app to continue using the same main activity logic for everything else around it.<\/p>\n\n\n\n
Here is an example of how this works:<\/p>\n\n\n\n
![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4737\/files\/2021\/10\/activity-waiting-for-fragment.jpg\")
This mockup shows the main activity layout.\u00a0 Notice that it shows the top menu and bottom navigation bars.\u00a0 Our main activity will still hold all setup logic for them.\u00a0 And then there is a huge empty square in the middle.\u00a0 Our activity layout file has a placeholder FrameLayout in this spot.\u00a0 The activity is no longer going to be responsible for anything that changes between screens in the middle.<\/p>\n\n\n\n
Then we create a fragment class.\u00a0 There are some small differences between fragments and activities when it comes to setup that we will go into more detail about in the next blog post, but for now, know that the big concepts are the same.\u00a0 You will define your fragment class and you will have a layout file for your fragment.\u00a0 Within the fragment class you will inflate the fragment layout.\u00a0 Within that class, you can also add any logic such as click listeners or API calls to display data just as you would have previously done in an activity.<\/p>\n\n\n\n
Now that our fragment is finished and contains everything for the middle of the screen, we simply use what is called a fragment manager to help us replace that placeholder FrameLayout from the main activity with our desired fragment.<\/p>\n\n\n\n
val newFrag = FragToMoveTo()\r\nval fragManager = supportFragmentManager.beginTransaction()\r\nfragManager.replace(R.id.mainFrameLayout, newFrag)\r\nfragManager.commit()\r<\/code><\/pre>\n\n\n\n<\/div>\n\n\n\nThis code snippet shows that we get access to the fragment manager and an instance of our Fragment, and then we tell the manager to replace mainFrameLayout with the new fragment instance.\u00a0<\/p>\n\n\n\n
<\/div>\n\n\n\nIf the user were to click a different place to navigate, we simply repeat this same snippet with a new instance of the next fragment they want to go to.<\/p>\n\n\n\n
<\/div>\n\n\n\nThe next logical question you may have is whether the activity is even necessary at all.\u00a0 Well, the answer is we still need at least one activity.\u00a0 Although a fragment can be a child of another fragment or an activity, a fragment cannot live on its own without an activity parent somewhere in the view hierarchy [1].\u00a0 Think of a fragment like a chapter and the activity like the book \u2013 you can always insert more chapters, but you need the book as the base to hold all the chapters together.<\/p>\n\n\n\n
<\/div>\n\n\n\nSo now we have covered when and why fragments are beneficial.\u00a0 They help modularize our code [1] and keep it \u201cD.R.Y\u201d.\u00a0 In next week\u2019s blog we are going to cover in more detail how to make a fragment.<\/p>\n\n\n\n
<\/div>\n\n\n\nSources<\/p>\n\n\n\n
<\/div>\n\n\n\n[1] \u201cFragments\u201d, Oct 26, 2021. Accessed on: Oct 27, 2021. [Online]. Available: https:\/\/developer.android.com\/guide\/fragments<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"This week, as promised, we are going to talk about fragments.\u00a0 We are going to talk about what fragments do by first showing the drawbacks of only using activities, and then seeing how fragments can help fill this hole. We spent a lot of time talking about activities in the last few blog posts.\u00a0 As… Continue reading Fragments<\/span><\/a><\/p>\n","protected":false},"author":11613,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-60","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/users\/11613"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/60\/revisions"}],"predecessor-version":[{"id":63,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/posts\/60\/revisions\/63"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/media?parent=60"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/categories?post=60"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/workla\/wp-json\/wp\/v2\/tags?post=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}