How to convert a LinearLayout to image in Android Studio

0
295

This tutorial is about How to convert a LinearLayout to image in Android Studio. This is most used in banking apps for generating transaction history as image or shopping apps for generating receipt as image. Basically, you get a screenshot of the Linea layout with all the components on it.

Lets get to coding.

 

Download Code From Github

 

-> Start a new Project, File – New – New project. Select “Empty Activity” and enter the name of the project.

-> Open activity_main.xml and paste the following code.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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" android:orientation="vertical" tools:context=".MainActivity" android:paddingHorizontal="15dp">

    <LinearLayout android:id="@+id/layout_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" >

        <ImageView android:layout_width="80dp" android:layout_height="80dp" android:layout_gravity="center_horizontal" android:layout_marginTop="30dp" android:src="@drawable/logo" />

        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:orientation="horizontal">

            <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Name:" />

            <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="John David" />
        </LinearLayout>

        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:orientation="horizontal">

            <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Date:" />

            <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="12/02/2020" />
        </LinearLayout>

        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:orientation="horizontal">

            <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Receipt No:" />

            <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="hHYIHFUIUUEF" />
        </LinearLayout>

        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:orientation="horizontal">

            <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Status:" />

            <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Successful" />
        </LinearLayout>
    </LinearLayout>


    <Button android:id="@+id/btnConvertToimage" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginVertical="10dp" android:text="Convert To Image" />

    <ImageView android:id="@+id/imgResultImage" android:layout_width="match_parent" android:layout_height="match_parent"/>

</LinearLayout>

 

-> Open MainActivity.java and paste the following code


import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    LinearLayout layout_view;
    ImageView imgResultImage;
    Button btnConvertToImage;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        layout_view = findViewById(R.id.layout_view);
        imgResultImage = findViewById(R.id.imgResultImage);
        btnConvertToImage = findViewById(R.id.btnConvertToimage);


        btnConvertToImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Bitmap image = getBitmapFromView(layout_view);
                imgResultImage.setImageBitmap(image);

            }
        });


    }


    private Bitmap getBitmapFromView(View view) {
        //Define a bitmap with the same size as the view
        Bitmap returnedBitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(),Bitmap.Config.ARGB_8888);
        //Bind a canvas to it
        Canvas canvas = new Canvas(returnedBitmap);
        //Get the view's background
        Drawable bgDrawable =view.getBackground();
        if (bgDrawable!=null) {
            //has background drawable, then draw it on the canvas
            bgDrawable.draw(canvas);
        }   else{
            //does not have background drawable, then draw white background on the canvas
            canvas.drawColor(Color.WHITE);
        }
        // draw the view on the canvas
        view.draw(canvas);
        //return the bitmap
        return returnedBitmap;
    }
}

thats all, test the app and see the result.

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here