CODEWITHSUNDEEP
androidkotlinandroid-fragmentsandroid-viewpagerfragment
Binary
Binary

Reputation: 431

How to replace fragment inside ViewPager and change toolbar

I found an interesting feature in one of the applications, I want to repeat it. The application has ViewPager and TabLayout and a bunch of fragments inside. On the first fragment there is a button img1

, by pressing it, the fragment is replaced by another img2

while ads_banner is removed and the toolbar is replaced, and when swiping to the right and back, it shows fragment1, please tell me how this can be done. Here is what I already wrote:

MainActivity

class MainActivity : AppCompatActivity() {

    private var mAdView: AdView? = null

    @SuppressLint("ResourceType")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val adRequest = AdRequest.Builder().build()
        mAdView = findViewById(R.id.adView)
        mAdView!!.loadAd(adRequest)

        initTab()

    }

    fun initTab() {
        tab_layout.addTab(tab_layout.newTab().setIcon(R.drawable.image1)
        tab_layout.addTab(tab_layout.newTab().setIcon(R.drawable.image2)
        tab_layout.addTab(tab_layout.newTab().setIcon(R.drawable.image3)

        tab_layout.tabGravity = TabLayout.GRAVITY_FILL

        val adapter = MyPagerAdapter(supportFragmentManager, tab_layout.tabCount)
        pager.adapter = adapter

        pager.offscreenPageLimit = 2

        pager.addOnPageChangeListener(TabLayout.TabLayoutOnPageChangeListener(tab_layout))

        tab_layout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab) {
                pager.currentItem = tab.position
                if (tab.position == 0) {
                    tab_layout.getTabAt(0)!!.setIcon(R.drawable.image1_focus)
                }
                if (tab.position == 1) {
                    tab_layout.getTabAt(1)!!.setIcon(R.drawable.image2_focus)
                }
                if (tab.position == 2) {
                    tab_layout.getTabAt(2)!!.setIcon(R.drawable.image3_focus)
                }
            }

            override fun onTabUnselected(tab: TabLayout.Tab) {
                if (tab.position == 0) tab_layout.getTabAt(0)!!.setIcon(R.drawable.image1)
                if (tab.position == 1) tab_layout.getTabAt(1)!!.setIcon(R.drawable.image2)
                if (tab.position == 2) tab_layout.getTabAt(2)!!.setIcon(R.drawable.image3)
            }

            override fun onTabReselected(tab: TabLayout.Tab) {

            }
        })
    }

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:background="@color/transparent"
        app:adSize="SMART_BANNER"
        app:adUnitId="@string/banner_key"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        style="@style/MyToolbar"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:layout_marginTop="2dp"
        android:gravity="center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/adView"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <TextView
            android:id="@+id/toolbar_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:fontFamily="@font/sf_pro_display_regular"
            android:textColor="@color/black"
            android:textSize="24sp"
            tools:layout_editor_absoluteX="206dp"
            tools:layout_editor_absoluteY="7dp" />

    </androidx.appcompat.widget.Toolbar>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/tab_layout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="#fff"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:tabBackground="@drawable/tab_color_selector"
        app:tabIndicatorColor="#2196F3"
        app:tabIndicatorGravity="top"
        app:tabIndicatorHeight="4dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

MyPagerAdapter

class MyPagerAdapter(fm: FragmentManager, internal var mNumOfTabs: Int) : FragmentStatePagerAdapter(fm) {

    override fun getItem(position: Int): Fragment {

        when (position) {
            0 -> {
                return RootFragment()
//                return Fragment1()
            }
            1 -> {
                return Fragment2()
            }
            2 -> {
                return Fragment3()
            }
        }
    }

    override fun getCount(): Int {
        return mNumOfTabs
    }
}

Fragment1

class Fragment1: Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.fragment_1, container, false)
        return view
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
            btnfr1.setOnClickListener {
            val trans = fragmentManager!!.beginTransaction()
            trans.replace(R.id.root_frame, Fragment4())
            trans.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)
            trans.addToBackStack(null)
            trans.commit()
        }
    }

RootFragment

class RootFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.root_fragment, container, false)
        val transaction = fragmentManager!!.beginTransaction()
       
        transaction.replace(R.id.root_frame, Fragment1())
        transaction.commit()
        return view
    }

}

root_fragment.xml

<?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"
    android:id="@+id/root_frame" >

</FrameLayout>

In Fragment1, only the button for calling Fragment4. Tried to do as here https://www.codexpedia.com/android/android-viewpager-fragment-swap/ it turned out to replace Fragment1 with Fragment4, but I don’t know how to reset Fragment4 when swiping and don’t understand how to replace Toolbar and remove ads.

Upvotes: 0

Views: 362

Answers (2)

EpicPandaForce
EpicPandaForce

Reputation: 81578

The trick is that as RootFragment is the fragment on the 0th index, what you need to do is show the original fragment as a child fragment of RootFragment using fragment transactions via childFragmentManager.

This way, you can replace the children of RootFragment, without actually having to replace RootFragment itself inside the ViewPager.

Upvotes: 0

vinodaw
vinodaw

Reputation: 127

You need to implement createFragment and getItemCount methods in MyPagerAdapter to supply instances of fragments as pages to ViewPager. Modify MyPagerAdapter class as shown below and test:

class MyPagerAdapter(fm: FragmentManager, internal var mNumOfTabs: Int) : FragmentStatePagerAdapter(fm) {

override fun getItemCount(): Int = mNumOfTabs

override fun createFragment(position: Int): Fragment {
    when (position) {
        0 -> {
            return RootFragment()
        }
        1 -> {
            return Fragment2()
        }
        2 -> {
            return Fragment3()
        }
    }
} 
}

Upvotes: -1

Related Questions