ViewPager destroys fragment when orientation change

Question

Im currently trying to understand why the viewpager destroys the fragment when the screen orientation change from portrait to landscape.

This is the ViewPagerAdapter.kt

internal class FragmentPagerAdapter(fm: FragmentManager, private val mNumbOfTabs: Int) : FragmentPagerAdapter(fm) {

    /**
     * return the fragment for each position
     */
    override fun getItem(position: Int): Fragment? {
        when (position) {
            SIGN_UP -> return SignUpFragment()
            LOGIN -> return LoginFragment()
            else -> return null
        }
    }

    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        val ret = super.instantiateItem(container, position)
        return ret
    }

    /**
     * return number of tabs
     */
    override fun getCount(): Int {
        return mNumbOfTabs
    }

    companion object {
        private val SIGN_UP = 0
        private val LOGIN = 1
    }
}

and the way how i call it from the MainActivity

Handler().postDelayed({
                fadeOutAndHideImage(imagelogo);
                tabs.addTab(tabs.newTab().setIcon(R.drawable.sign_in).setText(R.string.sign_up))
                tabs.addTab(tabs.newTab().setIcon(R.drawable.sign_in).setText(R.string.login))
                val adapter = FragmentPagerAdapter(supportFragmentManager, tabs.getTabCount())
                viewpager.setAdapter(adapter)
                viewpager.setOffscreenPageLimit(2)
                viewpager.addOnPageChangeListener(TabLayoutOnPageChangeListener(tabs))
                tabs.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
                    override fun onTabSelected(tab: TabLayout.Tab) {
                        // Hide keyboard
                        (getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager).hideSoftInputFromWindow(viewpager.getWindowToken(), 0)
                        viewpager.setCurrentItem(tab.position)
                    }

                    override fun onTabUnselected(tab: TabLayout.Tab) {

                    }

                    override fun onTabReselected(tab: TabLayout.Tab) {

                    }
                })
            }, 5000)

The screen goes well in landscape, however when i change to portrait well... i think that the images talk by themself. Some similar questions said something about retain the fragment.

This is the link of the app in bitbucket: https://Crdzbird@bitbucket.org/unidevelop/healthy-app.git

Fragment + ViewPager fail when orientation change

Android ViewPager orientation change

ViewPager fragments disappear when change screen rotation

but the result it's different :(

[[EDITED]]

The SplashLayout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context="com.freelance.nicaragua_dev.healthyapp.UI.SplashActivity">

    <com.freelance.nicaragua_dev.healthyapp.Helper.Kenburns.KenBurnsView
        android:id="@+id/ken_burns_images"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"/>

    <ImageView
        android:id="@+id/imagelogo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:src="@drawable/logo" />

    <com.freelance.nicaragua_dev.healthyapp.Helper.Kenburns.KenBurnsView
        android:id="@+id/welcome_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:alpha="0.0"
        android:text="@string/app_name"
        android:textColor="@color/material_petal"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="24dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal">
    </LinearLayout>

    <android.support.v7.widget.CardView
        android:id="@+id/cardViewPrincipal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="150dp"
        android:layout_marginLeft="16dp"
        android:layout_centerInParent="true"
        android:layout_marginRight="16dp"
        android:layout_marginTop="80dp"
        app:cardCornerRadius="7dp"
        app:cardElevation="22dp"
        android:background="@color/transparent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                app:tabGravity="fill"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/white"
                app:tabIndicatorHeight="4dp" />

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />
        </LinearLayout>


    </android.support.v7.widget.CardView>

</RelativeLayout>

and the SignUp.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/transparent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".UI.SignUpFragment">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:fillViewport="true"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/et_email"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:cursorVisible="true"
                    android:gravity="center|left|bottom"
                    android:hint="@string/email"
                    android:inputType="textEmailAddress"
                    android:maxLength="50"
                    android:paddingBottom="10dp"
                    android:textColor="@color/md_black_1000"
                    android:textSize="18sp" />

            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/password"
                app:passwordToggleEnabled="true">

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/et_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="30dp"
                    android:cursorVisible="true"
                    android:gravity="center|left|bottom"
                    android:inputType="textPassword"
                    android:maxLength="50"
                    android:paddingBottom="10dp"
                    android:textColor="@color/md_black_1000"
                    android:textSize="18sp" />

            </android.support.design.widget.TextInputLayout>

            <Button
                android:id="@+id/buttonLogin"
                android:text="@string/sign_up"
                android:layout_gravity="center"
                android:layout_margin="15dp"
                android:padding="10dp"
                android:layout_marginRight="5dp"
                android:layout_width="150dp"
                android:layout_height="50dp"
                android:background="@drawable/red_button"
                android:textColor="@color/md_red_600" />

        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

