Notification With Expandable Custom Layout

Android Notification using custom layout with Text & Image

In this tutorial we will do the followings:
1) Make/Show Notification (expandable)
2) Custom layout xml for notification
3) Image and Text in custom layout

Video

Step 1: Create a new project OR Open your project

Step 2: In res folder create two resource layout files named custom_normal.xml and custom_expanded.xml

Step 3: Place an image in drawable folder to show in notification

Step 4: Code:

custom_normal.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><ImageViewandroid:layout_width="40dp"android:layout_height="40dp"android:src="@drawable/logo_atif"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewstyle="@style/TextAppearance.Compat.Notification.Title"android:text="Title of the notification"android:layout_width="match_parent"android:layout_height="wrap_content" /><TextViewstyle="@style/TextAppearance.Compat.Notification.Info"android:text="Title description of the notitification in collapsed mode. click expand icon to expand it."android:layout_width="match_parent"android:layout_height="wrap_content" /></LinearLayout></LinearLayout>

custom_expanded.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:orientation="vertical"><TextViewstyle="@style/TextAppearance.Compat.Notification.Title"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Title of the notification" /><ImageViewandroid:layout_width="100dp"android:layout_height="100dp"android:src="@drawable/logo_atif" /><TextViewstyle="@style/TextAppearance.Compat.Notification.Info"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Title description of the notification in expanded mode. click collapse icon to collapse it." /></LinearLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><Buttonandroid:id="@+id/showNotificationBtn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Show Notification"style="@style/Base.Widget.AppCompat.Button.Colored"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" /></android.support.constraint.ConstraintLayout>

MainActivity.java

package com.blogspot.atifsoftwares.simplenotification;import android.app.NotificationChannel;import android.app.NotificationManager;import android.app.PendingIntent;import android.content.Intent;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.os.Build;import android.support.v4.app.NotificationCompat;import android.support.v4.app.NotificationManagerCompat;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.RemoteViews;import java.util.zip.Inflater;public class MainActivity extends AppCompatActivity {//there can be multiple notifications so it can be used as notification identityprivate static final String CHANNEL_ID = "channel_id01";public static final int NOTIFICATION_ID = 1;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Button showNotificattionBtn = findViewById(R.id.showNotificationBtn);showNotificattionBtn.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {//click button to show notificationshowNotification();}});}private void showNotification() {createNotificationChannel();//inflating the views (custom_normal.xml and custom_expanded.xml)RemoteViews remoteCollapsedViews = new RemoteViews(getPackageName() , R.layout.custom_normal);RemoteViews remoteExpandedViews = new RemoteViews(getPackageName() , R.layout.custom_expanded);//start this(MainActivity) on by Tapping notificationIntent mainIntent = new Intent(this , MainActivity.class);mainIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);PendingIntent mainPIntent = PendingIntent.getActivity(this , 0 ,mainIntent , PendingIntent.FLAG_ONE_SHOT);//creating notificationNotificationCompat.Builder builder = new NotificationCompat.Builder(this , CHANNEL_ID);//iconbuilder.setSmallIcon(R.drawable.ic_notification);//set prioritybuilder.setPriority(NotificationCompat.PRIORITY_DEFAULT);//dismiss on tapbuilder.setAutoCancel(true);//start intent on notification tap (MainActivity)builder.setContentIntent(mainPIntent);//custom stylebuilder.setStyle(new NotificationCompat.DecoratedCustomViewStyle());builder.setCustomContentView(remoteCollapsedViews);builder.setCustomBigContentView(remoteExpandedViews);//notification managerNotificationManagerCompat notificationManagerCompat = NotificationManagerCompat.from(this);notificationManagerCompat.notify(NOTIFICATION_ID , builder.build());}private void createNotificationChannel() {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {CharSequence name = "My Notification";String description = "My notification description";//importance of your notificationint importance = NotificationManager.IMPORTANCE_DEFAULT;NotificationChannel notificationChannel = new NotificationChannel(CHANNEL_ID , name , importance);notificationChannel.setDescription(description);NotificationManager notificationManager = (NotificationManager)getSystemService(NOTIFICATION_SERVICE);notificationManager.createNotificationChannel(notificationChannel);}}}

Step 4: Run Project

Output

Notification with custom layout