Android操作栏上和下侧都有多个项目

Question

I would like to have a custom action bar which should contain tabs and action buttons, as in attached picture:

As in the picture, I would like to have the app logo and title, followed by some action buttons, then the tabs and then in the bottom bar some more action buttons. I googled for a solution but so far I have just found some solutions based on 3rd party libraries (which I do not want) or implementing a separated header or footer. Maybe there is a better and quicker solution to achieve something as in the picture. I tried to use the

android:uiOptions="splitActionBarWhenNarrow"

but it doesn't behave as I would like to, meaning that both in portrait and landscape mode, and no matter the device, I would like to have the action buttons always on the same position, similar as in the picture. Any suggestions are welcome. Thanks in advance.

Answer 1

Try something like this:

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

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:background="#0000ff"
        android:id="@+id/headerRelativeLayout">>


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView"
            android:src="@drawable/arrow_right"
            android:layout_alignTop="@+id/cancelTextView"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />

        <TextView
            android:id="@+id/cancelTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ScreenTitle"
            android:textColor="#ffffff"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/imageView"
            android:layout_toEndOf="@+id/imageView" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView2"
            android:src="@drawable/arrow_right"
            android:layout_toLeftOf="@id/imageView3" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView3"
            android:src="@drawable/arrow_right"
            android:layout_alignTop="@+id/cancelTextView"
            android:layout_toLeftOf="@id/imageView4"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView4"
            android:src="@drawable/arrow_right"
            android:layout_alignTop="@+id/cancelTextView"
            android:layout_alignParentRight="true"/>

    </RelativeLayout>

    <TabHost
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/tabHost"
        android:layout_below="@+id/headerRelativeLayout"
        android:layout_centerHorizontal="true">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical">

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"

                android:background="#0000ff"
                android:layout_height="wrap_content"></TabWidget>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent">

                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:orientation="vertical"></LinearLayout>

                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:orientation="vertical"></LinearLayout>

                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:orientation="vertical"></LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>


    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:background="#0000ff"
        android:id="@+id/headerRelativeLayout2"
        android:layout_alignParentBottom="true">


        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true">


            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imageView5"
                android:src="@drawable/arrow_right"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imageView6"
                android:src="@drawable/arrow_right" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imageView7"
                android:src="@drawable/arrow_right"/>

            </LinearLayout>
    </RelativeLayout>

</RelativeLayout>