Draggable bottom sheet in front of everything when navigated from bottomNavigatioVview

Viewed 100

I'm using bottomNavigationView with fragments. On bottomViewNavigation there are 3 menu items. For one fragment I want to implement animation, where page comes from bottom and covers everything (bottomNavigationView , fab, actionbar). This page should be completely hidden when it is being dragged down.

I tried using: app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior, but I don't know how to make the best use of it.

An example of what I'm trying to achieve: this navigation can be seen in "Todoist" application, but I want that for only one fragment.

I've posted some code from my application as well:

Fragment XML, where I want to implement bottomsheet

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

<androidx.coordinatorlayout.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:id="@+id/fragment_menu">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/dialog_bottom"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
        app:behavior_hideable="true">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TEST"
            android:textAlignment="center"
            android:textSize="30dp" />

    </FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

MainAcitvity.java

package com.example.planner10;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.navigation.NavController;
import androidx.navigation.fragment.NavHostFragment;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;

import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

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

        BottomNavigationView navView = findViewById(R.id.bottomNavigationView);

        AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
                R.id.navigation_menu, R.id.navigation_profile, R.id.navigation_notifications)
                .build();
        final NavHostFragment navHostFragment = (NavHostFragment) getSupportFragmentManager().findFragmentById(R.id.nav_host_fragment_activity_main);
        final NavController navController = navHostFragment.getNavController();
        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
        NavigationUI.setupWithNavController(navView, navController);

    }
}

Pictures of current state:

On profile page

current situation on menu page

What I want to achieve: Example of desired navigation

0 Answers
Related