Get & Save Bitmap From Any UI | Android Studio | Kotlin
4 min readJan 19, 2023
In this article, we will learn how to get the Bitmap from any UI View and Save it to Storage/Gallery. For Example, we have a LinearLayout containing some child views such as ImageView(s), TextView(s), and maybe some more UI Views. On clicking a button we will save that LinearLayout as an image in storage/gallery. So by learning this technique you can save any UI View or Layout as an image in Storage/Gallery.
Let’s Start making the XML layout of our Activity class. The LinearLayout with id infoLl is the Layout/View whose Bitmap will be saved as an Image in Storage/Gallery. The MaterialButton saveBtn will be clicked to get and save the Bitmap.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:padding="10dp"
tools:context=".MainActivity">
<TextView
android:id="@+id/titleTv"
style="@style/TextAppearance.MaterialComponents.Body1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Bitmap From Any View/Layout"
android:textAlignment="center" />
<LinearLayout
android:id="@+id/infoLl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical"
android:padding="10dp">
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="center_horizontal"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Company: Technify Soft" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:autoLink="all"
android:text="Website: https://technifysoft.com" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:autoLink="all"
android:text="YouTube: youtube.com/@AtifSayings" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:autoLink="all"
android:text="LinkedInn: linkedin.com/in/AtifSayings" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:autoLink="all"
android:text="Facebook: facebook.com/AtifSayings" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:autoLink="all"
android:text="Twitter: twitter.com/AtifSayings" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:autoLink="all"
android:text="Instagram: instagram.com/AtifSayings" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:autoLink="all"
android:text="Github: github.com/AtifSayings" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:autoLink="all"
android:text="Stack Overflow: stackoverflow.com/users/7981077/atifsayings" />
</LinearLayout>
<com.google.android.material.button.MaterialButton
android:id="@+id/saveBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:minHeight="60dp"
android:text="Save"
app:cornerRadius="8dp" />
</RelativeLayout>Our Activity UI will look like this as in the Screenshot:
Let’s Start coding in the Activity class.
package com.technifysoft.btimapfromlayout
import android.content.ContentValues
import android.graphics.Bitmap
import android.graphics.Canvas
import android.graphics.Color
import android.os.Build
import android.os.Bundle
import android.os.Environment
import android.provider.MediaStore
import android.util.Log
import android.view.View
import android.widget.LinearLayout
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.button.MaterialButton
import java.io.File
import java.io.FileOutputStream
import java.io.OutputStream
class MainActivityy : AppCompatActivity() {
private lateinit var infoLl: LinearLayout
private lateinit var saveBtn: MaterialButton
companion object {
private const val TAG = "SAVE_BITMAP"
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//init UI Views
infoLl = findViewById(R.id.infoLl)
saveBtn = findViewById(R.id.saveBtn)
//handle saveBtn click
saveBtn.setOnClickListener {
//function call, to get Bitmap from a UI View i.e. In our case a LinearLayout with id infoLl
val bitmap = getBitmapFromUiView(infoLl)
//function call, pass the bitmap to save it
saveBitmapImage(bitmap)
}
}
/**Get Bitmap from any UI View
* @param view any UI view to get Bitmap of
* @return returnedBitmap the bitmap of the required UI View */
private fun getBitmapFromUiView(view: View?): Bitmap {
//Define a bitmap with the same size as the view
val returnedBitmap = Bitmap.createBitmap(view!!.width, view.height, Bitmap.Config.ARGB_8888)
//Bind a canvas to it
val canvas = Canvas(returnedBitmap)
//Get the view's background
val bgDrawable = view.background
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
}
/**Save Bitmap To Gallery
* @param bitmap The bitmap to be saved in Storage/Gallery*/
private fun saveBitmapImage(bitmap: Bitmap) {
val timestamp = System.currentTimeMillis()
//Tell the media scanner about the new file so that it is immediately available to the user.
val values = ContentValues()
values.put(MediaStore.Images.Media.MIME_TYPE, "image/png")
values.put(MediaStore.Images.Media.DATE_ADDED, timestamp)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
values.put(MediaStore.Images.Media.DATE_TAKEN, timestamp)
values.put(MediaStore.Images.Media.RELATIVE_PATH, "Pictures/" + getString(R.string.app_name))
values.put(MediaStore.Images.Media.IS_PENDING, true)
val uri = contentResolver.insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, values)
if (uri != null) {
try {
val outputStream = contentResolver.openOutputStream(uri)
if (outputStream != null) {
try {
bitmap.compress(Bitmap.CompressFormat.PNG, 100, outputStream)
outputStream.close()
} catch (e: Exception) {
Log.e(TAG, "saveBitmapImage: ", e)
}
}
values.put(MediaStore.Images.Media.IS_PENDING, false)
contentResolver.update(uri, values, null, null)
Toast.makeText(this, "Saved...", Toast.LENGTH_SHORT).show()
} catch (e: Exception) {
Log.e(TAG, "saveBitmapImage: ", e)
}
}
} else {
val imageFileFolder = File(Environment.getExternalStorageDirectory().toString() + '/' + getString(R.string.app_name))
if (!imageFileFolder.exists()) {
imageFileFolder.mkdirs()
}
val mImageName = "$timestamp.png"
val imageFile = File(imageFileFolder, mImageName)
try {
val outputStream: OutputStream = FileOutputStream(imageFile)
try {
bitmap.compress(Bitmap.CompressFormat.PNG, 100, outputStream)
outputStream.close()
} catch (e: Exception) {
Log.e(TAG, "saveBitmapImage: ", e)
}
values.put(MediaStore.Images.Media.DATA, imageFile.absolutePath)
contentResolver.insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, values)
Toast.makeText(this, "Saved...", Toast.LENGTH_SHORT).show()
} catch (e: Exception) {
Log.e(TAG, "saveBitmapImage: ", e)
}
}
}
}Our code is completed, now you can launch the app and press the button to save. You will be able to see the Image in your Gallery in the album name the same as your app name.
Thank You for reading the article. If you found this article helpful make sure to click 👏 below to applause this article. It means a lot to me.
