Wednesday, January 2, 2013

Android beginner tutorial: Part 39 - Custom Toast notifications

In this tutorial we will learn how to create our own custom Toast notifications.

The activity_main.xml Activity layout will remain the same as in the previous tutorial:

<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"
    tools:context=".MainActivity" >

<Button
    android:id="@+id/testButton"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Make a toast"
    />
    
</LinearLayout>

To create a custom Toast, we need to write a layout xml for it. We can then apply it to a Toast using a LayoutInflater.

Create a new layout xml file. If you're using Eclipse IDE, go to File > New > Android XML File. Call the file custom_toast.xml.

Inside the layout I'm going to make a simple LinearLayout container, which contains an ImageView and a TextView. Remember to give the container an id. Set the src of the ImageView to a picture in your project (I set it to the ic_launcher.png picture). Give an id to the TextView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:padding="10dp"
    android:background="#333" 
    android:id="@+id/toast_layout" >
    
    <ImageView android:id="@+id/image"
        android:src="@drawable/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginRight="10dp" />
    
    <TextView android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:textColor="#FFF" />

</LinearLayout>

Now we need to apply this layout to the Toast notification. As I said before, we'll need to use a LayoutInflater class instance to do that. An inflater can extract layouts from XML files and lets us work with them using code. To extract the layout, we need to declare an inflater and then call its inflate() function. Provide the layout resource and the id of the main container in that layout:

LayoutInflater inflater = getLayoutInflater();
View layout = inflater.inflate(R.layout.custom_toast, (ViewGroup) findViewById(R.id.toast_layout));

Set the text by refering to the "text" TextView inside the layout:

TextView text = (TextView) layout.findViewById(R.id.text);
text.setText("Hello from KirCode!");

The rest of the code simply creates the Toast and sets its values. Use setView() method to apply the layout.

Toast toast = new Toast(getApplicationContext());
toast.setGravity(Gravity.CENTER_VERTICAL, 0, 0);
toast.setDuration(Toast.LENGTH_LONG);
toast.setView(layout);
toast.show();

Here is the full MainActivity.java class code:

package com.kircode.codeforfood_test;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity{

private Context context;

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

Button button = (Button)findViewById(R.id.testButton);
context = getApplicationContext();

button.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
LayoutInflater inflater = getLayoutInflater();
View layout = inflater.inflate(R.layout.custom_toast, (ViewGroup) findViewById(R.id.toast_layout));

TextView text = (TextView) layout.findViewById(R.id.text);
text.setText("Hello from KirCode!");

Toast toast = new Toast(getApplicationContext());
toast.setGravity(Gravity.CENTER_VERTICAL, 0, 0);
toast.setDuration(Toast.LENGTH_LONG);
toast.setView(layout);
toast.show();
}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

}

The results look like this:



Thanks for reading!

No comments:

Post a Comment