How to Add Text Drawable to ImageView in Android? - GeeksforGeeks

31 Mar, 2021
In many android apps, you will get to see a feature in which you can see a simple text is displayed inside an ImageView or you can get to see that a text is displayed in a specific image or a shape. Mostly this type of view is seen in the Contacts application which is present on your Android device. In that app, you will get to see the first letter of every contact name in a circular image view. In this article, we will take a look at creating the same type of view in our Android application. 
We will be building a simple application in which we will be displaying a simple text in our image view in Android using text drawable. We will be displaying our text in different shapes. Below is the screenshot in which we will get to see what we are going to build in this article. 
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Add dependency and JitPack Repository
Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.   
implementation ‘com.amulyakhare:com.amulyakhare.textdrawable:1.0.1’
Add the JitPack repository to your build file. Add it to your root build.gradle at the end of repositories inside the allprojects{ } section.
allprojects {
 repositories {
   ...
   maven { url ‘http://dl.bintray.com/amulyakhare/maven’ } 
     }
}
After adding this dependency sync your project and now we will move towards its implementation.  
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 
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>
Step 4: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
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);    }}
Now run your app and see the output of the app. 
Output:
Android-View
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
Retrofit with Kotlin Coroutine in Android
How to Post Data to API using Retrofit in Android?
Arrays in Java
Split() String method in Java with examples
For-each loop in Java
Object Oriented Programming (OOPs) Concept in Java
Arrays.sort() in Java with examples