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="" android:shape="rectangle">

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=""

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 :

public void onAttachedToWindow() {
	Window window = getWindow();

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

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.


    September 18, 2010 at 4:54 pm

  2. You are Welcome


    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…


    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. πŸ™‚


      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.


    April 30, 2011 at 11:10 pm

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


    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.


    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.


    October 21, 2011 at 5:50 pm

  14. Thanks!


    November 11, 2011 at 4:29 pm

  15. Thanks, so Helpful… πŸ™‚


    December 6, 2011 at 8:09 am

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


      December 11, 2011 at 3:35 am

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


    December 25, 2011 at 12:08 am

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


      December 25, 2011 at 9:52 am

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


    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?


    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?


    August 15, 2013 at 3:21 pm

  22. Thanks for your post buddy! was useful to me πŸ™‚


    August 20, 2013 at 6:38 am

  23. Gracias!.. excelente post


    September 24, 2013 at 9:37 pm

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


    March 22, 2014 at 7:25 pm

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


    May 25, 2014 at 6:45 pm

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: