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:
- To tell user that you got a new message
- To tell how many unread messages they have
- 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 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
