color

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: 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' <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" /> <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"/> 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(); }

color

Android Color Picker Example | Build from Scratch