Wednesday, October 28, 2009

Tutorial : How to customize your toasts !

Toast, despite their strange name that an average french developer like me doesn't understand, are really usefull in Android world ! Specially for developers !

The Standard Toast with butter :
It is obviously a easy and quick way to send text feedback to the user and the developer ( as it is a nice tool to give feedback ).
Toast.makeText(mCurActivity, text, Toast.LENGTH_SHORT).show();

This line has been used such a number of times in my programs, and in many others !


The Toast with orange jam :
But the standard 'look and feel' of your toast does not necessarily fit your application's look. And the default position can be a issue too.
In Word Prospector, I give feedback on whether the word is correct with a toast. But at first this toast was over my game board, preventing the player to click on some letters !

Then enters the toast customisation !!



Here's I changed the position of my toast, in order to have it in the right - bottom corner, and its background, so it's like the others gui element of the page !

To change the toast position, you have to use the setGravity Toast method. You have to provide the gravity of your toast ( this strange Android beast that indicates where your gui element will end up being ), and you can refine this position by some offsets.

To change the style of the toast is also easy :
The default toast is made of a textView.
You can actually access this textView, and change anything you want inside ( in my case, the background image, but you can imagine changing the font, or the text color / size, ... )

Here's my code to change the pos and the background :
protected void ToastMessage( CharSequence text, int ToastPos )
{
Toast toast = Toast.makeText(mCurActivity, text, Toast.LENGTH_SHORT);
View textView = toast.getView();
switch ( ToastPos )
{
case TOAST_LEFT_POS:
toast.setGravity( android.view.Gravity.BOTTOM | android.view.Gravity.LEFT, 00, 0);
break;
case TOAST_CENTER_POS:
toast.setGravity( android.view.Gravity.BOTTOM | android.view.Gravity.CENTER, 00, 0);
break;
case TOAST_RIGHT_POS:
toast.setGravity( android.view.Gravity.BOTTOM | android.view.Gravity.RIGHT, 00, 0);
break;
}
textView.setBackgroundResource( R.drawable.textview);
toast.show();
}


The toast with butter, and orange jam, ... and some chocolate...
Do you want more customisation ?
You can actually change the textView inside the toast by any view you want... Any view.... Including a custom view declared in a Xml file, and that you can inflate inside your toast...
In this case, you can easily add several lines, or images, or whatever you want !

No Toast with orange jam and chicken wings allowed !!
Despite being a really nice to tool to master, the toast is limited in two ways :
* You don't have control on the toast duration. Actually there are only two states LENGTH_LONG and LENGTH_SHORT. Note that I imagine you can force the closure of a toast with the cancel method ( I didn't test it )
* More important : you can't have several toasts at a time ! So if you need to display a new toast and old one is already present, the new one will be queued by the system, and wait for the old one to disappear. At some times, it can be a important limitation, as it means you can't control the feedback your giving will apppear at the correct moment !
You can try to close the first one in order to display the new one ( with the cancel method... Remember ? The one I didn't test ), but in some cases the two toasts should be at different places, and you want the user to see and have time to read both of them !

2 comments:

gganesh said...

Great post ,i never imagine that Toast can be toasted as desired .But i could not inflate the view ,this is what i have done
Toast toast = Toast.makeText(Dialog.this, "left", Toast.LENGTH_SHORT);
View view = toast.getView();

TextView txtview=new TextView(this);
txtview.setText("hello");
TextView txtview2=new TextView(this);
txtview2.setText("what's up");
LinearLayout lay = new LinearLayout(this);
lay.setOrientation(LinearLayout.VERTICAL);

lay.addView(txtview);
lay.addView(txtview2);
lay.addView(view);
toast.setView(lay);
toast.setGravity( android.view.Gravity.BOTTOM | android.view.Gravity.LEFT, 00, 0);
toast.show();


the second text "what's up" goes out of the toast view ,what is wrong i am doing

prashant said...

Hi try with this one it will work ::

Toast toast = new Toast(c.this);
toast.setDuration(Toast.LENGTH_SHORT);

ImageView arrow = new ImageView(this);
arrow.setBackgroundResource(R.drawable.arrow);
arrow.setLayoutParams(new LayoutParams(100, 50));

TextView txtview=new TextView(this);
txtview.setText("hello");
txtview.setTextColor(Color.BLACK);

TextView txtview2=new TextView(this);
txtview2.setText("what's up");
txtview2.setTextColor(Color.BLACK);

LinearLayout lay = new LinearLayout(this);
lay.setBackgroundColor(Color.GRAY);
lay.setOrientation(LinearLayout.VERTICAL);

lay.addView(arrow);
lay.addView(txtview);
lay.addView(txtview2);

toast.setView(lay);
toast.setGravity( android.view.Gravity.CENTER | android.view.Gravity.CENTER, 00, 0);
toast.show();