Custom Map markers and custom backgrounds (solved)

Basic Tutorials concerning: GUI, Views, Activites, XML, Layouts, Intents, ...

Custom Map markers and custom backgrounds (solved)

Postby waynesilver » Sun Feb 28, 2010 1:29 am

I posted a question earlier about map markers, and trying to get the images to have transparent backgrounds so the map is not blocked by a square marker with an image in it.

The answer:
OK I installed "Pixel Editor" and used it to create my icons and graphics for the buttons. I surrounded the graphic in an "invisible" color selected off the pallet of selectable colors along the bottom of the working screen. I saved the file as a png. I rendered my headless android (again no real androids were sacrificed for this experiment) and produced the image at the bottom. This also works for buttons, if you put a 1 pixel wide black line at the very top and at the very left most row of the "Stretchable" areas. I then saved the custom button as custbutton.9.png.

the "9" tells android how to interpret the black line. If you want to know how, you will have to ask someone who has far more knowledge than I do. At this point I know that it works, but I don't know how or why.

I hope this helps.





I am trying to do some custom backgrounds for buttons and the same problem comes up: I get square corners and a background that does not scale with the buttons.

I think this all part of the same problem: I am not using the right tool with the right settings to create the images. I must be missinterpreting the documentation and examples that talk about a white boarder around the image and a black line along the top and left side for the expandable button background.

Here's a quick way to reproduce the problem:

Follow the directions to create the MapView program as described on:
http://developer.android.com/resources/tutorials/views/hello-mapview.html

For the icon I first used the image copied from the page:

Image


Next I edited the picture in Microsoft Paint, and cut off the little guy's antennae. I'm not cruel and no real androids were harmed in that experiment. I surrounded the new picture with a pixel thick boarder of white, copied from the boarder that was around the rest of the image, and then copied the black that was there, outside the boarder.


I saved the image as myandroid.png and copied the file to the layout folder. Pointed the activity to the new pic and ran the program.

The image was displayed with a full square background and shadow, not the android shaped image and shadow that was there.

Custom Button background:
Follow the directions for the Relative Layout example at:
http://developer.android.com/resources/tutorials/views/hello-relativelayout.html

Next, I created an image to expand as a background for the button called backbutton.png. It too is surrounded by a white boarder and black filled on the corners, the top and one side per documentation I found in "Android Programming Tutorials" on page 298.

The background does not expand, nor do the corners round.

I wished I could show you screenies of what I have.


How do you create the images for the custom backgrounds and the images for the custom map markers? I need to know what image editor to use and the file attributes to set, so the images expand and display with the proper void spaces in them.

Thank you in advance.
Attachments
button.9.png
This is the stretchable button.
button.9.png (738 Bytes) Viewed 1229 times
hlessandroid.png
Headless android
hlessandroid.png (1.2 KiB) Viewed 1239 times
backbutton.png
back button that needs to stretch
backbutton.png (696 Bytes) Viewed 1305 times
myandroid.png
This is the edited android image
myandroid.png (1.02 KiB) Viewed 1308 times
waynesilver
Developer
Developer
 
Posts: 28
Joined: Mon Jan 04, 2010 9:01 pm
Location: Seattle

Top

Return to Novice Tutorials

Who is online

Users browsing this forum: No registered users and 9 guests