Implementing Color Picker in the Open Event Orga App

In the Open Event Orga App, we have implemented a color picker to change the color of the Session’s item heading. Earlier the user had to enter the hex code in the given field to provide the color which is a bit cumbersome but now it is much easier with the help of a color picker. The PR related to this issue can be found here: #1073

The following approach was followed to implement the color picker.

Firstly we have used the library https://github.com/Pes8/android-material-color-picker-dialog. So it is included in the build.gradle file. The following line is added this file.

dependencies {
       implementation ‘com.pes.materialcolorpicker:library:1.2.0’
   }

Then navigate to the CreateTracksFragment.java class where we will need to implement the color picker. But firstly when the user enters the fragment , he should be able to see a random color in the edit text field and a small demo to the right of it where the selected color will be shown. These two things are done in the following steps.

1. To auto fill the color field with a random color the following code is written:

public String getRandomColor() {
  Random random = new Random();
  colorRed = random.nextInt(255);
  colorGreen = random.nextInt(255);
  colorBlue = random.nextInt(255);
  colorRGB = Color.rgb(colorRed, colorGreen, colorBlue);
  return String.format(“#%06X”,(0xFFFFFF & colorRGB));
}

public int getRed() {
  return colorRed;
}

public int getGreen() {
  return colorGreen;
}

public int getBlue() {
  return colorBlue;
}

public int getColorRGB() {
  return colorRGB;
}

 

With the help of the above code a random hex color is generated with the help of colorRed, colorGreen and colorBlue. These random fields are assigned to the local variables as they need to be used later on in the CreateTracksFragment.

This method is then called from the onStart( ) of the CreateTracksFragment.

2. Now a small demo color view is created to the right of the edit text field where the user can see the color of the current hex code. To implement this the following XML code is written. A small image view is created with the id color_picker.

<ImageView
  android:id=“@+id/color_picker”
  android:layout_width=“24dp”
  android:layout_height=“24dp”
  android:layout_margin=“10dp”
  android:layout_weight=“0.2” />

The above image view is filled with the current selected color with the help of the following code:

This ensures that whenever the user opens the CreateTracksFragment he should be able to view the color.

binding.form.colorPicker.setBackgroundColor(getPresenter().getColorRGB());

Now after implementing the above 2 features, the color picker dialog needs to be shown when the user clicks on the demo color view and the dialog box should show the value of Red, Green, Blue generated by the random method in the presenter. So these values are obtained from the presenter and added as constructor parameters as shown below. The color picker library has 2 main methods that need to be implemented which are :

→ setCallback( ) which is a callback method triggered when the user has selected the color and clicks on submit button. The action that needs to be performed after this is written in this particular callback method. In our case, we want to fill the edit text with the selected color and so we set the edit text with the callback value. Also we need fill the image view with the selected color and hence its color is also set in the callback function.

→ The show( ) method is required to make the dialog box of the color picker visible.

 

private void setColorPicker() {
  if (colorPickerDialog == null)
      colorPickerDialog = new ColorPicker(getActivity(), getPresenter().getRed(), getPresenter().getGreen(), getPresenter().getBlue());

  binding.form.colorPicker.setBackgroundColor(getPresenter().getColorRGB());

  binding.form.colorPicker.setOnClickListener(view -> {
      colorPickerDialog.show();
  });

  colorPickerDialog.setCallback(color -> {
      binding.form.trackColor.setText(String.format(“#%06X”, (0xFFFFFF & color)));
      binding.form.colorPicker.setBackgroundColor(color);
      colorPickerDialog.dismiss();
  });
}

 

→ When the colors have been selected we need to dismiss the dialog box. This is done by calling the .dismiss( )of the color picker.

Now after the CreateTracksFragment has been implemented certain changes need to be done to the UpdateTracksPresenter as well. Whenever the user selects to update the track, he should see the colors associated with that track as well which were set during its creation. We add the following to the UpdateTracksFragment.

 

public int getRed() {
  String colorRed = track.getColor();
  return Integer.valueOf(colorRed.substring(1, 3), 16);
}

public int getGreen() {
  String colorGreen = track.getColor();
  return Integer.valueOf(colorGreen.substring(3, 5), 16);
}

public int getBlue() {
  String colorBlue = track.getColor();
  return Integer.valueOf(colorBlue.substring(5, 7), 16);
}

public int getColorRGB() {
  return Color.rgb(getRed(), getGreen(), getBlue());
}

These methods are then eventually called from the UpdateTracksFragment and provided as parameters to the colorpicker similar to what had been implemented in the CreateTracksFragment.

private void setColorPicker() {
  if (colorPickerDialog == null)
      colorPickerDialog = new ColorPicker(getActivity(), getPresenter().getRed(), getPresenter().getGreen(), getPresenter().getBlue());

  binding.form.colorPicker.setBackgroundColor(getPresenter().getColorRGB());

  binding.form.colorPicker.setOnClickListener(view -> {
      colorPickerDialog.show();
  });

  colorPickerDialog.setCallback(color -> {
      binding.form.trackColor.setText(String.format(“#%06X”, (0xFFFFFF & color)));
      binding.form.colorPicker.setBackgroundColor(color);
      colorPickerDialog.dismiss();
  });

The final result can be seen in the form of GIF

 

Resources

1. Color Picker Library

https://github.com/Pes8/android-material-color-picker-dialog

2. Generating random hex values

https://stackoverflow.com/questions/11094823/java-how-to-generate-a-random-hexadecimal-value-within-specified-range-of-value

Continue ReadingImplementing Color Picker in the Open Event Orga App

Implementation of Colour Picker in Phimpme Android Application

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

Continue ReadingImplementation of Colour Picker in Phimpme Android Application