Back button and ViewPager

user4292106 picture user4292106 · Apr 14, 2016 · Viewed 7.7k times · Source

I am using viewPager with android.support.design.widget.TabLayout. My xml is

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.view.ViewPager
            android:id="@+id/home_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="@dimen/custom_tab_layout_height"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <!-- tabs -->
        <android.support.design.widget.TabLayout
            android:id="@+id/home_tabs"
            android:layout_width="match_parent"
            android:layout_height="@dimen/custom_tab_layout_height"
            android:layout_alignParentBottom="true"
            app:tabGravity="fill"
            android:background="@color/light_blue_low_opacity"
            app:tabIndicatorHeight="0dp"
            app:tabMode="fixed"
            app:tabPaddingEnd="0dp"
            app:tabPaddingStart="0dp"
            app:tabSelectedTextColor="@color/light_green"
            app:tabTextAppearance="@style/HomeTabsTextAppearance"
            app:tabTextColor="@color/white" />

    </RelativeLayout>

I set viewPager as below

 mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        mViewPager = (ViewPager) findViewById(R.id.home_container);
        mViewPager.setAdapter(mSectionsPagerAdapter);
        mViewPager.setPagingEnabled(false);
        mViewPager.setOffscreenPageLimit(5);

        tabLayout = (TabLayout) findViewById(R.id.home_tabs);
        tabLayout.setTabTextColors(ContextCompat.getColorStateList(this, R.color.color_home_tabs));
        tabLayout.setupWithViewPager(mViewPager);

My tabListener is

 tabLayout.setOnTabSelectedListener(
                new TabLayout.ViewPagerOnTabSelectedListener(mViewPager) {
                    @Override
                    public void onTabSelected(TabLayout.Tab tab) {
                        super.onTabSelected(tab);
                        int position = tab.getPosition();
                    mViewPager.setCurrentItem(position);

                    String tab0TextUnSelected = "<font color='" + ContextCompat.getColor(getApplicationContext(), R.color.white) + "'> " + getResources().getString(R.string.home_tab1) + " </font>";
                    String tab1TextUnSelected = "<font color='" + ContextCompat.getColor(getApplicationContext(), R.color.white) + "'> " + getResources().getString(R.string.home_tab2) + "</font>";
                    String tab2TextUnSelected = "<font color='" + ContextCompat.getColor(getApplicationContext(), R.color.white) + "'> " + getResources().getString(R.string.home_tab3) + "</font>";
                    String tab3TextUnSelected = "<font color='" + ContextCompat.getColor(getApplicationContext(), R.color.white) + "'> " + getResources().getString(R.string.home_tab4) + "</font>";
                    String tab4TextUnSelected = "<font color='" + ContextCompat.getColor(getApplicationContext(), R.color.white) + "'> " + getResources().getString(R.string.home_tab5) + "</font>";


                    String tab0TextSelected = "<font color='" + ContextCompat.getColor(getApplicationContext(), R.color.light_green) + "'> " + getResources().getString(R.string.home_tab1) + " </font>";
                    String tab1TextSelected = "<font color='" + ContextCompat.getColor(getApplicationContext(), R.color.light_green) + "'> " + getResources().getString(R.string.home_tab2) + "</font>";
                    String tab2TextSelected = "<font color='" + ContextCompat.getColor(getApplicationContext(), R.color.light_green) + "'> " + getResources().getString(R.string.home_tab3) + "</font>";
                    String tab3TextSelected = "<font color='" + ContextCompat.getColor(getApplicationContext(), R.color.light_green) + "'> " + getResources().getString(R.string.home_tab4) + "</font>";
                    String tab4TextSelected = "<font color='" + ContextCompat.getColor(getApplicationContext(), R.color.light_green) + "'> " + getResources().getString(R.string.home_tab5) + "</font>";

                    TabLayout.Tab tab0 = tabLayout.getTabAt(0);
                    TabLayout.Tab tab1 = tabLayout.getTabAt(1);
                    TabLayout.Tab tab2 = tabLayout.getTabAt(2);
                    TabLayout.Tab tab3 = tabLayout.getTabAt(3);
                    TabLayout.Tab tab4 = tabLayout.getTabAt(4);


                    if (tab0 != null) {
                        tab0.setIcon(R.drawable.ic_home_profile_unselected);
                        tab0.setText(Html.fromHtml(tab0TextUnSelected));
                    }

                    if (tab1 != null) {
                        tab1.setIcon(R.drawable.ic_home_rewards_unselected);
                        tab1.setText(Html.fromHtml(tab1TextUnSelected));
                    }

                    if (tab2 != null) {
                        tab2.setIcon(R.drawable.ic_home_gallups_unselected);
                        tab2.setText(Html.fromHtml(tab2TextUnSelected));
                    }

                    if (tab3 != null) {
                        tab3.setIcon(R.drawable.ic_home_statistics_unselected);
                        tab3.setText(Html.fromHtml(tab3TextUnSelected));
                    }

                    if (tab4 != null) {
                        tab4.setIcon(R.drawable.ic_home_settings_unselected);
                        tab4.setText(Html.fromHtml(tab4TextUnSelected));
                    }

                    if (position == 0) {
                        if (tab0 != null) {
                            tab0.setIcon(R.drawable.ic_home_profile_selected);
                            tab0.setText(Html.fromHtml(tab0TextSelected));
                        }
                    } else if (position == 1) {
                        if (tab1 != null) {
                            tab1.setIcon(R.drawable.ic_home_rewards_selected);
                            tab1.setText(Html.fromHtml(tab1TextSelected));
                        }
                    } else if (position == 2) {
                        if (tab2 != null) {
                            tab2.setIcon(R.drawable.ic_home_gallups_selected);
                            tab2.setText(Html.fromHtml(tab2TextSelected));
                        }
                    } else if (position == 3) {
                        if (tab3 != null) {
                            tab3.setIcon(R.drawable.ic_home_statistics_selected);
                            tab3.setText(Html.fromHtml(tab3TextSelected));
                        }
                    } else if (position == 4) {
                        if (tab4 != null) {
                            tab4.setIcon(R.drawable.ic_home_settings_selected);
                            tab4.setText(Html.fromHtml(tab4TextSelected));
                        }
                    }

                }


            });

I have override the onBackPressed method as follow

 if (mViewPager.getCurrentItem() != 0) {
     mViewPager.setCurrentItem(mViewPager.getCurrentItem() - 1, true);
}

To sum up, I have tabs with icons and texts. When a tab is selected then the icon is changed and the text turned in green color. When a tab is unselected then the icon is changed and the text turned in white color. This worked fine when the user clicks on tabs. When the user clicks on back button then the icon and the text color are changed correctly but for the previous tab the text remains on green color.

Answer

Pradeep Gupta picture Pradeep Gupta · Apr 14, 2016

try this,

@Override
    public void onBackPressed() {

        if (viewPager.getCurrentItem() != 0) {
            viewPager.setCurrentItem(viewPager.getCurrentItem() - 1,false);
        }else{
             finish();
        }

    }

but do not call super.onBackPressed() method.