Skip to main content

How to customize the appearance of ImagePicker UI in Kotlin Android

How to customize the appearance of ImagePicker UI in Kotlin Android.

Here's a step-by-step tutorial on how to customize the appearance of ImagePicker UI in Kotlin Android:

Step 1: Add ImagePicker Library Dependency

To start customizing the ImagePicker UI, you need to add the ImagePicker library dependency to your project. Open your project's build.gradle file and add the following line in the dependencies block:

implementation 'com.github.dhaval2404:imagepicker:2.+' 

Step 2: Add Permissions to Manifest

Since ImagePicker requires access to the device's storage and camera, you need to add the necessary permissions to your project's AndroidManifest.xml file. Add the following lines inside the manifest tag:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />

Step 3: Create a Custom ImagePickerTheme Style

To customize the appearance of the ImagePicker UI, you can create a custom style for it. Open your styles.xml file located in the res/values directory and add the following code:

<style name="CustomImagePickerTheme" parent="ImagePicker.Theme.Light">
<!-- Customize the toolbar color -->
<item name="toolbarColor">@color/custom_toolbar_color</item>

<!-- Customize the status bar color -->
<item name="statusBarColor">@color/custom_status_bar_color</item>

<!-- Customize the text color of toolbar title -->
<item name="toolbarTitleColor">@color/custom_title_color</item>

<!-- Customize the background color of the bottom navigation bar -->
<item name="bottomNavigationBarColor">@color/custom_bottom_navigation_bar_color</item>

<!-- Customize the color of selected bottom navigation item -->
<item name="bottomNavigationItemSelectedColor">@color/custom_selected_item_color</item>

<!-- Customize the color of unselected bottom navigation items -->
<item name="bottomNavigationItemUnselectedColor">@color/custom_unselected_item_color</item>

<!-- Customize the color of the camera icon -->
<item name="cameraIconColor">@color/custom_camera_icon_color</item>

<!-- Customize the color of the gallery icon -->
<item name="galleryIconColor">@color/custom_gallery_icon_color</item>

Step 4: Apply the Custom ImagePickerTheme Style

Now, you need to apply the custom ImagePicker theme style to the ImagePickerActivity. Open your AndroidManifest.xml file and add the following lines inside the application tag:

android:screenOrientation="portrait" />

Step 5: Customize ImagePicker UI Programmatically

In addition to using a custom theme, you can also customize the ImagePicker UI programmatically. For example, you can change the text color of the toolbar title by adding the following code in your activity:

import com.github.dhaval2404.imagepicker.ImagePicker

// ...

val imagePicker = ImagePicker.with(this)

Similarly, you can customize other UI elements by using the appropriate methods provided by the ImagePicker library.

Step 6: Handle ImagePicker Result

To handle the result of the ImagePicker, you need to override the onActivityResult method in your activity. Here's an example:

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
super.onActivityResult(requestCode, resultCode, data)

if (requestCode == ImagePicker.REQUEST_CODE && resultCode == Activity.RESULT_OK) {
val imageUri = data?.data
// Process the selected image

That's it! You have successfully customized the appearance of ImagePicker UI in Kotlin Android. You can further explore the ImagePicker library documentation to discover more customization options and features.

Note: Make sure to replace the color values with your desired colors in the colors.xml file.

This tutorial provided a step-by-step guide on how to customize the appearance of ImagePicker UI in Kotlin Android. From adding dependencies and permissions, creating a custom style, applying the style, to handling the ImagePicker result, you now have the knowledge to customize the ImagePicker UI according to your app's requirements.