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

This is an extension of the questions asked here:

How to get bottomSheet to open on top?

Android "Top Sheet" equivalent to "Bottom Sheet"?

Of course, the “Bottom Sheet” is called that for some reason, because you can carry it from the bottom.

In my design, I found that it works very well in portrait mode (images 1 and 2), but in landscape mode I would like to use (more visibility) in the "Main Area" (image 3) better. For this reason, I would like to have a “side sheet”, sort of like a navigation box (image 4).

enter image description here

So far I can’t find a solution or an alternative, so any help is appreciated!


Below is the base code showing the problem in landscape mode

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>
+4

Source: https://habr.com/ru/post/1654722/


All Articles