Skip to content

Multi image video picker customization

CraZyLegenD edited this page May 18, 2020 · 5 revisions

The multi image/video picker customization modifier

You'd be calling a picker using

    //multi picker as simple as
    MultiImagePicker.showPicker(context = this){ doSomethingWithTheImageList(it) }
    MultiVideoPicker.showPicker(context = this){ doSomethingWithTheVideoList(it) }

Where the pickerModifier = {} is a lambda that builds BaseMultiPickerModifier

The BaseMultiPickerModifier has

    doneButtonModifier: DoneButtonModifier
    titleTextModifier: TitleTextModifier
    selectIconModifier: SelectIconModifier
    unSelectedIconModifier: SelectIconModifier
    indicatorsGravity: Gravity
    viewHolderPlaceholderModifier: ImageModifier
    noContentTextModifier: TitleTextModifier
    loadingIndicatorTint: Int? 

So you have two options on how to customize the picker, it is really user preference, whether you choose to do one approach or the other it's up to you, do note that if you're using

   titleTextModifier.apply {

   }

Use a lambda function

   setupBaseMultiPicker(
                    tintForLoadingProgressBar = ContextCompat.getColor(this@MainActivity, R.color.colorPrimaryDark),
                    gravityForSelectAndUnSelectIndicators = BaseMultiPickerModifier.Gravity.TOP_RIGHT,
                    titleModifications = {
                        textAlignment = TextView.TEXT_ALIGNMENT_CENTER
                        textStyle = TitleTextModifier.TextStyle.ITALIC
                        textColor = Color.BLACK
                        marginBottom = 30 // use dp or sp this is only for demonstration purposes
                        textPadding = 5 // use dp or sp this is only for demonstration purposes
                        textSize = 30f  // use sp this is only for demonstration purposes
                        textString = "Pick multiple videos"
                    },
                    selectIconModifications = {
                        resID = R.drawable.ic_checked
                        tint = Color.BLACK
                    },
                    unSelectIconModifications = {
                        resID = R.drawable.ic_unchecked
                        tint = Color.BLACK
                    },
                    viewHolderPlaceholderModifications = {
                        resID = R.drawable.ic_close
                    }
            )

Option 1

    MultiVideoPicker.dialogPicker(context = this, pickerModifier = {
            loadingIndicatorTint = Color.RED // or use ContextCompat.getColor
            titleTextModifier.apply {

            }
            noContentTextModifier.apply {

            }
        }) { videosList ->

        }

Option 2

MultiVideoPicker.showPicker(this, {
            setupBaseMultiPicker(
                    tintForLoadingProgressBar = ContextCompat.getColor(this@MainActivity, R.color.colorPrimaryDark),
                    gravityForSelectAndUnSelectIndicators = BaseMultiPickerModifier.Gravity.TOP_RIGHT,
                    titleModifications = {
                        textAlignment = TextView.TEXT_ALIGNMENT_CENTER
                        textStyle = TitleTextModifier.TextStyle.ITALIC
                        textColor = Color.BLACK
                        marginBottom = 30 // use dp or sp this is only for demonstration purposes
                        textPadding = 5 // use dp or sp this is only for demonstration purposes
                        textSize = 30f  // use sp this is only for demonstration purposes
                        textString = "Pick multiple videos"
                    },
                    selectIconModifications = {
                        resID = R.drawable.ic_checked
                        tint = Color.BLACK
                    },
                    unSelectIconModifications = {
                        resID = R.drawable.ic_unchecked
                        tint = Color.BLACK
                    },
                    viewHolderPlaceholderModifications = {
                        resID = R.drawable.ic_close
                    }
            )
        }, ::doSomethingWithVideoList)

titleTextModifier lambda receives the parameters of the TitleTextModifier and it serves to set the title of the dialog

viewHolderPlaceholderModifier lambda receives the parameters of the ImageModifier and it serves to a placeholder when loading the thumbnails for images/videos

noContentTextModifier lambda receives the parameters of the TitleTextModifier and it serves to show a text when there's no images/videos on the device

loadingIndicatorTint receives a color, Color.X color or ContextCompat.getColor

doneButtonModifier lambda receives the parameters of the DoneButtonModifier and it serves to customize the done button in the multi picker

selectIconModifier lambda receives the parameters of the SelectIconModifier and it serves to customize the icon/image when you select an image/video

unSelectIconModifier lambda receives the parameters of the SelectIconModifier and it serves to customize the icon/image when you un-select an image/video

indicatorsGravity receives a gravity one of TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT the default is BOTTOM_RIGHT and sets the gravity for selectIconModifier and unSelectIconModifier

It's really important to restore the listeners state, so in your onRestoreInstanceState, you need to call restore listener on the one you're using, if you're using MultiImagePicker then do it for that only or MultiVideoPicker, nothing will happen if you use both but it's just code clutter.

 override fun onRestoreInstanceState(savedInstanceState: Bundle) {
        super.onRestoreInstanceState(savedInstanceState)
        //images
        MultiImagePicker.restoreListener(this, ::loadImages)

        //videos
        MultiVideoPicker.restoreListener(this) { pickedVideoModels-> doSomethingWithPickedVideosList(pickedVideoModels) }
    }