Make a button from an image (PNG)

xspotlivin · by **xspotlivin** » Sun Mar 08, 2009 10:48 pm

I'd like to know how to make a button out of a PNG and display it on my canvas (using drawBitmap?). When I click on this button, it will take me to a new activity. All this will be in the onClickListener.

So, how do I take a PNG, make a button with it, and draw it on my canvas? I looked at ImageButton, but I'm unsure how it works or how to draw it on the canvas.

Thanks for your help. A code sample would also be greatly appreciated.

Jenselense · by **Jenselense** » Mon Mar 09, 2009 12:15 pm

You can use a "normal" button and then set its background to the png with

button.setBackgroundResource(resid)

(you can do this in the activity's layout.xml as well....use the android layouteditor in Eclipse!)

I don't know whether this is the best way but it works...

JJ

MrSnowflake · by **MrSnowflake** » Mon Mar 09, 2009 12:20 pm

When you are making custom controls on a generic drawing surface (like Canvas) then you can't use onClickLIstener() and stuff by default, because you have to implement every action yourself (handling the focus with arrow buttons/trackball, handling x/y of touch events, ... basically everything you can think of).

xspotlivin · by **xspotlivin** » Tue Mar 10, 2009 4:12 am

Ok, thanks for the replies. I'm going to describe what I'm trying to do better, because I'm still unsure of the solution, and I could really use some help.

I have a clock application (attached image). For each shaded region I want to place a button on top of it (a different button depending on some xml data). I don't know how to create a button from the attached image and then draw it in the correct spot. My xml data has the time of the shaded region, so I can figure out what angle to put the button. Below is the relevant code from my ClockView class. The for loop is looping through each element in an xml document (which I pass from the activity class).

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

public class ClockView extends View {
 
        protected Document clockXML;
 
        public ClockView(Context context) {
 
                super(context);
 
                this.setBackgroundDrawable(getResources().getDrawable(R.drawable.clockbackgroundwithoutnames));
 
        }
 
        @Override
 
        protected void onDraw(Canvas canvas) {          
 
                // Clock-size rectangle to draw compliance windows
 
                RectF clockRect = new RectF(86, 6, 394, 314);
 
                // Create a node list containing each reminder
 
                NodeList reminderNodes = this.clockXML.getElementsByTagName("Reminder");
 
                int reminderLength = reminderNodes.getLength();
 
                // Loop through each reminder drawing compliance windows
 
                for (int i=0; i < reminderLength; i++) {
 
                        String timeScheduledString = reminderNodes.item(i).getFirstChild().getFirstChild().getNodeValue();
 
                        float timeScheduled = Float.valueOf(timeScheduledString.trim());
 
                        String complianceWindowString = reminderNodes.item(i).getFirstChild().getNextSibling().getFirstChild().getNodeValue();
 
                        float complianceWindow = Float.valueOf(complianceWindowString.trim());
 
                        String administered = reminderNodes.item(i).getFirstChild().getNextSibling().getNextSibling().getFirstChild().getNodeValue().trim();
 
                        float compStartAngle = -90 + ((timeScheduled*360)/24) - (complianceWindow*15);
 
                        float complianceSweepAngle = (complianceWindow*2)*15;
 
                        // If we are in the daytime.
 
                        if (compStartAngle < 90 && compStartAngle >= -90) {
 
                                // If a reminder is scheduled in the daytime, but window overlaps into the night.
 
                                if ((compStartAngle + complianceSweepAngle) > 90) {
 
                                        // Compute new angles and sweeps
 
                                        float startAngle1 = compStartAngle;
 
                                        float sweepAngle1 = 90 - startAngle1;
 
                                        // Draw for daytime
 
                                        canvas.drawArc(clockRect, startAngle1, sweepAngle1, true, this.amColor);
 
                                        float sweepAngle2 = complianceSweepAngle - sweepAngle1;
 
                                        // Draw for nighttime
 
                                        canvas.drawArc(clockRect, 90, sweepAngle2, true, this.pmColor);
 
                                // Else, just draw normally.
 
                                } else {
 
                                        canvas.drawArc(clockRect, compStartAngle, complianceSweepAngle, true, this.amColor);
 
                                }
 
                        // If we are in the nighttime
 
                        } else if (compStartAngle >= 90) {
 
                                // If a reminder is scheduled in the nighttime, but window overlaps into the day.
 
                                if ((compStartAngle + complianceSweepAngle) > 270) {
 
                                        // Compute new angles and sweeps
 
                                        float startAngle2 = compStartAngle;
 
                                        float sweepAngle3 = 270 - compStartAngle;
 
                                        // Draw for nighttime
 
                                        canvas.drawArc(clockRect, startAngle2, sweepAngle3, true, this.pmColor);
 
                                        float sweepAngle4 = complianceSweepAngle - sweepAngle3;
 
                                        // Draw for daytime
 
                                        canvas.drawArc(clockRect, 270, sweepAngle4, true, this.amColor);
 
                                // Else, just draw normally.
 
                                } else {
 
                                        canvas.drawArc(clockRect, compStartAngle, complianceSweepAngle, true, this.pmColor);
 
                                }
 
                        // If a reminder is scheduled in the early daytime, but window overlaps into the nighttime (backwards)
 
                        } else {
 
                                // Compute new angles and sweeps
 
                                float startAngle3 = compStartAngle;
 
                                float sweepAngle5 = -90 - compStartAngle;
 
                                // Draw for nighttime
 
                                canvas.drawArc(clockRect, startAngle3, sweepAngle5, true, this.pmColor);
 
                                float sweepAngle6 = complianceSweepAngle - sweepAngle5;
 
                                // Draw for daytime
 
                                canvas.drawArc(clockRect, -90, sweepAngle6, true, this.amColor);
 
                        }
 
                        // I want to create the buttons here for each reminder                  
 
                }
 
        }
 
}
Parsed in 0.042 seconds,  using GeSHi 1.0.8.4

I'm sure if seeing my activity class is relevant. Know that my activity class contains the same xml document. My onCreate just sets the contentView to the ClockView and starts a thread to update the xml document. How do I achieve putting these buttons where I want them? I'm almost positive I can't do this in the layout xml because the buttons location is determined by the xml data. By the way, the times on the screenshot are 8pm and 9am with a 2 hour window.

Suggestions?

xspotlivin · by **xspotlivin** » Wed Mar 11, 2009 3:32 am

Can you layer different views and/or layouts on top of each other? I thought maybe I could use a ViewGroup with an absolute layout for the buttons and my custom ClockView. Can you put the absolute layout with a transparent background on top of the ClockView?

MrSnowflake · by **MrSnowflake** » Wed Mar 11, 2009 1:30 pm

xspotlivin wrote:Can you layer different views and/or layouts on top of each other? I thought maybe I could use a ViewGroup with an absolute layout for the buttons and my custom ClockView. Can you put the absolute layout with a transparent background on top of the ClockView?

Yes you can layer views some how, but I don't know how. Take a look at the source of the launcher in the Android sources.

Make a button from an image (PNG)

Make a button from an image (PNG)

Who is online