Extracting Colors In Android 5.0 – “The Palette API”
Before the new update of Palette’s API in android 5.0 developers were allowed to extract colors from images.
Now with the release of Android Lollipop, the Palette class makes easy to extract prominent colors from bitmap images. These colors are very useful if you want to style other view components to match colors from your image, such as a background for the image or a text color etc.
We have two different ways to create the Palette for an image. First is to use the generate methods, which either take just a bitmap object or a bitmap with an integer specifying the number of colors the palette should generate.
generate(Bitmap) generate(Bitmap, int)
These methods are synchronous and should not be called on the main thread.
But practically, sometimes it may not be possible to do this on the same thread where you load your images on. To solve this the Palette class has another set of generating methods which are asynchronous. The only difference between the two is a listener object that will be called when the Palette is ready.
generateAsync(Bitmap, PaletteAsyncListener) generateAsync(Bitmap, int, PaletteAsyncListener)
The implementation of the theory I just explained is very simple. Let’s follow the steps to create a sample code:
Step1:) Create a new android project in your IDE and add following dependency in you gradle build file:
compile 'com.android.support:palette-v7:21.0.0'
Step2:) Write the following in main layout file:
<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <TextView android:text="Palette Colors" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView" android:layout_below="@+id/textView" android:layout_toEndOf="@+id/textView" android:layout_marginTop="55dp" android:src="@drawable/colors"/> </RelativeLayout>
Step3:) Add a png file to your drawble folder.
Step4:) Write the following into your main activity file:
package com.example.extractingcolors;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.graphics.Palette;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.TextView;
public class MainActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView imageView = (ImageView)findViewById(R.id.imageView);
Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.colors);
imageView.setImageBitmap(myBitmap);
Palette palette = Palette.generate(myBitmap);
Palette.PaletteAsyncListener listener = new Palette.PaletteAsyncListener() {
public void onGenerated(Palette palette) {
}
};
Palette.Swatch swatch = palette.getVibrantSwatch();
TextView titleView = (TextView)findViewById(R.id.textView);;
if (swatch != null) {
titleView.setBackgroundColor(swatch.getRgb());
titleView.setTextColor(swatch.getTitleTextColor());
titleView.setHighlightColor(swatch.getBodyTextColor());
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Step5:) Run for the output.
It is showing only one color extracted from the image which I have set to text view because I haven’t specified any number when I called palette.generates() method. You can create a list or array of swatches to extract more colors.
Related Posts
Top 15 Best Android Apps For C Programming | 2018 Exclusive
Android Studio Introduction
Applying MediaCodec On An Open Source Android Audio Player
5 Most Used Android Testing Frameworks
Animations In Android KitKat
The Android Studio – An Introduction With The HelloWorld App
Recycler And CardView Combined In Android L
Google Cast Sender App In Android