Custom Toast Android Using Kotlin and Constraint Layout
Hello guys, Are you bored using the same Toast all the time and fancied by all the libraries that are out there and rely on them for a customized toast? Well, not anymore when you can create your own custom Toast and also can put it out as a library. Yes, you heard me correct in my next blog post I will tell you how you can publish your own library.
Let’s start,
Toast Overview:-
A Toast is a view that provides quick feedback for the user in a small popup. That’s it. it’s a pretty simple but handy tool.
Ok, ok, I am coming to the topic.
The First Step is, Create a layout file named “custom_toast_layout.xml” (you can name it whatever you want) for your custom toast with an image view and a text view.
custom_toast_layout.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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/custom_toast_layout"
android:background="@drawable/toast_round_background"><ImageView
android:id="@+id/custom_toast_image"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:maxHeight="20dp"
android:maxWidth="20dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/custom_toast_message"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" /><TextView
android:id="@+id/custom_toast_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="@font/baloo"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/custom_toast_image"
app:layout_constraintTop_toTopOf="parent" /></android.support.constraint.ConstraintLayout>
If you see the above layout you see that I have included the background “@drawable/toast_round_background” inside our parent constraint layout that is because Toast in Android is not round by default.
toast_round_background.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"><corners
android:radius="40dp" /><solid
android:color="#FFFFFF" /><size
android:width="82dp"
android:height="82dp" /></shape>
the above code is simple enough to understand but although I’ll try to describe it a little. The drawable has a radius of 40dp and that is because I don’t think it will be any bigger than it is normally displayed with a white color in the background and size of 82dp for the drawable.
After having these two files we will be discussing some real code to start of we will create a Kotlin class named “KCustomToast” basically k is for Kotlin and nothing else. You must be thinking about why I am creating a custom file for showing just a Toast. So, to remind you as I mentioned at the start that I will be writing about publishing a library in the next blog this is what I am planning to publish pretty soon. Coming back to the topic let’s see some code. I will be creating an info toast.
KCustomToast.kt
class KCustomToast {
companion object {
val GRAVITY_TOP = 48
val GRAVITY_CENTER = 17
val GRAVITY_BOTTOM = 80
private lateinit var layoutInflater: LayoutInflaterfun infoToast(context: Activity, message: String, position: Int) {
layoutInflater = LayoutInflater.from(context)
val layout = layoutInflater.inflate(R.layout.custom_toast_layout, (context).findViewById(R.id.custom_toast_layout))
layout.custom_toast_image.setImageDrawable(ContextCompat.getDrawable(context, R.drawable.ic_information))
val drawable = ContextCompat.getDrawable(context, R.drawable.toast_round_background)
drawable?.colorFilter = PorterDuffColorFilter(ContextCompat.getColor(context, R.color.info), PorterDuff.Mode.MULTIPLY)
layout.background = drawable
layout.custom_toast_message.setTextColor(Color.WHITE)
layout.custom_toast_message.text = messageval toast = Toast(context.applicationContext)
toast.duration = Toast.LENGTH_SHORT
if (position == GRAVITY_BOTTOM) {
toast.setGravity(position, 0, 20)
} else {
toast.setGravity(position, 0, 0)
}
toast.view = layout //setting the view of custom toast layout
toast.show()
}fun infoToast(context: Activity, message: String, position: Int, font: Typeface?) {
layoutInflater = LayoutInflater.from(context)
val layout = layoutInflater.inflate(R.layout.custom_toast_layout, (context).findViewById(R.id.custom_toast_layout))
layout.custom_toast_image.setImageDrawable(ContextCompat.getDrawable(context, R.drawable.ic_information))
val drawable = ContextCompat.getDrawable(context, R.drawable.toast_round_background)
drawable?.colorFilter = PorterDuffColorFilter(ContextCompat.getColor(context, R.color.info), PorterDuff.Mode.MULTIPLY)
layout.background = drawable
layout.custom_toast_message.setTextColor(Color.WHITE)
layout.custom_toast_message.text = message
font?.let {
layout.custom_toast_message.typeface = font
}val toast = Toast(context.applicationContext)
toast.duration = Toast.LENGTH_SHORT
if (position == GRAVITY_BOTTOM) {
toast.setGravity(position, 0, 20)
} else {
toast.setGravity(position, 0, 0)
}
toast.view = layout//setting the view of custom toast layout
toast.show()
}
}
}
So from what we can see above, we have created a “companion object” for those who don’t know Kotlin this is how we declare something static in Kotlin I have declared 3 variables for specifying the gravity I have done that because I don’t want you to use any other class in this case “Gravity” GRAVITY_TOP = 48, GRAVITY_CENTER = 17, GRAVITY_BOTTOM = 80. So, we will be using everything of ours. ;)
next, private lateinit var layoutInflater: LayoutInflater we will be needing a layout inflater to inflate our custom toast layout that we will be using.
next, as you can see I have created two versions of infoToast one with custom font and one with the normal font.
So, now we are ready we just need to call this in our activity. Let’s head to “MainActivity.kt”.
MainActivity.kt
class MainActivity : AppCompatActivity() {
lateinit var context: Context
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
context = applicationContext
}fun showInfoToastWithTypeface(view: View) {
KCustomToast.infoToast(this, "This is a custom info Toast with custom font", KCustomToast.GRAVITY_BOTTOM, ResourcesCompat.getFont(context,R.font.bad_script))
}}
Pretty basic here, I have created a function that is directly called from the button in any case you don’t know how to do that have a look.
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"><Button
android:id="@+id/infoToastWithFont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Custom Typeface"
android:onClick="showInfoToastWithTypeface" />
</android.support.constraint.ConstraintLayout>
Hurray!! A custom Toast, we have done it. If you followed me correctly you should see something like the below image.
I Hope, This will make you the boss of Toast. Go ahead and explore all the other possibilities for a Toast and may the force be with you.
If you have any questions just ask me in the comments and I promise I will help you. pinky promise. ;) See you next time.
