Make Android "SlidingPaneLayout" push actionbar too

Question

I am using android.support.v4.widget.SlidingPaneLayout to make a sliding menu. Alas, SlidingPaneLayout only pushes main contents, and does not include the action bar. I want this layout to push the action bar too!

I would like the layout like this:

Answer 1

(Sorry for poor English. Please somebody edit this answer.)

Finally, I solved this problem! I inspired by this project

In short,

ActionbarActivity has view hierarchy like this (but different version has different hierarchy! this example is hierarchy of android 2.3 gingerbread.).

A(decorView)--- B(FrameLayout)--- C(LinearLayout)--- D(Layout including actionbar)
                                                 \__ E(Layout including contents)

1. remove B from A
2. inflate SlidingPaneLayout (called F)
3. inflate sliding menu's view (called G)
4. add G into F
5. add into F
6. add F into A

and result.

A(decorView)--- F(SlidingPaneLayout)--- G(sliding menu view)
                                    \__ B(FrameLayout)--- C(LinearLayout)--- D(Layout including actionbar)
                                                                         \__ E(Layout including contents)

application codes in below

MainActivity.java

public class MainActivity extends ActionBarActivity {
    @InjectView(R.id.hello)
    TextView mTextView;
    @InjectView(R.id.call_menu)
    Button mCallMenu;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);

        //get A
        ViewGroup parentView = (ViewGroup) getWindow().getDecorView();

        //get B
        ViewGroup viewIncludingAction = (ViewGroup) parentView.getChildAt(0);

        //maintain background theme
        TypedArray a = getTheme().obtainStyledAttributes(new int[] {android.R.attr.windowBackground});
        int background = a.getResourceId(0, 0);
        a.recycle();
        viewIncludingAction.setBackgroundResource(background);

        //remove B
        parentView.removeView(viewIncludingAction);

        //inflate F
        final ViewGroup paneLayout = (ViewGroup) getLayoutInflater().inflate(R.layout.view_slide_pane, null, false);

        //inflate G
        View menuView = getLayoutInflater().inflate(R.layout.fragment_side_menu, paneLayout, false);

        //because there's no default padding for status bar, add it mint result = 0;
        int result = 0;
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = getResources().getDimensionPixelSize(resourceId);
        }
        menuView.setPadding(0, result, 0, 0);

        //process 4~6
        paneLayout.addView(menuView);
        paneLayout.addView(viewIncludingAction);
        parentView.addView(paneLayout);


        mCallMenu.setOnClickListener(new View.OnClickListener() {
                                         @Override
                                         public void onClick(View view) {
                ((SlidingPaneLayout)paneLayout).openPane();
        }
        });
    }
}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/hello"
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/call_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/hello"
        android:text="pop"/>

</RelativeLayout>

fragment_side_menu.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="wrap_content"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:textSize="30sp"
        android:text="TEST"/>


</LinearLayout>

view_slid_pane.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.SlidingPaneLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.v4.widget.SlidingPaneLayout>

Answer 2

I have another solution. Using setSupportActionBar instead of default actionBar.

First add <item name="windowActionBar">false</item> into your theme.

activity_main.xml

<android.support.v4.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="@+id/sliding_pane_layout">
<FrameLayout
    android:id="@+id/frameLeft"
    android:layout_width="300dp"
    android:clickable="true"
    android:layout_height="match_parent">
</FrameLayout>
<FrameLayout
    android:id="@+id/frameRight"
    android:clickable="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</FrameLayout>

MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_swipe);
    //setSupportActionBar((Toolbar)findViewById(R.id.main_toolbar));
    SlidingPaneLayout slidingPaneLayout = (SlidingPaneLayout)findViewById(R.id.sliding_pane_layout);
    slidingPaneLayout.setPanelSlideListener(this);
    slidingPaneLayout.setCoveredFadeColor(0xffff0000);


    Fragment fragment1 = new SideFragment();
    Fragment fragment2 = new ContentFragment();


    FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
    ft.replace(R.id.frameLeft, fragment1);
    ft.replace(R.id.frameRight, fragment2);
    ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);//设置动画效果
    ft.commit();
}

ContentFragment.java

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View view = inflater.inflate(R.layout.fragment_content, container, false);
    ActionBarActivity a = (ActionBarActivity)getActivity();
    a.setSupportActionBar((Toolbar) view.findViewById(R.id.main_toolbar));
    return view;
}

fragment_content.xml

<LinearLayout
    android:background="@color/red_800"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        xmlns:sothree="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/main_toolbar"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        sothree:theme="@style/ActionBar"
        android:layout_width="match_parent"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment" />
</LinearLayout>

I hope this will help you.

Answer 3

I think that the accepted answer will not be work for all the Android api. I write the below code and it works fine.

In my toolbar I set two buttons (one left and one right) and also I set the title of screen in center of toolbar. It's easy to add everything you want in toolbar.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/sliding_panel"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- left slide panel contains the ListView -->
        <ListView
            android:id="@+id/left_panel"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:choiceMode="singleChoice"
            android:divider="@null"
            android:dividerHeight="0dp" />

        <!-- right panel which contains content of fragment & toolbar -->
        <FrameLayout
            android:id="@+id/right_panel"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <!-- toolbar -->
            <FrameLayout
                android:id="@+id/main_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize">

                <!-- menu button -->
                <Button
                    android:id="@+id/main_toolbar_menu_button"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_gravity="start|center_vertical"
                    android:layout_marginLeft="20dp"
                    android:layout_marginStart="20dp"
                    android:background="@drawable/sliding_panel_button" />

                <!-- toolbar title -->
                <TextView
                    android:id="@+id/main_toolbar_title"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:textColor="@color/black"
                    android:textSize="20sp"
                    android:textStyle="bold" />

                <!-- messages button -->
                <Button
                    android:id="@+id/main_toolbar_messages_button"
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_gravity="end|center_vertical"
                    android:layout_marginEnd="10dp"
                    android:layout_marginRight="10dp"
                    android:background="@drawable/action_bar_messages"
                    android:visibility="gone" />

            </FrameLayout>

        </FrameLayout>

    </android.support.v4.widget.SlidingPaneLayout>


</android.support.design.widget.CoordinatorLayout>