Wednesday, February 20, 2013

Interface: Custom Toast (Part 1)

Customization interface: 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. 

Customization interface: Toast (Part 1)

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