Creating Image From Current View in Android

Sometimes we are require to create images in our application,This project is all about creating image from view.In addition a view can be Relative-layout, Linear-layout etc. However for creating image from view in android first convert the view to bitmap format. Then the converted bitmap file is saved as a readable image format. Finally scan the gallery for making the newly created images visible.

Before everything add permission’s for reading from and writing to the external storage in manifest file.

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Download full source code here.

Creating bitmap from view

In order to create a bitmap first define a bitmap with the same size as the view with bitmap configuration ARGB_8888. In fact a bitmap configuration describes how pixels are stored. This affects the quality (color depth) as well as the ability to display transparent/translucent colors. Accordingly for bitmap configuration “ARGB_8888” each pixel is stored on 4 bytes. Another part is creating a canvas and bind to the bitmap, Canvas is where the images are drawn.

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;
    }

Saving the bitmap

In the first place create a folder to save the images inside the picture directory or any other place. In any case check if it’s there else create it. Next is the image name it can’t be same because it overwrite the previous image, For this reason we are using system time in milliseconds for the name. As a result not two names are same. Then an image file is created with system time as the name. Also a bitmap object is created and it have the bitmap result of the view to bitmap conversion. Although image file is created it’s blank and FileOutputStreamis used for writing bitmap data  to the image file.

  private File saveBitMap(Context context, View drawView){
        File pictureFileDir = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES),"Logicchip");
        if (!pictureFileDir.exists()) {
            boolean isDirectoryCreated = pictureFileDir.mkdirs();
            if(!isDirectoryCreated)
                Log.i("TAG", "Can't create directory to save the image");
            return null;
        }
        String filename = pictureFileDir.getPath() +File.separator+ System.currentTimeMillis()+".jpg";
        File pictureFile = new File(filename);
        Bitmap bitmap =getBitmapFromView(drawView);
        try {
            pictureFile.createNewFile();
            FileOutputStream oStream = new FileOutputStream(pictureFile);
            bitmap.compress(Bitmap.CompressFormat.PNG, 100, oStream);
            oStream.flush();
            oStream.close();
        } catch (IOException e) {
            e.printStackTrace();
            Log.i("TAG", "There was an issue saving the image.");
        }
        scanGallery( context,pictureFile.getAbsolutePath());
        return pictureFile;
    }

Scanning the gallery

As a matter of fact creating an image does’t mean it’s visible in gallery. Therefore we need to refresh the media scanner and update it with new images path.

 private void scanGallery(Context cntx, String path) {
        try {
            MediaScannerConnection.scanFile(cntx, new String[]{path}, null, new MediaScannerConnection.OnScanCompletedListener() {
                public void onScanCompleted(String path, Uri uri) {
                }
            });
        } catch (Exception e) {
            e.printStackTrace();
            Log.i("TAG", "There was an issue scanning gallery.");
        }
    }

Full code MainActivity

public class MainActivity extends AppCompatActivity {
    ProgressDialog pd;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pd = new ProgressDialog(MainActivity.this);
    }
public void SaveClick(View view){
        pd.setMessage("saving your image");
        pd.show();
RelativeLayout savingLayout =(RelativeLayout)findViewById(R.id.idForSaving);
                File file = saveBitMap(MainActivity.this, savingLayout);
                if (file != null) {
                    pd.cancel();
                    Log.i("TAG", "Drawing saved to the gallery!");
                } else {
                    pd.cancel();
                    Log.i("TAG", "Oops! Image could not be saved.");
                }
}

  private File saveBitMap(Context context, View drawView){
        File pictureFileDir = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES),"Logicchip");
        if (!pictureFileDir.exists()) {
            boolean isDirectoryCreated = pictureFileDir.mkdirs();
            if(!isDirectoryCreated)
                Log.i("TAG", "Can't create directory to save the image");
            return null;
        }
        String filename = pictureFileDir.getPath() +File.separator+ System.currentTimeMillis()+".jpg";
        File pictureFile = new File(filename);
        Bitmap bitmap =getBitmapFromView(drawView);
        try {
            pictureFile.createNewFile();
            FileOutputStream oStream = new FileOutputStream(pictureFile);
            bitmap.compress(Bitmap.CompressFormat.PNG, 100, oStream);
            oStream.flush();
            oStream.close();
        } catch (IOException e) {
            e.printStackTrace();
            Log.i("TAG", "There was an issue saving the image.");
        }
        scanGallery( context,pictureFile.getAbsolutePath());
        return pictureFile;
    }

 //create bitmap from view and returns it
    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;
    }


    // used for scanning gallery
    private void scanGallery(Context cntx, String path) {
        try {
            MediaScannerConnection.scanFile(cntx, new String[]{path}, null, new MediaScannerConnection.OnScanCompletedListener() {
                public void onScanCompleted(String path, Uri uri) {
                }
            });
        } catch (Exception e) {
            e.printStackTrace();
            Log.i("TAG", "There was an issue scanning gallery.");
        }
    }
}

Xml file for main activity

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.logicchip.blog_11_saving_layout_as_image_in_android.MainActivity"
    android:orientation="vertical">
        <RelativeLayout
            android:background="@drawable/for_backgroud"
            android:id="@+id/idForSaving"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

                <ImageView
                    android:alpha=".3"
                    android:layout_centerInParent="true"
                    android:layout_width="150dp"
                    android:layout_height="150dp"
                    android:src="@drawable/logo"/>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                        <TextView
                            android:drawableLeft="@drawable/logo_browser"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="logicchip.com"/>
                        <TextView
                            android:drawableLeft="@drawable/logo_facebook"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="/logicchip"/>
                        <TextView
                            android:drawableLeft="@drawable/logo_twitter"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="\@logic_chip"/>
                        <TextView
                            android:drawableLeft="@drawable/logo_google_plus"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="/+Logicchip"/>
                        <TextView
                            android:drawableLeft="@drawable/logo_youtube"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="/logicchip"/>
                        <TextView
                            android:drawableLeft="@drawable/logo_email"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="info@logicchip.com"/>
                </LinearLayout>
        </RelativeLayout>
        <Button
            android:onClick="SaveClick"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="save"/>
</LinearLayout>