Modern Android applications use interactive UI components to create smooth and responsive user experiences.
Some of the most commonly used Material Design components are:
- CoordinatorLayout
- Bottom Sheets
- FloatingActionButton (FAB)
- Snackbar
In this tutorial, we will learn how these components work together using:
- CoordinatorLayout behaviors
- BottomSheetBehavior
- Snackbar animations
- FloatingActionButton interactions
- Material Design components
What We Will Build
In this Android example:
- Create a Bottom Sheet
- Show Snackbar messages
- Use FloatingActionButton
- Expand Bottom Sheet dynamically
- Use CoordinatorLayout behaviors
- Understand layout_insetEdge and layout_dodgeInsetEdges
Important Modern Android Note
The original project uses:
android.support.*
which is deprecated.
Modern Android applications should now use:
androidx.*
and:
com.google.android.material
libraries.
What Is CoordinatorLayout?
CoordinatorLayout is a powerful ViewGroup introduced with Material Design.
It coordinates animations and interactions between child views automatically.
Examples:
- FAB moving above Snackbar
- Bottom sheets sliding
- Collapsing toolbars
- Scrolling animations
What Are layout_insetEdge and layout_dodgeInsetEdges?
These attributes help views avoid overlapping each other inside CoordinatorLayout.
layout_insetEdge
Defines which edge occupies layout space.
Example:
app:layout_insetEdge="bottom"
layout_dodgeInsetEdges
Moves views away from occupied edges automatically.
Example:
app:layout_dodgeInsetEdges="bottom"
Modern Material Dependency
Inside:
build.gradle
Add:
implementation
'com.google.android.material:material:1.11.0'
Why Material Components?
Material Components provide:
- Modern UI widgets
- Material Design styling
- Better animations
- Dark mode support
- Accessibility improvements
Step 1 — Create activity_main.xml
Create:
res/layout/activity_main.xml
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:contentDescription=
"Show Snackbar"
app:srcCompat=
"@android:drawable/ic_input_add"/>
<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="Open Bottom Sheet"
app:layout_dodgeInsetEdges=
"bottom"/>
<androidx.core.widget.NestedScrollView
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="350dp"
android:background=
"@android:color/holo_blue_light"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior=
"@string/bottom_sheet_behavior"
app:layout_insetEdge="bottom">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="@string/dummy_text"
android:textSize="16sp"/>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Step 2 — Create MainActivity.java
Create:
package com.example.bottomsheetdemo;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import com.google.android.material.bottomsheet.BottomSheetBehavior;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.snackbar.Snackbar;
public class MainActivity
extends AppCompatActivity {
private BottomSheetBehavior<View>
bottomSheetBehavior;
@Override
protected void onCreate(
Bundle savedInstanceState
) {
super.onCreate(savedInstanceState);
setContentView(
R.layout.activity_main
);
View bottomSheet =
findViewById(
R.id.bottom_sheet
);
bottomSheetBehavior =
BottomSheetBehavior
.from(bottomSheet);
FloatingActionButton fab =
findViewById(R.id.fab);
fab.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(
v,
"This is a Snackbar",
Snackbar.LENGTH_LONG
).show();
}
});
Button button =
findViewById(R.id.button);
button.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View v) {
bottomSheetBehavior
.setState(
BottomSheetBehavior
.STATE_EXPANDED
);
}
});
}
}
Step 3 — Create strings.xml
<resources>
<string name="app_name">
BottomSheet Demo
</string>
<string name="dummy_text">
This is a Bottom Sheet Example.
</string>
</resources>
How This Example Works
- CoordinatorLayout manages view interactions
- FloatingActionButton shows Snackbar
- Snackbar automatically pushes FAB upward
- Button expands Bottom Sheet
- BottomSheetBehavior controls sheet states
What Is BottomSheetBehavior?
BottomSheetBehavior controls:
- Expanded state
- Collapsed state
- Hidden state
- Dragging gestures
Bottom Sheet States
| State | Description |
|---|---|
| STATE_EXPANDED | Fully visible |
| STATE_COLLAPSED | Partially visible |
| STATE_HIDDEN | Completely hidden |
| STATE_DRAGGING | User dragging sheet |
| STATE_SETTLING | Animating to final state |
What Is Snackbar?
Snackbar is a lightweight Material Design message component.
Unlike Toast:
- Snackbar supports actions
- Snackbar integrates with CoordinatorLayout
- Snackbar provides animations
Snackbar Example
Snackbar.make(
view,
"Message",
Snackbar.LENGTH_LONG
).show();
FloatingActionButton Behavior
FloatingActionButton automatically responds to:
- Snackbar appearance
- CoordinatorLayout interactions
- Scrolling behaviors
Modern Android Recommendations
Modern Android applications now commonly use:
- Material Design 3
- BottomSheetDialogFragment
- Jetpack Compose Bottom Sheets
- Navigation Component
- ConstraintLayout
Modern Alternative — BottomSheetDialogFragment
Production applications often prefer:
BottomSheetDialogFragment
because it provides:
- Lifecycle awareness
- Dialog support
- Cleaner architecture
- Better reusability
CoordinatorLayout Advantages
- Automatic animations
- Material interactions
- View coordination
- Scrolling behaviors
- Gesture support
Common Beginner Mistakes
1. Using Deprecated Support Libraries
Always prefer:
androidx
instead of:
android.support
2. Forgetting CoordinatorLayout
Snackbar animations and FAB movement require:
CoordinatorLayout
3. Using Fixed Heights Everywhere
Responsive layouts should avoid excessive fixed dimensions.
FAQ
What is the purpose of CoordinatorLayout?
CoordinatorLayout coordinates animations and interactions between child views.
Why does FloatingActionButton move above Snackbar?
CoordinatorLayout automatically adjusts FloatingActionButton position when Snackbar appears.
What is the modern Bottom Sheet solution?
BottomSheetDialogFragment and Jetpack Compose ModalBottomSheet are modern recommended approaches.
Conclusion
CoordinatorLayout, Bottom Sheets, FloatingActionButton, and Snackbar are powerful Material Design components used in modern Android applications.
Together, they create smooth UI interactions, responsive layouts, and modern user experiences.
Modern Android applications should combine Material Design components, lifecycle-aware architecture, and responsive UI systems for scalable production-grade applications.
About the Author
Salil Jha is a Full Stack and Mobile Developer specializing in Android, React Native, fintech systems, scalable SaaS platforms, and developer tooling products.
CodeChain Dev — Build Modern Products. Solve Real Problems.
No comments:
Post a Comment