New Tutorials:   NUMPY    TKINTER    KOTLIN    JAVASCRIPT    SASS/SCSS    PL/SQL    Matplotlib    C++ Programs
CLOSE
   Android  Alerter  Toast  
   Technology    Programming

How to add Tapadoo Alerter in Android App

         
  DECEMBER 16, 2020   by onlyklohan

We have seen different ways to alert the user in many apps such as Wallpaper app (when the wallpaper is changed), Facebook (when we post something on the app), YouTube (when we upload a video), web browsers (when a file is downloading or the download is completed or when some error occurs in the app) etc. It is mainly used to show simple alerts to the user. An "alerter" will make the UI of your Android app more beautiful and interactive and also help the user to remember it for a long time.

What is Tapadoo Alerter ?

To show simple message in android app we have Android Toast and Snackbar but there are many usecases where we want some customization and this type of customizations are not possible with the Toast and Snackbar. So to do this we need an external library and Tapadoo Alerter is the library which is used to do this type of customizations in android studio apps. You can learn more about Tapadoo Alerter from GitHub here.

So let's implement a simple Tapadoo Alerter in our android app.

Step 1: Create a new Project

  1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to setup Android Studio and create your first Android project)

  2. Choose "Empty Activity" from the project template window and click Next

  3. Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial ) and minimum SDK(we are using API 19: Android 4.4 (KitKat))

  4. Next click on Finish button after filling the above details

  5. Now wait for the project to finish building.

Step 2: Adding the Tapadoo Alerter dependency

To show the Alerter in our app we have to implement the Tapadoo Alerterin our app, to do so follow the below steps.

Go to Gradle Scripts -> build.gradle (Module: app) section and import below dependencies and click the "sync Now" show at the top:

dependencies {

// Adding Tapadoo Alerter Library
    implementation 'com.tapadoo.android:alerter:2.0.4'
}

Step 3: Modify activity_main.xml

Now go to app -> res -> layout -> activity_main.xml and add a LinearLayout with orientation vertical and inside LinearLayout we add buttons for different alerts as shown below:

  <!-- Simple vertical Linear Layout  -->
    <LinearLayout
        android:layout_alignParentBottom = "true"
        android:orientation = "vertical"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content">
        
        <Button
            android:background = "@color/colorAccent"
            android:textColor = "#ffffff"
            android:textStyle = "bold"
            android:textSize = "24dp"
            android:padding = "8dp"
            android:layout_margin = "10dp"
            android:text = "Simple Alert "
            android:id = "@+id/btn1"
            android:layout_width = "match_parent"
            android:layout_height = "48dp"/>
        
        <Button
            android:background = "@color/colorAccent"
            android:textColor = "#ffffff"
            android:textStyle = "bold"
            android:textSize = "24dp"
            android:padding = "8dp"
            android:layout_margin = "10dp"
            android:text = "with Background Color "
            android:id = "@+id/btn2"
            android:layout_width = "match_parent"
            android:layout_height = "48dp"/>

        <Button
            android:background = "@color/colorAccent"
            android:textColor = "#ffffff"
            android:textStyle = "bold"
            android:textSize = "24dp"
            android:padding = "8dp"
            android:layout_margin = "10dp"
            android:text = "with Icon"
            android:id = "@+id/btn3"
            android:layout_width = "match_parent"
            android:layout_height = "48dp"/>

        <Button
            android:background = "@color/colorAccent"
            android:textColor = "#ffffff"
            android:textStyle = "bold"
            android:textSize = "24dp"
            android:padding = "8dp"
            android:layout_margin = "10dp"
            android:text = "with On Screen Duration "
            android:id = "@+id/btn4"
            android:layout_width = "match_parent"
            android:layout_height = "48dp"/>

        <Button
            android:background = "@color/colorAccent"
            android:textColor = "#ffffff"
            android:textStyle = "bold"
            android:textSize = "24dp"
            android:padding = "8dp"
            android:layout_margin = "10dp"
            android:text = "without Title "
            android:id = "@+id/btn5"
            android:layout_width = "match_parent"
            android:layout_height = "48dp"/>

        <Button
            android:background = "@color/colorAccent"
            android:textColor = "#ffffff"
            android:textStyle = "bold"
            android:textSize = "24dp"
            android:padding = "8dp"
            android:layout_margin = "10dp"
            android:text = "with OnClickListener "
            android:id = "@+id/btn6"
            android:layout_width = "match_parent"
            android:layout_height = "48dp"/>

        <Button
            android:id = "@+id/btn7"
            android:background = "@color/colorAccent"
            android:textColor = "#ffffff"
            android:textStyle = "bold"
            android:textSize = "24dp"
            android:padding = "8dp"
            android:layout_margin = "10dp"
            android:text = "with Verbose Text"
            android:layout_width = "match_parent"
            android:layout_height = "48dp"/>

        <Button
            android:background = "@color/colorAccent"
            android:textColor = "#ffffff"
            android:textStyle = "bold"
            android:textSize = "24dp"
            android:padding = "8dp"
            android:layout_margin = "10dp"
            android:text = "with Swipe To Dismiss"
            android:id = "@+id/btn8"
            android:layout_width = "match_parent"
            android:layout_height = "48dp"/>

        <Button
            android:background = "@color/colorAccent"
            android:textColor = "#ffffff"
            android:textStyle = "bold"
            android:textSize = "24dp"
            android:padding = "8dp"
            android:layout_margin = "10dp"
            android:text = "with Progress Bar"
            android:id = "@+id/btn9"
            android:layout_width = "match_parent"
            android:layout_height = "48dp"/>

        <Button
            android:background = "@color/colorAccent"
            android:textColor = "#ffffff"
            android:textStyle = "bold"
            android:textSize = "24dp"
            android:padding = "8dp"
            android:layout_margin = "10dp"
            android:text = "with Visibility Callbacks"
            android:id = "@+id/btn10"
            android:layout_width = "match_parent"
            android:layout_height = "48dp"/>
        
    </LinearLayout>

