Skip to content

Single image video picker customization

CraZyLegenD edited this page May 18, 2020 · 3 revisions

The single image/video picker customization modifier

You'd be calling a picker using

    //single picker as simple as
    SingleImagePicker.showPicker(context = this){ doSomethingWithTheImage(it) }
    SingleVideoPicker.showPicker(context = this){ doSomethingWithTheVideo(it) }

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

The BaseSinglePickerModifier has

    titleTextModifier: TitleTextModifier
    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

   setupBaseModifier(
                    loadingIndicatorColor = ContextCompat.getColor(args),
                    titleTextModifications = {
                        textAlignment = TextView.TEXT_ALIGNMENT_VIEW_START
                        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 an audio"
                    },
                    placeHolderModifications = {
                        resID = R.drawable.ic_image
                    }
            )

Option 1

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

            }
            noContentTextModifier.apply {

            }
        }) { pickedModel ->

        }

Option 2

 SingleVideoPicker.showPicker(this, {
            setupBaseModifier(
                    loadingIndicatorColor = R.color.minusColor,
                    titleTextModifications = {
                        textAlignment = TextView.TEXT_ALIGNMENT_VIEW_START
                        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 a video"
                    },
                    placeHolderModifications = {
                        resID = R.drawable.ic_image
                    }
            )
        }, ::loadVideo)

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 audio/videos on the device

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

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 SingleImagePicker then do it for that only or SingleVideoPicker, nothing will happen if you use both but it's just code clutter.

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

        //videos
        SingleVideoPicker.restoreListener(this) { pickedVideoModel-> doSomethingWithPickedVideo(pickedVideoModel) }
    }