As android developers, we are used to defining images as a separate element using the image view component. This is the most common way that is known by the largest number of developers which serves well while displaying images in an android application. Android supports various other ways of displaying images in the app including the use of libraries like Picasso, but in this article, I will highlight how to display an image in an android app using text view.
We all know text views act as elements that hold texts that are already defined to the user that does not require editing or input from the user. Text views also act as placeholders for images and at the same time support text inside the same element. This acts as an important aspect since you may want to explain what the image is all about and this is made possible since the text will be exactly next or after the image which will tell the user that the text is related to the image making its meaning come out clearly.
Images support elements from the drawable folder present in the android project and are added automatically after you create the project, for example, the default app icons are created automatically once the project is created, so while you want to add images to your android project you need to copy them to the drawable folder.
To add an image in textview in android, you will need to define the textview in the xml file as shown below
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="66dp"
android:text="Textview Example"
android:textSize="40dp"
android:textColor="@color/black"
tools:layout_editor_absoluteX="11dp"
tools:layout_editor_absoluteY="115dp" />
Next, inside the text view tags, you will need to add the attributes that add the image inside the text view. You can add image in different places of the text view either left, right, top or bottom.
Add Image on Left of textview
To add the image on the left of the textview text, use the below attribute
android:drawableLeft="image to add"
The text view code will be as follows
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="66dp"
android:drawableLeft="@drawable/ss8b"
android:text="Textview Example"
android:textColor="@color/black"
android:textSize="40dp"
tools:layout_editor_absoluteX="11dp"
tools:layout_editor_absoluteY="115dp" />
Add Image on Top of textview
To add the image on the top of the textview text, use the below attribute
android:drawableTop="image to add"
The text view code will be as follows
<TextView
android:layout_below="@+id/textView"
android:id="@+id/textview2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:contentDescription="Textview 2"
android:drawableTop="@drawable/ss8b"
android:text="text below" />
Add Image on Right of textview
To add the image on the right of the textview text, use the below attribute
android:drawableRight="image to add"
The text view code will be as follows
<TextView
android:layout_below="@+id/textView"
android:id="@+id/textview2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:contentDescription="Textview 2"
android:drawableRight="@drawable/ss8b"
android:text="text left of image" />
Add Image Below of textview
To add the image on the bottom of the textview text, use the below attribute
android:drawableBottom="image to add"
The text view code will be as follows
<TextView
android:layout_below="@+id/textView"
android:id="@+id/textview2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:contentDescription="Textview 2"
android:drawableBottom="@drawable/ss8b"
android:text="text above image" />
The full code for xml file can be as follows
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity2">
<TextView
android:id="@+id/textview2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:contentDescription="Textview 2"
android:drawableBottom="@drawable/ss8b"
android:text="text below" />
</RelativeLayout>
The above discussions and examples were showing how to add an image inside a text view in different positions that is top, bottom, left, and right. You can have different tests in your android project.
