Action Buttons showing up as Overflow

Question

I have added Action Tabs and Action Buttons to my Action Bar.

Here is what I want to accomplish -

But here's what I have -

Note the action bar at the bottom. The action buttons which I've added are showing up as overflow even after adding XXX:showAsAction="always"

Here is my Activity code -

public class MainActivity extends FragmentActivity implements
ActionBar.TabListener  {

    private ViewPager viewPager;
    private TabsPagerAdapter mAdapter;
    private ActionBar actionBar;
    private String[] tabs = { "Top Rated", "Games", "Movies" };

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

        viewPager = (ViewPager) findViewById(R.id.pager);
        actionBar = getActionBar();
        mAdapter = new TabsPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(mAdapter);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);       

        for (String tab_name : tabs) {
            actionBar.addTab(actionBar.newTab().setText(tab_name)
                    .setTabListener(this));
        }

        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                actionBar.setSelectedNavigationItem(position);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });

        getActionBar().setDisplayShowHomeEnabled(false);              
        getActionBar().setDisplayShowTitleEnabled(false);

    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.lol, menu);
    return super.onCreateOptionsMenu(menu);

    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

}

Menu file -

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" 
      xmlns:TOB="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/set"
          android:icon="@drawable/ic_action_settings"
          android:title="lol"  
          TOB:showAsAction="always"/>

    <item android:id="@+id/back"
          android:icon="@drawable/ic_action_back"
          android:title="bac"  
          TOB:showAsAction="always"/>

    <item android:id="@+id/car"
          android:icon="@drawable/ic_action_previous_item"
          android:title="car"  
          TOB:showAsAction="always"/>

</menu>

I also have android:uiOptions="splitActionBarWhenNarrow" in my Mainfest added.

Answer 1

First create your action_tab.xml(for tab layout you can use buttons) and custom_bar.xml as below.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="false"
android:orientation="horizontal"
android:paddingEnd="8dip" >

<ImageView
android:id="@+id/myImageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/about"
android:src="@drawable/ic_action_about" />

<ImageView
android:id="@+id/myImageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/help"
android:src="@drawable/ic_action_download" />

<ImageView
android:id="@+id/myImageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/settings"
android:src="@drawable/ic_action_settings" />

Then add following code in main activity.

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

ActionBar actionBar = getActionBar();
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

View view = View.inflate(getApplicationContext(), R.layout.actionbar,
        null); 
actionBar.setCustomView(view);
} 

And for the bottom bar inflate the custom_bar.xml:

@Override 
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.browser_main, menu);
RelativeLayout relativeLayout = (RelativeLayout) menu.findItem(R.id.layout_item).getActionView();

View inflatedView = getLayoutInflater().inflate(
        R.layout.custom_bar, null);

relativeLayout.addView(inflatedView);

return true; 
} 

You have to make some research for showing tabs( how to make it swipe) and you can have exact looks like you want.