This example is targeting conversion of Base64 String to Image and representing that image on screen using Kotlin programming language language. The advantages of using Base64 string to image is the load times, especially if you are getting the image from server. The downside of using Base64 String is that the encoded file will be 137% of the size of original file. This action is good if you are consuming a lot of small from server and showing them rapidly.
In previous post about Base64 String to Image we have used Java programming language to do the job, now we are going to use Kotlin for that purpose.
What is Base64?
Base64 is used to transmit data over text based mediums where the original byte values of the data are important. Some systems may alter the original bytes of a string due to differing text encodings. Additionally, text based systems typically can’t handle full binary data. To be able to transmit a hash fingerprint for example, a receiver needs to be able to receive the exact same byte values sent by the originator. If the byte values were to change, verification of the digital signature would fail. You’ll find Base64 used in SSL certificates, SAML assertions for single sign on systems, embedding data in XML and HTML, as well as many other use cases. More for Base64 you can find here.
The Main Activity XML:
In this Activity, there is nothing more than to show the image on screen. Because of that we use only one defined ImageView
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout 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=".MainActivity"> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="200dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout> |
The Main Activity Kotlin:
Also in the Main Activity we only show the image in previously defined imageView.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import android.os.Bundle import android.support.v7.app.AppCompatActivity import kotlinx.android.synthetic.main.activity_main.* class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) image.setImageBitmap(Base64Util.convertStringToBitmap(getString(R.string.helmets))) } } |
Here we only call our utility object Base64Util – convertStringToBitmap() so we can show the image on screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
object Base64Util { private const val IMG_WIDTH = 640 private const val IMG_HEIGHT = 480 private fun resizeBase64Image(base64image: String): String { val encodeByte: ByteArray = Base64.decode(base64image.toByteArray(), Base64.DEFAULT) val options = BitmapFactory.Options() var image = BitmapFactory.decodeByteArray(encodeByte, 0, encodeByte.size, options) if (image.height <= 400 && image.width <= 400) { return base64image } image = Bitmap.createScaledBitmap(image, IMG_WIDTH, IMG_HEIGHT, false) val baos = ByteArrayOutputStream() image.compress(Bitmap.CompressFormat.PNG, 100, baos) val b = baos.toByteArray() System.gc() return Base64.encodeToString(b, Base64.NO_WRAP) } private fun convertString64ToImage(base64String: String): Bitmap { val decodedString = Base64.decode(base64String, Base64.DEFAULT) return BitmapFactory.decodeByteArray(decodedString, 0, decodedString.size) } fun convertStringToBitmap(base64String: String): Bitmap { return convertString64ToImage(resizeBase64Image(base64String)) } } |
The object before the filename represents similar thing as static in Java.
The Base64Utill class:
Here is the actual conversion done. Here we have three methods: resizeBase64Image(), convertString64ToImage() and convertStringToBitmap. The first two are private, because we need them only to be available in the Base64Utill object, and nowhere else. The third one is public and it is entry point of using of this utility object.
The two class variables are defined for the height and width of the image in pixels.
|
1 2 |
private const val IMG_WIDTH = 640 private const val IMG_HEIGHT = 480 |
Resize Base64 Image:
This functions receives String as a parameter and resizes the image if need to our defined will. We need encoded byte array deducted from the String image. After thet we need BitmapFactory.Options object so we can create the Bitmap image. Than we have control flow IF statement for exterminating if the image is smaller than our defined margins (IMG_HEIGHT and IMG_WIDTH). After, we scale the image to our desired size using IMG_HEIGHT and IMG_WIDTH which are 640 and 480 pixels.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
private fun resizeBase64Image(base64image: String): String { val encodeByte: ByteArray = Base64.decode(base64image.toByteArray(), Base64.DEFAULT) val options = BitmapFactory.Options() var image = BitmapFactory.decodeByteArray(encodeByte, 0, encodeByte.size, options) if (image.height <= 400 && image.width <= 400) { return base64image } image = Bitmap.createScaledBitmap(image, IMG_WIDTH, IMG_HEIGHT, false) val baos = ByteArrayOutputStream() image.compress(Bitmap.CompressFormat.PNG, 100, baos) val b = baos.toByteArray() System.gc() return Base64.encodeToString(b, Base64.NO_WRAP) } |
Convert String to Bitmap
We need this function so we can convert the String into Bitmap so we can add this Bitmap to ImageView defined in the XML and used in MainActivity. of course this function returns Bitmap.
|
1 2 3 4 |
private fun convertString64ToImage(base64String: String): Bitmap { val decodedString = Base64.decode(base64String, Base64.DEFAULT) return BitmapFactory.decodeByteArray(decodedString, 0, decodedString.size) } |
Convert String to Image
This function is public and we use it to access the Base64Utill object functionalities. It is quite simple. We send String to Base64Utill and we receive Bitmap.
|
1 2 3 |
fun convertStringToBitmap(base64String: String): Bitmap { return convertString64ToImage(resizeBase64Image(base64String)) } |
This is the tool used to convert Base64 string to Image.
This the actual string used in this example.