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:

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


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:

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.
This is the stretchable button.
button.9.png (738 Bytes) Viewed 1608 times
Headless android
hlessandroid.png (1.2 KiB) Viewed 1618 times
back button that needs to stretch
backbutton.png (696 Bytes) Viewed 1684 times
This is the edited android image
myandroid.png (1.02 KiB) Viewed 1687 times
Posts: 28
Joined: Mon Jan 04, 2010 9:01 pm
Location: Seattle


Return to Novice Tutorials

Who is online

Users browsing this forum: No registered users and 7 guests