How to create a Sliding Notification in Your Android App?
ยท
508 words
ยท
3 minute read
This guide will walk you through creating a custom notification that slides up from the bottom of the screen in your Android application.
1. Designing the Notification Layout (XML) ๐
- We’ll define a background drawable for the notification using an XML file named
popup_background.xml
.- The code creates a rectangular shape with rounded corners, a solid color fill, and a black border.
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#C999" />
<corners android:topLeftRadius="10sp"
android:topRightRadius="10sp"/>
<stroke android:color="#000000"
android:width="1sp"/>
</shape>
- Next, we’ll create the layout for the notification itself (e.g.,
notification_layout.xml
).- The code creates a
TextView
with the following properties:- Text content: “POPUP MESSAGE”
- Black text color
- Centered text
- Bottom gravity (aligned to the bottom of the screen)
- Padding and font size adjustments
- Background set to the
popup_background.xml
drawable
- The code creates a
<TextView
android:id="@+id/Message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="bottom"
android:textSize="10pt"
android:padding="10dp"
android:textColor="@android:color/black"
android:background="@drawable/popup_background"
android:text="POPUP MESSAGE" />
2. Implementing the Slide Animation ๐
- We’ll use an
AnimationSet
to combine twoTranslateAnimation
objects and create the sliding effect. - The first animation translates the notification from the bottom of the screen (1.5 times its height) to its visible position (0 height offset) over 1 second.
- The second animation, with a 3-second delay, translates the notification back down (0 height offset) to its hidden position (1.5 times its height) over 1 second.
- Both animations are set to fill the view after the animation is complete, ensuring the notification stays visible or hidden at the end.
Java ๐
AnimationSet slide = new AnimationSet(true);
// Slide Up Animation
Animation animation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 1.5f,
Animation.RELATIVE_TO_SELF, 0f);
animation.setDuration(1000);
animation.setFillAfter(true);
slide.addAnimation(animation);
// Slide Down Animation (with delay)
animation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 1.5f);
animation.setDuration(1000);
animation.setStartOffset(3000);
animation.setFillAfter(true);
slide.addAnimation(animation);
slide.setFillAfter(true); // Ensure notification stays visible/hidden
messageObject.startAnimation(slide);
Kotlin ๐
val slide = AnimationSet(true)
// Slide Up Animation
val animationUp = TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 1.5f,
Animation.RELATIVE_TO_SELF, 0.0f
).apply {
duration = 1000L
fillAfter = true
}
slide.addAnimation(animationUp)
// Slide Down Animation (with delay)
val animationDown = TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 1.5f
).apply {
duration = 1000L
startOffset = 3000L
fillAfter = true
}
slide.addAnimation(animationDown)
slide.fillAfter = true
messageObject.startAnimation(slide)
- We declare
slide
as anAnimationSet
withtrue
for sharing resources. - We define two
TranslateAnimation
objects:animationUp
andanimationDown
. - We use the
apply
block to set properties for each animation more concisely. - Properties like
duration
are set in milliseconds (converted toLong
type). - We use
fillAfter = true
directly on theAnimationSet
and eachTranslateAnimation
for clarity.
3. Usage ๐
- Replace
messageObject
with the actualTextView
element you created in your layout where you want to display the notification. - This code snippet demonstrates the animation logic. You’ll need to integrate it into your activity or appropriate class to trigger the notification display and dismissal based on your app’s functionality.
I hope this post helps you. If you know a person who can benefit from this information, send them a link of this post. If you want to get notified about new posts, follow me on YouTube , Twitter (x) , LinkedIn , and GitHub .
![waffarx cash back](/img/waffarx-banner.png)