Color Profile Extraction From Images in Android

Color profiles may be extracted from images on Android using AndroidX’s Palette API; typically, color profiles would be used to generate color-coordinated widgets based on a picture. A card, for example, may include an image and title text that are colored in accordance with the picture’s color profiles. Palette API allows you to obtain the following color profiles:

1. Light Vibrant
2. Vibrant
3. Dark Vibrant
4. Light Muted
5. Muted
6. Dark Muted

Understanding the Core

Each color profile includes a Swatch with three major colors:

code to understand the code in more

1. RGB: The primary color of the swatch.
2. titleTextColor: The color to use for the ‘title’ text that appears above the swatch’s primary color.
3. bodyTextColor: The color to use for the ‘body’ text that appears above the primary color of the swatch.

Step by Step Implementation

The app is made up of a single button and a picture. When you push the button, the image changes to a different one. Find the six various image titles below The background and text colors of these tiles will change as the picture changes, as retrieved by the Palette API from the image.

Step #1: Add the dependencies

dependencies {
    // AndroidX Palette
    implementation 'androidx.palette:palette-ktx:1.0.0'
    // Picasso
    implementation 'com.squareup.picasso:picasso:2.7'
}

Step #2: Add the internet permission so our app can use the internet

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.geeksforgeeks.android.androidx.palette">
    <uses-permission android:name="android.permission.INTERNET" />


...<!--The rest of the manifest goes here-->
</manifest>

Step #3: Designing the layout

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".GeeksActivity">

        <Button
            android:id="@+id/changeImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Change Image" />

        <ImageView
            android:id="@+id/image_source"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:contentDescription="Palette Demand Image"
            android:scaleType="centerCrop"
            tools:src="@tools:sample/backgrounds/avatars" />

        <androidx.appcompat.widget.LinearLayoutCompat
            android:id="@+id/layout_light_vibrant"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="15dp">

          <TextView
                android:id="@+id/text_light_vibrant"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Light Vibrant" />

        </androidx.appcompat.widget.LinearLayoutCompat>

        <androidx.appcompat.widget.LinearLayoutCompat
            android:id="@+id/layout_vibrant"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:id="@+id/ gfg _vibrant"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Vibrant" />

        </androidx.appcompat.widget.LinearLayoutCompat>

        <androidx.appcompat.widget.LinearLayoutCompat
            android:id="@+id/layout_gfg_vibrant"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:id="@+id/text_ gfg _vibrant"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Dark Vibrant" />

        </androidx.appcompat.widget.LinearLayoutCompat>

        <androidx.appcompat.widget.LinearLayoutCompat
            android:id="@+id/layout_light_gfg "
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="15dp">

          <TextView
                android:id="@+id/text_ gfg _muted"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Light Muted" />

        </androidx.appcompat.widget.LinearLayoutCompat>

        <androidx.appcompat.widget.LinearLayoutCompat
            android:id="@+id/layout_gfg "
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:id="@+id/text_muted"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Muted" />
        </androidx.appcompat.widget.LinearLayoutCompat>

        <androidx.appcompat.widget.LinearLayoutCompat
            android:id="@+id/layout_dark_muted"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="15dp">

            <TextView
                android:id="@+id/text_dark_muted"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Dark Muted" />

        </androidx.appcompat.widget.LinearLayoutCompat>

</androidx.appcompat.widget.LinearLayoutCompat>

Step #4: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

import android.graphics.Bitmap
import android.graphics.drawable.Drawable
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.LinearLayoutCompat
import androidx.core.content.ContextCompat
import androidx.palette.graphics.Palette
import com.squareup.picasso.Picasso

class MainActivity : AppCompatActivity() {

        private lateinit var target: com.squareup.picasso.Target
        private lateinit var layoutLightVibrant: LinearLayoutCompat
        private lateinit var gfgVibrant: LinearLayoutCompat
        private lateinit var darkGfG: LinearLayoutCompat
        private lateinit var layoutLightMuted: LinearLayoutCompat
        private lateinit var gfgMuted: LinearLayoutCompat
        private lateinit var gfgMutedDark: LinearLayoutCompat
        private lateinit var gfgLightVibrant: TextView
        private lateinit var gfgText: TextView
        private lateinit var gfgTextVib: TextView
        private lateinit var gfgGfgTextMutedMore: TextView
        private lateinit var gfgTextMutedMore: TextView
        private lateinit var gfgTextMutedDark: TextView

        private val imageUrls = listOf(
            "http://placeimg.com/160/120/animals",
            "http://placeimg.com/160/120/arch",
            "http://placeimg.com/160/120/nature",
            "http://placeimg.com/160/120/people",
            "http://placeimg.com/160/120/tech",
            "http://placeimg.com/160/120/grayscale",
            "http://placeimg.com/160/120/sepia",
        )

        private var imageUrlIndex = 0

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)

            setupLayout()
            setupImage()


            findViewById<Button>(R.id.button_change_image).setOnClickListener {
                imageUrlIndex++
                setupImage()
            }
        }

        // Initializes all widgets in the layout
        private fun setupLayout() {
            layoutLightVibrant = findViewById(R.id.layout_light_vibrant)
            gfgVibrant = findViewById(R.id.layout_vibrant)
            darkGfG = findViewById(R.id.layout_dark_vibrant)
            layoutLightMuted = findViewById(R.id.layout_light_muted)
            gfgMuted = findViewById(R.id.layout_muted)
            gfgMutedDark = findViewById(R.id.layout_dark_muted)
            gfgLightVibrant = findViewById(R.id.text_light_vibrant)
            gfgText = findViewById(R.id.text_vibrant)
            gfgTextVib = findViewById(R.id.text_dark_vibrant)
            gfgGfgTextMutedMore = findViewById(R.id.text_light_muted)
            gfgTextMutedMore = findViewById(R.id.text_muted)
            gfgTextMutedDark = findViewById(R.id.text_dark_muted)
        }

        // Fetch image from a URL, display them in
          // an [ImageView], and extract its color profiles.
        private fun setupImage() {
            val url = imageUrls[imageUrlIndex % imageUrls.size]
            target = object : com.squareup.picasso.Target {
                override fun onBitmapLoaded(bitmap: Bitmap?, from: Picasso.LoadedFrom?) {

                    // Set image to ImageView
                    findViewById<ImageView>(R.id.image_source).setImageBitmap(bitmap)

                    // Extract color profiles
                    bitmap?.let {
                        val palette = Palette.from(it).generate()

                        // Light Vibrant
                        setupColorProfile(
                            palette.lightVibrantSwatch,
                            layoutLightVibrant,
                            gfgLightVibrant,
                        )
                        // Vibrant
                        setupColorProfile(
                            palette.vibrantSwatch,
                            gfgVibrant,
                            gfgText,
                        )
                        // Dark Vibrant
                        setupColorProfile(
                            palette.darkVibrantSwatch,
                            darkGfG,
                            gfgTextVib,
                        )
                        // Light Muted
                        setupColorProfile(
                            palette.lightMutedSwatch,
                            layoutLightMuted,
                            gfgGfgTextMutedMore,
                        )
                        // Muted
                        setupColorProfile(
                            palette.mutedSwatch,
                            gfgMuted,
                            gfgTextMutedMore,
                        )
                        // Dark Muted
                        setupColorProfile(
                            palette.darkMutedSwatch,
                            gfgMutedDark,
                            gfgTextMutedDark,
                        )
                    }
                }

                override fun onPrepareLoad(placeHolderDrawable: Drawable?) {
                    findViewById<ImageView>(R.id.image_source).setImageResource(R.color.purple_200)
                }

                override fun onBitmapFailed(e: Exception?, errorDrawable: Drawable?) {
                }
            }
            Picasso.get()
                .load(url)
                .into(target)
        }

        // Set colors of a color profile.
        private fun setupColorProfile(
            swatch: Palette.Swatch?,
            layoutCompat: LinearLayoutCompat,
            textView: TextView,
        ) {
            layoutCompat.setBackgroundColor(swatch?.rgb ?: ContextCompat.getColor(this, R.color.white))
            textView.setTextColor(swatch?.titleTextColor ?: ContextCompat.getColor(this, R.color.black))
        }
    }

Output: