Tutorial for creating an icon for an Android button: Part 1 of 2

Update

The Android developer site has some great icon guidelines now.  I recommend taking a look.  If you have Photoshop or another program that supports vector shapes and drop-shadows, you can see the proper settings there.

Nick says

… you can do the whole thing in Inkscape without having to go into GIMP, by using a clip mask.

Duplicate your arrow, then select both this and the inverse arrow and do Object > Clip > Set. The inverse arrow will be clipped to only show the content contained within the arrow shape.

Introduction

For my Android application, Green Mileage, I created a number input dialog box.  One of the buttons in the dialog is a backspace key.  Right now, it’s just a button that says, “Back”.  When typing, it’s function is not immediately intuitive, so I wanted to replace it with an ImageButton.  To skip to the example, scroll down. Unfortunately, none of the Android icons look quite right.  I found an image of a red X and a trash can.  Neither would look like a backspace, so I decided to create my own.

Since Android is open source, I assumed that Google would have created some kind of template for button images.  I thought I would find a PSD, but after much searching, could not.  Rather than pay $1,000 for Photoshop, I decided to use open source applications to create the image.  Here’s how I did it.

Step 1: Get Inkscape and GIMP

Since this drawing will be made with vector graphics, it’s best to use a vector graphics program, so head on over to Inkscape’s web site and download it if you don’t already have it.  The post-processing will be done in GIMP, so grab a copy of that too.  Both have versions for Linux and Windows.

Step 2: Create the Inkscape drawing

The points on the arrow should be evenly spaced, so they shouldn’t be drawn by hand.  The arrow is really just a triangle with a rectangle dangling from its side.

  1. This tutorial is about drawing an arrow shape, but you can use most of these steps for any icon.
  2. First, let’s draw the arrow.  Pick the polygon tool: Polygon tool
  3. In the toolbar at the top of the screen, set these values.
    1. Corners: 3
    2. Spoke ratio: 0.5
    3. Rounded: 0
    4. Randomized: 0
  4. In the drawing canvas click and hold.  While holding the left mouse button, press and hold the control key.  That will help you draw the triangle so that the right side is vertical.
    triangle
  5. Select the rectangle tool and draw a rectangle for the right side of the arrow.  Make it overlap with the triangle.  Then, select both objects.  In the menu bar, click Object -> Align and Distribute.  Click the “Center on horizontal axis” button.
    trianglerectangle
  6. Now, with both objects selected, in the menu bar, click Path -> Union.
    arrow
  7. Android menu buttons have rounded corners and gradient fills.  Let’s apply those next.  With the arrow selected, in the menu bar, click Object -> Fill and Stroke.  Click the Stroke Style tab.  Select the round join and set the width to a high enough value that the corners look rounded.
  8. Select the Stroke Paint tab and pick the linear gradient.  The gradient will appear sideways, but we’ll fix it later.  Click Duplicate to create an Android button gradient.  Click Edit… Select the first stop at the top of the window, then at the bottom of the window, set its RGBA value to 666b66ff.  Set the second stop to b2afb2ff.
  9. Select the Fill tab, create a linear gradient and set it to the one you just created for the stroke.
  10. Close the Fill and Stroke dialog.
    horizontalgradientarrow
  11. To rotate the gradient, click the gradient tool, gradienttool.
  12. You’ll see two handles.  Drag the lighter side to the top of the arrow and the darker side to the bottom.  The handles will snap in to place.
    gradientarrow
  13. Android menu buttons also have an inner shadow.  Make a copy of the arrow away from the original arrow and draw a rectangle around it.  Make it a good amount larger.  Align the rectangle and the arrow the same way the triangle and rectangle were aligned before.  Then, select both the rectangle and the arrow and in the menu bar, select Path -> Exclusion.  Set the fill of the new shape to black and the path to the same gradient as the arrow, ensuring that the gradient minimum and maximum are aligned to the arrow, not the box.  Make a duplicate of the new shape and set it aside for use later.
    inversearrow1
  14. Select both the original and the new, inverse arrow and align them horizontally and vertically.
  15. Select the larger, inverse arrow and open its Fill and Stroke options,  move the blur slider to the right until it looks like a shadow.  Also adjust the alpha of the fill option until the arrow looks like it has an inner shadow.  Don’t worry if the space outside of the arrow doesn’t look right.  Then, since Android’s shadows are offset, move the inverse arrow down and to the right a bit.  The arrow keys are good for this.
    offsetshadowarrow
  16. Now, in the copy of the inverse arrow you made, set the stroke to white and the fill color to black.

Go to part 2

Posted in Android by Connor Garvey at January 24th, 2009.
Tags: , , , , , , , , ,

12 Responses to “Tutorial for creating an icon for an Android button: Part 1 of 2”

  1. Anonymous says:

    When you finished drawing your icon, you can use this plugin to export directly into your app / res folders for all densities, download here :

    https://github.com/ncornette/gimp-android-xdpi

  2. Emilio says:

    “Make a copy of the arrow away from the original arrow”?

  3. imran khan says:

    thanks for the Tutorial :) I am just starting android design

  4. Anonymous says:

    abe example programm manga tha pic nahi

  5. Jose says:

    Thank you for this tutorial. I only wish that there more quality gimp tutorials.

  6. gadjou says:

    +1 for this tutorial, +1 for Drews tip

  7. Alex says:

    Hi,
    I can’t understand how realize ” Set the fill of the new shape to black and the path to the same gradient as the arrow, ensuring that the gradient minimum and maximum are aligned to the arrow, not the box.” of step 13

    Thanks

  8. Anonymous says:

    I couldn’t follow the tutorial from step 13. I am completely a novice for using the GIMP or Inkspace. It would be a great help if you can mention each step in detail. For people like me, it is difficult to follow.

    • MrSqueezles says:

      I’m sorry that you had trouble with the tutorial. Including a description of every button click was making it far too long and would only show you the “what”, not the “how”. If you have a specific question, I’d be happy to answer it.

  9. Drew says:

    Great tutorial, although the second part is completely not necessary: Inkscape can easily handle masking.

    All you need to do is create a copy of the original shape (the arrow without surrounding rectangle) and assign it a solid fill and stroke (any colour would do). Overlap the solid arrow on the TOP of the image obtained after point 15. Select the two objects and use the menu Object | Mask | Set. You can adjust the mask if necessary.

    This solution has also the advantage of allowing to export the image at different resolutions without having to fiddle with raster images.

    • Anonymous says:

      I tried this and it didn’t work. It left me with my original shaded arrow, without the shadow. You need to set the mask colour to white, not black.

      So you line up the mask-arrow on top of your shaded arrow, select the mask and the inverted arrow then Object -> Mask ->Set

Leave a Reply