What are fragments in designing applications in Android systems and their uses?

Fragments are part of user interfaces that can be subdivided into a whole subset of Activity. Fragments can eventually be used to design user interfaces. In other words, multi-part user interfaces can be designed and created using fragments. In this part of the tutorial, we want to tell you about fragments and finally create a project and apply static and dynamic.

Fragments:

It should be noted that fragments, like other activities in  Android systems, have a life cycle and go through some steps to perform their tasks, and in this case, it can be said that it first receives incoming events. It consists of two parts xml user interface layer and java operating code. It should be noted that each Activity can accommodate many fragments, and fragments can be placed in several different activities. In other words, fragments cannot be used alone, and to be used, they must require a parent activity and a life cycle.

A fragmentation feature has been added from Honeycomb API version 11 of Android.

this Lifecycle

As I mentioned above, fragments, like activities, have life cycles, and to work with them, you need to know their life cycle.

In this part of the tutorial, we want to describe the life cycle of the fragment.

OnAttach ():

This method is called when a fragment is added to an activity.

onCreate ():

This method can also be used when  creating a fragment to value it.

onCreateView ():

This method will also be called when the fragment is created and ready to build the user interface. It should be noted that doing this in the active part was the responsibility of onCreate ().

onActivityCreated ():

This method will also be called when the Activity of the fragment host is executed.

onStart ():

This method is called when the fragment user interface is ready to be displayed.

onResume ():

This method will be called when the fragment is active.

onPause () and onStop ():

This method will start calling when the fragmented Activity ends.

OnDestroyView ():

This method will be called if  the fragment user interface is removed from the Activity. Note that this method will only run when the fragment user interface is removed from Active.

onDestroy ():

This method will run when the life of the fragment expires.

onDetach ():

This method will also run when the fragment is completely separated from its host activity.

How to create and use static fragments in projects

Here is a very simple example to better understand what static fragments are and how they can be used. Suppose we want to implement a booklet app cake on Android systems so that the booklet app may run on different devices and different screen sizes. In this case, the size of the screens can be different, and the way they are displayed is different. The user experience may be reduced. Consider that the screen size of mobile phones with tablets is different. Some settings must be applied so that  applications are displayed well on Android systems  and different devices, thus increasing the user experience.

It should be noted that user experience is as important as the user interface and depends on the level of user satisfaction with the arrangement of elements, items, elements, and... The design should be done in a way and use appropriate colors that the user can communicate well with them, and as a result, be satisfied with  the application and its design and improve the user experience. To do this,  application developers and designers  must be careful to adjust the way applications are displayed on different devices and screens so that users are satisfied with them.

Consider that the screen sizes of phones and tablets are different from each other. If we design the same application we designed for mobile phones for tablets, it will cause the layout, the placement of elements, and how to display They are disturbed, and users are not satisfied with them. To solve this problem, we can use fragments.

To better explain the designed application of the booklet, pay attention to the following points. For example, consider that it is best to design a list of book titles on devices with small screen sizes and portraits. In this way, the list and titles in the book are displayed on the first page, and then the user can connect to the text related to that title by selecting the subject and title. Because their screen size is small and it is not possible to display many texts next to the title and subject, so we provide the titles at the top of the page and in the form of a list so that the user can choose the desired subject and click, then attach to the associated text.

But on devices that have a larger screen size, or in other words, in the form of Landscape, it makes sense to put titles next to the text. In this type of screen and device, it is better to put the list and its texts next to each other and display it.

In this case, the user does not need to face the list of titles on the first page. The list is next to its texts, and you can see and select the title and topic next to its texts. In other words, on devices that have a larger screen size, we do not put the list of titles at the top of the page and put it next to the related text because the screen size is large. In contrast, on devices with smaller screen sizes and verticals, we display a list of titles on the first page to select one of them and click on it to connect to the related text. Be.

1-  Create a new project in Android  Studio and choose the desired name. The name chosen for this project in this tutorial is Fragment One.

Note:

The name is optional, and you can choose any name you want for the project.

2- Build the project with API 16.

3- It has been mentioned before that fragments can be added to the project in Static and Dynamic form, but in this part of our tutorial, we enter them statically and use them.

4- Right-click on the app folder.

5- Go to New - Fragment.

6- Click on the empty or so-called Blank fragment.

7- Then, we must specify the name of the fragment. The name chosen for this fragment in this tutorial is frg1.

Note:

The name is optional, and you can choose any name you want for the fragment.

8- Select the Create layout XML option to automatically create the fragment user interface layer. After doing this, there is no need to manually  create the fragment UI layer.

9- It is worth mentioning that the Layout name is considered based on the name selected for the fragment, and Android Studio does this. But we do not change the Layout name.

10- Then uncheck the two options.

11- Click on Finish to create a fragment.

12- The code that should be entered in frg1.java is as follows:

13- The codes that should be in the fragment_frg1.mxl section are as follows:

There are two classes android.support.v4.app.Fragment and Android. View.LayoutInflater in the code listed above and, in the lists, above. As we said in the previous section, the possibility of using fragments in API version 11 has been added to  Android systems. To use them in lower versions, it is better to use the class android.support.v4.app.Fragment Use the Android. App. Fragment class instead. In this case, we can also use fragments with the support library.

In the following code, you can see that frg1 is inherited from the fragment.

