Android Icon Size – Launcher and Google Play Store

What is the Android Icon Size for an App?

For Android launcher icons you will need 6 sizes of PNG or JPG files. In pixels these are 48×48, 72×72, 96×96, 144×144, 192×192 and 512×512. The first five are for the App and the last one for when the App is deployed to the Google Play store. These are the final size of the icons and you must allow for a small margin, hence the area the icon is drawn in will be a bit smaller. For low density screens Android halves the 72×72 icon, but it is possible to include a 36×36 icon in the App for completeness, making 7 icons in total. An Android icon size table in this article summarizes all the relevant information.

144x144 XXHDPI Android Icon Size96x96 XHDPI Android Icon Size72x72 HDPI Android Icon Size48x48 MDPI Android Icon Size36x36 LDPI Android Icon Size

Android Screen Densities

The number of dots (pixels) per inch that an Android device’s screen holds determines how sharp the image on the screen looks. The more Dots Per Inch (DPI) the sharper the image. Android groups screen densities into several classes, medium, high, extra high, extra extra high and extra extra extra high! These are referred to as MDPI, HDPI, XHDPI, XXHDPI and XXXHDPI. There is also a low density class, LDPI, however not many new devices have a low density screen and thus LDPI is no longer important. MDPI is around 160 DPI, HDPI around 240 DPI, XHDPI around 320 DPI, XXHDPI around 480 DPI and XXXHDPI around 640 DPI. (LDPI is around 120 DPI). It is the screen density that determines the Android icon size used.

Android Launcher Icon Name and Location

When a new Android project is created in Eclipse or Android Studio the launcher icon file is called ic_launcher.png. You can choose the Create custom launcher icon option in the New Android Application wizard (New Project wizard in Android Studio). This allows you to configure the launcher icon based on the default Android robot, or an image file, or from several clip art images, or finally from some text. If an icon is not configured the default robot is used. The various size icons are created and placed into a folder in the projects res directory. The folders are drawable-mdpidrawable-hdpi, drawable-xhdpi and drawable-xxhdpi. It you need a low density, LDPI, icon create put a 36×36 PNG or JPG in the drawable-ldpi folder. To support Cupcake devices (API level 3) add a drawable folder and copy the 48×48 PNG or JPG file from drawable-mdpi to it. For the latest highest density displays create a drawable-xxxhdpi folder for a 192×192 icon.

The icon is referenced in the Android manifest. In the projects AndroidManifest.xml file the <application> tag has an android:icon attribute. This is set to @drawable/ic_launcher. The icon file’s name does not need to be ic_launcher, it can be called something else. For example if all the icon files for the various sizes were called my_app_icon.png then the attribute in the application tag could be set as android:icon=@drawable/my_app_icon.

Notice how the reference to the icon only needs the drawable part of the folder name. Android works out the correct density icon to use. Android will also scale one of the other density icons if an icon at a certain density is missing (though that may result in a fuzzy icon being displayed on the screen).

Android Icon Margins

The Android Operating System (OS) has evolved since it was released. This means that the icon requirements have changed over the years. The main changes are the increase in screen sizes and screen densities. Low density and medium density devices were common. Now high density and extra high density devices are the most common.

Previously it was recommend that the icon included a margin around one twelfth of the total size between the edge of the icon and the image it contained. For example the medium density icon is 48×48 pixels, one twelfth of this is 4, giving a margin of 4 pixels around the icon. This means the area available for the image is 40×40 (48 minus the margin of 4 pixels on each side).

However, the bigger screens on today’s devices gives more room for the icons so a smaller margin can be used, for example one eighteenth of the icon size. The margin allows for spaces between the icons on a screen and to allow for any drop shadows or parts of the image that stick out a little.

The High Resolution Application Icon needed for the Google Play store must be 512×512 in size. This image can have a margin to allow for padding or drop shadows, for example it could be 464×464 on the 512×512 canvas giving 48 pixels for padding and drop shadows. Again the size of the margin may depend upon the type of image being used, but the final file will be a 512×512 in size.

Android Bitmap Assets Ratios

With the 48×48 icon as baseline the 6 launcher icons have the ratios 0.75, 1, 1.5, 2, 3 and 4. These ratios apply to the screen densities. So a high density screen (HDPI) is 1.5 times a medium density screen (MDPI). I.e. 1.5 * 160 = 240. Likewise for the other densities. These ratios generally apply to all images used in an App that target different screen densities. If a bitmap is 100×100 on a medium density screen use the ratios to calculate the bitmap sizes required for other densities (75, 150, 200, 300 and 400 in this case). When generating icons and bitmap assets work at a high resolution and scale down, this prevents pixelation of the images. E.g. a canvas of 576×576 or 864×864 is good for design work. An art-board of those sizes is bigger than the biggest icon required (512×512 for the Google Play store). Even better use a vector drawing package such as Inkscape which effectively allows working at any resolution.

Android Icon Size Table

The following table summarizes all the above information.

Android Icon Size and Location for Apps
Density size Location Ratio Screen Margin
XXXHDPI 192×192 drawable-xxxhdpi 4 640 DPI 12 to 16 pixels
XXHDPI 144×144 drawable-xxhdpi 3 480 DPI 8 to 12 pixels
XHDPI 96×96 drawable-xhdpi 2 320 DPI 6 to 8 pixels
HDPI 72×72 drawable-hdpi 1.5 240 DPI 4 to 6 pixels
MDPI 48×48 drawable-mdpi 1 160 DPI 3 to 4 pixels
MDPI 48×48 drawable (Cupcake) 1 160 DPI 3 to 4 pixels
LDPI 36×36 drawable-ldpi 0.75 120 DPI 2 to 3 pixels
NA 512×512 Google Play NA NA As required

You will find a few icons on the Android Graphic Resources page, and of course many thousands more on the web.

For more information on Android Icons see the Iconography web page on the Android Developers web site.

SeekBar Android Example Code and Tutorial

Code To Demo A ProgessBar That Can Be Dragged

Understand how the SeekBar is used in an Android App. This tutorial provides some SeekBar Android example code for you to try out. This demo code for the SeekBar appears in the API Demos App that comes with the Android Software Development Kit (SDK). The API Demos App is very large and it can be difficult to find the sample code you need. Putting the SeekBar Android example here allows it to be easily referenced.

The SeekBar is a useful User Interface (UI) control. It allows a user to easily vary an integer value simply by dragging left or right. Although for very large integer values you may not have fine control and a EditText may be a better option. For small values, such as a percentage, it is a good solution for providing a value setting interface.

What Does an Android SeekBar Look Like?

The following two images compares the look of the SeekBar. The first shows it on older (original theme) devices, the second on recent Holo themed devices.

The Android SeekBar in action on older devices:

SeekBar Android Example Older Devices

The Android SeekBar in action on newer devices:

Seekbar Android Example Holo Devices

The SeekBar Android Example Code

Start by generating a new App in Eclipse, here it is called SeekBar Demo. (If you are new to Android programming see the articles Set Up Windows for Android Development and Your First Android Hello World Java Program.) You can of course add the SeekBar to an existing App by adapting the code appropriately. With the App open replace the contents of the MainActivity.javaactivity_main.xml and strings.xml files with the code shown below (keeping your chosen package name in the Java source code file). This code produces the screens shown above. Continue reading

The Android Development Options Article is Merged with a New Entry

Android Development Options - Android Robot LogoThe article that used to be on this web page has been merged with a new article called List of IDEs for Android App Development, Which is Best for You?

ADT Android Bundle to Quickly Setup Android Development

Start Writing Google Apps on Windows

If you want to write Android Applications (Apps) you need the right software. Google provides free access to this software for Windows, Apple Mac and Linux PCs. An App is a computer program and like all programs it needs designing, writing, compiling, testing and debugging. This is all done in an Integrated Development Environment (IDE). There are many IDEs from which to choose. This article deals with the IDE provided by Google in the ADT Bundle for Windows. So read on for tips and information on installing and running the ADT Android bundle.

Use the ADT Android Bundle For Android Apps

Apps are written in computer language. Google’s preferred language for Android is the widely used Java. A popular IDE for writing Java programs is called Eclipse, from the Eclipse Foundation. The Eclipse IDE can be installed on to most PCs, including Windows PCs. For Android App development the Eclipse IDE requires the Android Software Development Kit (SDK) and the Android Development Tools (ADT), both from Google. All of these (Eclipse, SDK and ADT) are available in a large zip file from the Android Developers web site, the ADT Bundle for Windows.

Alternative Android App Development Environments

The ADT Android bundle is not the only option from Google. Instead of using the large zip file, install Eclipse, the Android SDK and ADT in separate steps. Good for those who need more control over the installation. (See our article Setup Android Development on Windows.)

A new option from Google is the Android Studio. Studio is currently under development so is only available under a beta release and thus subject to change. Studio does not use the Eclipse IDE, it uses the IntelliJ IDEA environment thus giving you a choice of editors. To set up Android Studio see our article Android Studio Install for Windows Based PCs.

