About design and nearby

How to Support Different Screens for Android: Working with XAML and 9-patch

Posted: March 19th, 2015 | Author: | Filed under: Development, Mobile Design and Development, Tips and Tricks | Tags: , , , , , , | No Comments »

According to Android Developer, all user interface elements in an Android app are built using View and ViewGroup objects. A View is an object that draws something on the screen that the user can interact with. A ViewGroup is an object that holds other View (and ViewGroup) objects in order to define the layout of the interface.
Android provides a collection of both View and ViewGroup subclasses that offer common input controls (such as buttons and text fields) and various layout models (such as a linear or relative layout).

Long story short, once I am to produce a custom progress bar for Android application. Unfortunately, my client was not happy with a well-known ProgressBar. It should be realized as line with circles – to show the steps and the progress a user does and cover all Android devices:

Progress Bar for Android application

My decision was to use a NinePatchDrawable graphic (9-patch) – a stretchable bitmap image, which will be automatically resized to fit the contents of the View. It’s a standard *.png image with an extra 1-pixel-wide border saved with the extension .9.png into the res/drawable/ directory of Android project. With 1-pixel black lines drawn on the edge you can define how to scale and fill your image: top & left – scalable area, bottom & right – fill area:

nine-patch image guides

Actually, there are 2 options for the borders only: they are be black (#000000) or transparent. The four corners of the image should always be clear.

My custom progress bar – ProgressEmpty.9.png (enlarged a lot :) in Photoshop) looks

custom progress bar - 9-patch


and in combination with XAML it’s set as a background image:

  1. <?xml version="1.0" encoding="utf-8"?>
  2.     <LinearLayout
  3.         android:layout_width="fill_parent"
  4.         android:layout_height="wrap_content"
  5.         android:layout_weight="100"
  6.         android:background="#ededed">
  7.         <ImageView
  8.             android:layout_width="fill_parent"
  9.             android:layout_height="wrap_content"
  10.             android:layout_centerVertical="true"
  11.             android:layout_weight="100"
  12.             android:background="@drawable/ProgressEmpty" />
  13.     </LinearLayout>

*I used ImageView as there no any text here. You can use TextView if needs as well:

  1. <TextView  
  2. android:layout_width="fill_parent"
  3. android:layout_height="wrap_content"
  4. android:layout_centerVertical="true"
  5. android:layout_weight="100"
  6. android:text="Your text comes here."  
  7. </TextView >

It fits portrait and landscape view at any device as well:

custom progress bar on Android device

*9-patch images scale up and they do not scale down. You should start with a minimum size for your image.

Share Button

Check Related Posts:

Leave a Reply

  • two + = 5

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now