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 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.
