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

Main.xml

<?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"
    >    
    <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"/>
</LinearLayout>

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:

inc_blue_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/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>
</RelativeLayout>

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

Buttons

Buttons drawable(@drawable/button_blue):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#2c68e7" />
            <stroke
                android:width="1dp"
                android:color="#2c68e7" />
           <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#859dbc"
                android:endColor="#4a6c9b"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#375075" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

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:
Image:

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

Styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<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>
	<style name="ButtonText" parent="BaseTopBar">
	    <item name="android:textSize">14dp</item>
	</style>
	<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>
	<style name="PageTitle" parent="BaseTopBar">
	    <item name="android:textSize">20dp</item>	    
	</style>
</resources>

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!
Whoaha!