How to create a Sliding Notification in Your Android App?

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

<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 two TranslateAnimation 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 an AnimationSet with true for sharing resources.
• We define two TranslateAnimation objects: animationUp and animationDown.
• We use the apply block to set properties for each animation more concisely.
• Properties like duration are set in milliseconds (converted to Long type).
• We use fillAfter = true directly on the AnimationSet and each TranslateAnimation for clarity.

3. Usage 🔗

• Replace messageObject with the actual TextView 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 , Facebook , and GitHub .