Make a button from an image (PNG)

All your problems with Audio, Video and Images.

Make a button from an image (PNG)

Postby 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.
xspotlivin
Junior Developer
Junior Developer
 
Posts: 23
Joined: Thu Feb 26, 2009 8:15 am
Location: Cambridge, MA

Top

Postby 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
Jenselense
Freshman
Freshman
 
Posts: 5
Joined: Fri Feb 06, 2009 3:41 pm

Postby 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).
User avatar
MrSnowflake
Moderator
Moderator
 
Posts: 1439
Joined: Sat Feb 16, 2008 3:11 pm
Location: Flanders, Belgium

Postby 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
  1. public class ClockView extends View {
  2.  
  3.        
  4.  
  5.         protected Document clockXML;
  6.  
  7.                
  8.  
  9.         public ClockView(Context context) {
  10.  
  11.                 super(context);
  12.  
  13.                 this.setBackgroundDrawable(getResources().getDrawable(R.drawable.clockbackgroundwithoutnames));
  14.  
  15.                                        
  16.  
  17.         }
  18.  
  19.         @Override
  20.  
  21.         protected void onDraw(Canvas canvas) {         
  22.  
  23.                
  24.  
  25.                 // Clock-size rectangle to draw compliance windows
  26.  
  27.                 RectF clockRect = new RectF(86, 6, 394, 314);
  28.  
  29.                
  30.  
  31.                 // Create a node list containing each reminder
  32.  
  33.                 NodeList reminderNodes = this.clockXML.getElementsByTagName("Reminder");
  34.  
  35.                 int reminderLength = reminderNodes.getLength();
  36.  
  37.                
  38.  
  39.                 // Loop through each reminder drawing compliance windows
  40.  
  41.                 for (int i=0; i < reminderLength; i++) {
  42.  
  43.                         String timeScheduledString = reminderNodes.item(i).getFirstChild().getFirstChild().getNodeValue();
  44.  
  45.                         float timeScheduled = Float.valueOf(timeScheduledString.trim());
  46.  
  47.                         String complianceWindowString = reminderNodes.item(i).getFirstChild().getNextSibling().getFirstChild().getNodeValue();
  48.  
  49.                         float complianceWindow = Float.valueOf(complianceWindowString.trim());
  50.  
  51.                         String administered = reminderNodes.item(i).getFirstChild().getNextSibling().getNextSibling().getFirstChild().getNodeValue().trim();
  52.  
  53.                        
  54.  
  55.                         float compStartAngle = -90 + ((timeScheduled*360)/24) - (complianceWindow*15);
  56.  
  57.                         float complianceSweepAngle = (complianceWindow*2)*15;
  58.  
  59.                        
  60.  
  61.                         // If we are in the daytime.
  62.  
  63.                         if (compStartAngle < 90 && compStartAngle >= -90) {
  64.  
  65.                                 // If a reminder is scheduled in the daytime, but window overlaps into the night.
  66.  
  67.                                 if ((compStartAngle + complianceSweepAngle) > 90) {
  68.  
  69.                                         // Compute new angles and sweeps
  70.  
  71.                                         float startAngle1 = compStartAngle;
  72.  
  73.                                         float sweepAngle1 = 90 - startAngle1;
  74.  
  75.                                         // Draw for daytime
  76.  
  77.                                         canvas.drawArc(clockRect, startAngle1, sweepAngle1, true, this.amColor);
  78.  
  79.                                         float sweepAngle2 = complianceSweepAngle - sweepAngle1;
  80.  
  81.                                         // Draw for nighttime
  82.  
  83.                                         canvas.drawArc(clockRect, 90, sweepAngle2, true, this.pmColor);
  84.  
  85.                                 // Else, just draw normally.
  86.  
  87.                                 } else {
  88.  
  89.                                         canvas.drawArc(clockRect, compStartAngle, complianceSweepAngle, true, this.amColor);
  90.  
  91.                                 }
  92.  
  93.                         // If we are in the nighttime
  94.  
  95.                         } else if (compStartAngle >= 90) {
  96.  
  97.                                 // If a reminder is scheduled in the nighttime, but window overlaps into the day.
  98.  
  99.                                 if ((compStartAngle + complianceSweepAngle) > 270) {
  100.  
  101.                                         // Compute new angles and sweeps
  102.  
  103.                                         float startAngle2 = compStartAngle;
  104.  
  105.                                         float sweepAngle3 = 270 - compStartAngle;
  106.  
  107.                                         // Draw for nighttime
  108.  
  109.                                         canvas.drawArc(clockRect, startAngle2, sweepAngle3, true, this.pmColor);
  110.  
  111.                                         float sweepAngle4 = complianceSweepAngle - sweepAngle3;
  112.  
  113.                                         // Draw for daytime
  114.  
  115.                                         canvas.drawArc(clockRect, 270, sweepAngle4, true, this.amColor);
  116.  
  117.                                 // Else, just draw normally.
  118.  
  119.                                 } else {
  120.  
  121.                                         canvas.drawArc(clockRect, compStartAngle, complianceSweepAngle, true, this.pmColor);
  122.  
  123.                                 }
  124.  
  125.                         // If a reminder is scheduled in the early daytime, but window overlaps into the nighttime (backwards)
  126.  
  127.                         } else {
  128.  
  129.                                 // Compute new angles and sweeps
  130.  
  131.                                 float startAngle3 = compStartAngle;
  132.  
  133.                                 float sweepAngle5 = -90 - compStartAngle;
  134.  
  135.                                 // Draw for nighttime
  136.  
  137.                                 canvas.drawArc(clockRect, startAngle3, sweepAngle5, true, this.pmColor);
  138.  
  139.                                 float sweepAngle6 = complianceSweepAngle - sweepAngle5;
  140.  
  141.                                 // Draw for daytime
  142.  
  143.                                 canvas.drawArc(clockRect, -90, sweepAngle6, true, this.amColor);
  144.  
  145.                         }
  146.  
  147.                        
  148.  
  149.                         // I want to create the buttons here for each reminder                 
  150.  
  151.                
  152.  
  153.                 }
  154.  
  155.         }
  156.  
  157. }
Parsed in 0.043 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?
Attachments
clockscreen.JPG
clockscreen.JPG (14.7 KiB) Viewed 286 times
box_check.png
box_check.png (568 Bytes) Viewed 286 times
xspotlivin
Junior Developer
Junior Developer
 
Posts: 23
Joined: Thu Feb 26, 2009 8:15 am
Location: Cambridge, MA

Postby 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?
xspotlivin
Junior Developer
Junior Developer
 
Posts: 23
Joined: Thu Feb 26, 2009 8:15 am
Location: Cambridge, MA

Postby 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.
User avatar
MrSnowflake
Moderator
Moderator
 
Posts: 1439
Joined: Sat Feb 16, 2008 3:11 pm
Location: Flanders, Belgium

Top

Return to Multimedia Problems

Who is online

Users browsing this forum: No registered users and 16 guests