Open In App

How to Implement Notification Counter in Android?

Improve
Improve
Like Article
Like
Save
Share
Report

Notification Counter basically counts the notifications that you got through an application and shows on the top of your application icon so that you get to know you get new messages or any new update without opening your application or specific feature like the message button in Instagram. Notification counter is a feature that is provided in almost all android applications nowadays for example Facebook, Whatsapp, Instagram, YouTube, Gmail these are some social apps that we use in our day-to-day life so that exactly the Notification counter feature does? 

It’s used for various purposes like: 

  1. To tell user that you got a new message
  2. To tell how many unread messages they have 
  3. To notify users that a new feature or content is uploaded for example whenever your subscribed channel uploads a video on Youtube your Youtube notification count number increases.

What we are going to build in this article? 

In this article, we are going to build a simple application that counts the number of notifications with the help of two buttons increment and decrement. Whenever the user clicks on the increment button the notification count increases and whenever the user clicks on the decrement button the notification count decreases along with these two buttons we are also going to implement or use a 3rd button that is a reset button that directly sets the notification count to the zero. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Create a new Vector asset for notification bell by following these steps. Right-click on drawable > new > vector asset > search for notification icon and select > finish. We are going to use this icon to show our notification count on top of it. Now, what exactly is the vector asset that we use in this step. 

Vector Asset: Vector Asset is an Android Studio tool that allows you to add material icons and import Scalable Vector Graphic (SVG) and Adobe Photoshop Document (PSD) files as vector drawable resources to your project. 

Note: You can use customize notification bell icon as well by selecting it from your device storage but here we are using by default notification icon that is provided by the android studio.

Image for reference: 

FIG = VECTOR ASSET

XML




    android:width="24dp" <!--width of the bell icon -->
    android:height="24dp" <!-- height of the bell icon -->
    android:viewportWidth="24"  <!-- Used to define the width of the viewport space. -->
    android:viewportHeight="24" <!-- Used to define the height of the viewport space. -->
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M12,22c1.1,0 2,-0.9 2,-2h-4c0,1.1 0.89,2 2,2zM18,16v-5c0,-3.07 -1.64,-5.64 -4.5,-6.32L13.5,4c0,-0.83 -0.67,-1.5 -1.5,-1.5s-1.5,0.67 -1.5,1.5v0.68C7.63,5.36 6,7.92 6,11v5l-2,2v1h16v-1l-2,-2z"/>
</vector>


Step 3: Working with the activity_main.xml file

In this step, we are going to design our three buttons named Increment , decrement and reset along with our notification bell in the activity_main.xml file with the help of vector asset that we create in step 2 and to show notification count we are going to use a textview and set that textview on the top of our bell icon that we are implementing using image view also we use an ImageView to show the image of gfg logo.

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML




<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <Button
        android:id="@+id/decrement"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="168dp"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="155dp"
        android:text="DECREMENT( - )"
        android:textColor="#0F9D58"
        app:layout_constraintBottom_toTopOf="@+id/reset"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.45"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/increment"
        app:layout_constraintVertical_bias="0.0" />
 
    <Button
        android:id="@+id/increment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="168dp"
        android:layout_marginTop="64dp"
        android:layout_marginEnd="155dp"
        android:text="INCREMENT( + )"
        android:textColor="#0F9D58"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.45"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />
 
    <Button
        android:id="@+id/reset"
        android:layout_width="125dp"
        android:layout_height="55dp"
        android:layout_marginStart="168dp"
        android:layout_marginTop="25dp"
        android:layout_marginEnd="155dp"
        android:layout_marginBottom="168dp"
        android:text="RESET"
        android:textColor="#0F9D58"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.486"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/decrement" />
 
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="91dp"
        android:layout_height="57dp"
        android:layout_marginTop="188dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.531"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/notificationbell" />
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginBottom="24dp"
        android:background="@drawable/custombutton1"
        android:paddingTop="5sp"
        android:text="0"
        android:textAlignment="center"
        android:textColor="@color/white"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="@+id/imageView"
        app:layout_constraintHorizontal_bias="0.803"
        app:layout_constraintStart_toStartOf="@+id/imageView" />
 
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="136dp"
        android:layout_height="125dp"
        app:layout_constraintBottom_toTopOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/gfg" />
     
</androidx.constraintlayout.widget.ConstraintLayout>


 

 

Step 4: 

 

In this step, we are going to implement our methods to perform operations like increment, decrement, reset. To do this create a new java class by doing following the steps. Right-click on project name > New > class > finish. Below is the code for the Notificationcount.java file.   

 

Java




import android.util.Log;
import android.view.View;
import android.widget.TextView;
 
public class notificationcount { 
     
    private TextView notificationNumber;
 
    // maximum count limit
    private final int MAX_NUMBER = 99;
 
    // minimum count limit
    private final int MIN_NUMBER = 0;
 
    // initial count
    private int notification_number_counter = 0;
 
    public notificationcount(View view) {
        // finding textview through id textview
        // in notification number variable
        notificationNumber = view.findViewById(R.id.textView);
    }
 
    // increment method
    public void increment() {
 
        // checking condition if notification_counter-number
        // is greater than max number or not
        if (notification_number_counter > MAX_NUMBER) {
            // printing message maximum number reached
            Log.d("Counter", "Maximum number reached");
        } else {
            // if condition fails then increment the count by 1
            notification_number_counter++;
            // returning increased value
            notificationNumber.setText(String.valueOf(notification_number_counter));
        }
    }
 
    // decrement method
    public void decrement() {
 
        // checking condition if notification_number_count
        // is less than min number or not
        if (notification_number_counter <= MIN_NUMBER) {
            // if true then message minimum number reached
            Log.d("Counter", "Minimum number reached");
        } else {
            // decrease if condition fails
            notification_number_counter--;
            // returning decrease count
            notificationNumber.setText(String.valueOf(notification_number_counter));
        }
    }
 
    // rest method
    public void reset() {
        // checking if notification_number_count
        // is already zero or not
        if (notification_number_counter == 0) {
            // if true message already zero
            Log.d("alert", " notification count is already 0 ");
        } else {
            // else setting count to zero
            notification_number_counter = 0;
            // returning updated value
            notificationNumber.setText(String.valueOf(notification_number_counter));
        }
    }
 
}


 

 

Step 5: Working with the MainActivity.java file 

 

In this final step we are going to implement onclick listeners to our three buttons named increment, decrement, reset in our MainActivity.java file and call functions increment, decrement, reset that we created in the previous step. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

 

Java




import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
 
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity extends AppCompatActivity {
   
    // initializing 3 button variables b1,b2,b3
    Button b1, b2, b3;
    // initializing textview variable number
    TextView number;
    // object of Notificationcount class
    notificationcount notificationcount; 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // finding increment button through id in b1
        b1 = findViewById(R.id.increment);
        // finding decrement button through id in b2
        b2 = findViewById(R.id.decrement);
        // finding reset button through id in b3
        b3 = findViewById(R.id.reset);
 
        // creating new object of notificationcount class
        notificationcount = new notificationcount(findViewById(R.id.textView));
 
        // increment button
        b1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // calling increment method
                notificationcount.increment();
            }
        });
 
        // decrement button
        b2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // calling decrement button
                notificationcount.decrement();
            }
        });
 
        // reset button
        b3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // calling reset button
                notificationcount.reset();
            }
        });
 
    }
}


 

 

Output: 

 

FIG = NOTIFICATION COUNTER

 

Output Video:

 

 

Project Link: Click Here

 



Last Updated : 20 Sep, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads