Search This Blog

Wednesday, October 22, 2014

Custom Toast In Android

Hi Folks,

It has been a long gap between my last post and this one a big sorry for that!!!!

This time I decided to take something like customizing widgets and to start with those as one we use mostly in our app is nothing but TOAST. 

So to let's begin the process of customizing it. 

In this sample we are going to create our own toast message and position it to our desired location unlike traditional bottom gravity of toast.

To make things simple, we are going to show the toast on a click of button. So we place just a button on our main layout (As Simple As Possible) described as below

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".CustomToast"
    android:background="#890000">

    <Button
        android:id="@+id/click_here"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_text"
        />

</RelativeLayout>

So our next step to create a layout for our custom toast. Take the below as sample straight away...

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/toast_theme">

    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:id="@+id/custom_alert_id"/>

    <TextView
        android:paddingLeft="10dp"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/custom_text"
        android:layout_gravity="center_vertical"
        android:id="@+id/custom_text_id"/>

</LinearLayout>

In the above layout we set background property for custom toast as a custom drawable. These will be act as theme for our custom layout. So create a new drawable file toast_theme under res/drawable folder

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="4dp"
        android:color="#FFFFFFFF" />
    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />
    <corners android:radius="4dp" />
</shape>

In the above code we are creating a shape with fixed stroke (border) and corners with radius property to match like toast and padding properties to set our custom toast.

Now with all set we can proceed code process for make these things on user screen.

The below module pops up custom alert on click of button 

private void showCustomAlert()
    {

        Context context = getApplicationContext();
        // Create layout inflator object to inflate toast.xml file
        LayoutInflater inflater = getLayoutInflater();

        // Call toast.xml file for toast layout
        View toastRoot = inflater.inflate(R.layout.toast, null);

        Toast toast = new Toast(context);

        // Set layout to toast
        toast.setView(toastRoot);
//        toast.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL,
//                0, 0);
        toast.setGravity(Gravity.TOP | Gravity.CENTER, 27, 77);// change offset value to our convenience
        toast.setDuration(Toast.LENGTH_LONG);
        toast.show();

    }

In this snippet we are inflating our custom layout and setting our gravity and offset properties to make our toast to display as our wish.

Hope this small but useful tutorial on customizing toast will help beginners who willing to create a new things on Android.. Bye for now!!!!

No comments:

Post a Comment