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,…
