@codebymanan/react-native-photo-editor 0.1.0

package/android/src/main/java/com/photoeditor/editor/EditImageActivity.kt

@@ -0,0 +1,407 @@
+package com.photoeditor.editor
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.content.DialogInterface
+import android.content.Intent
+import android.graphics.Bitmap
+import android.graphics.drawable.Drawable
+import android.os.Bundle
+import android.util.Log
+import android.view.MotionEvent
+import android.view.View
+import android.view.animation.AnticipateOvershootInterpolator
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.appcompat.app.AlertDialog
+import androidx.constraintlayout.widget.ConstraintLayout
+import androidx.constraintlayout.widget.ConstraintSet
+import androidx.lifecycle.lifecycleScope
+import androidx.recyclerview.widget.LinearLayoutManager
+import androidx.recyclerview.widget.RecyclerView
+import androidx.transition.ChangeBounds
+import androidx.transition.TransitionManager
+import com.bumptech.glide.Glide
+import com.bumptech.glide.request.target.CustomTarget
+import com.bumptech.glide.request.transition.Transition
+import com.photoeditor.R
+import com.photoeditor.editor.EmojiBSFragment.EmojiListener
+import com.photoeditor.editor.StickerBSFragment.StickerListener
+import com.photoeditor.editor.base.BaseActivity
+import com.photoeditor.editor.filters.FilterListener
+import com.photoeditor.editor.filters.FilterViewAdapter
+import com.photoeditor.editor.tools.EditingToolsAdapter
+import com.photoeditor.editor.tools.EditingToolsAdapter.OnItemSelected
+import com.photoeditor.editor.tools.ToolType
+import com.google.android.material.bottomsheet.BottomSheetDialogFragment
+import ja.burhanrashid52.photoeditor.OnPhotoEditorListener
+import ja.burhanrashid52.photoeditor.PhotoEditor
+import ja.burhanrashid52.photoeditor.PhotoEditorView
+import ja.burhanrashid52.photoeditor.PhotoFilter
+import ja.burhanrashid52.photoeditor.SaveFileResult
+import ja.burhanrashid52.photoeditor.SaveSettings
+import ja.burhanrashid52.photoeditor.TextStyleBuilder
+import ja.burhanrashid52.photoeditor.ViewType
+import ja.burhanrashid52.photoeditor.shape.ShapeBuilder
+import ja.burhanrashid52.photoeditor.shape.ShapeType
+import kotlinx.coroutines.launch
+import java.io.File
+import androidx.annotation.StringRes
+
+class EditImageActivity : BaseActivity(), OnPhotoEditorListener, View.OnClickListener,
+    PropertiesBSFragment.Properties, ShapeBSFragment.Properties, EmojiListener, StickerListener,
+    OnItemSelected, FilterListener {
+
+    lateinit var mPhotoEditor: PhotoEditor
+    private lateinit var mPhotoEditorView: PhotoEditorView
+    private lateinit var mPropertiesBSFragment: PropertiesBSFragment
+    private lateinit var mShapeBSFragment: ShapeBSFragment
+    private lateinit var mShapeBuilder: ShapeBuilder
+    private lateinit var mEmojiBSFragment: EmojiBSFragment
+    private lateinit var mStickerBSFragment: StickerBSFragment
+    private lateinit var mTxtCurrentTool: TextView
+    private lateinit var mRvTools: RecyclerView
+    private lateinit var mRvFilters: RecyclerView
+    private lateinit var mImgUndo: View
+    private lateinit var mImgRedo: View
+    private val mEditingToolsAdapter = EditingToolsAdapter(this)
+    private val mFilterViewAdapter = FilterViewAdapter(this)
+    private lateinit var mRootView: ConstraintLayout
+    private val mConstraintSet = ConstraintSet()
+    private var mIsFilterVisible = false
+
+    override fun attachBaseContext(newBase: Context) {
+        super.attachBaseContext(newBase)
+
+        // getIntent() is still null at this point, so the tag comes from EditorLocale.
+        // Applied after super() on purpose: AppCompat installs the app-wide locale
+        // during attachBaseContext on API < 33, and overriding afterwards is what
+        // keeps the per-call language winning on those versions too.
+        EditorLocale.overrideConfiguration(baseContext, EditorLocale.pendingTag)
+            ?.let(::applyOverrideConfiguration)
+    }
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        // The tag lives in a process-global field, so a process kill loses it and
+        // attachBaseContext above will have run without a locale. Put it back and
+        // start over. This cannot loop: the field is non-null on the second pass.
+        val language = intent.getStringExtra(EXTRA_LANGUAGE)
+        if (EditorLocale.pendingTag == null && !language.isNullOrBlank()) {
+            EditorLocale.pendingTag = language
+            recreate()
+            return
+        }
+
+        EditorStrings.setOverrides(intent.getBundleExtra(EXTRA_TRANSLATIONS))
+
+        makeFullScreen()
+        setContentView(R.layout.pe_activity_edit_image)
+
+        initViews()
+        mTxtCurrentTool.setEditorText(R.string.pe_app_name)
+
+        mPropertiesBSFragment = PropertiesBSFragment()
+        mEmojiBSFragment = EmojiBSFragment()
+        mStickerBSFragment = StickerBSFragment()
+        mShapeBSFragment = ShapeBSFragment()
+        mStickerBSFragment.setStickerListener(this)
+        mEmojiBSFragment.setEmojiListener(this)
+        mPropertiesBSFragment.setPropertiesChangeListener(this)
+        mShapeBSFragment.setPropertiesChangeListener(this)
+
+        intent.getStringArrayListExtra(EXTRA_STICKERS)?.let {
+            mStickerBSFragment.setStickers(it)
+        }
+
+        val llmTools = LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false)
+        mRvTools.layoutManager = llmTools
+        mRvTools.adapter = mEditingToolsAdapter
+
+        val llmFilters = LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false)
+        mRvFilters.layoutManager = llmFilters
+        mRvFilters.adapter = mFilterViewAdapter
+
+        mPhotoEditor = PhotoEditor.Builder(this, mPhotoEditorView)
+            .setPinchTextScalable(true)
+            .build()
+
+        mPhotoEditor.setOnPhotoEditorListener(this)
+
+        loadSourceImage()
+    }
+
+    /** Resolves a string, honouring any overrides from the `translations` option. */
+    private fun editorString(@StringRes id: Int): String = EditorStrings.get(this, id)
+
+    private fun loadSourceImage() {
+        val path = intent.getStringExtra(EXTRA_IMAGE_PATH)
+        if (path.isNullOrBlank()) {
+            setResultError("Missing required option: path")
+            return
+        }
+
+        // Glide resolves file paths, file://, content:// and http(s) sources alike
+        Glide.with(this)
+            .asBitmap()
+            .load(path)
+            .into(object : CustomTarget<Bitmap>() {
+                override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
+                    mPhotoEditorView.source.setImageBitmap(resource)
+                }
+
+                override fun onLoadCleared(placeholder: Drawable?) = Unit
+
+                override fun onLoadFailed(errorDrawable: Drawable?) {
+                    setResultError("Could not load image: $path")
+                }
+            })
+    }
+
+    private fun initViews() {
+        mPhotoEditorView = findViewById(R.id.photoEditorView)
+        mTxtCurrentTool = findViewById(R.id.txtCurrentTool)
+        mRvTools = findViewById(R.id.rvConstraintTools)
+        mRvFilters = findViewById(R.id.rvFilterView)
+        mRootView = findViewById(R.id.rootView)
+
+        mImgUndo = findViewById(R.id.imgUndo)
+        mImgUndo.setOnClickListener(this)
+
+        mImgRedo = findViewById(R.id.imgRedo)
+        mImgRedo.setOnClickListener(this)
+
+        val imgSave: ImageView = findViewById(R.id.imgSave)
+        imgSave.setOnClickListener(this)
+
+        val imgClose: ImageView = findViewById(R.id.imgClose)
+        imgClose.setOnClickListener(this)
+    }
+
+    override fun onEditTextChangeListener(rootView: View, text: String, colorCode: Int) {
+        val textEditorDialogFragment =
+            TextEditorDialogFragment.show(this, text.toString(), colorCode)
+        textEditorDialogFragment.setOnTextEditorListener(object :
+            TextEditorDialogFragment.TextEditorListener {
+            override fun onDone(inputText: String, colorCode: Int) {
+                val styleBuilder = TextStyleBuilder()
+                styleBuilder.withTextColor(colorCode)
+                mPhotoEditor.editText(rootView, inputText, styleBuilder)
+                mTxtCurrentTool.setEditorText(R.string.pe_label_text)
+            }
+        })
+    }
+
+    override fun onAddViewListener(viewType: ViewType, numberOfAddedViews: Int) {
+        Log.d(TAG, "onAddViewListener() called with: viewType = [$viewType]")
+    }
+
+    override fun onRemoveViewListener(viewType: ViewType, numberOfAddedViews: Int) {
+        Log.d(TAG, "onRemoveViewListener() called with: viewType = [$viewType]")
+    }
+
+    override fun onStartViewChangeListener(viewType: ViewType) {
+        Log.d(TAG, "onStartViewChangeListener() called with: viewType = [$viewType]")
+    }
+
+    override fun onStopViewChangeListener(viewType: ViewType) {
+        Log.d(TAG, "onStopViewChangeListener() called with: viewType = [$viewType]")
+    }
+
+    override fun onTouchSourceImage(event: MotionEvent) {
+        Log.d(TAG, "onTouchView() called with: event = [$event]")
+    }
+
+    @SuppressLint("NonConstantResourceId")
+    override fun onClick(view: View) {
+        when (view.id) {
+            R.id.imgUndo -> mPhotoEditor.undo()
+            R.id.imgRedo -> mPhotoEditor.redo()
+
+            R.id.imgSave -> saveImage()
+            R.id.imgClose -> onBackPressed()
+        }
+    }
+
+    private fun saveImage() {
+        val outputDir = File(cacheDir, "photo_editor")
+        if (!outputDir.exists() && !outputDir.mkdirs()) {
+            showSnackbar(editorString(R.string.pe_msg_save_failed))
+            return
+        }
+        val outputFile = File(outputDir, "${System.currentTimeMillis()}.png")
+
+        val saveSettings = SaveSettings.Builder()
+            .setClearViewsEnabled(true)
+            .setTransparencyEnabled(true)
+            .build()
+
+        showLoading(editorString(R.string.pe_msg_saving))
+        lifecycleScope.launch {
+            val result = mPhotoEditor.saveAsFile(outputFile.absolutePath, saveSettings)
+            hideLoading()
+            if (result is SaveFileResult.Success) {
+                val data = Intent().putExtra(RESULT_EXTRA_PATH, outputFile.absolutePath)
+                setResult(RESULT_OK, data)
+                finish()
+            } else {
+                showSnackbar(editorString(R.string.pe_msg_save_failed))
+            }
+        }
+    }
+
+    private fun setResultError(message: String) {
+        val data = Intent().putExtra(RESULT_EXTRA_ERROR, message)
+        setResult(RESULT_ERROR, data)
+        finish()
+    }
+
+    override fun onColorChanged(colorCode: Int) {
+        mPhotoEditor.setShape(mShapeBuilder.withShapeColor(colorCode))
+        mTxtCurrentTool.setEditorText(R.string.pe_label_brush)
+    }
+
+    override fun onOpacityChanged(opacity: Int) {
+        mPhotoEditor.setShape(mShapeBuilder.withShapeOpacity(opacity))
+        mTxtCurrentTool.setEditorText(R.string.pe_label_brush)
+    }
+
+    override fun onShapeSizeChanged(shapeSize: Int) {
+        mPhotoEditor.setShape(mShapeBuilder.withShapeSize(shapeSize.toFloat()))
+        mTxtCurrentTool.setEditorText(R.string.pe_label_brush)
+    }
+
+    override fun onShapePicked(shapeType: ShapeType) {
+        mPhotoEditor.setShape(mShapeBuilder.withShapeType(shapeType))
+    }
+
+    override fun onEmojiClick(emojiUnicode: String) {
+        mPhotoEditor.addEmoji(emojiUnicode)
+        mTxtCurrentTool.setEditorText(R.string.pe_label_emoji)
+    }
+
+    override fun onStickerClick(bitmap: Bitmap) {
+        mPhotoEditor.addImage(bitmap)
+        mTxtCurrentTool.setEditorText(R.string.pe_label_sticker)
+    }
+
+    private fun showSaveDialog() {
+        val builder = AlertDialog.Builder(this)
+        builder.setMessage(editorString(R.string.pe_msg_save_image))
+        builder.setPositiveButton(editorString(R.string.pe_label_save)) { _: DialogInterface?, _: Int -> saveImage() }
+        builder.setNegativeButton(editorString(R.string.pe_label_cancel)) { dialog: DialogInterface, _: Int -> dialog.dismiss() }
+        builder.setNeutralButton(editorString(R.string.pe_label_discard)) { _: DialogInterface?, _: Int -> cancelAndFinish() }
+        builder.create().show()
+    }
+
+    override fun onFilterSelected(photoFilter: PhotoFilter) {
+        mPhotoEditor.setFilterEffect(photoFilter)
+    }
+
+    override fun onToolSelected(toolType: ToolType) {
+        when (toolType) {
+            ToolType.SHAPE -> {
+                mPhotoEditor.setBrushDrawingMode(true)
+                mShapeBuilder = ShapeBuilder()
+                mPhotoEditor.setShape(mShapeBuilder)
+                mTxtCurrentTool.setEditorText(R.string.pe_label_shape)
+                showBottomSheetDialogFragment(mShapeBSFragment)
+            }
+
+            ToolType.TEXT -> {
+                val textEditorDialogFragment = TextEditorDialogFragment.show(this)
+                textEditorDialogFragment.setOnTextEditorListener(object :
+                    TextEditorDialogFragment.TextEditorListener {
+                    override fun onDone(inputText: String, colorCode: Int) {
+                        val styleBuilder = TextStyleBuilder()
+                        styleBuilder.withTextColor(colorCode)
+                        mPhotoEditor.addText(inputText, styleBuilder)
+                        mTxtCurrentTool.setEditorText(R.string.pe_label_text)
+                    }
+                })
+            }
+
+            ToolType.ERASER -> {
+                mPhotoEditor.brushEraser()
+                mTxtCurrentTool.setEditorText(R.string.pe_label_eraser_mode)
+            }
+
+            ToolType.FILTER -> {
+                mTxtCurrentTool.setEditorText(R.string.pe_label_filter)
+                showFilter(true)
+            }
+
+            ToolType.EMOJI -> showBottomSheetDialogFragment(mEmojiBSFragment)
+            ToolType.STICKER -> showBottomSheetDialogFragment(mStickerBSFragment)
+        }
+    }
+
+    private fun showBottomSheetDialogFragment(fragment: BottomSheetDialogFragment?) {
+        if (fragment == null || fragment.isAdded) {
+            return
+        }
+        fragment.show(supportFragmentManager, fragment.tag)
+    }
+
+    private fun showFilter(isVisible: Boolean) {
+        mIsFilterVisible = isVisible
+        mConstraintSet.clone(mRootView)
+
+        val rvFilterId: Int = mRvFilters.id
+
+        if (isVisible) {
+            mConstraintSet.clear(rvFilterId, ConstraintSet.START)
+            mConstraintSet.connect(
+                rvFilterId, ConstraintSet.START,
+                ConstraintSet.PARENT_ID, ConstraintSet.START
+            )
+            mConstraintSet.connect(
+                rvFilterId, ConstraintSet.END,
+                ConstraintSet.PARENT_ID, ConstraintSet.END
+            )
+        } else {
+            mConstraintSet.connect(
+                rvFilterId, ConstraintSet.START,
+                ConstraintSet.PARENT_ID, ConstraintSet.END
+            )
+            mConstraintSet.clear(rvFilterId, ConstraintSet.END)
+        }
+
+        val changeBounds = ChangeBounds()
+        changeBounds.duration = 350
+        changeBounds.interpolator = AnticipateOvershootInterpolator(1.0f)
+        TransitionManager.beginDelayedTransition(mRootView, changeBounds)
+
+        mConstraintSet.applyTo(mRootView)
+    }
+
+    private fun cancelAndFinish() {
+        setResult(RESULT_CANCELED)
+        finish()
+    }
+
+    @Deprecated("Deprecated in Java")
+    override fun onBackPressed() {
+        if (mIsFilterVisible) {
+            showFilter(false)
+            mTxtCurrentTool.setEditorText(R.string.pe_app_name)
+        } else if (!mPhotoEditor.isCacheEmpty) {
+            showSaveDialog()
+        } else {
+            cancelAndFinish()
+        }
+    }
+
+    companion object {
+        private const val TAG = "EditImageActivity"
+
+        const val EXTRA_IMAGE_PATH = "image_path"
+        const val EXTRA_STICKERS = "stickers"
+        const val EXTRA_LANGUAGE = "language"
+        const val EXTRA_TRANSLATIONS = "translations"
+        const val RESULT_EXTRA_PATH = "edited_image_path"
+        const val RESULT_EXTRA_ERROR = "error_message"
+        const val RESULT_ERROR = 2
+    }
+}

package/android/src/main/java/com/photoeditor/editor/EditorLocale.kt

@@ -0,0 +1,41 @@
+package com.photoeditor.editor
+
+import android.content.Context
+import android.content.res.Configuration
+import java.util.Locale
+
+/**
+ * Carries the requested editor language from the module to the activity.
+ *
+ * The tag cannot simply ride along in the intent. [android.app.Activity.attach]
+ * calls `attachBaseContext()` before it assigns `mIntent`, so `getIntent()` is
+ * still null at the only point where the locale can be applied to the context
+ * the layouts are inflated from. The activity reads the tag from here instead,
+ * and the intent extra exists only so the activity can notice that this field
+ * was lost to a process kill.
+ */
+internal object EditorLocale {
+
+    /** Set by the module immediately before launching the editor. */
+    @Volatile
+    var pendingTag: String? = null
+
+    /**
+     * Builds the configuration the editor should render under, or null when no
+     * usable tag was given.
+     *
+     * Deliberately does not touch [Locale.setDefault]: that is process-wide
+     * state belonging to the host app, and the editor has no business changing
+     * it. The returned configuration is a full copy of [base]'s, so applying it
+     * keeps night mode, font scale and everything else the host already set.
+     */
+    fun overrideConfiguration(base: Context, tag: String?): Configuration? {
+        val locale = tag?.takeIf { it.isNotBlank() }?.let(Locale::forLanguageTag)
+        if (locale == null || locale.language.isEmpty()) return null
+
+        return Configuration(base.resources.configuration).apply {
+            setLocale(locale)
+            setLayoutDirection(locale)
+        }
+    }
+}

