Tabs Swipe direction in Right to Left Android app

Question

I have an Android app that has tabs. I want the app to be Right to Left.
I put android:supportsRtl="true" in the manifest file, and changed some of the elements to be android:layoutDirection="rtl".

It changes everything to right to left, which is what I want, except that it reversed the swiping direction in the tabs- when you swipe to the left, it moves to the left tab, instead of the opposite from the swipe. I want to change it to make it a regular swipe.

This is my code:

<android.support.v4.widget.DrawerLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:fitsSystemWindows="true"
android:id="@+id/drawer_layout">
<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layoutDirection="rtl">
    <include
        android:id="@+id/toolbar"
        android:gravity="right"
        layout="@layout/toolbar" />
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/main_layout"
        android:layout_below="@id/toolbar">
        <com.refractored.PagerSlidingTabStrip
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:textColor="#ecf0f1"
            app:pstsShouldExpand="true"/>

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            tools:context=".MainActivity" />
    </LinearLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:id="@+id/nav_view"
    android:layoutDirection="rtl"
    app:headerLayout="@layout/header"
    app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>

Hope you can help me.

Thanks!

Answer 1

Use android:layoutDirection="rtl" both in TabLayout and ViewPager2

Here is full code:

<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ViewPagerFragment">

<com.google.android.material.tabs.TabLayout
    android:layoutDirection="rtl"
    android:id="@+id/tab_layout"
    app:tabMode="scrollable"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.viewpager2.widget.ViewPager2
    android:layoutDirection="rtl"
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tab_layout" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

Just Add To Your TabLayout And It Will Work Fine

android:layoutDirection="ltr"

Answer 3

• Use an array of models with the adapter and add it reversed in case of RTL.

  in FragmentPagerAdapter.java

  public void addTabs(ArrayList<TabItemAdapterModel> tabItemAdapterModels){
  
      if (UserDefaultUtil.deviceLanguageIsArabic()){
  
          Collections.reverse(tabItemAdapterModels);
      }
  
      models.addAll(tabItemAdapterModels);
  }
  

• choose the selected page for view pager to be the latest page in case of RTL (in Fragment/Activity class).

  if (UserDefaultUtil.deviceLanguageIsArabic()){
  
      ordersFilterViewPager.setCurrentItem(tabModels.size()-1);
  }
  

Full Adapter code:

public class TabsPagerAdapter extends FragmentPagerAdapter {

private List<TabItemAdapterModel> models = new ArrayList<>();

private Context mContext;

public TabsPagerAdapter(android.support.v4.app.FragmentManager manager, Context context) {

    super(manager);

    this.mContext = context;
}

@Override
public Fragment getItem(int position) {

    return models.get(position).getFragmentToShow();
}

@Override
public int getCount() {

    return models.size();
}

public void addTabs(ArrayList<TabItemAdapterModel> tabItemAdapterModels){

    if (UserDefaultUtil.deviceLanguageIsArabic()){

        Collections.reverse(tabItemAdapterModels);
    }

    models.addAll(tabItemAdapterModels);
}

}

Answer 4

The simplest way is using this one line of code :

tabLayout.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);

for RTL ordering of your tabs, you should do it in pager :

viewPager.setCurrentItem(adapter.getCount());

thanks to : arash-hatemi

Answer 5

just use this code:

mViewPager.setPageTransformer(true,null);

Answer 6

right after you set your adapter just set the current item in the mViewPager.

// Set up the ViewPager with the sections adapter. 
    mViewPager = (ViewPager) findViewById(R.id.container);
    mViewPager.setAdapter(mSectionsPagerAdapter);
//set the default item to be # 3
    mViewPager.setCurrentItem(3);

Answer 7

I had the same problem because my app works for both English and Hebrew. Here is what I did:

1. Set in the tabs activity android:layoutDirection="ltr".

2. In the tabs activity java – in onCreate moved to last page if the language was Hebrew.

3. In PlaceholderFragment class both in onCreateView and getPageTitle checked if the language is Hebrew, and if so returned the views and tittle in reverse order.

I know the question was regarding to rtl in general and not just Hebrew, but this change can be easily implemented by changing the condition.

