Hire the author: Dennis M
Notification Effects Android Image Source unsplash.com.
Here is the GitHub link for this project notification-effects-android.
Introduction
In this blog post, we’ll cover how to display different notification effects and customize them with styles and parameters. Also, the different notification effects are viewed by a click of the button responsible for displaying the notification effect. Therefore, we will be using the same notification message enabling the users to see the different notification effects.
This project offers insights into the working of notification effects in android. In addition, the reader gets a better understanding of the inner-machinery that goes behind implementing such features.
Periodically, in Android applications, notifications are utilized to notify users about application updates and reminders. Along these lines, they will in general be truly useful when users are inside your application’s UI. In addition, consider brisk collaborations like erasing an email or responding to a message.
This article assumes that you have some involvement in building Android applications in Java.
What is my inspiration for doing the venture “How to develop different notification effects in the android studio”? Well I personally had trouble finding all the instructions to do this. So, I built up an android application that uses literally all the notification effects needed by users. In conclusion, this blog post will give exact directions to the implementation of each notification effect in android.
Photo Preview


Glossary
Notification is a message that Android shows outside your application’s UI to give the client updates. Similarly correspondence from others, or other opportune data from your application. Therefore, users can tap the notification to open your application or make a move clearly from the notification.
Relative Layout will permit you to make complex designs with a level of view progression. Just like Constraint Layout, views are laid out according to the relationship between parent layout and the sibling views. Finally, Relative Layout is more pliable than Constraint Layout and more effective with Android Studio’s Layout Editor.
Steps:
Step 1: Adding required dependencies
Firstly, go to app-level build.gradle file and add the following dependency:
dependencies { | |
compile fileTree(include: ['*.jar'], dir: 'libs') | |
compile project(':library') | |
} |
Secondly, go to the project-level build.gradle file and add the following dependency:
buildscript { | |
repositories { | |
jcenter() | |
} | |
dependencies { | |
classpath 'com.android.tools.build:gradle:2.2.1' | |
classpath 'com.github.dcendents:android-maven-plugin:1.2' | |
} |
In Android Studio, dependencies permit us to incorporate an outside library or other container documents, or other library modules in our Android venture.
At whatever point you add a dependency to your Gradle, it will download the additional libraries. In addition, it adds them to the venture with the goal that it’s accessible in the undertaking. It makes it simple to oversee outer libraries in our undertaking.
Step 2: Creating the activity_main.xml file
Now, come to your activity_main.xml file. Change your default to Relative Layout then add some additional attributes like this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" | |
xmlns:tools="http://schemas.android.com/tools" | |
android:layout_width="match_parent" | |
android:layout_height="match_parent" | |
android:background="#2683e0" | |
android:orientation="vertical" | |
tools:context=".MainActivity"> | |
<TextView | |
android:id="@+id/title" | |
android:layout_width="match_parent" | |
android:layout_height="48dp" | |
android:background="#34495E" | |
android:textColor="#FFFFFF" | |
android:gravity="center" | |
android:text="Testing Notification Effects" /> | |
<ScrollView | |
android:layout_width="match_parent" | |
android:layout_height="wrap_content" | |
android:layout_below="@+id/title" | |
android:scrollbars="none"> | |
<LinearLayout | |
android:layout_width="match_parent" | |
android:layout_height="wrap_content" | |
android:orientation="vertical" | |
android:padding="5dp"> | |
<Button | |
android:id="@+id/scale" | |
style="@style/my_btn" | |
android:text="SCALE" | |
/> | |
<Button | |
android:id="@+id/thumbSlider" | |
style="@style/my_btn" | |
android:text="THUMB SLIDER" | |
/> | |
<Button | |
android:id="@+id/jelly" | |
style="@style/my_btn" | |
android:text="JELLY" | |
/> | |
<Button | |
android:id="@+id/slidein" | |
style="@style/my_btn" | |
android:text="SLIDE IN" | |
/> | |
<Button | |
android:id="@+id/flip" | |
style="@style/my_btn" | |
android:text="FLIP" | |
/> | |
<Button | |
android:id="@+id/slideOnTop" | |
style="@style/my_btn" | |
android:text="SLIDE ON TOP" | |
/> | |
<Button | |
android:id="@+id/standard" | |
style="@style/my_btn" | |
android:text="STANDARD" | |
/> | |
</LinearLayout> | |
</ScrollView> | |
<RelativeLayout | |
android:id="@+id/mLyout" | |
android:layout_below="@+id/title" | |
android:layout_width="match_parent" | |
android:layout_height="match_parent" | |
android:clipChildren="true" | |
> | |
</RelativeLayout> | |
</RelativeLayout> |
Create a new package called effects and add the following java files as shown from step 3 to step 9. The different notification effects will be made possible by the use of their respective java file.
Step 3: Creating the Scale.java
Create a new java file called Scale.java and add the code shown below to have this effect on the notification.
package com.dennis.notification.effects.lib.effects; | |
import android.view.View; | |
import com.nineoldandroids.animation.ObjectAnimator; | |
public class Scale extends BaseEffect { | |
@Override | |
protected void setInAnimation(View view) { | |
getAnimatorSet().playTogether( | |
ObjectAnimator.ofFloat(view, "translationY", -view.getHeight()/2, 0).setDuration(mDuration), | |
ObjectAnimator.ofFloat(view, "scaleX", .3f, .5f, 1).setDuration(mDuration), | |
ObjectAnimator.ofFloat(view,"scaleY",.3f,.5f,1,1.1f,1).setDuration(mDuration), | |
ObjectAnimator.ofFloat(view, "alpha", 0, 1).setDuration(mDuration*3/2) | |
); | |
} | |
@Override | |
protected void setOutAnimation(View view) { | |
getAnimatorSet().playTogether( | |
ObjectAnimator.ofFloat(view, "translationY", 0, -view.getHeight()/2).setDuration(mDuration), | |
ObjectAnimator.ofFloat(view, "scaleX", 1, .5f, 0).setDuration(mDuration), | |
ObjectAnimator.ofFloat(view,"scaleY",1,.5f,0).setDuration(mDuration), | |
ObjectAnimator.ofFloat(view, "alpha", 1, 0).setDuration(mDuration*3/2) | |
); | |
} | |
@Override | |
protected long getAnimDuration(long duration) { | |
return duration; | |
} | |
} |
Step 4: Creating the ThumbSlider.java file
Create a new java file called ThumbSlider.java and add the code shown below to have this effect on the notification.
package com.dennis.notification.effects.lib.effects; | |
import android.view.View; | |
import com.nineoldandroids.animation.ObjectAnimator; | |
import com.nineoldandroids.view.ViewHelper; | |
public class ThumbSlider extends BaseEffect{ | |
long s = (mDuration-200)/2, | |
m = 200, | |
e =(mDuration-200)/2; | |
View iconView; | |
View msgView; | |
@Override | |
protected void setInAnimation(View view) { | |
iconView=view.findViewById(android.R.id.icon); | |
if(iconView!=null){ | |
msgView=view.findViewById(android.R.id.message); | |
ViewHelper.setAlpha(msgView,0f); | |
ViewHelper.setPivotX(msgView, 0); | |
ViewHelper.setPivotY(msgView, 0); | |
ObjectAnimator msgScaleAnim=ObjectAnimator.ofFloat(msgView, "scaleX", 0, .5f, 1, 1.1f, 1).setDuration(s * 2); | |
ObjectAnimator msgAlphaAnim=ObjectAnimator.ofFloat(msgView, "alpha", 1).setDuration(s * 2); | |
msgScaleAnim.setStartDelay(s+m); | |
msgAlphaAnim.setStartDelay(s+m); | |
getAnimatorSet().playTogether( | |
ObjectAnimator.ofFloat(iconView, "scaleX", 0, .5f, 1,.9f,1,1.2f,1).setDuration(s), | |
ObjectAnimator.ofFloat(iconView,"scaleY",0,.5f,1,1.2f,1,.9f,1).setDuration(s), | |
msgScaleAnim, | |
msgAlphaAnim | |
); | |
} | |
} | |
@Override | |
protected void setOutAnimation(View view) { | |
iconView=view.findViewById(android.R.id.icon); | |
if(iconView!=null) { | |
msgView = view.findViewById(android.R.id.message); | |
ObjectAnimator iconScaleXAnim = ObjectAnimator.ofFloat(iconView, "scaleX", 1, 1.2f, 1, .9f, 1, .5f, 0).setDuration(e * 2); | |
ObjectAnimator iconScaleYAnim = ObjectAnimator.ofFloat(iconView, "scaleY", 1, .9f, 1, 1.2f, 1, .5f, 0).setDuration(e * 2); | |
ObjectAnimator iconAlphaAnim = ObjectAnimator.ofFloat(iconView, "alpha", 1, 0).setDuration(e * 2); | |
iconScaleXAnim.setStartDelay(e + m); | |
iconScaleYAnim.setStartDelay(e + m); | |
iconAlphaAnim.setStartDelay(e + m); | |
getAnimatorSet().playTogether( | |
ObjectAnimator.ofFloat(msgView, "scaleX", 1, 1.1f, 1, .5f, 0).setDuration(e), | |
iconScaleXAnim, | |
iconScaleYAnim, | |
iconAlphaAnim | |
); | |
} | |
} | |
@Override | |
protected long getAnimDuration(long duration) { | |
return duration*2+200; | |
} | |
} |
Step 5: Creating the Jelly.java
Create a new java file called Jelly.java and add the code shown below to have this effect on the notification.
package com.dennis.notification.effects.lib.effects; | |
import android.view.View; | |
import com.nineoldandroids.animation.ObjectAnimator; | |
public class Jelly extends BaseEffect { | |
@Override | |
protected void setInAnimation(View view) { | |
getAnimatorSet().playTogether( | |
ObjectAnimator.ofFloat(view, "scaleX", .3f, .5f, .9f,.8f,.9f,1).setDuration(mDuration), | |
ObjectAnimator.ofFloat(view,"scaleY",.3f, .5f, .8f,.9f,.8f,1).setDuration(mDuration), | |
ObjectAnimator.ofFloat(view, "alpha", 0, 1).setDuration(mDuration*3/2) | |
); | |
} | |
@Override | |
protected void setOutAnimation(View view) { | |
getAnimatorSet().playTogether( | |
// ObjectAnimator.ofFloat(view, "scaleX", 1,.9f,.8f,.9f,.5f,0).setDuration(mDuration), | |
// ObjectAnimator.ofFloat(view,"scaleY",1,.8f,.9f,.8f,.5f,0).setDuration(mDuration), | |
ObjectAnimator.ofFloat(view, "alpha", 1, 0).setDuration(mDuration*2/3) | |
); | |
} | |
@Override | |
protected long getAnimDuration(long duration) { | |
return duration; | |
} | |
} |
Step 6: Creating the SlideIn.java file
Create a new java file called SlideIn.java and add the code shown below to have this effect on the notification.
package com.dennis.notification.effects.lib.effects; | |
import android.view.View; | |
import com.nineoldandroids.animation.ObjectAnimator; | |
public class SlideIn extends BaseEffect { | |
@Override | |
protected void setInAnimation(View view) { | |
getAnimatorSet().playTogether( | |
ObjectAnimator.ofFloat(view, "translationX", -view.getWidth(), -10,-20,-5,-10,0).setDuration(mDuration) | |
); | |
} | |
@Override | |
protected void setOutAnimation(View view) { | |
getAnimatorSet().playTogether( | |
ObjectAnimator.ofFloat(view, "translationX", 0,-10,view.getWidth()).setDuration(mDuration) | |
); | |
} | |
@Override | |
protected long getAnimDuration(long duration) { | |
return duration; | |
} | |
} |
Step 7: Creating the Flip.java file
Create a new java file called Flip.java and add the code shown below to have this effect on the notification.
package com.dennis.notification.effects.lib.effects; | |
import android.view.View; | |
import com.nineoldandroids.animation.ObjectAnimator; | |
import com.nineoldandroids.view.ViewHelper; | |
public class Flip extends BaseEffect { | |
long s = mDuration, | |
e =mDuration; | |
@Override | |
protected void setInAnimation(View view) { | |
ViewHelper.setPivotX(view, view.getWidth()/2); | |
ViewHelper.setPivotY(view, 0); | |
getAnimatorSet().playTogether( | |
ObjectAnimator.ofFloat(view, "rotationX",-90,0).setDuration(s), | |
ObjectAnimator.ofFloat(view, "alpha", 0, 1).setDuration(s*3/2) | |
); | |
} | |
@Override | |
protected void setOutAnimation(View view) { | |
ViewHelper.setPivotX(view, view.getWidth()/2); | |
ViewHelper.setPivotY(view, 0); | |
getAnimatorSet().playTogether( | |
ObjectAnimator.ofFloat(view, "rotationX",0, -90).setDuration(e), | |
ObjectAnimator.ofFloat(view, "alpha", 1, 0).setDuration(e * 3 / 2) | |
); | |
} | |
@Override | |
protected long getAnimDuration(long duration) { | |
return duration; | |
} | |
} |
Step 8: Creating the SlideOnTop.java file
Create a new java file called SlideOnTop.java and add the code shown below to have this effect on the notification.
package com.dennis.notification.effects.lib.effects; | |
import android.view.View; | |
import com.nineoldandroids.animation.ObjectAnimator; | |
public class SlideOnTop extends BaseEffect{ | |
@Override | |
protected void setInAnimation(View view) { | |
getAnimatorSet().playTogether( | |
ObjectAnimator.ofFloat(view, "translationY", -view.getWidth(), -10, -20, -5, -10, 0).setDuration(mDuration) | |
); | |
} | |
@Override | |
protected void setOutAnimation(View view) { | |
getAnimatorSet().playTogether( | |
ObjectAnimator.ofFloat(view, "translationY", 0,-10,-5,-view.getWidth()).setDuration(mDuration) | |
); | |
} | |
@Override | |
protected long getAnimDuration(long duration) { | |
return duration; | |
} | |
} |
Step 9: Creating the Standard.java file
Create a new java file called Standard.java and add the code shown below to have this effect on the notification.
package com.dennis.notification.effects.lib.effects; | |
import android.view.View; | |
import com.nineoldandroids.animation.ObjectAnimator; | |
public class Standard extends BaseEffect{ | |
@Override | |
protected void setInAnimation(View view) { | |
getAnimatorSet().playTogether( | |
ObjectAnimator.ofFloat(view, "translationY", -view.getHeight(), 0).setDuration(mDuration) | |
); | |
} | |
@Override | |
protected void setOutAnimation(View view) { | |
getAnimatorSet().playTogether( | |
ObjectAnimator.ofFloat(view, "translationY",0, -view.getHeight()).setDuration(mDuration) | |
); | |
} | |
@Override | |
protected long getAnimDuration(long duration) { | |
return duration; | |
} | |
} |
Step 8: Creating the MainActivity.java file
Now, come to your MainActivity.java file. We’ll declare a function called showNotify() to display the notification and the different effects. Inside it, input the notification message which is a string data type. The different notification effects will be identified by use a Switch statement which is responsible for identifying the relevant effect to select when a button is pressed.
Finally, our complete and final MainActivity.java will be like this.
package com.dennis.notification.effects; | |
import android.app.Activity; | |
import android.os.Bundle; | |
import android.view.Gravity; | |
import android.view.View; | |
import com.dennis.notification.effects.lib.Configuration; | |
import com.dennis.notification.effects.lib.Effects; | |
import com.dennis.notification.effects.lib.NiftyNotificationView; | |
import com.gitonway.lee.niftynotification.R; | |
public class MainActivity extends Activity { | |
private Effects effect; | |
@Override | |
protected void onCreate(Bundle savedInstanceState) { | |
super.onCreate(savedInstanceState); | |
setContentView(R.layout.activity_main); | |
} | |
public void showNotify(View v){ | |
String msg="Today we’d like to share a couple of simple styles and effects for android notifications."; | |
switch (v.getId()){ | |
case R.id.scale:effect=Effects.scale;break; | |
case R.id.thumbSlider:effect=Effects.thumbSlider;break; | |
case R.id.jelly:effect=Effects.jelly;break; | |
case R.id.slidein:effect=Effects.slideIn;break; | |
case R.id.flip:effect=Effects.flip;break; | |
case R.id.slideOnTop:effect=Effects.slideOnTop;break; | |
case R.id.standard:effect=Effects.standard;break; | |
} | |
NiftyNotificationView.build(this,msg, effect,R.id.mLyout) | |
.setIcon(R.drawable.lion) //You must call this method if you use ThumbSlider effect | |
.show(); | |
} | |
} |
Above all, you can display any message you want in your notification. I have used simple buttons to check the notification effects on the click of the button in android. Therefore, you can use other widgets or icons and you can also use this code anywhere in your app according to your need.
Future Directions
Finally, its future directions involve displaying multiple notifications from different activities and enabling the different notification effects without pressing the button.
Learning Strategies and Tools
By changing and tweaking things, I found out how many notifications work without necessarily understanding the details from scratch. This may be something that can fundamentally save time in making another Android application, as there are as of now certain “feels” acquired from tweaking the parameters and realizing which to change.
In conclusion, we have learned about how your app can use different notification effects in android. Activities now have to implement the showNotify() function to implement the different notification effects in the android device.
Reflective Analysis
Figuring out how to utilize notification managers in android was a great learning experience. It is an astonishing instrument that makes the comprehension and testing notification endpoints simple. A typical mistake that is normal while utilizing notifications in android is the length of the remarks, so be cautious with that.
One of the most common uses in android mobile applications is to communicate with users through notifications. This is the most helpful approach to stand out enough to be noticed. Therefore, get the notification effects to perform the task required in android.
In conclusion, I spent 48 hours finishing the project and the blog. Finally, everything is available in this GitHub repository.
Link to the previous post: https://blog.ldtalentwork.com/2020/09/16/how-to-check-internet-connection-programatically-on-android-from-a-button-click-in-kotlin
That’s all for this tutorial!
Great work! I would suggest instead of clicking on a button so that one can see the different notification effects, we could use a timer that will loop through the different notifications effects. Give it an allowance of maybe 3 seconds and then show the next notification effect.