package/android/src/main/java/com/photoeditor/editor/EditorStrings.kt

@@ -0,0 +1,46 @@
+package com.photoeditor.editor
+
+import android.content.Context
+import android.os.Bundle
+import android.widget.TextView
+import androidx.annotation.StringRes
+
+/**
+ * Runtime string overrides supplied through the `translations` option.
+ *
+ * A `values-<lang>` folder in the host app is still the idiomatic way to
+ * translate the editor on Android, and nothing here replaces it. This exists so
+ * that one cross-platform map can drive both platforms, because iOS has no
+ * equivalent of dropping a resource folder into the app.
+ *
+ * Keys are resource entry names, so `pe_label_brush` overrides
+ * [com.photoeditor.R.string.pe_label_brush]. Keys with no override fall through
+ * to the normal resource lookup, which is what keeps `values-<lang>` working
+ * alongside this.
+ */
+internal object EditorStrings {
+
+    @Volatile
+    private var overrides: Map<String, String> = emptyMap()
+
+    /**
+     * Replaces the current overrides. Called with the intent's extra on every
+     * launch, including null, so one session cannot inherit another's strings.
+     */
+    fun setOverrides(bundle: Bundle?) {
+        overrides = bundle?.keySet().orEmpty()
+            .mapNotNull { key -> bundle?.getString(key)?.let { key to it } }
+            .toMap()
+    }
+
+    fun get(context: Context, @StringRes id: Int): String {
+        if (overrides.isEmpty()) return context.getString(id)
+        val name = runCatching { context.resources.getResourceEntryName(id) }.getOrNull()
+        return overrides[name] ?: context.getString(id)
+    }
+}
+
+/** Sets text through [EditorStrings] rather than straight from resources. */
+internal fun TextView.setEditorText(@StringRes id: Int) {
+    text = EditorStrings.get(context, id)
+}

