¿Cómo combinar texto e imagen en un botón o ImageButton en Android?

Los botones de imagen se utilizan en muchas aplicaciones de Android para realizar algunas acciones. Algunos de los usuarios de aplicaciones móviles a veces no son conscientes de las imágenes que están presentes en esos botones específicos. Entonces, para informar al usuario sobre ese botón, también agregamos un texto simple a nuestro botón para que el usuario sepa cuál es el uso del botón. En este artículo, veremos cómo combinar texto e imagen en un botón o botón de imagen en Android.

Nota : este artículo de Android cubre los lenguajes Java y Kotlin . 

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Cómo crear/iniciar un nuevo proyecto en Android Studio

Paso 2: trabajar con el archivo activity_main.xml

Vaya a aplicación > res > diseño > actividad_principal.xml y agregue el código a continuación. Se agregan comentarios en el código para conocer en detalle. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/idRLContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <!--on below line we are creating
        a text for our app-->
    <TextView
        android:id="@+id/idTVHeading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="Combine Text and Image on a Button or ImageButton"
        android:textAlignment="center"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textStyle="bold" />
  
    <!--on below line we are creating
       a text for our app-->
    <TextView
        android:id="@+id/idTVHead1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:padding="4dp"
        android:text="Simple Button"
        android:textAlignment="center"
        android:textSize="20sp"
        android:textStyle="bold" />
  
    <!--on below line we are creating a simple button-->
    <Button
        android:id="@+id/idSimpleBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:drawableTop="@drawable/ic_android"
        android:drawablePadding="20dp"
        android:text="Android"
        android:textAllCaps="false"
        android:textStyle="bold" />
  
    <!--on below line we are creating a text for image button-->
    <TextView
        android:id="@+id/idTVHead2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:padding="4dp"
        android:text="Image Button"
        android:textAlignment="center"
        android:textSize="20sp"
        android:textStyle="bold" />
  
    <!--on below line we are creating a frame
         layout for overlapping views-->
    <FrameLayout
        android:id="@+id/idFrame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">
  
        <!--on below line we are creating an image button-->
        <ImageButton
            android:id="@+id/idImgBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/purple_200"
            android:padding="10dp"
            android:src="@drawable/ic_android" />
  
        <!--on below line we are creating a
             text for our image button-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="45dp"
            android:clickable="false"
            android:text="Android"
            android:textColor="@color/white"
            android:textStyle="bold" />
    </FrameLayout>
  
</LinearLayout>

Paso 3: trabajar con el archivo MainActivity 

Vaya a aplicación > java > nombre del paquete de su aplicación > archivo MainActivity y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

package com.gtappdevelopers.kotlingfgproject
  
import android.os.Bundle
import android.widget.Button
import android.widget.ImageButton
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
  
class MainActivity : AppCompatActivity() {
  
    // on below line creating a variable.
    lateinit var simpleBtn: Button
    lateinit var imgBtn: ImageButton
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // on below line we are initializing our variables.
        simpleBtn = findViewById(R.id.idSimpleBtn)
        imgBtn = findViewById(R.id.idImgBtn)
  
        // on below line we are adding click listener
        // for our simple button
        simpleBtn.setOnClickListener {
            // on below line we are displaying a toast message.
            Toast.makeText(this, "This is a simple button", Toast.LENGTH_SHORT).show()
        }
  
        // on below line we are adding click listener
        // for our image button
        imgBtn.setOnClickListener {
            // on below line we are displaying a toast message.
            Toast.makeText(this, "This is a image button", Toast.LENGTH_SHORT).show()
        }
    }
}

package com.gtappdevelopers.kotlingfgproject;
  
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    // on below line we are creating variables.
    private Button simpleBtn;
    private ImageButton imgBtn;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // on below line we are initializing our variables.
        simpleBtn = findViewById(R.id.idSimpleBtn);
        imgBtn = findViewById(R.id.idImgBtn);
  
        // on below line we are adding click listener 
        // for our simple button
        simpleBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on below line we are displaying a toast message.
                Toast.makeText(MainActivity.this, "This is a simple button", Toast.LENGTH_SHORT).show();
            }
        });
  
        // on below line we are adding click listener for our image button
        imgBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on below line we are displaying a toast message.
                Toast.makeText(MainActivity.this, "This is a image button", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: