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 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:
