[Tut] Stateful CustomImageButton with programatic Draw

mauri · by **mauri** » Thu Feb 14, 2008 5:40 pm

Hi all

since the new SDK i'm not so happy with the buttons (grey instead of black in the Dark Theme). So decided to draw my own Buttons.

The are centenly more then one way to do this.
My goal is to draw the Image programticly, instead of producing bitmaps with a paint-programm.
Here's my way...

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
package org.anddev;
 
import android.app.Activity;
 
import android.content.Context;
 
import android.graphics.Bitmap;
 
import android.graphics.Canvas;
 
import android.graphics.Paint;
 
import android.graphics.Path;
 
import android.graphics.RectF;
 
import android.graphics.Paint.Style;
 
import android.graphics.Path.Direction;
 
import android.os.Bundle;
 
import android.view.View;
 
import android.widget.Button;
 
import android.widget.LinearLayout;
 
import android.widget.TextView;
 
import android.widget.LinearLayout.LayoutParams;
 
/*
 
 * Sample CustomImageButton
 
 * Programatic draw a own Button, whit different States
 
 * default, focused and pressed
 
 * 
 
 *  14.02.2008 by Mauri for anddev.org
 
 */
 
public class CustomImageButton extends Activity {
 
    private TextView mDebug;
 
        /** Called when the activity is first created. */
 
    @Override
 
    public void onCreate(Bundle icicle) {
 
        super.onCreate(icicle);
 
        // prepare the Layout
 
        // two Buttons 
 
        // Debug-TextView Below
 
        LinearLayout linLayoutMain = new LinearLayout(this);
 
        linLayoutMain.setOrientation(LinearLayout.VERTICAL);
 
        LinearLayout linLayoutButtons = new LinearLayout(this);
 
        linLayoutButtons.setOrientation(LinearLayout.HORIZONTAL);
 
        // buttons
 
        MyCustomButton btn1 = new MyCustomButton(this, "btn1");
 
        MyCustomButton btn2 = new MyCustomButton(this, "btn2");
 
        // a TextView for debugging output
 
        mDebug = new TextView(this);
 
        // add button to the layout
 
        linLayoutButtons.addView(btn1, 
 
                        new LinearLayout.LayoutParams(100, 100));
 
        linLayoutButtons.addView(btn2, 
 
                        new LinearLayout.LayoutParams(100, 100));
 
        // add buttons layout and Text view to the Main Layout
 
        linLayoutMain.addView(linLayoutButtons, 
 
                        new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, 
 
                                        LayoutParams.WRAP_CONTENT));
 
