Android Custom Toast with Font-awesome Part 2

android-custom-toast

Android Custom Toast

This is the continuation of my tutorial on how to make a Android Custom Toast with Font-awesome, if you missed part 1 you check it our here Android Custom Toast with Font-awesome Part 1

Just a recap, on part 1 we already created our `DefaultToast` activity from where we display the default toast of android. Now in our Android Custom Toast with Font-awesome Part 2 we will focus in creating our custom toast.

For our custom toast, we need to create two new layouts one for our border and the other one for the layout of our custom toast.

For the border we will just name it `ddborder.xml` and put inside our drawable folder. This will be used to give our custom toast a rounded border.

<?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#1CCEFF" />
    <padding android:left="7dp" android:top="7dp"
            android:right="7dp" android:bottom="7dp" />
    <corners
		android:bottomLeftRadius="5dp"
		android:bottomRightRadius="5dp"
		android:topLeftRadius="5dp"
		android:topRightRadius="5dp" /> 
</shape>

For the custom toast layout we will just name it `ddtoast.xml`. This layout there will be two TextView, one for the icon and the other one is for Toast message.

<?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:orientation="horizontal" 
    android:layout_margin="5dp"
    android:padding="10dp"
    android:layout_gravity="center_horizontal">
    
    <LinearLayout 
        android:id="@+id/lneLayout"
        android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:background="@drawable/ddborder">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/icon_heart"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="30sp"
            android:textColor="#fff"
            android:paddingRight="3dp"
            android:paddingLeft="3dp" />
 
        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="3dp"
            android:textColor="#fff"
            android:textSize="16sp" 
            android:layout_gravity="center_vertical"/>
        
    </LinearLayout>
 
</LinearLayout>

Now we will create the custom toast class and we will name it as `DDToast`

package dd.android.customtoast;

import android.content.Context;
import android.graphics.Color;
import android.graphics.Typeface;
import android.graphics.drawable.GradientDrawable;
import android.text.Html;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

public class DDToast {
	protected static Typeface faFont;
	
	public static void Toast(Context context,String message)
	{
		Toast(context,message,"","","");
	}
	
	public static void Toast(Context context,String message,String fafont)
	{
		Toast(context,message,fafont,"","");
	}
	
	public static void Toast(Context context,String message,String fafont,String fontcolor)
	{
		Toast(context,message,fafont,fontcolor,"");
	}
	
	public static void Toast(Context context,String message,String fafont,String fontcolor,String backcolor)
	{
		LayoutInflater inflater= (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		
		View cToast =inflater.inflate(R.layout.ddtoast, null);
		
		Toast customtoast=new Toast(context);
		
		TextView _msg = (TextView) cToast.findViewById(R.id.textView1);
		TextView _ico = (TextView) cToast.findViewById(R.id.textView2);
	
		
		_msg.setText(message);
		
		if (fafont != "")
		{
			_ico.setText(Html.fromHtml(""));
			_ico.setTypeface(getFA(context));
			_ico.setTextColor(Color.parseColor("#FFFFFF"));	
		}
		
		if (fontcolor != "")
		{
			_msg.setTextColor(Color.parseColor(fontcolor));	
			_ico.setTextColor(Color.parseColor(fontcolor));	
		}
		
		if (backcolor != "")
		{
			LinearLayout _llayout = (LinearLayout) cToast.findViewById(R.id.lneLayout);
			GradientDrawable bgShape = (GradientDrawable)_llayout.getBackground();
			bgShape.setColor(Color.parseColor(backcolor));
		}
		
		customtoast.setView(cToast);
		customtoast.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL,0, 0);
		customtoast.setDuration(Toast.LENGTH_LONG);
		customtoast.show();
	}
	
	public static Typeface getFA(Context context) {
	    if (faFont == null) {
	    	faFont = Typeface.createFromAsset(context.getAssets(), "fontawesome-webfont.ttf");
	    }
	    return faFont;
	}
}

We need to update our `DefaultToast` activity so that it will now call our custom toast.

package dd.android.customtoast;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;

public class DefaultToast extends Activity {
	protected EditText txtToast;
	
	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.defaulttoast);
        
        txtToast = (EditText) findViewById(R.id.txtToast);
    }
	
	public void LetsToast(View view) {
        // Call toast to show message
        //Toast.makeText(this, txtToast.getText(), Toast.LENGTH_LONG).show();
		DDToast.Toast(this,txtToast.getText().toString(),"","#FFFFFF","#428bca");
    }
}

Here is the output :
custom-toast
We called our custom Toast by using the `Toast` function inside the DDToast class. The toast function will accept four parameters, the first one is the Context, second is the toast message, 3rd is the icon and the last one will be the font color from where we need to pass the hex value.

For the third parameter which is the icon we can use this font-awesome cheetsheet to grab the unicode value of the font-awesome icon that we want to use.

Download complete project

Go back to Android Custom Toast with Font-awesome Part 1

Liked it? Take a second to support denricdenise on Patreon!

You may also like...