Android Color Picker Example | Build from Scratch

What's in this blog? Hide

Android Color Picker
1. Creating Layout File
Coding the Color Picker
1. android_dvlprs

Build your own Android Color Picker using a few lines of code in the Android Studio. In this blog, we will be sharing the code from an app with color picker functionality.

The user clicks on a button to open a Dialog. The Dialog has seekbars and Color preview to select and pick a color for the brush.

Here is the User interface of Color Picker Dialog:

Here is complete code for The Color Picker dialog.

Android Color Picker

Creating Layout File

To get a dialog layout as shown above, create a new layout XML file in res/layout named ‘popup_temp_brush.xml’

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView app:cardElevation="5dp"
    app:cardCornerRadius="10dp"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="select color"
            android:layout_margin="10dp"
            android:textSize="20sp"
            android:textStyle="bold"
            android:fontFamily="@font/quick_reg"
            android:textColor="@color/text_color"/>

        <RelativeLayout
            android:orientation="vertical"
            android:id="@+id/brush_color_linear"
            android:layout_marginBottom="10dp"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="#FFFFFF">

            <EditText
                android:id="@+id/brush_edit_color"
                android:layout_centerInParent="true"
                android:background="@drawable/rounded_brn"
                android:backgroundTint="@color/colorWhite"
                android:padding="10dp"
                android:fontFamily="@font/quick_bold"
                android:lines="1"
                android:layout_width="150dp"
                android:text="#FFFFFF"
                android:gravity="center"
                android:layout_height="wrap_content" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/brush_edit_color"
                android:textColor="@color/colorPrimary"
                android:text="color code in box above will be used."
                android:textSize="12sp"
                android:textAlignment="center"/>

        </RelativeLayout>

        <SeekBar
            android:id="@+id/brush_red_seek"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:thumbTint="@color/colorRed"
            android:layout_gravity="center"
            android:layout_margin="10dp"/>

        <SeekBar
            android:id="@+id/brush_green_seek"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:thumbTint="@color/colorGreen"
            android:layout_gravity="center"
            android:layout_margin="10dp"/>

        <SeekBar
            android:id="@+id/brush_blue_seek"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:thumbTint="@color/blue"
            android:layout_gravity="center"
            android:layout_margin="10dp"/>



        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/brush_done"
            android:background="@drawable/rounded_brn"
            android:backgroundTint="@color/colorAccentBlue"
            android:layout_margin="10dp"
            android:gravity="center"
            android:text="done"
            android:textSize="20sp"
            android:fontFamily="@font/quick_bold"
            android:textColor="@color/colorWhite"
            android:textAllCaps="false"/>

    </LinearLayout>

</androidx.cardview.widget.CardView>

Coding the Color Picker

To code the Color picker, we first created a function caleed callBrushDialog(); inside the function, we first inflate a dialog using code:

Dialog brishDialog = new Dialog(MainActivity.this);
brushDialog.setContentView(R.layout.popup_temp_brush);

Next we need 3 SeekBars for red green and blue color (RGB), Button to dismiss dialog and an edittext, where user can also type a custom color code in case they find seekbar a bit complicated or if they know the color code.

All the SeekBars will have a maximum value of 255.

redSeek.setMax(255);
greenSeek.setMax(255);
blueSeek.setMax(255);

Color will be reflected in a Relativelayout, whose background property will be changed whenever the SeekBar value changes.

Complete code is shown below:

 void callBrushDialog(){
        
        Dialog brishDialog = new Dialog(MainActivity.this);
        brushDialog.setContentView(R.layout.popup_temp_brush);

        final SeekBar redSeek, greenSeek, blueSeek, brushSizeSeek;
        final Button brushDone;
        final EditText brushEditText;
        final RelativeLayout brushRelative;

        mPhotoEditor.setBrushDrawingMode(true);
        mPhotoEditor.setBrushSize(brushSize);
        mPhotoEditor.setOpacity(100);

        redSeek = brushDialog.findViewById(R.id.brush_red_seek);
        greenSeek = brushDialog.findViewById(R.id.brush_green_seek);
        blueSeek = brushDialog.findViewById(R.id.brush_blue_seek);
        brushSizeSeek = brushDialog.findViewById(R.id.brush_seekbar);
        brushDone = brushDialog.findViewById(R.id.brush_done);
        brushEditText = brushDialog.findViewById(R.id.brush_edit_color);
        brushRelative = brushDialog.findViewById(R.id.brush_color_linear);

        brushEditText.setText(brushColor);
        brushRelative.setBackgroundColor(Color.parseColor(brushColor));

        brushSizeSeek.setMax(100);
        brushSizeSeek.setProgress(brushSize);

        brushSizeSeek.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                brushSize = progress;
                mPhotoEditor.setBrushSize(brushSize);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

        redSeek.setMax(255);
        greenSeek.setMax(255);
        blueSeek.setMax(255);

        redSeek.setProgress(redValue);
        greenSeek.setProgress(greenValue);
        blueSeek.setProgress(blueValue);

        redSeek.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                redValue = progress;
                String hex = String.format("#%02x%02x%02x", redValue, greenValue, blueValue);
                brushRelative.setBackgroundColor(Color.parseColor(hex));
                brushColor = hex;
                brushEditText.setText(brushColor);

            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

        greenSeek.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                greenValue = progress;
                String hex = String.format("#%02x%02x%02x", redValue, greenValue, blueValue);
                brushRelative.setBackgroundColor(Color.parseColor(hex));
                brushColor = hex;
                brushEditText.setText(brushColor);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

        blueSeek.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                blueValue = progress;
                String hex = String.format("#%02x%02x%02x", redValue, greenValue, blueValue);
                brushRelative.setBackgroundColor(Color.parseColor(hex));
                brushColor = hex;
                brushEditText.setText(brushColor);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

        brushDone.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(brushEditText.getText().toString().length() < 7){

                    showToast(TemplateActivity.this,"Invalid Color Input");

                } else {
                    brushDialog.dismiss();
                    brushColor = brushEditText.getText().toString();
                    mPhotoEditor.setBrushColor(Color.parseColor(brushColor));
                }

            }
        });


        Window window = brushDialog.getWindow();
        assert window != null;
        WindowManager.LayoutParams wlp = window.getAttributes();

        wlp.gravity = Gravity.CENTER;
        wlp.flags = WindowManager.LayoutParams.FLAG_DIM_BEHIND;
        Objects.requireNonNull(brushDialog.getWindow()).setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        brushDialog.show();



    }