How to Display HTML in Textview along with Images in Android?
There are some situations when one needs to display rich formatted text in the app, like for a blog app or an app like Quora but Android’s inbuilt function doesn’t allow to display inline images by default, moreover they show the ugly blue line to the left of anything inside blockquote tag. Here is the simple solution to show HTML in TextView along with images in Android. Note that we are going to implement this project using Kotlin language in Android. Below is a demo screenshot of the app.
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 Kotlin as the programming language.
Step 2: Project setup before coding
- Add some colors in the colors.xml file. The Colors here are for the blockquote Styling. You are free to choose different colors.
- Go to build.gradle(Module:app) file and add the following dependency.
// Picasso library to downloading images implementation 'com.squareup.picasso:picasso:2.71828' // Coroutines dependency to put the downloading process in background thread implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.9'
Step 3: Working with activity_main.xml file
In the following activity_main.xml file we have added the following widgets:
- EditText where the user will input the HTML text,
- Button to trigger an event to display HTML text,
- ScrollView for smooth scrolling,
- TextView to display the HTML after processing the input.
Step 4: Create a Kotlin class ImageGetter.kt
Create a class that will download images contained in the img tag. Below is the complete ImageGetter.kt file. Understand the complete code by referring to the corresponding comments inside the code.
Note: One can change the height and the width of the image according to your will in the getDrawable() function.
Step 5: Working with MainActivity.kt file
- Create a click-Listener for the button inside the onCreate() method.
- Create a function displayHtml() which you just called inside click listener.
Note: Kotlin has Synthetic import ,so there was no need of storing reference to views in a variable and we are going to do the same for all other views.
- So now the Image work is done, now it should load the images. Below is the complete code for the MainActivity.kt file.
- Let’s see how it’s working now. Use HTML of another webpage. Here we have used the following webpage of the GFG article. Get the HTML string file from here.
Note: Remember that input the HTML text inside the EditText and then click on the “DISPLAY HTML” Button
The images are now loading but you can see, for the blockquote part, there is the plain ugly blue line. We are now gonna fix that.
Step 6: Create a Kotlin class QuoteSpanClass.kt
Create a Kotlin Class named QuoteSpanClass and add this following code to this file.
Step 7: Working with MainActivity.kt file
- Since the QuoteSpanClass is created, it’s time to use this class in MainActivity.kt, but before you need to create a function to parse blockquote tags and draw the margin and background using the QuoteSpanClass.
- And finally, call this function from displayHtml() function before setting the text for html_viewer. Below is the complete code for the MainActivity.kt file.
Now let’s see the changes in the output screen.
Note: One can change strip Color, background color, strip width of your choice in replaceQuoteSpans function, and beautify it.
Step 8: Create a method ImageClick() in the MainActivity.kt file
- But there is still one problem. What if you click an image? Nothing happens as of now. You need to add a few more lines to handle that.
- And then call this function from displayHtml() Function before setting the text for html_viewer. Below is the complete code for the MainActivity.kt file.
- Now if you click on any Image and check Logcat you will see the URL of the image is being logged. From there you can trigger some function with that URL.
Output: Run on Emulator
Resource: Get the complete project file here.