Making your Android app look better

We all know how ugly most of the applications on the Market are. Black screens, gray buttons, white texts, all native stuff which looks good but only in the right combination. Many developers realize that, and try to do their own buttons,  which still don’t look too professional, because they simply don’t fit in. And of course, there are those who just copy some iPhone interface.

First of all, no matter what you do, if you use gradients or background images you’ll inevitably see the banding effect. Here’s an example (see the stripes?):

You can get rid of that with just two lines of code, carefully placed between super.onCreate(…) and setContentView(…) in your activity. This will activate dithering for all your activity, and increase the color range a lot:

super.onCreate(savedInstanceState);
getWindow().setFormat(PixelFormat.RGBA_8888);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DITHER);
setContentView(R.layout.main);

I’ll let you check out the result for yourself :-)

Now, that background looks pretty cool, right? It’s simple, it’s light, and very customizable. So, how did I do it?

Xml drawables. They are powerful, customizable, good looking, light, and you can create entire interfaces using them. Let’s create  file in our drawables folder named background.xml and throw this inside:

<?xml version=”1.0″ encoding=”UTF-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”>
<gradient
android:angle=”90″
android:endColor=”#fff”
android:startColor=”#999″
android:type=”linear”
/>
</shape>

You can use it like any other drawables, and here’s an example:

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:background=”@drawable/background”
>
</LinearLayout>

Simple right? Of course, you probably already knew these :-)

Now let’s create some buttons. Here are three buttons, gray, green and blue

gray:

<?xml version=”1.0″ encoding=”UTF-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”>
<solid android:color=”#F000″/>
<stroke android:width=”1px” android:color=”#BB000000″ />
<padding
android:left=”10dp”
android:top=”7dp”
android:right=”10dp”
android:bottom=”7dp”
/>
<corners
android:bottomRightRadius=”5dp”
android:bottomLeftRadius=”5dp”
android:topLeftRadius=”5dp”
android:topRightRadius=”5dp”
/>
<gradient
android:angle=”90″
android:startColor=”#777″
android:centerColor=”#777″
android:endColor=”#BBB”
android:type=”linear”
/>

</shape>

green:

<?xml version=”1.0″ encoding=”UTF-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”>
<solid android:color=”#F000″/>
<stroke android:width=”1px” android:color=”#BB000000″ />
<padding
android:left=”10dp”
android:top=”7dp”
android:right=”10dp”
android:bottom=”7dp”
/>
<corners
android:bottomRightRadius=”5dp”
android:bottomLeftRadius=”5dp”
android:topLeftRadius=”5dp”
android:topRightRadius=”5dp”
/>
<gradient
android:angle=”90″
android:startColor=”#739312″
android:centerColor=”#86a621″
android:endColor=”#9cc126″
android:type=”linear”
/>

</shape>

blue:

<?xml version=”1.0″ encoding=”UTF-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”>
<solid android:color=”#F000″/>
<stroke android:width=”1px” android:color=”#BB000000″ />
<padding
android:left=”10dp”
android:top=”7dp”
android:right=”10dp”
android:bottom=”7dp”
/>
<corners
android:bottomRightRadius=”5dp”
android:bottomLeftRadius=”5dp”
android:topLeftRadius=”5dp”
android:topRightRadius=”5dp”
/>
<gradient
android:angle=”90″
android:startColor=”#4747e0″
android:centerColor=”#5b5bcd”
android:endColor=”#6f6fcf”
android:type=”linear”
/>

</shape>

Check out how they look:

sexy, right ?

Here’s the layout I used with those buttons, which contains the text colors, shadows and everything else:

<?xml version=”1.0″ encoding=”UTF-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”>
<solid android:color=”#F000″/>
<stroke android:width=”1px” android:color=”#BB000000″ />
<padding
android:left=”10dp”
android:top=”7dp”
android:right=”10dp”
android:bottom=”7dp”
/>
<corners
android:bottomRightRadius=”5dp”
android:bottomLeftRadius=”5dp”
android:topLeftRadius=”5dp”
android:topRightRadius=”5dp”
/>
<gradient
android:angle=”90″
android:startColor=”#4747e0″
android:centerColor=”#5b5bcd”
android:endColor=”#6f6fcf”
android:type=”linear”
/>

</shape>

So, don’t be shy on using drawables, as they will make your applications a lot smaller, they scale perfectly on all screen-sizes, and adapt very well to tablets as well.

4 Responses to Making your Android app look better

  1. tvn says:

    hey,
    i’m loving this layout!

    but when try i out eclipse:
    i first get this error:

    Error in an XML file: aborting build.

    then:

    the value in version most be a quoted string

    what went wrong?

    • zrgiu says:

      check out the double quotes (“), wordpress is transforming them into something eclipse doesn’t understand.
      For example, in the first xml, this piece contains one double-quote that’s invalid: ”90″

  2. tvn says:

    I got the background running, i’m impressed with the power of XML,
    how do link the layout of the buttons with the code in layout?

    sry for the Dumb questions, but i’m a newbie

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Switch to our mobile site