        linLayoutMain.addView(mDebug, 
 
                        new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, 
 
                                        LayoutParams.WRAP_CONTENT));
 
        setContentView(linLayoutMain);
 
    }
 
    // Custom Button Class must extends Button, 
 
    // because drawableStateChanged() is needed
 
    public class MyCustomButton extends Button {
 
        static final int StateDefault = 0;
 
        static final int StateFocused = 1;
 
        static final int StatePressed = 2;
 
        private int mState = StateDefault;
 
                private Bitmap mBitmapDefault;
 
                private Bitmap mBitmapFocused;
 
                private Bitmap mBitmapPressed;
 
                private String mCaption;
 
                public MyCustomButton(Context context, String caption) {
 
                super(context);
 
                mCaption = caption;
 
                setClickable(true);
 
                // black Background on the View
 
                setBackgroundColor(0xff000000);
 
                // create for each State a Bitmap
 
                // white Image
 
                mBitmapDefault = Bitmap.createBitmap(100, 100, true);
 
                // Blue Image
 
                mBitmapFocused = Bitmap.createBitmap(100, 100, true);
 
                // Green Image
 
                mBitmapPressed = Bitmap.createBitmap(100, 100, true);
 
                // create the Canvas
 
                Canvas canvas = new Canvas();
 
                // define on witch Bitmap should the Canvas draw
 
                // default Bitmap
 
                canvas.setDevice(mBitmapDefault);
 
                // create the Drawing Tool (Brush)
 
                Paint paint = new Paint();
 
                paint.setAntiAlias(true);  // for a nicer paint
 
                // draw a rectangle with rounded edges
 
                // white Line
 
                paint.setColor(0xffffffff);
 
                // 3px line width
 
                paint.setStrokeWidth(3); 
 
                // just the line, not filled
 
                paint.setStyle(Style.STROKE); 
 
                // create the Path
 
                Path path = new Path();
 
                // rectangle with 10 px Radius 
 
                path.addRoundRect(new RectF(10, 10, 90, 90),
 
                                10, 10, Direction.CCW);
 
                // draw path on Canvas with the defined "brush"
 
                canvas.drawPath(path, paint);
 
                // prepare the "brush" for the Text
 
                Paint paintText = new Paint();
 
                paintText.setAntiAlias(true);
 
                paintText.setTextSize(20);
 
                paintText.setColor(0xffffffff);  // white 
 
                // draw Text
 
                canvas.drawText(caption, 30, 55, paintText);
 
                // do some more drawing stuff here...
 
                // for the Pressed Image
 
                canvas.setDevice(mBitmapPressed);
 
                // Greed Color
 
                paint.setColor(0xff00ff00);
 
                paintText.setColor(0xff00ff00);  // white Line
 
                canvas.drawPath(path, paint);
 
                canvas.drawText(caption, 30, 55, paintText);
 
                // do some more drawing stuff here...
 
                // for the Pressed Image
 
                canvas.setDevice(mBitmapFocused);
 
                // Blue Color
 
                paint.setColor(0xff0000ff);
 
                paintText.setColor(0xff0000ff);  // white Line
 
                canvas.drawPath(path, paint);
 
                canvas.drawText(caption, 30, 55, paintText);
 
                // do some more drawing stuff here...
 
                // define OnClickListener for the Button
 
                setOnClickListener(onClickListener);
 
        }
 
                @Override
 
                protected void onDraw(Canvas canvas) {
 
                        switch (mState) {
 
                        case StateDefault:
 
                                canvas.drawBitmap(mBitmapDefault, 0, 0, null);
 
                                mDebug.append(mCaption + ":default\n");
 
                                break;
 
                        case StateFocused:
 
                                canvas.drawBitmap(mBitmapFocused, 0, 0, null);
 
                                mDebug.append(mCaption + ":focused\n");
 
                                break;
 
                        case StatePressed:
 
                                canvas.drawBitmap(mBitmapPressed, 0, 0, null);
 
                                mDebug.append(mCaption + ":pressed\n");
 
                                break;
 
                        }
 
                }
 
                @Override
 
                protected void drawableStateChanged() {
 
                        if (isPressed()) {
 
                                mState = StatePressed;
 
                        } else if (hasFocus()) {
 
                                mState = StateFocused;
 
                        } else {
 
                                mState = StateDefault;
 
                        }
 
                        // force the redraw of the Image
 
                        // onDraw will be called!
 
                        invalidate();
 
                }
 
                private OnClickListener onClickListener = 
 
                        new OnClickListener() {
 
                        @Override
 
                        public void onClick(View arg0) {
 
                                mDebug.append(mCaption + ":click\n");
 
                        }
 
                };
 
    }
 
}
 
Parsed in 0.055 seconds,  using GeSHi 1.0.8.4

bluefloyd8 · by **bluefloyd8** » Fri Feb 15, 2008 9:56 pm

Maybe post a screen shot of what you are doing so we can all see!

sm12 · by **sm12** » Sun Nov 16, 2008 1:10 am

Ok here what Ive changed to be able to run the code on SDK 1.0:
I changed "true" parameter to "Config.RGB_565". I have no idea what it means, but I was able to run it. Other default enums of config also work (ARGB_4444, ARGB_8888). Can anyone explain what is it?

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

// create for each State a Bitmap
          // white Image
          mBitmapDefault = Bitmap.createBitmap(100, 100, Config.RGB_565);
          // Blue Image
          mBitmapFocused = Bitmap.createBitmap(100, 100, Config.RGB_565);
          // Green Image
          mBitmapPressed = Bitmap.createBitmap(100, 100, Config.RGB_565);
 
Parsed in 0.031 seconds,  using GeSHi 1.0.8.4

also, instead canvas.setDevice(...) I put - canvas.setBitmap(...) - since setDevice was removed. I guess setBitmap has the exact same aim.

Output:
Attached file is a screenshot of output. When button is pressed white line turns to green, when focused (with navigation buttons) lines are blue.

Good tutorial, thanks!

BTW: What does "Config" and its value mean?

and is there a more compact way to do this?

dkkundudolan · by **dkkundudolan** » Wed Nov 19, 2008 12:15 pm

Hi mauri,

Very Good Tutorial. But one thing i want to know that, when i click on the btn1 or btn2, color is chaging. But i want to keep the changed color . means, when i click the white color btn1 , color turns to green. but if i leave pressing , color is going out. I want the green color will be there upto the next click.
So please, can anyone tell me how to do that?

Thanks a lot.....

Niketa · by **Niketa** » Wed Dec 03, 2008 12:44 pm

Hi,
I have tried this tutorial and its successfully run.
but when i tried to set Padding then its not working. i mean its no effect of Padding its only display which is by
default.

So if any solution is there then please tell me.

Thanks.

[Tut] Stateful CustomImageButton with programatic Draw

[Tut] Stateful CustomImageButton with programatic Draw

Who is online