How to convert a Layout in an Android application to an Image using Android Studio

Repository

https://github.com/android/android-studio-poet

What Will I Learn?

• You will learn how to save a layout as an image.
• You will learn how to make API calls using retrofit.
• You will learn how to create a steemit ID card generator android application.
• You will learn how to send details using intents.
• You will learn how to create QRCode (Quick Response Code).
• You will learn how to load images using Picasso.

Requirements

• Android Studio.
• An Android device or a virtual device.
• Java Programming Experience.
• Of course, willingness to learn
• Javascript programming experience
• Node.js installation (with the following packages - express, body-parser, steem and nodemon)

Dependencies used

• 'com.squareup.picasso:picasso:2.5.2'
• 'com.github.vipulasri.layouttoimage:library:1.0.0'
• 'com.squareup.retrofit2:retrofit:2.1.0'
• 'com.squareup.retrofit2:converter-gson:2.1.0'
• 'com.squareup.okhttp3:okhttp:3.3.1'
• 'com.google.zxing:core:3.2.1'
• 'com.journeyapps:zxing-android-embedded:3.2.0@aar'
• 'com.jakewharton:butterknife:8.8.1'
  annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'

Resources

• Retrofit github repository!
• Retrofit official website!
• zxing repository!
• butterknife!
• Node installation!

Difficulty

• Intermediate

Description

In this tutorial, we would be learning how to convert a layout into an image and then save it to an android device.

And in achieving this, we would be creating a Steemit ID Card generator android application which will require the user to input his steemit username and then a call would be made to the server and details gotten will be sent to the android application and then the results will be parsed appropriately and sent to a new activity.

After the results have been sent, the user can then click the save options menu after which the layout will be converted to an image and stored on the mobile device of the user.

Outline

Server Side

For the server side of this tutorial, we are using node js server in order to make calls to the steem API. We would be calling the steem.api.getAccounts() method which has the definition of -

steem.api.getAccounts(names, function(err, result) {
  console.log(err, result);
});

source - https://github.com/steemit/steem-js/tree/master/doc#install

we then get the needed user details ( name, image, location ) from the -result[0].json_metadata field which contains the details of a user

and also the id from the - ["0"].id field

and then we get the user's rank by calling the steem.formatter.reputation(); method with the result["0"].reputation

as the argument and then finally we get the date the user joined by calling the substring() javascript function on the result[0].created field.

On getting all the user details, we send it as the feedback to the Android application as an array object.

Android Application

From the android application, we receive the username of the user in an edittext element once the user clicks the imageButton with the id go_btn.

In order to ensure that the user entered a username at least, we call the .isEmpty() method on a String variable that holds the string value of what was entered into the edittext.

And then we make the API call to the server using a retrofit client with the username a field name since we are using post method and not get.

Once the user details is gotten from the server, we insert the user details into an intent using an Extra which has to be done with key-value pairs (e.g intent.putExtra("KEY", "VALUE") ) and then we start the next activity that will be displaying the user ID Card with the startActivity(intent) method.

On the reciving activity, we use a getIntent() to get the values sent from our previous activity (MainActivity.java) and then populate the views in this activity appropriately.

And once the user clicks the save options menu item, we save the layout as an image on the user device using the Layout_to_Image object which takes in two variables - 1. The current acitivity (idCardActivity,this) and 2. The layout we intend to convert to an image (idCardLayout) which happens to be a relative layout in our video.

And lastly we check for runtime permission of WRITE_EXTERNAL_STORAGE and if the permission has been given we save the image else we ask for the permission.

The source code for this project can be found - here

Video Tutorial

Application Execution