You are reading a sample chapter from the Android Studio 1.x / Android 6 Edition book. Note that the TabLayout component is embedded into the AppBarLayout element while the ViewPager is placed after the AppBarLayout: Edit the activity_tab_layout_demo.xml file and add these elements as outlined in the following XML listing. With the fragment creation process now complete the next step is to add the TabLayout and ViewPager to the main activity layout file. On completion of these steps the project structure should match that of Figure 31 5: Perform the above duplication steps twice more to create the fragment layout and class files for the remaining two fragments. Return inflater.inflate(R.agment_tab2, container, false) Edit the new Tab2Fragment.java file and change the onCreateView() method to inflate the fragment_tab2 layout file: View onCreateView(LayoutInflater inflater, ViewGroup container, In the Copy Class dialog, enter Tab2Fragment into the New name: field and click on OK.
Right-click on the entry and select Paste. To duplicate the Tab1Fragment class file, right-click on the class listed under app -> java -> and select Copy. Edit the new fragment_tab2.xml file and change the text on the Text View to “Tab 2 Fragment”. In the resulting dialog, name the new layout file fragment_tab2.xml before clicking the OK button. Right-click on the layouts entry, this time selecting the Paste option. Right-click on the fragment_tab1.xml file in the Project tool window and select the Copy option from the resulting menu.
Each fragment consists of a layout XML file and a Java class file, each of which needs to be duplicated. Rather than create the remaining three fragments using the previous steps it is quicker to duplicate the first fragment. So far the project contains one of the four required fragments. Edit the text on the object so that it reads “Tab 1 Fragment” at which point the layout should match that of Figure 31-4: From the Palette, locate the Large Text widget and drag and drop it so that it is positioned into the center of the layout. Switch to Design mode and select and delete the TextView from the layout. Load the newly created fragment_tab1.xml file (located under app -> res -> layout) into the Designer tool, switch to Text mode and change the FrameLayout container to a RelativeLayout: Enable the Create layout XML? option and disable both the Include fragment factory methods and Include interface callbacks options before clicking on the Finish button to create the new fragment:
In the resulting dialog, enter Tab1Fragment into the Fragment Name: field and fragment_tab1 into the Fragment Layout Name: field. Create the first of these fragments by right-clicking on the app -> java -> entry in the Project tool window and selecting the New -> Fragment -> Fragment (Blank) option. The remainder of this chapter will work through the creation of an example project that demonstrates the use of the TabLayout component together with a ViewPager and four fragments.Įach of the tabs on the TabLayout will display a different fragment when selected. Figure 31 1, for example, shows the tab bar for the Android phone app consisting of three tabs displaying images:įigure 31-2, on the other hand, shows a TabLayout configuration consisting of four tabs displaying text in a scrollable configuration: The information displayed on a tab can be text-based, an image or a combination of text and images. The tabs can be fixed or scrollable, whereby the user can swipe left or right to view more tabs than will currently fit on the display. The purpose of the TabLayout is to present the user with a row of tabs which can be selected to display different pages to the user. Report this ad An Overview of the TabLayout ComponentĪs previously discussed, TabLayout is one of the components introduced as part of material design and is included in the design support library.
0 kommentar(er)
