¿Cómo agregar texto dibujable a ImageView en Android?

En muchas aplicaciones de Android, podrá ver una función en la que puede ver que se muestra un texto simple dentro de un ImageView o puede ver que se muestra un texto en una imagen o forma específica. En su mayoría, este tipo de vista se ve en la aplicación Contactos que está presente en su dispositivo Android. En esa aplicación, podrá ver la primera letra de cada nombre de contacto en una vista de imagen circular. En este artículo, veremos cómo crear el mismo tipo de vista en nuestra aplicación de Android. 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que mostraremos un texto simple en nuestra vista de imagen en Android usando texto dibujable. Estaremos mostrando nuestro texto en diferentes formas. A continuación se muestra la captura de pantalla en la que veremos lo que vamos a construir en este artículo. 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregue la dependencia y el repositorio de JitPack

Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.   

implementación ‘com.amulyakhare:com.amulyakhare.textdrawable:1.0.1’

Agregue el repositorio de JitPack a su archivo de compilación. Agréguelo a su root build.gradle al final de los repositorios dentro de la sección allprojects{ }.

todos los proyectos {

 repositorios {

   …

   experto {url ‘http://dl.bintray.com/amulyakhare/maven’} 

     }

}

Después de agregar esta dependencia, sincronice su proyecto y ahora avanzaremos hacia su implementación.  

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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"
    tools:context=".MainActivity">
  
    <!--on below line we are simply
        creating a horizontal linear layout-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="10dp"
        android:orientation="horizontal"
        android:weightSum="3">
  
        <!--on below line we are creating 3 linear layouts
            which is having an image view and text view-->
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:orientation="vertical">
  
            <!--on below line we are creating a new image view-->
            <ImageView
                android:id="@+id/idIVTile"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="8dp"
                android:src="@mipmap/ic_launcher" />
              
            <!--on below line we are displaying the 
                type of image in text view-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="4dp"
                android:text="Tile"
                android:textAlignment="center"
                android:textAllCaps="false" />
  
        </LinearLayout>
          
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:orientation="vertical">
              
            <!--on below line we are 
                creating a new image view-->
            <ImageView
                android:id="@+id/idIVCircle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="8dp"
                android:src="@mipmap/ic_launcher" />
              
            <!--on below line we are displaying
                the type of image in text view-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="4dp"
                android:text="Circle"
                android:textAlignment="center"
                android:textAllCaps="false" />
  
        </LinearLayout>
  
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:orientation="vertical">
              
            <!--on below line we are creating a new image view-->
            <ImageView
                android:id="@+id/idIVBorder"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="8dp"
                android:src="@mipmap/ic_launcher" />
              
            <!--on below line we are displaying
                the type of image in text view-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="4dp"
                android:text="Border"
                android:textAlignment="center"
                android:textAllCaps="false" />
              
        </LinearLayout>
          
    </LinearLayout>
      
</RelativeLayout>

Paso 4: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.widget.ImageView;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.amulyakhare.textdrawable.TextDrawable;
  
public class MainActivity extends AppCompatActivity {
      
    // creating a variable for image view.
    private ImageView tileIV, borderIV, circleIV;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // on below line we are initializing our image view
        tileIV = findViewById(R.id.idIVTile);
        borderIV = findViewById(R.id.idIVBorder);
        circleIV = findViewById(R.id.idIVCircle);
  
        // on below line we are creating a new text drawable
        TextDrawable tileImg = TextDrawable.builder()
                // begin config method is use to start the config.
                .beginConfig()
                // on below line we are setting width and height for our drawable.
                .width(130)  // width in px
                .height(130) // height in px
                // on below line we are ending the config.
                .endConfig()
                // as we are building a rectangle we are using 
                // a build rect method to create a new rectangle
                // and inside that we are passing the text 
                // as G and color for the drawable.
                .buildRect("G", getResources().getColor(R.color.purple_200));
        tileIV.setImageDrawable(tileImg);
          
        // below text drawable is for round rectangle
        TextDrawable roundRect = TextDrawable.builder().beginConfig()
                .width(130)  // width in px
                .height(130) // height in px
                .endConfig()
                // as we are building a rectangle with round corners we are calling a build round rect method
                // in that method we are passing the text, color and radius for our radius.
                .buildRoundRect("G", getResources().getColor(R.color.purple_200), 10); // radius in px
        borderIV.setImageDrawable(roundRect);
          
        // below text drawable is a circular.
        TextDrawable drawable2 = TextDrawable.builder().beginConfig()
                .width(130)  // width in px
                .height(130) // height in px
                .endConfig()
                // as we are building a circular drawable we
                // are calling a build round method.
                // in that method we are passing our text and color.
                .buildRound("F", getResources().getColor(R.color.purple_200));
        circleIV.setImageDrawable(drawable2);
    }
}

Ahora ejecute su aplicación y vea el resultado de la aplicación. 

Producción: