ActionBar tabs getting different width

Question

I am trying to implement tabs that would bring fragments in one of the activities of my project. The problem is that the tabs are occupying different width sizes on different devices.

Example (nexus 7): the tabs are not occupying full width

Example 2 (galaxy s5): the tabs are horizontally scrollable, so they occupy more than the full width of the action bar

SecondActivity.java:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_second);

    mViewPager = (ViewPager) findViewById(R.id.pager);
    mActionBar = getActionBar();
    mAdapter = new TabsPagerAdapter(getSupportFragmentManager(), mDate);

    mAdapter.setCurrentIndex(mSelectedTab);

    mViewPager.setAdapter(mAdapter);
    mActionBar.setDisplayShowHomeEnabled(false);
    mActionBar.setDisplayShowTitleEnabled(false);
    mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    mActionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM | ActionBar.DISPLAY_SHOW_HOME);
    mViewPager.setPagingEnabled(false);

    // Adding Tabs
    ActionBar.Tab firstTab = mActionBar
            .newTab()
            .setIcon(R.drawable.first_selector)
            .setTabListener(this);

    ActionBar.Tab secondTab = mActionBar
            .newTab()
            .setIcon(R.drawable.second_selector)
            .setTabListener(this);

    ActionBar.Tab thirdTab = mActionBar
            .newTab()
            .setIcon(R.drawable.third_selector)
            .setTabListener(this);

    mActionBar.addTab(firstTab);
    mActionBar.addTab(secondTab);
    mActionBar.addTab(thirdTab);
    switch (mSelectedTab) {
        case 0:
            mActionBar.selectTab(firstTab);
            break;
        case 1:
            mActionBar.selectTab(secondTab);
            break;
        case 2:
            mActionBar.selectTab(thirdTab);
            break;
    }

    mViewPager.setOffscreenPageLimit(3);

    LayoutInflater mInflater = (LayoutInflater) this
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View mCustomView = mInflater.inflate(R.layout.my_layout_header, null);
    mActionBar.setCustomView(mCustomView);
    mActionBar.setDisplayShowCustomEnabled(true);
}

activity_second.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_messages_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:focusableInTouchMode="true">

    <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>
</RelativeLayout>

TabsPagerAdapter.java:

public class TabsPagerAdapter extends FragmentStatePagerAdapter {
    private String mDate;
    private FragmentManager mFragmentManager;
    private int mCurrentIndex;
    SparseArray<Fragment> registeredFragments;

    public TabsPagerAdapter(FragmentManager fm, String date) {
        super(fm);
        mFragmentManager = fm;
        this.mDate = date;
        initializeFragments();
    }

    private void initializeFragments(){
        registeredFragments = new SparseArray<Fragment>();

        FirstFragment firstFragment = FirstFragment.newInstance(mDate);
        registeredFragments.put(0, firstFragment);
        SecondFragment secondFragment = SecondFragment.newInstance(mDate);
        registeredFragments.put(1, secondFragment);
        ThirdFragment thirdFragment = ThirdFragment.newInstance(mDate);
        registeredFragments.put(2, thirdFragment);
    }

    @Override
    public Fragment getItem(int index) {
        return registeredFragments.get(index);
    }

    @Override
    public int getCount() {
        return 3;
    }

    @Override
    public int getItemPosition(Object object) {
        return POSITION_NONE;
    }

    public int getCurrentIndex() {
        return mCurrentIndex;
    }

    public void setCurrentIndex(int currentIndex) {
        this.mCurrentIndex = currentIndex;
    }
}

The code for FirstFragment.java and layout_first_fragment.xml, as well as for the second and third fragments don't matter. However, here is the build.gradle for the module:

buildscript {
    repositories {
        maven { url 'https://maven.fabric.io/public' }
    }

    dependencies {
        classpath 'io.fabric.tools:gradle:1.+'
    }
}
apply plugin: 'com.android.application'

repositories {
    maven { url 'https://maven.fabric.io/public' }
}


//Put Fabric plugin after Android plugin
apply plugin: 'io.fabric'

android {
    compileSdkVersion 25
    buildToolsVersion "23.0.2"

    defaultConfig {
        applicationId "com.myapplication.android"
        minSdkVersion 11
        targetSdkVersion 23
        versionCode 9
        versionName "1.3.0"

        multiDexEnabled true
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    useLibrary 'org.apache.http.legacy'
    dexOptions{
        javaMaxHeapSize "4g"
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')

    compile "com.android.support:appcompat-v7:25.0.+"
    compile 'com.google.android.gms:play-services:10.0.1'
    compile 'it.sephiroth.android.library.horizontallistview:hlistview:1.2.2'
    compile 'com.anjlab.android.iab.v3:library:1.0.+@aar'
    compile project(':libraries:SlidingMenu')
    compile project(':PullToRefresh')
    compile('com.crashlytics.sdk.android:crashlytics:2.6.5@aar') {
        transitive = true;
    }
    compile 'com.android.support:multidex:1.0.1'
    compile 'com.android.support:design:25.0.1'
}

I want the ActionBar initialized by getActionBar() be the full width of the device. I tried creating a custom action bar but i had the same problem.

Answer 1

ActionBar Tabs is now officially deprecated. Tabs should now be built using the TabLayout. This link might help https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-TabLayout