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>
</style>

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:

<activity
    android:name="com.github.dhaval2404.imagepicker.ImagePickerActivity"
    android:theme="@style/CustomImagePickerTheme"
    android:configChanges="orientation|screenSize"
    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)
    .toolbarTitleColor(R.color.custom_title_color)
    .start()

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.