How to Move Views Out of the Way With dodgeInsetEdges in Android?

We have used the Floating Action Button which is having its behavior of expanding to an upward direction and show the snackbar message below that Floating Action button. This behavior is present with the Floating Action Button with default behavior, but if we want to add this type of behavior in our custom view. So in this article, we will take a look at How to moves out of the way with dodgeInsetEdges in Android. 

What we are going to build in this article? 

We will be building a simple expandable view which we will display on button click in Android. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<!--we are using coordinator layout for this example-->
<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"
    tools:context=".MainActivity">

    <!--button to expand the view-->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|start"
        android:layout_margin="16dp"
        android:text="Click to Expand"
        app:layout_dodgeInsetEdges="bottom" />

    <!--Nested scroll view to display
        bottom scrolled layout-->
    <androidx.core.widget.NestedScrollView
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:background="@color/purple_500"
        app:behavior_hideable="true"
        app:behavior_peekHeight="0dp"
        app:layout_behavior="@string/bottom_sheet_behavior"
        app:layout_insetEdge="bottom">

        <!--we will be displaying a simple text
            view in that nested scroll view-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="16dp"
            android:text="Welcome to the DSA Self paced Course,
                          where you will get to learn all about
                          Data Structures and Algorithms in detail."
            android:textColor="@color/white"
            android:textSize="16sp"
            android:textStyle="bold" />
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Step 3: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import androidx.appcompat.app.AppCompatActivity;

import com.google.android.material.bottomsheet.BottomSheetBehavior;

public class MainActivity extends AppCompatActivity {

    // creating a new variable for bottom sheet behaviour.
    private BottomSheetBehavior bottomSheetBehavior;

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

        // initializing view for our bottom sheet below.
        View bottomSheet = findViewById(R.id.bottom_sheet);

        // initializing bottom sheet behaviour
        // with our bottom sheet view.
        bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);

        // initializing the button where we will
        // be displaying our expanded view.
        Button button = findViewById(R.id.button);

        //adding on click listener to our button.
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // below line is use to expand our view on button click in android.
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
            }
        });
    }
}

Now run the app and see the output of the app. 

Output: