Loading ...

Creating custom toast messages in android. | CodeAsp.Net

Creating custom toast messages in android.

 /5
0 (0votes)

Toast message is a way to provide some information to the user that stays on the screen for a couple of seconds. Here, we will be working on how to beautify that message so that it goes with the theme of your application and the layout matches the type of message that is going to be displayed. For example: if there is an error message, it will convey more if you set the text color as red or the background color as red, or maybe add an image to it. Let's create a custom toast message with image. You need to add three images of your choice and name them as "error", "thumbs", "warning" to follow along with this blog; you can give them any other name too.

Steps to create a custom toast message are:

1. Create an android studio project and name it as "Custom Toast Messages", and set the company domain as "com.custommessages.codeasp.customtoastmessages". Click next.

2. Now select the minimum SDK as 18(Jelly Bean 4.3) and leave all other fields as they are and click next.

3. Select the Blank Activity and click next.

4. Leave all the fields as default and click next.

5. Now open the "strings.xml" file from the values folder. Here we will add a few strings that will be used in the toast messages, as well as text for buttons.

In your strings.xml file add the following:

<string name="error_messages">An error occurred.</string>
    <string name="warning_toast">Warning! This might be wrong.</string>
    <string name="accepting_message">Okay, we are good to go.</string>
    <string name="show_error_message">Show error message button</string>
    <string name="show_warning_message">Show warning message button</string>
    <string name="show_accepting_message">Show accepting message button</string>

After adding the above strings your "strings.xml" file will look like this:

<resources>
    <string name="app_name">Custom Toast Messages</string>
    <string name="error_messages">An error occurred.</string>
    <string name="warning_toast">Warning! This might be wrong.</string>
    <string name="accepting_message">Okay, we are good to go.</string>
    <string name="show_error_message">Show error message button</string>
    <string name="show_warning_message">Show warning message button</string>
    <string name="show_accepting_message">Show accepting message button</string>
</resources>

6. Next, we need to create some buttons, and add "onClick" methods for those buttons that will generate our toast messages. For this, open the "activity_main.xml" file from the "layout" folder under "res", and add the following code to create a button: 

<Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/acc_button"
        android:onClick="acc_button"
        android:text="@string/show_accepting_message"
        android:layout_marginTop="35dp" />

In this button, I have set a "onClick" which will be linked to a method that will be named "acc_button" and on clicking this button, that method will be fired and the toast message will be displayed

This is just one button that I have added, and it will display the accepting toast message. You need have to add two more buttons similar to this one, which will be used to generate warning and error toast messages.

After adding the other buttons your "activity_main.xml" file will look like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/acc_button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="35dp"
        android:onClick="acc_button"
        android:text="@string/show_accepting_message" />

    <Button
        android:id="@+id/warning_button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="55dp"
        android:onClick="warning_button"
        android:text="@string/show_warning_message" />

    <Button
        android:id="@+id/error_button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="75dp"
        android:onClick="error_button"
        android:text="@string/show_error_message" />
</LinearLayout>

7. Now, we need to create a custom toast message which will has an image and a textview that will be used for displaying the toast. For this, create a new xml file in the "layout" folder and name it as "toast_message_layout". Here set the layout as "LinearLayout" with orientation "horizontal" and set the required filed "layout_height" as "wrap_content".

Also, add an ImageView and a TextView to that file, after adding them your "toast_message_layout" file will look like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toast_message_background"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_marginLeft="10dp"
        android:gravity="center"
        android:text="@string/app_name"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="20sp" />
</LinearLayout>

Here, set the gravity of the "ImageView" as center. Also note we have set the "LinearLayout" as "wrap_content" so when we will set "ImageView" property as center it will be centered vertically with respect to the layout. Set the "TextView" size as "large" and "gravity" as "center".

Now your layout will look like this:

8. We are done with the designing work. Let us write the code for our desired output to occur. For this, open the "MainAcivity.java" file.

9. As descried in the beginning we need to set the background and add an image and display some customised text in our toast and for this, we will use our layout file "toast_message_layout" file. We need to declare them in the java file; above the "onCreate" method and below the class declaration. Add the following: 

    ImageView toastImage;
    TextView toastText;
    LinearLayout toast_message_background;

10. Now we will create the methods for the buttons we declared in our "activity_main.xml" file as:

// Error toast message
    public void error_button(View view) {
    }

Add the other two methods same as the above one and after adding them your "MainActivity.java" will look like this:

package com.custommessages.codeasp.customtoastmessages;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    ImageView toastImage;
    TextView toastText;
    LinearLayout toast_message_background;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }


    // Error toast message
    public void error_button(View view) {
    }

    // Warning toast message
    public void warning_button(View view) {
    }

    // Accepting toast message
    public void acc_button(View view) {
    }
}

11. Before we get into the displaying the custom toast messages, we will have to understand the concept of "LayoutInflator"

A "LayoutInflator" in android is when we want to use the already defined xml layout: whether created by user or android defaults into our view objects, i.e when we want to display a xml layout some where in our screen but not giving it the full control of the screen or setting it as main screen. 

Generally the "LayoutInflator" is never used directly but used as to get an instance that is already connected to the current context. For this we use getLayoutInflater() or getSystemService(String).

Here we will use "getLayoutInfloator()" :

 LayoutInflater layoutInflater = getLayoutInflater();

Now, we will use this to inflate our already defined layout i.e. "toast_message_layout", and for that we will use our View objects to inflate it. Add the following code:

View view_custom_toast = layoutInflater.inflate(R.layout.toast_message_layout, null);

With the above code, we have got our "toast_message_layout" in our view file and by that we can use all the "widgets" defined in that layout with the help of view in our screen.

