Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a bitmap from a RGB color

I am making an app that uses 3 SeekBars to allow the user to create a RGB color. I want to then set this color as a background to the user using the WallpaperManager.

If I have 3 values, one for red, one for green, and one for blue, is there a way to create a square bitmap that is filled only with that one color?

like image 746
Kinoscorpia Avatar asked Jan 06 '23 04:01

Kinoscorpia


2 Answers

You could do this to create a squared bitmap with a selected color.

// Here you create the bound of your shape
Rect rect = new Rect(0, 0, 1, 1);

// You then create a Bitmap and get a canvas to draw into it
Bitmap image = Bitmap.createBitmap(rect.width(), rect.height(), Config.ARGB_8888);
Canvas canvas = new Canvas(image);

//You can get an int value representing an argb color by doing so. Put 1 as alpha by default
int color = Color.argb(alpha, red, green, blue);

//Paint holds information about how to draw shapes
Paint paint = new Paint();
paint.setColor(color);

// Then draw your shape
canvas.drawRect(rect, paint);
like image 102
Gauthier Avatar answered Jan 08 '23 19:01

Gauthier


Here is a sample project that I created which uses custom view. This custom view has setColor() method, where you pass RGB values separately, when seek bar is changed, the color is updated. And when button is clicked it generates bitmap. Download full project here from github. One thing is missing, seekbar value at max is 100, you should map it to 0-255, in order to avail all possible color combinations.

Now, whenever you change seekbar, it change color at runtime. Since this was fun task to do it was worth investing my time. You can also create jpeg file to allow user to use that file, refer here. Below is the source code:

MainActivity:

public class MainActivity extends AppCompatActivity {

    SeekBar skRed;
     SeekBar skGreen;
    SeekBar skBlue;


    RgbView myView ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        skRed=(SeekBar) findViewById(R.id.redBar);
         skGreen=(SeekBar) findViewById(R.id.greenBar);
        skBlue=(SeekBar) findViewById(R.id.blueBar);
        myView = (RgbView) findViewById(R.id.customView);

        myView = (RgbView) findViewById(R.id.customView);

        // This is sample color combination replace with your seekbar values

        Button colorChange=(Button) findViewById(R.id.button);

        colorChange.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {


                 // Bitmap creation code
                myView.setDrawingCacheEnabled(true);

                myView.buildDrawingCache();


                // bm is your required bitmap
                Bitmap bm = myView.getDrawingCache();

                Toast.makeText(MainActivity.this,"Bitmap Ready",Toast.LENGTH_LONG).show();

            }
        });


        skRed.setOnSeekBarChangeListener(changeListener);
        skGreen.setOnSeekBarChangeListener(changeListener);
        skBlue.setOnSeekBarChangeListener(changeListener);
    }

    SeekBar.OnSeekBarChangeListener changeListener=new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {


    // calling setColor() of custom view , passing current seekbar values from 3 seekbars 

    myView.setColor(skRed.getProgress(),skGreen.getProgress(),skBlue.getProgress());


            }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    };


}

CustomView: RgbView.java

public class RgbView extends View {

    Paint p=new Paint();
    public RgbView(Context context) {
        super(context);
        init(null, 0);
    }

    public RgbView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0);
    }

    public RgbView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs, defStyle);
    }

    private void init(AttributeSet attrs, int defStyle) {
        p.setColor(Color.RED);
    }

    public void setColor(int Red, int Green, int Blue)
    {

        p.setARGB(255, Red, Green, Blue);
        invalidate();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawRect(0,0, getHeight(),getWidth(),p);
    }



}

xml for MainActivity:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.talha.projects.bitmaptest.MainActivity">

  <com.talha.projects.bitmaptest.RgbView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:id="@+id/customView"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Load into Bitmap"
        android:id="@+id/button"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />

    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:id="@+id/redBar"

        android:layout_below="@+id/customView"
        android:layout_alignRight="@+id/customView"
        android:layout_alignEnd="@+id/customView" />

    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:id="@+id/greenBar"
        android:layout_below="@+id/redBar"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:id="@+id/blueBar"
        android:layout_below="@+id/greenBar"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

Here is the output: enter image description here

Link to project.

Created using Android Studio, minimum API level 15. Remember to change the value mapping on seekbar from 0-255, currently is 0-99.

like image 23
Talha Avatar answered Jan 08 '23 19:01

Talha