This example is targeting conversion of Base64 String to Image and representing that image on screen. 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.
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.
ButterKnife library
First we add our favorite ButterKnife library in our build.gradle app file and sync the project:
|
1 2 3 4 |
dependencies { implementation 'com.jakewharton:butterknife:8.8.1' annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1' } |
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 Java:
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 13 |
public class MainActivity extends AppCompatActivity { @BindView(R.id.image) ImageView imageFrame; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); imageFrame.setImageBitmap(Base64Util.convertStringToBitmap(getString(R.string.helmets))); } } |
Dont forget to add ButterKnife.bind(this); method in onCreate.
Here we only call our static utility class Base64Util method – convertStringToBitmap() so we can show the image on screen.
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 class, and nowhere else. The third one is public and it is entry point of using of this utility class.
The two class variables are defined for the height and width of the image in pixels.
|
1 2 |
private static final int IMG_WIDTH = 640; private static final int IMG_HEIGHT = 480; |
Resize Base64 Image:
This methods 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 15 16 17 |
private static String resizeBase64Image(String base64image) { byte[] encodeByte = Base64.decode(base64image.getBytes(), Base64.DEFAULT); BitmapFactory.Options options = new BitmapFactory.Options(); Bitmap image = BitmapFactory.decodeByteArray(encodeByte, 0, encodeByte.length, options); if (image.getHeight() <= 400 && image.getWidth() <= 400) { return base64image; } image = Bitmap.createScaledBitmap(image, IMG_WIDTH, IMG_HEIGHT, false); ByteArrayOutputStream baos = new ByteArrayOutputStream(); image.compress(Bitmap.CompressFormat.PNG, 100, baos); byte[] b = baos.toByteArray(); System.gc(); return Base64.encodeToString(b, Base64.NO_WRAP); } |
Convert String to Bitmap
We need this method 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 method returns Bitmap.
|
1 2 3 4 |
private static Bitmap convertString64ToImage(String base64String) { byte[] decodedString = Base64.decode(base64String, Base64.DEFAULT); return BitmapFactory.decodeByteArray(decodedString, 0, decodedString.length); } |
Convert String to Image
This method is public and we use it to access the Base64Utill class functionalities. It is quite simple. We send String to Base64Utill and we receive Bitmap.
|
1 2 3 |
public static Bitmap convertStringToBitmap(String base64String) { return convertString64ToImage(resizeBase64Image(base64String)); } |
This is the tool used to convert Base64 string to Image.
tҺe website іѕ really good, I like your site!
Bookmarked!, I love your website!