Android Toast Custom ImageButton Example

Hola amigos continuamos aprendiendo y en esta ocasión vamos a personalizar un Toast para mostrar mejor los mensajes utilizando un TextView y un ImageButton para

Android Studio - Toast Custom ImageButton

Crear Proyecto Android Toast Custom ImageButton Tutorial

Crearemos nuestro proyecto para desarrollar el ejemplo de nuestros mensajes Toast personalizados con ImageButton.

Diseño Toast Custom ImageButton Tutorial

Ahora vamos a crear el diseño de nuestra aplicación para ello vamos a crear una forma. (Shape) para dar un mejor estilo a nuestros mensajes Toast personalizados.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="2dp"
android:color="#075F6B" />
<solid android:color="#fff"></solid>
<padding
android:bottom="2dp"
android:left="20dp"
android:right="20dp"
android:top="2dp" />
<corners android:radius="5dp" />
</shape>

Añadiremos el siguiente directorio.

Ahora crearmos nuestro toast_imageview.xml para nuestros mensajes Toast.


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/style_toast_image"
android:orientation="horizontal"
android:padding="5dp">

<TextView
android:id="@+id/toast_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textColor="#000"
android:textStyle="bold"

android:layout_weight="1"/>
<ImageButton
android:id="@+id/toast_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="0"
android:background="#31708f"
android:padding="5dp" />
</LinearLayout>

Y ahora en nuestro activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Código MainActivity Toast Custom ImageButton Tutorial

Crearemos nuestra clase para personalizar nuestros mensajes Toast de la siguiente manera.


import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Color;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageButton;
import android.widget.TextView;
import android.widget.Toast;

public class message_toast_image {

public static void msgBoxToast(Context context, String text, String icon) {
try {
LayoutInflater inflater = LayoutInflater.from(context);
@SuppressLint("ResourceType") View layout = inflater.inflate(R.xml.toast_imageview, null);
//ImageView image = (ImageView) layout.findViewById(R.id.toast_image);
ImageButton image = (ImageButton)layout.findViewById(R.id.toast_icon);

if(icon.toUpperCase().equals("INFO")){
image.setImageResource(R.mipmap.ic_information);
}
// else if(icon.toUpperCase().equals("SUCCESS")){
// image.setImageResource(R.mipmap.alert_success);
// image.setBackgroundColor(Color.parseColor("#3c763d"));
// }else if(icon.toUpperCase().equals("WARNING")){
// image.setImageResource(R.mipmap.alert_warning);
// image.setBackgroundColor(Color.parseColor("#8a6d3b"));
// }else if(icon.toUpperCase().equals("ERROR")){
// image.setImageResource(R.mipmap.alert_error);
// image.setBackgroundColor(Color.parseColor("#a94442"));
// }

TextView textV = (TextView) layout.findViewById(R.id.toast_text);
textV.setText(text);

Toast toast = new Toast(context);
toast.setGravity(Gravity.CENTER, 0, 0);
toast.setDuration(Toast.LENGTH_LONG); //? Toast.LENGTH_LONG : Toast.LENGTH_SHORT);
toast.setView(layout);
toast.show();
}catch (Exception e){
Log.e("Error",e.getMessage());
}
}
}

Nuestro MainActivity escribiremos lo siguiente.


import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import static com.hn.universoandroid.android_toast_custom.message_toast_image.msgBoxToast;

public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

msgBoxToast(MainActivity.this,"Mensaje Informativo","INFO");
}
}

Ahora añadiremos varias imagenes para nuestros mensajes Toast.