Fancy UI

All About Crazy IT Stuff

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 ,

30 Responses

Subscribe to comments with RSS.

  1. Hey man, thx so much for this…

    I tried to fix these ugly looking gradients for the past two days before discovering your article.

    Much appreciated.

    DieBagger

    September 18, 2010 at 4:54 pm

  2. You are Welcome

    imrabti

    September 18, 2010 at 5:40 pm

    • Thank you so much !
      Keep your post 😀

      viet bui

      April 14, 2011 at 10:47 am

  3. Im new in this android thing

    All 1NFO

    October 4, 2010 at 2:53 am

  4. Amazing! This problem has been a PITA for quite some time. Thanks…

    Matej

    November 28, 2010 at 10:35 pm

  5. such a win! this is a great approach!

    stephen bussard

    April 25, 2011 at 11:15 pm

  6. Nice tutorial thanks!!

    Shaista Naaz

    April 28, 2011 at 6:29 pm

    • I’m preparing a Huge article about how to build fancy looking android Apps, Stay tunned. 🙂

      imrabti

      April 28, 2011 at 6:32 pm

  7. onAttachedToWindow() is a method of the View, not the Activity. I assume I need to create a LinearLayout subclass which overrides this method.

    Greg

    April 30, 2011 at 11:10 pm

  8. my gradient colors have alpha but my shape is rendered opaque. Any ideas?

    sabine

    May 10, 2011 at 12:09 am

  9. Thanks so much for this tip, I was already thinking of doing the gradients as pngs…This is much better 🙂

    Ondrej Cermak

    May 11, 2011 at 9:06 am

  10. just place your image file in res/raw instead res/drawable.

    Alex

    May 17, 2011 at 3:36 pm

  11. @Greg It is part of Activity, starting from API 5. That confused me at first as well.

    Artem Russakovskii

    June 16, 2011 at 8:37 pm

  12. I’ve spent several hours trying to figure out how to do this now, and your method is simple and clear. Thanks!

    Danny Battison (@gabehabe)

    September 18, 2011 at 7:34 pm

  13. Thanks so much, this helped me out a lot.

    Young

    October 21, 2011 at 5:50 pm

  14. Thanks!

    Miguel

    November 11, 2011 at 4:29 pm

  15. Thanks, so Helpful… 🙂

    danz27

    December 6, 2011 at 8:09 am

    • Great tutorial. Did you ever do that post on buttons?

      snaef999

      December 11, 2011 at 3:35 am

  16. Any followup on the button and the big article on fancy looking app?

    Andy

    December 25, 2011 at 12:08 am

    • I’ll, It is just that I’m busy working a GWT article.

      imrabti

      December 25, 2011 at 9:52 am

  17. Thank You So much… Just what i was looking for..

    Bimal

    March 8, 2012 at 11:54 am

  18. Thanks man!

    luan dos santos

    July 13, 2012 at 12:40 am

  19. Thanks a lot buddy!

    Igor Khrupin

    July 13, 2012 at 7:48 pm

  20. This is awesome, simple and clear. However I need to add a background image to an activity without having it getting so stretched. Any idea?

    Willfred

    January 10, 2013 at 2:03 pm

  21. If I enter that in my Activity I get the following error:
    > The method onAttachedToWindow() of type AddData must override or implement a supertype method

    Any idea how to resolve that?

    Zahid

    August 15, 2013 at 3:21 pm

  22. Thanks for your post buddy! was useful to me 🙂

    devarajan

    August 20, 2013 at 6:38 am

  23. Gracias!.. excelente post

    Servando

    September 24, 2013 at 9:37 pm

  24. thanks mate, it helps alot i just love this gradient.

    MegaOps

    March 22, 2014 at 7:25 pm

  25. worked like a charm! Thanks for this article!

    Mo

    May 25, 2014 at 6:45 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: