How to Create Fragments in Android Studio (2023) | Fragment Activity

hey guys Welcome To alloing tutorial today in our lecture we are talking about fragment activities and how they can be developed first a little intro about fragment they are like a UI element they are very user friendly and they are like little activities within the activities which does not require much coding and so changing between the fragments puts a lot less load on uh your program makes your design awesome it looks more Sleek more user friendly they also help your app work faster by reducing the amount of code that get loaded and unloaded when you switch screens so that means you get a better faster experience so if you want to make apps that look great work well and run fast learning about fragment is must so let's explore about fragments if you are not subscribed to this Channel Please Subscribe my channel you will not miss any video let's begin so launch the Android Studio select the new project and select the empty views activity and now this window will open where you have to give name WR fragment activity you can choose whatever your name you like package name will automatically come while you can always change it leave the other things as it is for this example and build configuration language your cotlin is coming no problem click finish and you will see that uh main activity. Java and activity main.xml has opened in front of you now to create fragment activity go on the left pan click on the main activity and click new and go all the way down to where it is mentioned uh fragment and click on frag M blank and a window is opening where you have to give fragment name where it is saying blank fragment so I will change it to First fragment layout will automatically change as per your name and Source language is Java and click finish so you can see first fragment. Java has open there is uh lot of coding in this but uh in this project we are not going to change any coding because we want to create three fragments so let's go again repeat the step click on Main activity select new create a second fragment and then we're using the same method create the third fragment and name it third fragment so we have now three fragments first fragment second fragment and third fragment if you go to rest folder layout you you will see that the xmls for fragment layout is automatically been generated we'll go to activity main.xml to generate our UI and in the UI you can see the there is a text view so we'll just delete this and we will change this constraint layout to linear layout since it's a linear layout we have to Define orientations define it vertical now the fragment switching can be done by either by buttons uh but here uh what we are going to do we we are going to use tabs which look wonderful on uiu you might have seen the WhatsApp you can see how nicely you can switch so let's create a tab so right Tab and select this material tab layout so you can see uh width will be match parent and height will be rap content so TBL out will be like a like a container where in which we will create our tab items now let's define an ID for the tab layout so write id/ tab layout then we need to give some color to the tab so that it looks distinct let's write background I will give a hex code which is like same as WhatsApp green # 075 e53 you can see on the left side you glimpse of what the color is going to be then right tab indicator color so whenever it is selected there will be a highlighter on underline so that will be like color SL White and also we can Define tab selected text color so whenever you select what's the tab text color going to be and that's also let us put it white so now our tab layout is complete and we can start including our tab items so I tab item and you will see uh material tab item is coming so width uh wrap content and height also wrap content for our first tab item and close it here and text on the tab uh is going to be be so the name of the tab will be first copy that item two times and change the text to Second and change for the third the text should be third you you to change the there is some spelling mistake here okay so our tab layout is complete we will also Define an ID for the tab item id/ tab one copy that and Define ID for the other item as well change it to tab two and for the Third change the ID name is tab three now below the tab layout uh our space for the fragment is going to come that will be a frame layout actually so write frame layout and width will be match parent and height will be also match parent close it here and ID for the frame layout is going to be id/ frame layout so once you click on the design you can see so three green nice looking Tabs are are on the top so first is indicated as a default you can see the color of first is white and the background is green it looks very nice and below the three tabs there is a space for fragment activity to appear that makes our UI complete so now what else we need to do is we will go to Gradle because we are using fragment so we need to uh add some dependencies so we go to build Gradle in the dependencies we write Val for the value fragment underscore version equal to under the code 1.6.1 and now this value will be used in dependencies so write implementation in the bracket under the quotes androidex do fragment colon fragment colon dollar fragment now here is our fragment version is going to come so write fragment version packet closed and now since we have Chang we have made changes in the Gradle we need to sync so just press the sync now come to the main activity. Java and and uh let's uh Define some variables so write frame layout frame layout and tab layout tab layout now we have to initialize them so write frame layout equal to in the brackets frame layout find view by ID R do id. frame layout so our frame layout is linked to the ID which we defined in the UI and tab layout similarly tab layout equal to bracket tab layout find view by ID r. T layout and now we have to create a listener for our table layout so write table layout do set on Tab selected listener it is showing duplicated but still going to be working so set on TBL list selected listener under the brackets new tab on Tab selected listener and you can see all the code is appearing you have on Tab selected then one function for on Tab unselected and a function for on tab reselected so all these functions you can uh you can use but here for our simple example we are going to use only the function on Tab selected because there are three tabs so we are going to use switch case here so whichever tab is selected that particular fragment will appear you can use directly using the buttons but here we are using tab VI so tab view goes well with the switch case so let's write fragment fragment equal to null and write switch inside the bracket right tab dot get position for to get the tab position and based on the position there can be cases so case Zero column below that write fragment equal to new first fragment so now we are calling new first fragment to load when the case is zero that means when the first tab is selected copy all and change the case number to case one and case two and change activity to First fragment to Second fragment and uh similarly third fragment so that's our switch case whatever tab position is selected now we have to call our fragment manager so right get support fragment manager which is responsible for all the frag fragment transition do begin transaction do replace r. ID do frame layout comma fragment in this variable it is a Handler where our fragment class is assigned this is going to replacing the present frame with the selected fragment now write dot set transition ins the bracket fragment transaction dot Transit fragment open this is showing red so just press Alt Enter and import class select first on the list you can see the class fragment transaction has come and all other classes are also there we saw the tab layout was showing error so there is a spelling you just have to make it capital T okay and here below the set transition right do commit once the do commit function is called the transition actually takes place and as I already told we going to leave other two functions so now what we'll do the default fragment is like when nothing is selected we want to show the first fragment always we will we copy the entire code of from the get support fragment manager to the commit and we will paste above the tab layout listener and instead of fragment here we can straight away write the fragment which we want to call in the default case so write new first fragment so that means uh when the when the app opens first time it's going to show the first fragment and in the set transition instead of set transition we are going to write add to backstack because there is no transition happening here so we writing add to backstack null and then commit so that's it this going to load our first fragment by default now before running the program Let's uh first design our fragments also so that we can have a visual look at what what fragments are being selected and we can have a little nice display so you can see this is the frame layout and there is a text view hello blank fragment we will change the size text size equal to 24 DP so it's more visible we will also align our text on Center so write align so text align equal to Center you can see the hello blank fragment text has come on the center we'll also change this uh hello blank fragment to First fragment for the second also we have to do the same and just paste the code uh change the text to Second fragment go to Third change the text view again here and write the text third fragment you can see that so we can check that everything is appearing properly and this this piece of XML is going to appear below the our main XML where we have defined the frame layout so now come to main activity Java back again and let's see if everything is done one more thing we have to do is to add uh break after every case otherwise it will not work so add break after case 0 1 and two and now we run the program I have connected my phone let us see so it is successfully built and uh there is no error now and now you can see the program once the program is launched you can see nice uh three Tabs are appearing and we have successfully made our fragment activity where so default you can see the first fragment is appearing and when we click on second so it shows second fragment and third so on and when we come back to First first so that was all about fragment the simple example fragment guys please comment I hope you learned something from this tutorial once again please subscribe my channel thank you for watching

Channel: CodingTutorials

Views: 5,240

Keywords: Fragments, Fragment Activity, Android Studio, Android Srtudio Tutorials, How to create Fragments, Fragments in Android Studio, UI design tools, UI, UI design, Android tutorials, Create Fragment, tabselection

Id: m-PefJ2CcR8

Length: 11min 39sec (699 seconds)

Published: Tue Oct 31 2023