How to Add Text Drawable to ImageView in Android?
Last Updated :
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.
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.
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:
Similar Reads
How to Add Image to Drawable Folder in Android Studio?
The resource folder is the most important folder because it contains all the non-code sources like images, XML layouts, UI strings for the android application. In Android Studio inside the res folder, one can find the drawable folder, layout folder, mipmap folder, values folder, etc. Among them, the
3 min read
How to Add Image on EditText in Android?
In Android, An EditText is an overlay over a TextView that makes it editable using text by invoking a soft keyboard in run time. It is generally implemented to collect text data from the user. EditText is most commonly used in forms that require users to fill in details and for passing a search quer
3 min read
How to Add Images Directly to WhatsApp in Android?
An image is a UI widget used to show images or upload images in an Android app. It is the sub-class of the View class. We can use it to add many images, like Bitmaps, and Drawable files. To use it a person can add ImageView to their XML files. Passing its id to the resource file. A sample video is g
3 min read
How to Remove an Image from ImageView in Android?
ImageView in Android is a UI element used to display all types of pictures, images, and drawable. So if the width and height of the ImageView are set to wrap content, then the ImageView shall occupy the area on the screen equivalent to the image dimensions. So if we wish to collapse an ImageView as
3 min read
How to Add Different Resolution Images in Android Studio?
Android supports a broad range of devices and if one wants to create an application in android then the application must be compatible with the different mobile devices. For supporting the different screen sizes one must have different size images that will save in multiple folders. Normally Android
2 min read
How to Rotate an Image to a Certain Angle in Android?
In Android, ImageView is used to display images. Images can be of any type and can be fetched locally or from a network. Images are displayed without any operations in the ImageView. However, images can be rotated to a certain angle and displayed in ImageView. So in this article, we will show you ho
2 min read
How to Animate Image Rotation in Android?
In Android, ImageView is used to display images. Images can be locally stored in the program or fetched from a network and can be displayed using the ImageView. Animations can be applied to ImageView via many techniques. We can create animations in XML files and apply them to the ImageView. Follow t
2 min read
How to Select an Image from Gallery in Android?
Selecting an image from a gallery in Android is required when the user has to upload or set their image as a profile picture or the user wants to send a pic to the other. So in this article, it's been discussed step by step how to select an image from the gallery and preview the selected image. Have
4 min read
How to Create Marquee Text in Android?
In this article, we are going to create Marquee Text in Android Studio. Marquee is a scrolling piece of text that is displayed either horizontally or vertically. It is used to show some important notices or headlines. It makes the app UI much more attractive. Note that we are going to use Java as th
3 min read
How to Create an ImageButton in Android?
Nowadays, image buttons play a big role in making the android application more interactive and user-friendly. Be it any social media app like Instagram or Facebook or any shopping app or streaming app, each application uses this feature widely. In this article, we will take a look at the implementat
3 min read