package/android/src/main/java/com/photoeditor/editor/EmojiBSFragment.kt

@@ -0,0 +1,121 @@
+package com.photoeditor.editor
+
+import com.photoeditor.R
+
+import android.annotation.SuppressLint
+import android.app.Dialog
+import android.content.Context
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.TextView
+import androidx.coordinatorlayout.widget.CoordinatorLayout
+import com.google.android.material.bottomsheet.BottomSheetDialogFragment
+import com.google.android.material.bottomsheet.BottomSheetBehavior.BottomSheetCallback
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import androidx.recyclerview.widget.RecyclerView
+import androidx.recyclerview.widget.GridLayoutManager
+import java.lang.NumberFormatException
+import java.util.ArrayList
+
+class EmojiBSFragment : BottomSheetDialogFragment() {
+    private var mEmojiListener: EmojiListener? = null
+    private var emojisList: List<String> = emptyList()
+
+    interface EmojiListener {
+        fun onEmojiClick(emojiUnicode: String)
+    }
+
+    private val mBottomSheetBehaviorCallback: BottomSheetCallback = object : BottomSheetCallback() {
+        override fun onStateChanged(bottomSheet: View, newState: Int) {
+            if (newState == BottomSheetBehavior.STATE_HIDDEN) {
+                dismiss()
+            }
+        }
+
+        override fun onSlide(bottomSheet: View, slideOffset: Float) {}
+    }
+
+    @SuppressLint("RestrictedApi")
+    override fun setupDialog(dialog: Dialog, style: Int) {
+        super.setupDialog(dialog, style)
+        val contentView = View.inflate(context, R.layout.pe_fragment_bottom_sticker_emoji_dialog, null)
+        dialog.setContentView(contentView)
+        val params = (contentView.parent as View).layoutParams as CoordinatorLayout.LayoutParams
+        val behavior = params.behavior
+        if (behavior != null && behavior is BottomSheetBehavior<*>) {
+            behavior.setBottomSheetCallback(mBottomSheetBehaviorCallback)
+        }
+        (contentView.parent as View).setBackgroundColor(resources.getColor(android.R.color.transparent))
+        emojisList = getEmojis(requireContext())
+        val rvEmoji: RecyclerView = contentView.findViewById(R.id.rvEmoji)
+
+        contentView.findViewById<TextView>(R.id.txtClose).setEditorText(R.string.pe_label_close)
+        contentView.findViewById<TextView>(R.id.txtDone).setEditorText(R.string.pe_label_done)
+        val gridLayoutManager = GridLayoutManager(activity, 5)
+        rvEmoji.layoutManager = gridLayoutManager
+        val emojiAdapter = EmojiAdapter()
+        rvEmoji.adapter = emojiAdapter
+        rvEmoji.setHasFixedSize(true)
+        rvEmoji.setItemViewCacheSize(emojisList.size)
+    }
+
+    fun setEmojiListener(emojiListener: EmojiListener?) {
+        mEmojiListener = emojiListener
+    }
+
+    inner class EmojiAdapter : RecyclerView.Adapter<EmojiAdapter.ViewHolder>() {
+        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
+            val view =
+                LayoutInflater.from(parent.context).inflate(R.layout.pe_row_emoji, parent, false)
+            return ViewHolder(view)
+        }
+
+        override fun onBindViewHolder(holder: ViewHolder, position: Int) {
+            holder.txtEmoji.text = emojisList[position]
+        }
+
+        override fun getItemCount(): Int {
+            return emojisList.size
+        }
+
+        inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
+            val txtEmoji: TextView = itemView.findViewById(R.id.txtEmoji)
+
+            init {
+                itemView.setOnClickListener {
+                    if (mEmojiListener != null) {
+                        mEmojiListener!!.onEmojiClick(emojisList[layoutPosition])
+                    }
+                    dismiss()
+                }
+            }
+        }
+    }
+
+    companion object {
+        /**
+         * Provide the list of emoji in form of unicode string
+         *
+         * @param context context
+         * @return list of emoji unicode
+         */
+        fun getEmojis(context: Context?): ArrayList<String> {
+            val convertedEmojiList = ArrayList<String>()
+            val emojiList = context!!.resources.getStringArray(R.array.photo_editor_emoji)
+            for (emojiUnicode in emojiList) {
+                convertedEmojiList.add(convertEmoji(emojiUnicode))
+            }
+            return convertedEmojiList
+        }
+
+        private fun convertEmoji(emoji: String): String {
+            return try {
+                val convertEmojiToInt = emoji.substring(2).toInt(16)
+                String(Character.toChars(convertEmojiToInt))
+            } catch (e: NumberFormatException) {
+                ""
+            }
+        }
+    }
+}