As you can see in the code above, we have added 10 different buttons because we will add different behaviors to all these buttons. You don't need to add all the buttons, just keep the one you need. This is just for example purpose.

Step 4: MainActivity.java file

Now open the MainActivity.java file and import some basic classes as shown below

//importing required classes
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.tapadoo.alerter.Alerter;
import com.tapadoo.alerter.OnHideAlertListener;
import com.tapadoo.alerter.OnShowAlertListener;

Next, we create the objects of Android Button inside MainActivity class as shown below

// creating object of  Button class
Button btn1, btn2,btn3, btn4,btn5, btn6,btn7, btn8,btn9, btn10  ;

Now we create different methods for different alerts as shown below:

public void simpleAlert() {
	Alerter.create(MainActivity.this).setTitle("Alert Title").setText("Alert text...").show();
}

public void withBackgroundColor() {
	Alerter.create(this).setTitle("Alert Title").setText("Alert text...").setBackgroundColorRes(R.color.colorAccent) // or setBackgroundColorInt(Color.CYAN)
	.show();
}

public void withIcon() {
	Alerter.create(this).setText("Alert text...").setIcon(R.drawable.ic_launcher_foreground).setIconColorFilter(0) // Optional - Removes white tint
	.show();
}

public void withOnScreenDuration() {
	Alerter.create(this).setTitle("Alert Title").setText("Alert text...").setDuration(10000) //set the dration in milli seconsds
	.show();
}

public void withoutTitle() {
	Alerter.create(this).setText("Alert text...").show();

}

public void withOnClickListener() {
	Alerter.create(this).setTitle("Alert Title").setText("Alert text...").setDuration(10000).setOnClickListener(new View.OnClickListener() {@Override
		public void onClick(View view) {
			//showing simple toast to user when clicked
			Toast.makeText(MainActivity.this, "You Clicked Me", Toast.LENGTH_LONG).show();
		}
	}).show();
}

public void withVerboseText() {
	Alerter.create(this).setTitle("Alert Title").setText("The alert scales to accommodate larger bodies of text. " + "The alert scales to accommodate larger bodies of text. " + "The alert scales to accommodate larger bodies of text.").show();
}

