How to use Fragment Adapter component

Diese Website verwendet Cookies von Google, um Dienste anzubieten und Zugriffe zu analysieren. Deine IP-Adresse und dein User-Agent werden zusammen mit Messwerten zur Leistung und Sicherheit für Google freigegeben. So können Nutzungsstatistiken generiert, Missbrauchsfälle erkannt und behoben und die Qualität des Dienstes gewährleistet werden

We know about Activities and custom views. But there is another kind of activity: the Fragment.

You can define a Fragment as any Activity with different views and own events and components. 

You usually embedded a Fragment with a Viewpager view to swipe all fragments to left and right.

With a Tab Layout you can select a fragment with different buttons in the Tab Layout. 

To make this work we use the Fragment Adapter component.

So let's start. 

Create the fragment activities

Start a new project. Open the left Configuration drawer an click the View Button. 

Here in the View Manager we can arrange all activities in this project. 

Click the '+' button. 

* Give the name 'red' 

* deactivate statusbar and toolbar to make a blank activity

and set the type to 'fragment' then save the new fragment.

Add now three more fragments with name 'blue', 'yellow' and 'green'.

(don't forget to set types fragment and deactivate statusbar and toolbar in all fragment-activities).

Activate AppCompbat library

Open the Configuration drawer and click the Library button

Here in the Library Manager click the AppCompbat library,

then activate the switch to activate.

Continue in Main activity 

Add Fragment Adapter component 

Be sure to be in Main activity. Open the component tab and add the Fragment Adapter component.

Give it the name 'frag_adapt' (or as you want)

And click add.

Main activity: the views

 In Main activity add 

* TabLayout tablayout1

* ViewPager viewpager1

Well done 👍

Fragment activities: 

the views

Open the red_fragment.xml.

Add a LinearV linear1.

* set width and height to 'match_parent'.

* set background color to RED

Open now each other fragment, 

add a linear, set width and height to 'match_parent' and set the background color to the corresponding name (blue_fragment.xml -> background color BLUE, 

yellow_fragment.xml ->background color YELLOW, 

green_fragment.xml -> background color GREEN)

💡The colored linears are for demonstrating. You can create each fragment as you want.

Main activity: 

the events

Open the onCreate event.

Add from the View palette flowing blocks:

* From AndroidX section the 'TabLayout setupWithViewPager' block

Set TabLayout to tablayout1 and ViewPager to viewpager1.

* From List section the 'ViewPager 

setFragmentAdapter' block

Set ViewPager to viewpager1, FragmantAdapter to frag_adapt and count to 4.

Now the TabLayout tablayout1 is setup with ViewPager viewpager1 and the ViewPager viewpager1 is bound to Fragment Adapter frag_adapt with 4 entries also according to the TabLayout.

Now it's time to determine the titles of the four TabLayout buttons and to determine the fragments to be shown in the ViewPager.

In the event section click the Component tab.

Add the events of the comment: 

* frag_adapt Return Title

* frag_adapt Return Fragment 

The Return Title event 

Open the Return Title event.

Add a if block and set it's condition to 'position'=''.

Scroll down the block list to 'TabLayout sk' and drag and drop the 'return title' block inside the if block.

Copy this if-block combination 3 times to get four of it.

Set the position numbers according to the titles: 

* position = 0 -> title : "RED" 

* position = 1 -> title : "BLUE" 

* position = 2 -> title : "YELLOW" 

* position = 3 -> title : "GREEN" 

The Return Fragment event 

Close the event and open the Return Fragment event.

Add the if block like in the Return Title event. Then scroll down the block list to 'fragments sk' and drag and drop the 'return fragment' block.

Copy again this if-block combination three times to get four of it. 

Set the position numbers according to the fragments: 

* position = 0 -> Content: RedFragmentActivity

* position = 1 -> Content: BlueFragmentActivity

* position = 2 -> Content: YellowFragmentActivity

* position = 3 -> Content: GreenFragmentActivity

So, well done 👍

You can run the App.

Swipe around the four fragments or select one in the TabLayout.