Apple look on Android, the horror!

Okay, uhm, this is actually going to be a weird post. Everyone who knows me, can admit I’m not a big Apple lover. I don’t hate it, I really like the beautiful designs, a great UI, a beautiful phone, but… it’s Apple, it’s Steve Jobs, it’s the blind making religion that makes lots of people unrealistic. It’s the overall assumption that it’s better than everything else. That’s why I’ll never buy Apple products!

Besides that, I’m born and raised in the Microsoft dev shed, so I really dig programming C#, which is, in my opinion, absolutely, the best language available. Linq, need I say more?

My latest program however is an Android application, but programming Android is done in Java(Java is quit similar to C# syntax) and programming Android is really fun!

The most read post on my blog is Android for gradients and I’ve received some mail about writing a post about getting the Apple look on Android(no! no! no! no!).
So, based upon my respect for my readers, here’s….. this is hard….. a kind of Apple look for Android.
It’s using pure xml and 9 patch images for a better look. Apple is using some really subtle effects for text and shadows which is not possible using xml drawables only.

Okay here we go. The file is using include files which might be handy if you are using this kind of elements as a topbar in all of your activities. Here’s the code for the main.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
    <include layout="@layout/inc_blue_bar" android:id="@+id/inc_blue"/>    
    <include layout="@layout/inc_black_bar" android:id="@+id/inc_black"/>    
    <include layout="@layout/inc_blue_bar_2" android:id="@+id/inc_black"/>  
    <include layout="@layout/inc_blue_bar_3" android:id="@+id/inc_black"/> 
    <include layout="@layout/inc_gray_bar" android:id="@+id/inc_gray"/>  
    <include layout="@layout/inc_gray_bar_2" android:id="@+id/inc_gray_2"/>

As you can see there is just a couple of includes here, representing different toolbars.

Let’s take a look at the first include, inc_blue_bar:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="" android:layout_width="fill_parent" android:id="@+id/relativeLayout1" android:layout_height="wrap_content" android:background="@drawable/bar_blue" android:layout_marginBottom="1dp">
    <Button android:id="@+id/button1" android:layout_width="wrap_content" android:text="Back" android:layout_alignParentLeft="true" android:layout_height="wrap_content" android:background="@drawable/button_blue" style="@style/ButtonText"></Button>
    <TextView android:id="@+id/textView1" android:layout_height="wrap_content" android:layout_alignTop="@+id/button1" android:layout_alignBottom="@+id/button1" android:layout_width="fill_parent" android:text="Pagetitle" style="@style/PageTitle" android:layout_toLeftOf="@+id/button2" android:layout_toRightOf="@+id/button1"></TextView>
    <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:background="@drawable/button_blue" style="@style/ButtonText" android:text="Forward"></Button>

All basic Android layout stuff. The buttons are using drawable and styles to minimize code.


Buttons drawable(@drawable/button_blue):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="">
    <item android:state_pressed="true" >
                android:color="#2c68e7" />
                android:color="#2c68e7" />
                android:radius="4dp" />
                android:bottom="10dp" />
                android:angle="270" />
                android:color="#375075" />
                android:radius="4dp" />
                android:bottom="10dp" />

Just a basic blue button, using the apple colors. I’ve created a black variant also. As you can see, a lot of subtle details are missing but it’s getting close. It’s useable as a great button and toolbar look. If you want it to look more like Apple, you to use 9-path images. This is just a sort of a brackground image with small black lines around the background. This might look kind of weird but is very powerfull. Those lines define the “padding” inside the button and the regions of the background which should be stretched. The advantage of this technique is of course using png files, so no limitations. You can create every effect possible.
Creating real Apple buttons is made easy thanks to 9-patch images.

The first 9-patch image is:

A basis blue button. Take a look at the example, third row.
The code for this button:

<Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/ButtonText"  android:layout_toLeftOf="@+id/button2" android:background="@drawable/bt_blue_bmp" android:text="Main menu"></Button>

Notice the android:background=”@drawable/bt_blue_bmp” !
So, using the 9-pact images, I can create the famous Apple Back button, quite easy:

And the button xml:

<Button android:id="@+id/button1" android:layout_width="wrap_content" android:text="Back" android:layout_alignParentLeft="true" android:layout_height="wrap_content" style="@style/ButtonText" android:background="@drawable/bt_blue_back_bmp"></Button>

I’ve created some more Apple look-a-like buttons:

Final result

Almost forgot the Styles.xml


<?xml version="1.0" encoding="utf-8"?>
	<style name="BaseTopBar">
	    <item name="android:layout_width">fill_parent</item>
	    <item name="android:layout_height">wrap_content</item>
	    <item name="android:textColor">#ffffff</item>
	    <item name="android:gravity">center</item>
	    <item name="android:layout_margin">3dp</item>	    
	    <item name="android:textStyle">bold</item>
	    <item name="android:shadowColor">#000000</item>
	    <item name="android:shadowDx">0</item>
	    <item name="android:shadowDy">-1</item>
	    <item name="android:shadowRadius">1</item>	   
	<style name="ButtonText" parent="BaseTopBar">
	    <item name="android:textSize">14dp</item>
	<style name="ButtonTextBlack" parent="BaseTopBar">
	    <item name="android:textSize">14dp</item>
	    <item name="android:textColor">#000000</item>
	    <item name="android:shadowColor">#ffffff</item>
	    <item name="android:shadowDx">0</item>
	    <item name="android:shadowDy">1</item>
	    <item name="android:shadowRadius">1</item>	   
	<style name="PageTitle" parent="BaseTopBar">
	    <item name="android:textSize">20dp</item>	    

The goal of this post is not getting the Apple look on the Android phone. Personally I really like the matte look, take a look at my latest Android app Analytix for Google Analytix. No gradients there, just matte colors.
I wanted to show you how to use 9-patch images in combination with xml drawables to create a nice looking kind of toolbar using Apple design as an example.
You can use the images and code without any restrictions. The gradients will be patented by Apple of course, using patented iHex colors, I don’t know. Use your own images, it better and safer. Stay away from those fanatics! and drugs of course!


I'm a webdeveloper, looking for the best experience, working between development and design. Just a creative programmer. When I'm getting tired of programming C#, i'd love to create 3D images in 3D Studio Max, play the guitar, create an app for Android or crush some plastics on a climbing wall or try to stay alive when iยดm descending some nice white powdered snowy mountains on my snowboard.

18 thoughts to “Apple look on Android, the horror!”

  1. Great!

    Can you post some code to download? I’m battling eclipse to put your example in the right folder. Need some help here ๐Ÿ™‚


  2. Got most stuff imported, missing is bar_blue.xml.. can make a guess of course ๐Ÿ™‚

  3. Thanks for this example! But like Chris, I need help knowing where to place your example xml and png. Unlike Chris, I haven’t got most stuff imported. Do I put xml in a drawable directory? I don’t have a drawable directory… just drawable-hdpi, -ldpi, -mdpi. Do I put it into just one of these? Please help this newbie… ๐Ÿ˜‰

  4. Its really cool and awesome best starting place for getting best designs.
    And my search for learning about good ends here.
    Thanks a lot guru

  5. hello,

    Wow this is awesome.
    thank you for this example activity it helped me a lot.
    I interested in designing, can you send me the full source code and image button.
    Please help me!


  6. Really cool. Demo would have been more awesome cause seeing it on website is one thing and having a feel of it in mobile is one thing ๐Ÿ™‚

Leave a Reply to Peter Cancel reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.