Apps can be programmed in computer languages other than Java, using IDEs from companies other than Google. See the last section of this article for alternatives to using Java.

Install Java JDK

Java is Google’s preferred language for App development. As such the Java runtime and development kit needs installing before the ADT Android bundle. Go to the Java download page at http://www.oracle.com/technetwork/java/javase/downloads/index.html.

The Java Download Button

Select the Java download button and follow the instructions. Accept the license agreement and select the correct Windows installation EXE for your PC. (If unsure whether you are running 32-bit or 64-bit Windows use the System option in Control Panel. Under Basic Information the System type tells you if it is a 32-bit or 64-bit Operating System.) Run the Java installer to set up Java on your PC. See our article Installing Java on Windows (32-Bit or 64 Bit) if you need more help.

Download ADT Android Bundle

The Android SDK download page is at http://developer.android.com/sdk/index.html. Click on the Download the SDK ADT Bundle for Windows button. Accept the Terms and Conditions displayed by clicking the check box. Choose either 32-bit or 64-bit to match your Windows installation.

Another Download the SDK ADT Bundle for Windows button is enabled. Click the button to save the adt-bundle-windows-x86-YYYYMMDD.zip (32-bit) or adt-bundle-windows-x86_64-YYYYMMDD.zip (64-bit) file to your PC. Where YYYYMMDD is the release date for the package. E.g. adt-bundle-windows-x86-20130717.zip is the 32-bit ADT Android bundle released on July 17th 2013.

Extract Zip File Contents to Install Eclipse IDE and Android SDK and Tools

All the contents in the zip download need to be extracted. This can be done with Windows Explorer, however, on Windows XP you may get errors copying the files using Explorer. If so use an archive tool, such as 7Zip, to extract all the ADT Android bundle files.

The Android Developers website recommends extracting to a “Development” directory under your normal home location. However, that means a lot of program files are stored with your normal work. Some Android developers extract to C:\Program Files (this is a protected directory and you made be asked for permission to copy here), other developers install to a directory on the root of C: or other hard drive, such as C:\Android or C:\Development. Since the zip file contains a root directory named after itself simply copy that directory to a hard drive root. For example the contents of adt-bundle-windows-x86-20130717.zip can be extracted to C:\adt-bundle-windows-x86-20130717.

Add a Shortcut to Eclipse to the Desktop

Eclipse ShortcutTo access the App development environment quickly add a shortcut to your PC desktop. Using Windows Explorer open the eclipse directory in the extracted contents. Bring up the context menu (usually right-click) on the eclipse.exe program and select Create shortcut. Drag and drop (move) the new shortcut onto the desktop.

Run It!

The ADT Android Bundle is now installed. Run the eclipse.exe program (you can use the shortcut if you created one). First time in you will be asked to contribute usage statistics to Google. Select Yes or No and press the Finish button.

Create an Android Virtual Device (AVD) using the AVD Manager. An AVD allows testing of Apps without the need to use a physical device. Use the toolbar icon or select Android Virtual Device Manager from the Window menu. See our article Set Up an Android Virtual Device for App Testing for further information.

To test on a physical Android device install the manufacturers driver. With the driver installed use a USB cable to connect the device to your PC. You will need to enable USB debugging in the device settings.

Test your ADT Android Bundle installation by creating a simple App. See our article Your First Android Hello World Java Program. If you installed the ADT bundle to a drive other than C: you may get issues trying to run an App on an AVD. See our article Windows Symbolic Links for Android Installations on the D: Drive for a solution.

ADT Android Bundle Install Summary

Here is a summary of installing the ADT Bundle for Windows:

  • Download and install the Java JDK.
  • Download the ADT Bundle for Windows zip file.
  • Extract the contents to your PC.
  • Run it! (eclipse.exe).

Other Android App Development Options

If you struggle developing in Java, with the Google recommended IDEs for App development, there are other options. See our post Android Development Options, Tools and IDEs. It lists alternative development packages and languages.

AVD Sound Playback for Android App Testing

No AVD Sound When Testing an Android App?

On creating an Android Virtual Device (AVD) audio playback is normally OK. However, if using an old saved AVD there may be no AVD sound. When this happens messages may be seen in LogCat, including one or more of the following. (It varies by the API level of the AVD.):

AudioTrack Error obtaining an audio buffer, giving up.

AudioTrack obtainBuffer timed out (is the CPU pegged?).

AudioFlinger could not create track, status: -12.

Be aware that the last error is also seen with other sound playback issues. These other issues are usually memory related: such as the audio file is to big; too much data in the file (e.g. sample rate to high or varies to much); or the limit (32) on the number of audio tracks attempting to be played has been reached.

Note: If you don’t see messages in LogCat the following solutions may still apply. But also check that the PC’s sound is not off! (Or turned down low). Even forgetting to unplug headphone may be why you have no AVD sound.

Solutions to Try When You Can’t Play AVD Sound

In earlier editions of the Android Software Development Kit (SDK) the AVDs may not have been created with audio playback enabled. Subsequent SDKs enabled audio when an AVD was created. If an AVD is started and there is no AVD sound try the following:

  • Uncheck Launch from snapshot when starting the AVD.
  • Edit the AVD config.ini file to set Audio playback support to yes.
  • Delete the AVD and recreate it.
  • Use a physical Android device.

He is a bit more detail on each solution for no AVD sound. (Please ensure that the Android SDK is up to date as well). Continue reading

How to Get View Size in Android

Determining the Size of an Android View or Screen at Run Time

For efficient bitmap handling or dynamic View creation in an App the area that a widget or layout is using needs to be known. If no fixed sizes are allocated at design time the size of a View may not be known until an App is executed. This is because of the wide range of display sizes that Android supports. The example code snippets in this articles shows how to read the screen size and the size of Views as the App runs. To run the example code you will need to create a new Android project (those new to Android programming can view the article Your First Android Hello World Java Program to see how), we called our App View Size.

In the layout designer for activity_main.xml (or whatever you called your layout) add another TextView, called textXY, next to the existing Hello world! widget. Change the Text on the first TextView to X,Y. Add this code to the oncreate method in MainActivity.java (or whatever class you are using), you will need an imports for TextView and DisplayMetrics. :

This is the code running on an AVD with a 320×480 screen:
Size of Android Screen

He is the layout used for this screen: Continue reading

Access Android View in Activity

In Android Get View Defined in XML in Activity Code

The UI screens for an App can be designed outside of the code. They are stored in XML files. This eases support for multiple screen sizes and types and helps with software maintenance. Classes in the Android SDK have methods used to access the UI components. Screens are composed of various implementations of the Android View class. The major sub-classes for Views are widgets and ViewGroups. The widget class is not to be confused with Widgets that can be added to the Android home screen. Instead View widgets are the normal components with which the Android device users interact, including the ButtonCheckboxEditText (a text box), ImageViewRadioButtonProgressBarTextView (label) and many more. Several widgets sit in a ViewGroup which provides a container for laying out components. Different ViewGroups provide different types of layouts, including RelativeLayoutLinearLayoutScrollViewWebView and others. ViewGroups can contain other ViewGroups as well as widgets therefore building complex displays by nesting different Views is possible.

Create a Basic Android Screen

A Simple Android ScreenFor this tutorial create a new, simple Android App project and call it Button Demo (if you don’t know how see Your First Android Hello World Java Program). A simple screen that just has a button on it was created using the starting layout, we kept the default layout name of activity_main.xml. In Eclipse use the Package Explorer to open the activity_main.xml file (in the res/layout folder). Using the Graphical Layout view (selected via the tabs at the bottom of the editor window) delete the TextView, showing Hello world!, and drag and drop a Button from the Form Widgets folder onto the screen. This screen’s code is stored in the activity_main.xml file:

To show how this view is accessed from the App’s code the text on the button will be changed and it displays a message when it is clicked. Continue reading

A Swipe View Android Example for Screen Paging

Simple Flip View Tutorial Using ViewPager for the Android Screen Swipe Effect

This introductory tutorial shows how to code a simple page swiping App with the ViewPager class. It is the basis for more complex view flipping examples, such as an image swiping gallery (to replace the Android Gallery widget that was deprecated in API 16). The ViewPager controls the swiping (flicking the screen left and right) between multiple screens or pages of data. The ViewPager is fed with the multiple screens by a PageAdapter (or the sub-classes FragmentPageAdapter and FragmentStatePagerAdapter).

ViewPager in Action

The implementation of the PageAdapter will create (and destroy) the pages to be shown in the ViewPager. It will load the pages with the data (such as text or images) that must be displayed on the individual pages. This tutorial’s PageAdapter allows swiping through a series of strings (text). Once this example is complete it is easily extended. The follow on tutorial turns this example into a swiping image gallery with each image showing a caption. The following steps are performed to complete the screen swiping demo:

  • Start a new Android App in Eclipse.
  • Add the ViewPager widget to the Apps screen.
  • Define the data (text) to be displayed on each swiped page.
  • Define the layout for the swiped pages.
  • Implement PageAdapter which will create each page and load it with data.
  • Test the App.

Start a New Android App

This tutorial assumes that you are using Eclipse to try out this example code. Start by generating a new App in Eclipse, we called it Swipe Demo. (If you are new to Android programming see the articles Set Up Windows for Android Development and Your First Android Hello World Java Program.) You can of course add the page swiping effect to an existing App.

Adding the ViewPager Widget to the App’s Layout

The ViewPager is part of the Support Library, which is added by default to a new App created with a recent version of the Android API (the Support Library used to be known as the compatibility package). The ViewPager is referenced using it’s package name of android.support.v4.view.ViewPager. Open the default activity layout (or open the layout you are using) and add the ViewPager using the XML editing window, give it the id of viewPager. The ViewPager sits under the TextView (if using the layout created by the default Blank Activity after creating a new Android Application Project).

The TextView is also centered and the text changed from Hello world! to Please Swipe. It is made larger by assigning ?android:attr/textAppearanceMedium to the textAppearance attribute.

Defining the Data to Show on Each ViewPager Page

In this example some text is shown on each swiped page. Here the strings are stored in an array. The array could be defined in code but here they are in a resource file. Open the strings.xml file and add a string array. We are using the code names for Android version releases, all named after desserts: Continue reading

Center a TextView on a Android Screen

Understand How Layouts Center Views

Android RectanglesSetting the correct XML attributes to move a ViewGroup or widget (View) to the middle of the App’s display is easier if you know how Android screens are laid out. Everything on the screen is built up in rectangles, starting with the screen itself. A LinearLayout (which is a ViewGroup) sitting on the screen is a rectangle, a TextView in the LinearLayout is a rectangle. Each rectangle has two sets of layout attributes associated with it, attributes that refer to its contents and attributes that refer to its parents layout requirements. The latter is easy to determine because they all start with layout_. The number of layout_ attributes that a widget, such as a TextView, can access will vary depending upon the ViewGroup it is inside:

ViewGroup LayoutParams List

To help remember that the layout_ attributes refer to the items parent ViewGroup think of it as “attributes that lay outside” of the rectangle.

The two layout_ attributes that are always required are android:layout_width and android:layout_height. These are set to tell the parent ViewGroup how big the rectangle should be to contain the child widget or ViewGroup. These are usually set to either match_parent (previously known as fill_parent) which lets the ViewGroup decide how big the rectangle should be (usually as big as possible), or wrap_content which makes the rectangles just big enough to hold what is inside of them. However, they can also be set to physical dimensions, such as setting layout_height to 40px to make the View’s height 40 pixels high.

Centring Android TextWhen a new Android project is started in Eclipse with a blank Activity some default Hello world! text is displayed in a TextView. What if we wanted to center this in the middle of the screen (note we use the American spelling instead of the UK spelling of centre to match the Android SDK API settings). Looking at the various layout attributes for the TextView it would appear that android:layout_gravity=”center” would work. This though has no effect because the default RelativeLayout arranges child Views based on each others position. Instead to center the TextView set android:gravity=”center” for the RelativeLayout. Because this attribute does not start with layout_ it refers to it contents, in this case the TextView. This time centering works, provided the TextView’s  android:layout_width and android:layout_height are set to wrap_content, making it small enough to be moved to the central location.

See also the Layouts article in the developer documentation.

How to Set a Color In Android

Changing Colors in Android and Naming Them for Convenience

An Android color is a 32-bit integer value consisting of four eight bit parts, ARGB. The four parts are the amount of red, green and blue that is in the color, plus how opaque (see through) is the color, which is called the alpha value, the lower the alpha value the more transparent the color appears. (Note that in the United Kingdom color is spelt colour.)

The alpha value is the highest (first) byte in the 32-bit value followed by the red, then green and finally the blue byte. Hence it is referred to as an ARGB value with each letter representing the type and order of the byte. This format allows for easy representation as a hexadecimal number in Java:

The three byes representing the color values provide over 16 million color possibilities in Android (256 x 256 x 256 = 16,777,216). A color depth better than the human eye (stated in the Wikipedia article). Plus all these colors can range from transparent, 0, to opaque, 255.

Named Color Resources in Android

To help with handling colors in Android they can be made into a resource for easy of reuse. Either open an existing resource file or create a new one. For example in Eclipse with a Android project open select the res/values folder. Then use the File menu (or the context menu on the values folder) to add an Android XML File. Give the file a name, e.g. colors.xml and add a color element:

Use getColor() to read the color value from the resource.

If the color is solid (full alpha value) then the color resource can leave the alpha value out. Though for clarity and future maintenance it is wise to be explicit and always define all four parts of an Android color: Continue reading