How do you like your Toast in the morning?
We’ve all used Android Toast. But did you know you can design your Toast to your very own taste.
Recently I was tasked with coming up with something to inform our users of an action being completed. Naturally in Android we use a Toast. But my company wanted this informative piece of UI to be on brand. How did I get around that?
Well without recreating the functionality I discovered you can keep all that and just create your own View. But how exactly can we go from A(on the left) to B(on the right)?
What we can do is create a custom layout as XML. No need to do anything too fancy and then when we’re creating our Toast, instead of calling the abstract makeText call like so Toast.makeText(context,"Text",Toast.LENGTH_LONG) we create an instance of the Toast and edit our custom views text from the layout that we’ve now set for our Toast. This can be seen in the code below. If you want to look at what I did for the custom Toast layout, you can find that in the link below the code.
Now if you want to be consistent in your app and are happy to do the above every time you want to show a Toast for your users, feel free to stop reading here. But we can be better. We can be more efficient. And we can then be more lazy in the future.
What comes next?
Let’s create a class that extends Toast so that we can do this all in one place and not clunk up our code base with repeated code.
So now that we have this class we create CustomToast like we did a Toast before except with this instance we can just call show straight away.
But we don’t want to use this do we? Unless every time we show this CustomToast we want it to say the same thing, but I doubt that.
Let’s do more!
The next step from this is to add a function to set the text dynamically. This can be done in the class constructor if you really want to but that will cause the Toast to be created numerous times when we can just create it once.
You must return the CustomToast object in the function. This allows us to chain our function calls and call show() after setText().
So what we do now is on the button click we pass in a specific text. So let’s add a new button to our main_activity_layout.xml and from here show different text depending on which button is clicked.
This should you give you something now like below.
We can do more to our Custom Toast. Like setting its Gravity so it appears at the top (see image below) or we can set it to fill the width of the screen. Have a play around and see what you like. The full final code can be found at the bottom of this article.
Any other questions just leave us a response, thanks for reading and enjoy having your Toast how you like it.