</FrameLayout>

Do you use different layouts for different orientations? – gi097 Oct 25 '17 at 17:15 — gi097, Oct 25 '17 at 17:15
No, the layout it's the same for both orientations – Luis Cardoza Bird Oct 25 '17 at 17:17 — Luis Cardoza Bird, Oct 25 '17 at 17:17
Post the xml layout for the viewpager as well – Niza Siwale Oct 25 '17 at 17:48 — Niza Siwale, Oct 25 '17 at 17:48
i updated the question – Luis Cardoza Bird Oct 25 '17 at 17:55 — Luis Cardoza Bird, Oct 25 '17 at 17:55

score 1 · Accepted Answer · answered Oct 25 '17 at 18:10

The problem is with your activity_splash.xml layout. The cardViewPrincipal has a bottom margin of 150dp and a top margin of 80dp. Reduce those values as most screens will not have enough real-estate for such high margin. The second reason is that you've set the viewpager to have a weight of 1 instead of just making match its parent. Bonus (Not related to your question entirely) You should also replace the RelativeLayout with a FrameLayout as it is expensive. You should avoid using it as it will slow down your frame rate.

Your xml should be like this:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context="com.freelance.nicaragua_dev.healthyapp.UI.SplashActivity">

    <com.freelance.nicaragua_dev.healthyapp.Helper.Kenburns.KenBurnsView
        android:id="@+id/ken_burns_images"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"/>

    <ImageView
        android:id="@+id/imagelogo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|center"
        android:layout_marginTop="10dp"
        android:src="@drawable/logo" />

    <com.freelance.nicaragua_dev.healthyapp.Helper.Kenburns.KenBurnsView
        android:id="@+id/welcome_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:alpha="0.0"
        android:text="@string/app_name"
        android:textColor="@color/material_petal"
        android:layout_gravity="bottom|center"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
       android:layout_gravity="bottom|center"
        android:layout_marginBottom="24dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <!--<Button-->
            <!--android:id="@+id/buttonSignup"-->
            <!--android:text="@string/sign_up"-->
            <!--android:layout_marginLeft="5dp"-->
            <!--android:layout_width="150dp"-->
            <!--android:layout_height="50dp"-->
            <!--android:background="@drawable/red_button"-->
            <!--android:textColor="@android:color/white" />-->
    </LinearLayout>

    <android.support.v7.widget.CardView
        android:id="@+id/cardViewPrincipal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="32dp"
        android:layout_gravity="top"
        app:cardCornerRadius="7dp"
        app:cardElevation="22dp"
        android:background="@color/transparent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                app:tabGravity="fill"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/white"
                app:tabIndicatorHeight="4dp" />

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>


    </android.support.v7.widget.CardView>

</FrameLayout>

Thanks! Now everything goes perfect :) you sir are a live saver! :D — Luis Cardoza Bird, Oct 25 '17 at 18:15

gi097 · Answer 2 · 2017-10-25T17:57:20.803

0

Since you are using the same layout for portrait mode as well as landscape mode, you can edit your AndroidManifest.xml, and add this line to the Activity you don't want to redraw:

android:configChanges="keyboardHidden|orientation"

https://developer.android.com/guide/topics/resources/runtime-changes.html

Now, when one of these configurations change, MyActivity does not restart. Instead, the MyActivity receives a call to onConfigurationChanged().

Maybe that's what you are looking for in this case.

Alternatively you can clear the Bundle being passed to onCreate() since this object can contain some data which the ViewPager might use in a bad way.

edited Oct 25 '17 at 17:57

answered Oct 25 '17 at 17:37

gi097

7,313
3
27
49

The orientation i already have stablished as you suggest, however, the viewpager always keeps changing my fragment :( – Luis Cardoza Bird Oct 25 '17 at 17:52
What if you make `Bundle` null, like: `super.onCreate(null)`? In your `Activity`? – gi097 Oct 25 '17 at 17:55

ViewPager destroys fragment when orientation change

2 Answers2