12. For this we now need to first bind our "ImageView", "TextView", "LinearLayout" we created above to the layouts "ImageView", "TextView", "LinearLayout". As performed in a general case where to bind the "widgets" we use "findViewById()" here we can not directly use them as the main layout is still "activity_main" and we are still referencing the items declared in that only. So how do we do that. 

13. To bind the "widgets" in the "toast_message_layout" we will use our just created view which is now having the toast_message_layout "toast_message_layout" so we will update our method "findViewById()" to:

"view_custom_toast.findViewByID()"

Now bind all the "widgets" like this:

toastImage = (ImageView) view_custom_toast.findViewById(R.id.imageView);
toastText = (TextView) view_custom_toast.findViewById(R.id.textView);
toast_message_background = (LinearLayout) view_custom_toast.findViewById(R.id.toast_message_background);

Let's customise all our above "widgets" by adding the following code:

toastText.setText(R.string.warning_toast);
toastText.setTextColor(Color.YELLOW);
toast_message_background.setBackgroundColor(Color.parseColor("#1AFFFF00"));
toastImage.setImageResource(R.drawable.warning);

This is the code for the warning toast to be displayed.

Now create a "Toast" object, as follows:

Toast customtoast = new Toast(getApplicationContext());

Set this "Toast" to display our view object i.e. the layout we have designed and the data we have added for that to the layouts "widgets" by adding the following code:

customtoast.setView(view_custom_toast);

14. Next, set the general properties of the toast like duration and show by adding:

customtoast.setDuration(Toast.LENGTH_LONG);
customtoast.show();

15. After adding all the above code your your method for warning_button will look like this:

 // Warning toast message
    public void warning_button(View view) {
        LayoutInflater layoutInflater = getLayoutInflater();
        View view_custom_toast = layoutInflater.inflate(R.layout.toast_message_layout, null);
        toastImage = (ImageView) view_custom_toast.findViewById(R.id.imageView);
        toastText = (TextView) view_custom_toast.findViewById(R.id.textView);
        toast_message_background = (LinearLayout) view_custom_toast.findViewById(R.id.toast_message_background);
        Toast customtoast = new Toast(getApplicationContext());
        toastText.setText(R.string.warning_toast);
        toastText.setTextColor(Color.YELLOW);
        toast_message_background.setBackgroundColor(Color.parseColor("#1AFFFF00"));
        toastImage.setImageResource(R.drawable.warning);
        customtoast.setView(view_custom_toast);
        customtoast.setDuration(Toast.LENGTH_LONG);
        customtoast.show();
    }

16. Now add the similar code for other two methods, and after adding them your "MainActivity.java" file looks like this:

package com.custommessages.codeasp.customtoastmessages;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    ImageView toastImage;
    TextView toastText;
    LinearLayout toast_message_background;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }


    // Error toast message
    public void error_button(View view) {
        LayoutInflater layoutInflater = getLayoutInflater();
        View view_custom_toast = layoutInflater.inflate(R.layout.toast_message_layout, null);
        toastImage = (ImageView) view_custom_toast.findViewById(R.id.imageView);
        toastText = (TextView) view_custom_toast.findViewById(R.id.textView);
        toast_message_background = (LinearLayout) view_custom_toast.findViewById(R.id.toast_message_background);
        Toast customtoast = new Toast(getApplicationContext());
        toastText.setText(R.string.error_messages);
        toastText.setTextColor(Color.RED);
        toast_message_background.setBackgroundColor(Color.parseColor("#1AFF0000"));
        toastImage.setImageResource(R.drawable.forbidden);
        customtoast.setView(view_custom_toast);
        customtoast.setDuration(Toast.LENGTH_LONG);
        customtoast.show();
    }

    // Warning toast message
    public void warning_button(View view) {
        LayoutInflater layoutInflater = getLayoutInflater();
        View view_custom_toast = layoutInflater.inflate(R.layout.toast_message_layout, null);
        toastImage = (ImageView) view_custom_toast.findViewById(R.id.imageView);
        toastText = (TextView) view_custom_toast.findViewById(R.id.textView);
        toast_message_background = (LinearLayout) view_custom_toast.findViewById(R.id.toast_message_background);
        Toast customtoast = new Toast(getApplicationContext());
        toastText.setText(R.string.warning_toast);
        toastText.setTextColor(Color.YELLOW);
        toast_message_background.setBackgroundColor(Color.parseColor("#1AFFFF00"));
        toastImage.setImageResource(R.drawable.warning);
        customtoast.setView(view_custom_toast);
        customtoast.setDuration(Toast.LENGTH_LONG);
        customtoast.show();
    }

    // Accepting toast message
    public void acc_button(View view) {
        LayoutInflater layoutInflater = getLayoutInflater();
        View view_custom_toast = layoutInflater.inflate(R.layout.toast_message_layout, null);
        toastImage = (ImageView) view_custom_toast.findViewById(R.id.imageView);
        toastText = (TextView) view_custom_toast.findViewById(R.id.textView);
        toast_message_background = (LinearLayout) view_custom_toast.findViewById(R.id.toast_message_background);
        Toast customtoast = new Toast(getApplicationContext());
        toastText.setText(R.string.accepting_message);
        toastText.setTextColor(Color.GREEN);
        toast_message_background.setBackgroundColor(Color.parseColor("#1A00FF00"));
        toastImage.setImageResource(R.drawable.thumbs);
        customtoast.setView(view_custom_toast);
        customtoast.setDuration(Toast.LENGTH_LONG);
        customtoast.show();
    }
}

17. Run the code on emulator or on your device.

Application screen shots:

 

 

Comments (no comments yet)

Top Posts