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')
}
view raw build.gradle hosted with ❤ by GitHub

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'
}
view raw build.gradle hosted with ❤ by GitHub

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>
view raw activity_main.xml hosted with ❤ by GitHub

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;
}
}
view raw Scale.java hosted with ❤ by GitHub

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;
}
}
view raw ThumbSlider.java hosted with ❤ by GitHub

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;
}
}
view raw gistfile1.txt hosted with ❤ by GitHub

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;
}
}
view raw SlideIn.java hosted with ❤ by GitHub

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;
}
}
view raw Flip.java hosted with ❤ by GitHub

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;
}
}
view raw SlideOnTop.java hosted with ❤ by GitHub

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;
}
}
view raw Standard.java hosted with ❤ by GitHub

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();
}
}
view raw MainActivity.java hosted with ❤ by GitHub

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!

Hire the author: Dennis M