public void withSwipeToDismiss() {
	Alerter.create(this).setTitle("Alert Title").setText("Alert text...").enableSwipeToDismiss() // enabled swip to dismiss
	.show();
}

public void withProgressBar() {
	Alerter.create(this).setTitle("Alert Title").setText("Alert text...").enableProgress(true) // enables the progress
	.setProgressColorRes(R.color.colorAccent) //set color of the progress
	.show();
}

public void withVisibilityCallbacks() {
	Alerter.create(this).setTitle("Alert Title").setText("Alert text...").setDuration(10000).setOnShowListener(new OnShowAlertListener() {@Override
		public void onShow() {
			//showing simple toast when it is shown
			Toast.makeText(MainActivity.this, "On Show ", Toast.LENGTH_SHORT).show();
		}
	}).setOnHideListener(new OnHideAlertListener() {@Override
		public void onHide() {
			//showing simple toast to user when  it is hidden
			Toast.makeText(MainActivity.this, "On Hide ", Toast.LENGTH_SHORT).show();

		}
	}).show();

}

Now inside the onCreate() method, we initialize the Button and add the OnClick Listener and call the respective method inside onClick():

// initializing the Buttons
btn1 = (Button) findViewById(R.id.btn1);
btn2 = (Button) findViewById(R.id.btn2);
btn3 = (Button) findViewById(R.id.btn3);
btn4 = (Button) findViewById(R.id.btn4);
btn5 = (Button) findViewById(R.id.btn5);
btn6 = (Button) findViewById(R.id.btn6);
btn7 = (Button) findViewById(R.id.btn7);
btn8 = (Button) findViewById(R.id.btn8);
btn9 = (Button) findViewById(R.id.btn9);
btn10 = (Button) findViewById(R.id.btn10);

btn1.setOnClickListener(new View.OnClickListener() {@Override
	public void onClick(View view) {
		simpleAlert();
	}
});

btn2.setOnClickListener(new View.OnClickListener() {@Override
	public void onClick(View view) {
		withBackgroundColor();
	}
});

btn3.setOnClickListener(new View.OnClickListener() {@Override
	public void onClick(View view) {
		withIcon();
	}
});

btn4.setOnClickListener(new View.OnClickListener() {@Override
	public void onClick(View view) {
		withOnScreenDuration();
	}
});

btn5.setOnClickListener(new View.OnClickListener() {@Override
	public void onClick(View view) {
		withoutTitle();
	}
});

btn6.setOnClickListener(new View.OnClickListener() {@Override
	public void onClick(View view) {
		withOnClickListener();
	}
});

btn7.setOnClickListener(new View.OnClickListener() {@Override
	public void onClick(View view) {
		withVerboseText();
	}
});

btn8.setOnClickListener(new View.OnClickListener() {@Override
	public void onClick(View view) {
		withSwipeToDismiss();
	}
});

btn9.setOnClickListener(new View.OnClickListener() {@Override
	public void onClick(View view) {
		withProgressBar();
	}
});

btn10.setOnClickListener(new View.OnClickListener() {@Override
	public void onClick(View view) {
		withVisibilityCallbacks();
	}
});

Once you have added all the above code in your Main activity, then we are ready to run our app.

Output:

In the below snapshots, you can see how the Tapadoo Alerter will look in the android application.

Simple Alert:

implement Tadapoo alerter in Android

With background color:

implement Tadapoo alerter in Android

With icon:

implement Tadapoo alerter in Android

With On-Screen duration:

implement Tadapoo alerter in Android

Without Title:

implement Tadapoo alerter in Android

With OnClickListener:

implement Tadapoo alerter in Android

With Verbose Text:

implement Tadapoo alerter in Android

With Swipe To Dismiss:

implement Tadapoo alerter in Android

With Progress Bar:

implement Tadapoo alerter in Android

With Visibility Callback Show:

implement Tadapoo alerter in Android

Conclusion:

In just 4 simple steps we have integrated and shown you the basic example for creating an Alert using Tapadoo Alerter in your android app. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.


RELATED POSTS



Subscribe and receive amazing posts directly in your inbox.