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.
1 2 | <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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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.
1 2 3 4 5 6 7 8 9 10 11 | 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
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 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
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <?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> |