Note that to attach the xml layer to the fragment and display it, it is necessary to override the onCreateView method. This is like what we do in Activity, except that Activity uses onCreate. Finally, the R.layout.fragment_frg1 layer is attached using an object created from LayoutInflater.

This fragment has a user interface that the user interface of this fragment also has a FrameLayout. FrameLayout also has a TextView.

14-  Create a new fragment  like the previous method and select the desired name frg2.

15- We change the layouts as follows.

16- The code that should be in fragment_frg1.xml is as follows:

17- The code that should be in the fragment_frg2.xml section is as follows:

Our goal in making these changes and inserting the code is to use a fragment on regular pages and place two fragments next to each other on larger screens, such as tablet screens.

18- Go to activity_main.xml.

19- Add static fragment to Activity. Like the following:

The fragment was added to the Activity by inserting the above code.

In the codes listed above, we have specified the width and height of the fragments as match_parent so that both fragments have an activity. This is also possible using the Android: name property.

20- Then, I set the value of this property equal to the name of the class I want to display.

21- Android Studio automatically displays the list of fragments, and we do not need to enter them manually.

22- We consider an id for each of the fragments.

23- It should be noted that we will encounter an error if the layout is in Design mode.

24- Then, a message is displayed to us that the content of this message is as follows. "If you want the selected fragment to be displayed in the development environment and Preview mode, you can click on Use @ layout / fragment_frg1, and clicking on it will add a related property that will not affect its performance. . "

25- If I confirm the message, the following line will be added to the fragment:

tools: layout = "@ layout / fragment_frg1"

26- Then, we will see that it will be displayed in  the fragment development environment.

27- It should be noted that using the Drag & Drop method, we can also add it to the Activity.

28- Screen sizes are categorized into four modes. In the categories Small, Normal, Large, and X-Large

29- The screen size of tablets is also in the large size category.

30- Create a new folder next to the layout folder.

31- I chose the desired name for this newly created folder. I name this folder layout-large-land.

32- Inside this newly created folder, I put a copy of activity_main.xml.

33- To create a new folder, right-click on res and select the Android resource directory.

34- Then select the layout as Resource type and create a new folder.

35- To complete the directory name, select the Size and Orientation options and move them to the Chosen qualifiers section.

36- Then, place a copy of activity_main.xml inside the layout-large-land directory.

Note:

If the project display structure is on Android, I will not display the new directory I created. To display the new directory, we need to temporarily change the project display mode from Android mode to Project mode and paste the copied file on the desired directory.

Apart from this method, there is another and simpler method that we can do. As follows:

When we copy activity_main.xml, there is also a blank directory, and it is enough to right-click on the layout and paste it in the same Android display mode. A window will then open showing the layout-large-land transfer path, which, if confirmed, will transfer correctly.

Note:

It should be noted that copying the layout and moving it to a new directory is unnecessary, and this operation is the same as creating and creating a new layout.

In Activity, we created the default layer from RelativeLayout, and now we need to create it in Large Landscape mode and Linear Layout. It should be noted that the new layer we create will have the same name as the default layer.

37- Go to Layout - New - Resource File.

38- After this path, a new layer is created and displayed in Preview horizontally.

We have two activities_main.xml, the second of which is opposite large land.

When the application is displayed on a device with large screen size and the device is in landscape mode, instead of activity_main.xml, activity_main.xml, which is inside the layout-large-land directory, will be displayed to the user.

39- Then, in this layer, we put two fragments next to each other:

In the codes listed above, we change the orientation property to horizontal so that the two fragments are placed next to each other horizontally and displayed.

40- We will implement the project.

41- After execution, we will see that a fragment is displayed.

42- We must place the device in landscape mode.

43- Press Ctrl + F11 to hold the device in landscape mode.

44- If the device rotates horizontally, we will see that the layout inside the large-land directory has replaced the layout correctly.

Dynamic fragments

In the previous section, we talked to you about static fragments and created a project that had  static fragments, but in this part of the tutorial, we want to create a project that has  dynamic fragments.

The difference between dynamic fragments and static fragments is that the user can activate multiple activities whenever he wants and move from one activity to another without closing them.

45- We leave the previous project. To get out of it, go to File - Close Project.

46- ​​We create a new project and choose its name again. Its chosen name is FragmentTwo.

47- This project includes an activity and two fragments.

48- Inside the Activity, there are two Buttons and a FrameLayout that, if we touch any of the buttons, will display one of the two fragments in the FrameLayout.

49- We create two fragments. The names of the fragments are FrgOne and FrgTwo.

50- Then, I create the activity_main.xml layer.

51- I select an activity of type LinearLayout.

52- I choose its arrangement vertically.

53- I assign an id to the elements.

54- Define buttons inside an asset.

55- We also add methods related to buttons. Like the following:

Note:

Be sure to note that the fragment parent activity must inherit from FragmentActivity or AppCompatActivity. Otherwise, the fragment will not run.

56- Complete the method of one of the buttons.

In the code above and the first line, we have created a FrgOne fragment with the desired name frg1.

We need an example of the  FragmentManager class to manage fragments.

1- Select the first option related to the Support library.

2- From getSupportFragmentManager () or getFragmentManager () we must select getSupportFragmentManager ().

3- We use FragmentTransaction to exchange active messages like add, remove, and replace.

4- We must also complete the codes for the second button.

The final code that should be in the MainActivity.java section is as follows:

5- We will implement the project.

6- After running the project, we will see that the FrameLayout is empty, meaning no fragment is there.

7- Click on the buttons to display the fragments.