Custom Toast message in Android

In our previous article titled A Simple Toast Message, we have seen how to create a simple toast message. In this article we are going to see how to customize the toast messages so that the look and feel of toast messages can be modified.

1. Create an Android project

Figure 1 : New Android Project

2. Select build target

Figure 2: Selecting the Build target

3. Enter application details

Figure 3 : Application Details

4. Open and update the file /res/values/strings.xml with two new strings namely “lblBtnClickMe” and “iconDescription”. See the highlighted code given below:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, MainActivity!</string>
    <string name="app_name">CustomToastMessage</string>
    <string name="lblBtnClickMe">Click Me !!!</string>
    <string name="iconDescription">Icon for the toast message</string>
</resources>

5. Open the file /res/layout/main.xml and modify it with the given below code :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/btnClickMe"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/lblBtnClickMe" />

</LinearLayout>

6. Create a new Android XML file named toast_layout.xml in /res/layout/ directory

Figure 4: Toast Layout

7. Update the file /res/layout/toast_layout.xml with the given below code :

<?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" >

<ImageView
    android:id="@+id/icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/iconDescription"
/>

<TextView
    android:id="@+id/msg"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
/>

</LinearLayout>

8. Open the file /src/in/wptrafficanalyzer/customtoast/MainActivity.java and update the file as given below :

package in.wptrafficanalyzer.customtoast;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // A click listener
        OnClickListener listener = new OnClickListener() {

        @Override
        public void onClick(View v) {
            // Getting the main view group
            ViewGroup viewGroup = (ViewGroup) findViewById(R.layout.main);

            // Creating a view object inflated by the layout toast_layout
            View view = View.inflate(getBaseContext(), R.layout.toast_layout, viewGroup);

            // Getting the reference to the TextView "msg" of the toast_layout
            TextView txtMessage = (TextView) view.findViewById(R.id.msg);

            // Setting a text for the TextView "msg" of the toast_layout
            txtMessage.setText("Hello Android by custom toast message");

            // Getting the reference to the ImageView "icon" of the toast_layout
            ImageView image = ( ImageView ) view.findViewById(R.id.icon);

            // Setting an image to the ImageView "icon" of the toast_layout
            image.setImageResource(R.drawable.ic_launcher);

            // Creating  a toast object
            Toast toast = new Toast(getBaseContext());

            // Setting toast object's view
            toast.setView(view);

            // Displaying the toast message
            toast.show();
        }
    };

    // Get a reference to the button btnClickMe of the main activity
    Button btn = (Button) findViewById(R.id.btnClickMe);
    btn.setOnClickListener(listener);

    }
}

9. For running the application in Android Virtual Device, click the menu Run -> Run from the eclipse IDE :

Figure 5 : Application in execution

10. Download the application :

Custom Toast Message in Android 151.84 KB

Download Source Code

11. Reference

http://developer.android.com/guide/index.html

How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com

---

Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :

---

Tags: message, toast