Android tabbar being rendered over the actionbar not below in devices below 4.4.2

Question

I am using android.support.v7.app.ActionBar in my applications and it works great except for one detail

On devices pre 4.4.2 (I tested on 4.0, 4.1, 4.2 and 2.3)

Kitkat works fine but the rest doesn't

Kitkat and Pre-Kitkat:

package com.example.testtabbar;

import java.util.Locale;

import android.content.Context;
import android.os.Bundle;
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.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;

public class TestActivity extends ActionBarActivity implements ActionBar.TabListener {

    /**
     * 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.v13.app.FragmentStatePagerAdapter}.
     */
    SectionsPagerAdapter    mSectionsPagerAdapter;

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

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

        // Set up the action bar.
        final ActionBar actionBar = getSupportActionBar();
        actionBar.setCustomView(new Button(this));
        actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // Create the adapter that will return a fragment for each of the three
        // primary sections of the activity.
        mSectionsPagerAdapter = new SectionsPagerAdapter(this, getSupportFragmentManager());

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

        // When swiping between different sections, select the corresponding
        // tab. We can also use ActionBar.Tab#select() to do this if we have
        // a reference to the Tab.
        mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                actionBar.setSelectedNavigationItem(position);
            }
        });

        // For each of the sections in the app, add a tab to the action bar.
        for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
            // Create a tab with text corresponding to the page title defined by
            // the adapter. Also specify this Activity object, which implements
            // the TabListener interface, as the callback (listener) for when
            // this tab is selected.
            actionBar.addTab(actionBar.newTab().setText(mSectionsPagerAdapter.getPageTitle(i)).setTabListener(this));
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.test, 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();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

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

        public SectionsPagerAdapter(final Context context, final FragmentManager fm) {
            super(fm);
        }

        @Override
        public PlaceholderFragment 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) {
            Locale l = Locale.getDefault();
            switch (position) {
                case 0:
                    return getString(R.string.title_section1).toUpperCase(l);
                case 1:
                    return getString(R.string.title_section2).toUpperCase(l);
                case 2:
                    return getString(R.string.title_section3).toUpperCase(l);
            }
            return null;
        }
    }

    /**
     * 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";

        /**
         * 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;
        }

        public PlaceholderFragment() {
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_test, container, false);
            TextView textView = (TextView) rootView.findViewById(R.id.section_label);
            textView.setText(Integer.toString(getArguments().getInt(ARG_SECTION_NUMBER)));
            return rootView;
        }
    }

    /* (non-Javadoc)
     * @see android.support.v7.app.ActionBar.TabListener#onTabReselected(android.support.v7.app.ActionBar.Tab, android.support.v4.app.FragmentTransaction)
     */
    @Override
    public void onTabReselected(Tab arg0, android.support.v4.app.FragmentTransaction arg1) {
        // TODO Auto-generated method stub

    }

    /* (non-Javadoc)
     * @see android.support.v7.app.ActionBar.TabListener#onTabSelected(android.support.v7.app.ActionBar.Tab, android.support.v4.app.FragmentTransaction)
     */
    @Override
    public void onTabSelected(Tab tab, android.support.v4.app.FragmentTransaction arg1) {
        mViewPager.setCurrentItem(tab.getPosition());
    }

    /* (non-Javadoc)
     * @see android.support.v7.app.ActionBar.TabListener#onTabUnselected(android.support.v7.app.ActionBar.Tab, android.support.v4.app.FragmentTransaction)
     */
    @Override
    public void onTabUnselected(Tab arg0, android.support.v4.app.FragmentTransaction arg1) {
        // TODO Auto-generated method stub

    }

}

EDIT: When using a custom view and a tab navigation, the tab navigation is on top in older devices, How can I make the action bar be rendered above the tab strip ?

The code above demonstrates the problem in 1 class, the button signifies a custom layout

Create 2 emulators 1 4.4 and the other is 2.3, when you run on both you will observe the problem.

Edit:

After trying the transparent icon here is the result: P.S. the white on the left is the action bar bg, but the white in the middle is me removing some text from the screenshot to protect the identity of the application

I need the icon on the left to be touching the left edge, so next will test ActionBarSherlock

Answer 1

Use ViewPager with TabStrip you can check it out in this project

Answer 2

I faced this issue with support Library

so you have 2 solutions:

1- Use ActionBar Sherlock ActionBar Sherlock

OR

2-Set Display Home Icon, in the below code i added blank home icon but you can replace it with anything else

    // Set up the action bar.
    final ActionBar actionBar = getSupportActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    actionBar.setDisplayShowCustomEnabled(true);
    actionBar.setCustomView(new Button(this));
    //Hide Home Icon (as default)
    actionBar.setDisplayShowHomeEnabled(false);
    //Hide Title
    actionBar.setDisplayShowTitleEnabled(false);
    //if android < 19 4.4 
    if(android.os.Build.VERSION.SDK_INT < 19)
    {
        //display Home icon
        actionBar.setDisplayShowHomeEnabled(true);
        //Set Blank Icon 
        actionBar.setIcon(R.drawable.blank);
    }

But i prefer use ActionBar Sherlock.

Answer 3

In the OnCreate method update the line

foractionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

and add new display option

actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM| ActionBar.DISPLAY_SHOW_HOME);

this will view make the tabs under the action bar and will show the home icon. then you can update the home icon with a blank icon if you don't want it

You can use actionBar.setIcon(yourImage); where yourImage is a transparent png or a picture with 1*1 px resolution or an image you want to use to ovveride the Home Icon, this will change the Home Icon and keep the Actionbar above the TabBar

Override the Home Screen Icon

Or you can Set the icon you want as your home icon and then overrides onMenuItemSelected

@Override
public boolean onMenuItemSelected(int featureId, MenuItem item) {

    int itemId = item.getItemId();
    switch (itemId) {
    case android.R.id.home:


      Toast.makeText(MainActivity.this, "home pressed", Toast.LENGTH_LONG).show();
        break;

    }

    return true;
}

This will change the icon and put you action on its click and it will be at the most left side of the screen but there will be a small arrow ^_^ which means that this button opens a menu.