1. Math problems
If anyone has used via Viewpager surely everyone knows that ViewPager is responsible for saving the state of the views inside it is determined to be 1 view before invisible view and 1 view after invisible view. But the problem here is only suitable when your data is not too large, when creating Viewpager, creating at the same time the views does not take too much resources and time, it is extremely convenient for users. reload for the next time. But with large data pages, loading multiple views at once makes the app become annoying lag.
People try to think of a website with big data like shopee that only uses ViewPager to load data of 5 large tabs in which each tab has 3 more sub-tabs. If the tabs load at the same time when the user enters the app, it will cause the app to freeze for a long time. 
So maybe you just have to load each tab once the tab is clicked to display but when you come back, do you keep the state of that tab?
It is entirely possible that now I will share with everyone a way to solve this rather difficult problem. It is a combination of ViewStub and ViewPager.
2. Introducing too much to ViewStub
The ViewStub is an invisible View, the size is “zero-size” and when needed a certain view will be created. When the ViewStub is set to “visible” or when the inflate () method is called, a View If desired, the ViewStub will replace itself by the View (or the View) that has been inflated.Therefore, ViewStub only exists in the system until the setVisibility (int) or inflate () methods are allowed. The added view will follow the layout parameters of the previously defined ViewStub, so this is also a way that can help improve the performance of the application – only create when needed.
Defining a ViewStub:
1 2 3 4 5 6 | <ViewStub android:id="@+id/stub" android:inflatedId="@+id/subTree" android:layout="@layout/mySubTree" android:layout_width="120dip" android:layout_height="40dip" /> |
And use ViewStub
1 2 3 | ViewStub stub = (ViewStub) findViewById(R.id.stub); View inflated = stub.inflate(); |
At a glance, many will feel that ViewStub will be similar to Include . But actually Include is just dividing the layout of the xml code into many different files for visualization and design. As for drawing on the view, it is still normal and ViewStub is different. It is not added. It is only uploaded when you actually use it as “visible” or when the inflate () method is called.
This is a good optimization because you can have complex layouts with tons of small views, complex views or titles anywhere and still have your activity uploading very fast.
2.1 Important methods of ViewStub:
- getInflatedId (): This method is used to get the id of ViewStub
- setLayoutResource (int layoutResource): This method is used to set the writing layout when StubbedView.
- getLayoutResource (): This method is used to get the layout that will be used by setsetVisibility (int) or Inflate () to replace this StubbedView in its parent with another view.
- inflate (): This method is used to display the layout defined by getLayoutResource () and replace this StubbedView in its parent with the specified layout resource.
- setVisibility (int visual): This method is used to display StubView. When visibility is set to VISIBLE or INVISIBLE
- setOnInflateListener (OnInflateListenerinflateListener): This method is used to listen for the event when we add ViewStub.
2.2 Attributes of ViewStub:
- id: This attribute is used to uniquely identify a ViewStub.
- inflatedId: This property is used to set the id of the added view.
- layout: This property is used to provide an identifier for the layout to be displayed when ViewStub is displayed or when forced to do so.
3. Use ViewStub in combination with ViewPager
Step 1: Build the main container containing ViewPager
Step 2: Build the framework that needs to be added to the ViewPager containing the ViewStub
fragment_viewstub.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ProgressBar android:id="@+id/inflateProgressbar" android:foregroundGravity="center" android:layout_gravity="center" android:indeterminate="true" android:layout_width="48dp" android:layout_height="48dp"/> <ViewStub android:id="@+id/fragmentViewStub" android:layout_width="match_parent" android:layout_height="match_parent"/> </FrameLayout> |
Step 3: Process the logic of displaying the view when the perceived view is being displayed via userVisibleHint
BaseViewStubFragment.class
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | abstract class BaseViewStubFragment : Fragment() { private var mSavedInstanceState: Bundle? = null private var hasInflated = false private var mViewStub: ViewStub? = null override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { val view = inflater.inflate(R.layout.fragment_viewstub, container, false) mViewStub = view.findViewById(R.id.fragmentViewStub) as ViewStub mViewStub!!.layoutResource = getViewStubLayoutResource() mSavedInstanceState = savedInstanceState if (userVisibleHint && !hasInflated) { val inflatedView = mViewStub!!.inflate() onCreateViewAfterViewStubInflated(inflatedView, mSavedInstanceState) afterViewStubInflated(view) } return view } protected abstract fun onCreateViewAfterViewStubInflated(inflatedView: View, savedInstanceState: Bundle?) /** * The layout ID associated with this ViewStub * @see ViewStub.setLayoutResource * @return */ @LayoutRes protected abstract fun getViewStubLayoutResource(): Int /** * * @param originalViewContainerWithViewStub */ @CallSuper protected fun afterViewStubInflated(originalViewContainerWithViewStub: View?) { hasInflated = true if (originalViewContainerWithViewStub != null) { val pb = originalViewContainerWithViewStub.findViewById<ProgressBar>(R.id.inflateProgressbar) pb.visibility = View.GONE } } override fun setUserVisibleHint(isVisibleToUser: Boolean) { super.setUserVisibleHint(isVisibleToUser) if (isVisibleToUser && mViewStub != null && !hasInflated) { val inflatedView = mViewStub!!.inflate() onCreateViewAfterViewStubInflated(inflatedView, mSavedInstanceState) afterViewStubInflated(view) } } override fun onDetach() { super.onDetach() hasInflated = false } } |
Step 4: And finally setLayoutResuorce for the view to display
HeavyFragment.class
1 2 3 4 5 6 7 8 9 10 11 12 | class HeavyFragment : BaseViewStubFragment() { override fun onCreateViewAfterViewStubInflated(inflatedView: View, savedInstanceState: Bundle?) { val titleView = inflatedView.findViewById<TextView>(R.id.fragmentTitle) titleView.text = arguments!!["title"] as String } override fun getViewStubLayoutResource(): Int { return R.layout.fragment_heavy } } |
Result 
4. Summary
Above are some basic introduction about ViewStub and tip in handling performance improvement on Android application combining ViewPage and ViewStub
Hopefully these shares will help you in your real project !! People can refer to the project here