Here my FinalTutorialActivity complete code:

package com.romsharony.finaltutorial;

import android.support.design.widget.TabLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import java.util.Locale;

public class FinalTutorialActivity extends AppCompatActivity {

    /**
     * The {@link android.support.v4.view.PagerAdapter} that will provide
     * fragments for each of the sections. We use a
     * {@link FragmentPagerAdapter} derivative, which will keep every
     * loaded fragment in memory. If this becomes too memory intensive, it
     * may be best to switch to a
     * {@link android.support.v4.app.FragmentStatePagerAdapter}.
     */
    private SectionsPagerAdapter mSectionsPagerAdapter;

    /**
     * The {@link ViewPager} that will host the section contents.
     */
    private ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_final_tutorial);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        // Create the adapter that will return a fragment for each of the three
        // primary sections of the activity.
        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.container);
        mViewPager.setAdapter(mSectionsPagerAdapter);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(mViewPager);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        // Go to last page if language is Hebrew
        if (Locale.getDefault().toString().equals("iw_IL") || Locale.getDefault().toString().equals("he_IL")) {
            mViewPager.setCurrentItem(2);
        }

    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_final_tutorial, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        private static final String ARG_SECTION_NUMBER = "section_number";

        public PlaceholderFragment() {
        }

        /**
         * Returns a new instance of this fragment for the given section
         * number.
         */
        public static PlaceholderFragment newInstance(int sectionNumber) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_SECTION_NUMBER, sectionNumber);
            fragment.setArguments(args);
            return fragment;
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View rootView;

            // If language is Hebrew return the pages in reverse direction
            if (Locale.getDefault().toString().equals("iw_IL") || Locale.getDefault().toString().equals("he_IL")) {
                switch (getArguments().getInt(ARG_SECTION_NUMBER)) {
                    case 1:
                        rootView = inflater.inflate(R.layout.page_three, container, false);
                        break;
                    case 2:
                        rootView = inflater.inflate(R.layout.page_two, container, false);
                        break;
                    default:
                        rootView = inflater.inflate(R.layout.page_one, container, false);
                }

            } else {
                switch (getArguments().getInt(ARG_SECTION_NUMBER)) {
                    case 3:
                        rootView = inflater.inflate(R.layout.page_three, container, false);
                        break;
                    case 2:
                        rootView = inflater.inflate(R.layout.page_two, container, false);
                        break;
                    default:
                        rootView = inflater.inflate(R.layout.page_one, container, false);
                }
            }
            return rootView;
        }
    }

    /**
     * A {@link FragmentPagerAdapter} that returns a fragment corresponding to
     * one of the sections/tabs/pages.
     */
    public class SectionsPagerAdapter extends FragmentPagerAdapter {

        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            // getItem is called to instantiate the fragment for the given page.
            // Return a PlaceholderFragment (defined as a static inner class below).
            return PlaceholderFragment.newInstance(position + 1);
        }

        @Override
        public int getCount() {
            // Show 3 total pages.
            return 3;
        }

        @Override
        public CharSequence getPageTitle(int position) {

            // If language is Hebrew return the titles in reverse direction
            if (Locale.getDefault().toString().equals("iw_IL") || Locale.getDefault().toString().equals("he_IL")) {
                switch (position) {
                    case 0:
                        return getResources().getString(R.string.section_three);
                    case 1:
                        return getResources().getString(R.string.section_2);
                    default:
                        return getResources().getString(R.string.section_one);
                }
            } else {
                switch (position) {
                    case 2:
                        return getResources().getString(R.string.section_three);
                    case 1:
                        return getResources().getString(R.string.section_2);
                    default:
                        return getResources().getString(R.string.section_one);
                }
            }
        }
    }
}

Answer 8

I added:

android:layoutDirection="ltr" to TabLayout.

NOT

android:layoutDirection="rtl"

and it worked just fine

Answer 9

I have the same issue. According for this it looks like there is no a simple solution. You can use one of those rtlViewPager libraries -

• https://github.com/ksloginov/RtlViewPager
• https://github.com/diego-gomez-olvera/RtlViewPager