package/android/src/main/java/com/photoeditor/editor/PropertiesBSFragment.kt

@@ -0,0 +1,76 @@
+package com.photoeditor.editor
+
+import com.photoeditor.R
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.SeekBar
+import com.google.android.material.bottomsheet.BottomSheetDialogFragment
+import androidx.recyclerview.widget.RecyclerView
+import androidx.recyclerview.widget.LinearLayoutManager
+import com.photoeditor.editor.ColorPickerAdapter.OnColorPickerClickListener
+import android.widget.TextView
+
+class PropertiesBSFragment : BottomSheetDialogFragment(), SeekBar.OnSeekBarChangeListener {
+    private var mProperties: Properties? = null
+
+    interface Properties {
+        fun onColorChanged(colorCode: Int)
+        fun onOpacityChanged(opacity: Int)
+        fun onShapeSizeChanged(shapeSize: Int)
+    }
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        return inflater.inflate(R.layout.pe_fragment_bottom_properties_dialog, container, false)
+    }
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        val rvColor: RecyclerView = view.findViewById(R.id.rvColors)
+        val sbOpacity = view.findViewById<SeekBar>(R.id.sbOpacity)
+        val sbBrushSize = view.findViewById<SeekBar>(R.id.sbSize)
+
+        view.findViewById<TextView>(R.id.txtOpacity).setEditorText(R.string.pe_label_opacity)
+        view.findViewById<TextView>(R.id.txtBrushSize).setEditorText(R.string.pe_label_brush)
+        sbOpacity.setOnSeekBarChangeListener(this)
+        sbBrushSize.setOnSeekBarChangeListener(this)
+        val layoutManager = LinearLayoutManager(activity, LinearLayoutManager.HORIZONTAL, false)
+        rvColor.layoutManager = layoutManager
+        rvColor.setHasFixedSize(true)
+        val colorPickerAdapter = activity?.let { ColorPickerAdapter(it) }
+        colorPickerAdapter?.setOnColorPickerClickListener(object : OnColorPickerClickListener {
+            override fun onColorPickerClickListener(colorCode: Int) {
+                if (mProperties != null) {
+                    dismiss()
+                    mProperties?.onColorChanged(colorCode)
+                }
+            }
+        })
+        rvColor.adapter = colorPickerAdapter
+    }
+
+    fun setPropertiesChangeListener(properties: Properties?) {
+        mProperties = properties
+    }
+
+    override fun onProgressChanged(seekBar: SeekBar, i: Int, b: Boolean) {
+        when (seekBar.id) {
+            R.id.sbOpacity -> if (mProperties != null) {
+                mProperties?.onOpacityChanged(i)
+            }
+            R.id.sbSize -> if (mProperties != null) {
+                mProperties?.onShapeSizeChanged(i)
+            }
+        }
+    }
+
+    override fun onStartTrackingTouch(seekBar: SeekBar) = Unit
+
+    override fun onStopTrackingTouch(seekBar: SeekBar) = Unit
+}