In Phimpme Android Project, we have used Color Picker palette which has a various implementation in the project such as changing the theme color of the application, to choose the color for the text while editing an image.

Making XML Layout to choose the specific color from the color palette

The main aim was to provide Line of color, and the user can simply slide through the different colors. A single line should contain all the main colors. I took help of the Open Source project to arrange the layout of the colors. We will display the Color palette in a cardview.

<RelativeLayout
   android:id="@+id/container_edit_text"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:padding="@dimen/big_spacing">
   <uz.shift.colorpicker.LineColorPicker
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/color_picker_accent"
       android:layout_width="match_parent"
       android:layout_height="60dp"
       app:orientation="horizontal"
       app:selectedColorIndex="0" />
</RelativeLayout>

Inflating the list with the colors

We will inflate the list with all basic colors such as Red, Purple, Blue, Light Blue, Green, Yellow, Orange, Deep orange, Brown, Blue Gray. getAccentColors() function returns the specific color HEXCODE. A color code is six string length long code combination consisting of numbers and alphabets which are stored in the colors.xml resource file. For example, the color code for black is  #000000 and for white #FFFFFF.  

public static int[] getAccentColors(Context context){
   return new int[]{
           ContextCompat.getColor(context, R.color.md_red_500),
           ContextCompat.getColor(context, R.color.md_purple_500),
           ContextCompat.getColor(context, R.color.md_deep_purple_500),
           ContextCompat.getColor(context, R.color.md_blue_500),
           ContextCompat.getColor(context, R.color.md_light_blue_500),
           ContextCompat.getColor(context, R.color.md_cyan_500),
           ContextCompat.getColor(context, R.color.md_teal_500),
           ContextCompat.getColor(context, R.color.md_green_500),
           ContextCompat.getColor(context, R.color.md_yellow_500),
           ContextCompat.getColor(context, R.color.md_orange_500),
           ContextCompat.getColor(context, R.color.md_deep_orange_500),
           ContextCompat.getColor(context, R.color.md_brown_500),
           ContextCompat.getColor(context, R.color.md_blue_grey_500),
   };
}

Implementation of ColorPicker to change the Text color in the Edit Image Activity

Color Palette is implemented the followings steps:

 First,                                                                                                                                        A dialog box is made. This dialog will help to display the color palette.

 Second,                                                                                                                                We need to inflate the dialog box with color_picker_accent XML file we created  in the resource folder.

 Third,                                                                                                                                    We set the dialog box with the line of colors.

 Fourth,                                                                                                                                Get the selected color code. To get the selected color code we used the class  LineColorPicker. The color_picker_accent sends an id for the selected color,  where all the color code is stored.   

final AlertDialog.Builder dialogBuilder = new AlertDialog.Builder(getActivity());
final View dialogLayout = getActivity().getLayoutInflater().inflate(R.layout.color_piker_accent, null);
final LineColorPicker colorPicker = (LineColorPicker) dialogLayout.findViewById(R.id.color_picker_accent);
final TextView dialogTitle = (TextView) dialogLayout.findViewById(R.id.cp_accent_title);
dialogTitle.setText(R.string.text_color_title);
colorPicker.setColors(ColorPalette.getAccentColors(activity.getApplicationContext()));
changeTextColor(WHITE);

In when a user selects a particular color he can either choose OK and CANCEL

When user selects OK

We implemented onClick event to change the color of the text by using the function changeTextColor() which accepts color code as the parameter.

dialogBuilder.setPositiveButton(getString(R.string.ok_action).toUpperCase(), new DialogInterface.OnClickListener() {
   public void onClick(DialogInterface dialog, int which) {
       changeTextColor(colorPicker.getColor());
   }
});

When user selects Cancel

When the user selects cancel, we have set the default color of the text that is White.

dialogBuilder.setNeutralButton(getString(R.string.cancel).toUpperCase(), new DialogInterface.OnClickListener() {
   @Override
   public void onClick(DialogInterface dialog, int which) {
       changeTextColor(WHITE);
       dialog.cancel();
   }
});

changeTextColor function

It accepts the color code. We used this color to change the text color by using the inbuilt function setBackgroundColor() and setTextColor().

private void changeTextColor(int newColor) {
   this.mTextColor = newColor;
   mTextColorSelector.setBackgroundColor(mTextColor);
   mTextStickerView.setTextColor(mTextColor);
}

Conclusion

In this way, it provides a rich user experience. It adds vibrant colors in the application. A quick way to choose the color from the variety of option.

Github

https://github.com/fossasia/phimpme-android

Resources

• For the ColorPickerLine: http://programtalk.com/java-api-usage-examples/uz.shift.colorpicker.LineColorPicker/
• To get the different color codes: http://htmlcolorcodes.com/
• Open source repository: https://github.com/DASAR/ShiftColorPicker/blob/master/shiftcolorpicker/src/main/java/uz/shift/colorpicker/LineColorPicker.java