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:
- Light Vibrant
- Vibrant
- Dark Vibrant
- Light Muted
- Muted
- Dark Muted
Understanding the Core
Each color profile includes a Swatch with three major colors:
code to understand the code in more
- RGB: The primary color of the swatch.
- titleTextColor: The color to use for the ‘title’ text that appears above the swatch’s primary color.
- 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 version = "1.0" encoding = "utf-8" ?>
< androidx.appcompat.widget.LinearLayoutCompat
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.
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(
)
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: