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

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.

What we are going to build in this article?

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.

Add Text Drawable to ImageView in Android

Step by Step Implementation

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:

Add Text Drawable to ImageView in Android

Reffered: https://www.geeksforgeeks.org

Android

Related
How to Fix “Failed to install the following Android SDK packages as some licenses have not been accepted” Error in Android Studio?
How to Create Marquee Text in Android?
Add OnTouchListener to ImageView to Perform Speech to Text in Android
Android Animation using Android Studio
How to Add a Library Project to Android Studio?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	12