CODEWITHSUNDEEP
androidactionbarsherlock
Sviatoslav
Sviatoslav

Reputation: 1312

Actionbar with Icon, Tabs and MenuButton in one line

I want to create ActionBar with Icon, Tabs and MenuButton in one line, but by using next code, I get 2 lines as on the PrintScreen:

java:

viewPager = (ViewPager) findViewById(R.id.pager);
bar = getSupportActionBar();
bar.setIcon(R.drawable.ic_map);
bar.setDisplayShowHomeEnabled(false);
bar.setDisplayShowTitleEnabled(false);
bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

TabsAdapter tabsAdapter = new TabsAdapter(this, viewPager);
tabsAdapter.addTab(bar.newTab().setText("A"), ClientTemplates.class, null);
tabsAdapter.addTab(bar.newTab().setText("B"), ClientWalletsCards.class, null);
tabsAdapter.addTab(bar.newTab().setText("C"), ClientReports.class, null);

XML:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

<android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:paddingRight="1px"
        android:paddingLeft="1px"/>

What does I must to change in my code for getting only 1 line?

Upvotes: 1

Views: 2064

Answers (2)

mmutuyu
mmutuyu

Reputation: 1

Actionbar CustomView is a good way to achieve the effect u want, make some tabs by yourself, like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="right">

    <RelativeLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <RelativeLayout 
            android:id="@+id/tabone"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="@dimen/actionbar_margin">
            <ImageView
                android:contentDescription="@string/tabone_discription"
                android:id="@+id/mainpage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/account_dark"
                android:layout_centerInParent="true"
                />
        </RelativeLayout>

        <ImageView 
            android:contentDescription="@string/divider_discription"
            android:id="@+id/divider1"
            android:background="@drawable/list_divider_holo_light"
            android:layout_height="match_parent"
            android:layout_marginTop="@dimen/divider_margin_top_bottom"
            android:layout_marginBottom="@dimen/divider_margin_top_bottom"
            android:layout_toRightOf="@id/tabone"
            android:layout_marginLeft="@dimen/actionbar_margin"
            android:layout_width="@dimen/divider_width"/>

        <RelativeLayout 
            android:id="@+id/tabtwo"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_toRightOf="@id/divider1"
            android:layout_marginLeft="@dimen/actionbar_margin">
            <ImageView 
                android:contentDescription="@string/tabtwo_discription"
                android:id="@+id/atpage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/at_dark"
                android:layout_centerInParent="true"
                />
        </RelativeLayout>

        <ImageView 
            android:contentDescription="@string/divider_discription"
            android:id="@+id/divider2"
            android:background="@drawable/list_divider_holo_light"
            android:layout_height="match_parent"
            android:layout_marginTop="@dimen/divider_margin_top_bottom"
            android:layout_marginBottom="@dimen/divider_margin_top_bottom"
            android:layout_marginLeft="@dimen/actionbar_margin"
            android:layout_toRightOf="@id/tabtwo"
            android:layout_width="@dimen/divider_width"/>

        <RelativeLayout 
            android:id="@+id/tabthree"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_toRightOf="@id/divider2"
            android:layout_marginLeft="@dimen/actionbar_margin">
            <ImageView 
                android:contentDescription="@string/tabthree_discription"
                android:id="@+id/replaypage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/comment_dark"
                android:layout_centerInParent="true"
                />
        </RelativeLayout>

        <View 
            android:layout_height="0dp"
            android:layout_width="0dp"
            android:layout_toRightOf="@id/tabthree"
            android:layout_marginLeft="12dp"/>

    </RelativeLayout>

    <ImageView 
        android:contentDescription="@string/actionbar_line"
        android:layout_height="3dp"
        android:layout_width="0dp"
        android:id="@+id/actionbarline"
        android:background="@drawable/ab_solid_custom_blue_inverse_holo"
        />

</RelativeLayout>

and then, in your activity java file:

mActionBar.setDisplayShowCustomEnabled(true);
mActionBar.setCustomView(R.layout.ab_customview);

I did’t use tabs, but the result looks like that I’ve got three tabs on the same line of my action bar:)

Upvotes: 0

CommonsWare
CommonsWare

Reputation: 1007099

AFAIK, you have no control over this. Android (or, in this case, ActionBarSherlock) will position the action bar tabs where it wants, or even convert them from tabs to a drop-down list when it wants.

If you use android:uiOptions="splitActionBarWhenNarrow", you can put the overflow menu button line on the bottom of the screen, though.

Upvotes: 2

Related Questions