Interface: Custom Toast (Part 1)

Today we talk about Toast. An important limitation of this element is that it display time, which is not regulated. In this article I will show how to display Toast with a specified time.

Practice

This article will solve two questions: 

• customization; 
• control display time. 

We require the following string resources:

<resources>

    <string name="app_name">CustomToast</string>

    <string name="placeholder_txt">Enter message</string>

    <string name="placeholder_time">Enter display time</string>

    <string name="btn_show">Show</string>

</resources>

To change the interface Toast, has developed a new layout using as background the following image: 

Our Toast will appear as a standard, but you can manipulate the interface you want.

Source code (layout_toast.xml)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/toast_layout_root"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="@drawable/toast"

    android:orientation="horizontal"

    android:padding="8dp" >

    <TextView

        android:id="@+id/text"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:layout_marginBottom="5dp"

        android:gravity="center"

        android:padding="8dp"

        android:textColor="#FFF"

        android:textSize="14sp" />

</LinearLayout>

Develop a new class that will regulate display time Toast: CustomToast.

Add a static method, which shows Toast with a specified time.

private static void show(final long durationInMilliseconds,
   final Toast toast) {
  Thread t = new Thread() {
   long timeElapsed = 0l;

   public void run() {
    try {

     while (timeElapsed <= durationInMilliseconds) {
      long start = System.currentTimeMillis();
      toast.show();
      sleep(250);
      timeElapsed += System.currentTimeMillis() - start;
     }

    } catch (InterruptedException e) {
    }
   }
  };
  t.start();
 }

Also, we need a static method that will create a Toast to the desired layout.

private static void showToast(Context context, View view, long duration) {
  Toast toast = new Toast(context);

  toast.setView(view);
  toast.setDuration(Toast.LENGTH_SHORT);

  show(duration * 1000, toast);
 }

The final part of the development of the new class are the methods that will create and display customized Toast with the specified text and time.

The details shall include:

• message (can be a string (String), or the ID of the resource string (int));
• display time Toast (in seconds).

public static void makeToast(Context context, String msg, long duration) {

  LayoutInflater inflater = (LayoutInflater) context
    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  View view = inflater.inflate(R.layout.layout_toast, null);

  ((TextView) view.findViewById(R.id.text)).setText(msg);

  showToast(context, view, duration);
 }

public static void makeToast(Context context, int msg, long duration) {

  LayoutInflater inflater = (LayoutInflater) context
    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  View view = inflater.inflate(R.layout.layout_toast, null);

  ((TextView) view.findViewById(R.id.text)).setText(msg);

  showToast(context, view, duration);
 }

Now develop a layout for the main screen to test creating class. Screen interface will consist: two EditText (custom message and display time) and button to show Toast.

Source Code (main.xml)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <EditText

        android:id="@+id/ed_txt"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:hint="@string/placeholder_txt" />

    <EditText

        android:id="@+id/ed_time"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:hint="@string/placeholder_time" />

    <Button

        android:id="@+id/btn_show"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:hint="@string/btn_show" />

</LinearLayout>

Source code of the main Activity.

private EditText ed_txt, ed_time;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  
  ed_time = (EditText)findViewById(R.id.ed_time);
  ed_txt = (EditText)findViewById(R.id.ed_txt);
  
  final Context context = this;
  
  findViewById(R.id.btn_show).setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    int duration = 1;
    try 
    {
     duration = Integer.parseInt(ed_time.getText().toString());
    } catch (Exception e) {
    }
    CustomToast.makeToast(context, ed_txt.getText().toString(), duration);
   }
  });
 }

Links

• The source codes of this project can be downloaded here: zip