Change placement of bottom sheet in Landscape: "Side sheet"

Question

This is an extension of the questions asked here:

How to get bottomSheet to open from the top?

Android “Top Sheet” equivalent of “Bottom Sheet”?

of course "Bottom Sheet" is called like that for a reason, because you can swipe it from the Bottom.

I found out in my design, that this works very well in portrait mode (Image 1 and 2) but in landscape mode I would like to make better use (more visibility) of the "Main area" (Image 3 ). For this reason I would like to have a "Side sheet", kind of like a navigation drawer (image 4).

Till now I am not able to find a solution or alternative so any help is welcome!

Below the a basic code that demonstates the problem in Landscape mode

Main Activity

public class MainActivity extends AppCompatActivity {

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

activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container_main"
    android:orientation="vertical">

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <!-- Main Content -->
    <include layout="@layout/content_main"
        />

    <!-- Bottom Sheet Content -->
    <include layout="@layout/content_bottom_sheet"
        />

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

</LinearLayout>

content_main.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="horizontal"
    android:weightSum="2"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.6">
    </LinearLayout>
</LinearLayout>

content_bottom_sheet.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:class="http://schemas.android.com/tools"
    android:id="@+id/bottomSheetLayout"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    app:behavior_peekHeight="50dp"
    android:orientation="vertical"
    app:layout_behavior="@string/bottom_sheet_behavior">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.9"
        android:weightSum="4">

        <ImageButton
            android:id="@+id/category0"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#BB45BBEC"
            android:onClick="jumpto0"
            />

        <ImageButton
            android:id="@+id/category1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:textAllCaps="false"
            android:layout_weight="1"
            android:background="#AAA"
            android:onClick="jumpto1"
            />

        <ImageButton
            android:id="@+id/category2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFEF53"
            android:onClick="jumpto2"
            />
        <ImageButton
            android:id="@+id/category3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFF50E0E"
            android:onClick="jumptp3"
            />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.2">

        <ImageButton
            android:id="@+id/bottom1"
            android:layout_width="98dp"
            android:layout_height="62dp"
            android:layout_gravity="center"
            android:background="#FFF50E0E"
            />

        <ImageButton
            android:id="@+id/bottom2"
            android:layout_width="98dp"
            android:layout_height="62dp"
            android:layout_gravity="center"
            android:background="#FFF5"
            />

    </LinearLayout>
</LinearLayout>
</LinearLayout>

Perhaps you could add the code you have tried already since this is a programming Q&A website? — rmcsharry, Sep 15 '16 at 19:48
A bit late but did you manage to obtain what you wanted, as in picture 4? — adriennoir, Jan 08 '19 at 12:00
Unfortunaly not. I think you might have to change the default code of the CoordinatorLayout widget. I am still very interested for a solution thought. — Marios, Jan 08 '19 at 14:12

score 1 · Answer 1 · answered Feb 28 '20 at 15:06

1

In this case, you can use a RightSheetBehavior. But firstly, you should handle orientation changes and replace a behavior according to orientation.

answered Feb 28 '20 at 15:06

Warble

135
1
11

Sorry for the super late reply. My app is long finished cannot test this but it look promising. If I have the chance I will let you know but thank for the answer, it might still help others. – Marios Nov 30 '20 at 16:17

Change placement of bottom sheet in Landscape: "Side sheet"

1 Answers1