Android Color Picker Example | Build from Scratch

Android Color Picker

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.

Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!

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:

Android Color Picker

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();



    }

View Comments (0)