Fancy UI

All About Crazy IT Stuff

Archive for the ‘Android’ Category

High Quality Radial Gradient In Android

with 30 comments

These days I’ve been working on an android application, that will published in next following weeks. As you all know the visual part of any application is essential to its success. With that in mind I am determined to give my best to style the app.

After creating a decent gradient on Photoshop, I need to port it to my android application. Of course it is stupid to export the gradient as PNG image and use it on application, because android API already offer the possibility to draw Gradient using code, that way my application will work across different screen resolution on various devices.

Here is my Photoshop result of how I wanted my gradient to look like.

Photoshop Gradient

Porting the gradient to android is easy. All you need to do is to create a shape then use it as a background on some UI object. Here is an example of my shape that I use as a background on a LinearLayout, its a simple xml in drawable folder named radialback.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
    android:startColor="#7faacaFF"
    android:endColor="#cfe1edFF"
    android:gradientRadius="326"
    android:type="radial"/>
</shape>

To use it as a background for my components container that is a LinearLayout check the code below.

<?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/radialback">
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    android:textColor="#000000"/>
</LinearLayout>

The problem with this gradient is that on some android devices it doesn’t look as good and smooth as in Photoshop, to fix this issue you add the following code to the Activity :

@Override
public void onAttachedToWindow() {
	super.onAttachedToWindow();
	Window window = getWindow();
	window.setFormat(PixelFormat.RGBA_8888);
}

Hope this helps someone, on the next post I will talk about how to make insanely beautiful button.

Advertisements

Written by imrabti

September 5, 2010 at 8:03 pm

Posted in Android

Tagged with ,