Dibbus.com

Where design meets development

Even more gradient buttons for Android

| 11 Comments


Because I receive lots and lots of great response to my post for Android gradients, I thought it might be helpfull to post even more gradients in a different way.

This time, all those gradients are created programmatically which gives you total control of the button and the gradient!

First we need a grid in main.xml:

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainlayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:background="#ffffff" android:orientation="vertical">
    <GridView
    	android:layout_height="fill_parent"
    	android:layout_width="fill_parent"
    	android:id="@+id/gvButtons"
    	android:verticalSpacing="5dp"
    	android:horizontalSpacing="5dp"
    	android:numColumns="5"/>
</LinearLayout>

Then we need a simple gradient color class:

GradientColor

package com.dibbus.android.demo.gradients;
public class GradientColor {
	private int startColor;
	private int endColor;
	public GradientColor(int start, int end){
		startColor = start;
		endColor = end;
	}
	public int getStartColor() {
		return startColor;
	}
	public void setStartColor(int startColor) {
		this.startColor = startColor;
	}
	public int getEndColor() {
		return endColor;
	}
	public void setEndColor(int endColor) {
		this.endColor = endColor;
	}
}

So, all we need is some colors, well, here you go:

AllGradients

public static ArrayList AllGradients(){
		ArrayList list = new ArrayList();
		list.add(new GradientColor(0xFFcc1c4d, 0xFF9e032e));
		list.add(new GradientColor(0xFFce2029, 0xFF9e030b));
		list.add(new GradientColor(0xFF94121c, 0xFF6e060d));
		list.add(new GradientColor(0xFFa32a00, 0xFF891700));
		list.add(new GradientColor(0xFFe34234, 0xFFad2416));
		list.add(new GradientColor(0xFFff2600, 0xFFbf1d00));
		list.add(new GradientColor(0xFFff0038, 0xFFbf002a));
		list.add(new GradientColor(0xFFff4e00, 0xFFc72b00));
		list.add(new GradientColor(0xFFe85c12, 0xFFb53300));
		list.add(new GradientColor(0xFFff7518, 0xFFaa3e00));
		list.add(new GradientColor(0xFFff8f00, 0xFFf26c0d));
		list.add(new GradientColor(0xFFff9f00, 0xFFf27500));
		list.add(new GradientColor(0xFFff8249, 0xFFf06937));
		list.add(new GradientColor(0xFFd06a3e, 0xFFb55632));
		list.add(new GradientColor(0xFF964b00, 0xFF713a00));
		list.add(new GradientColor(0xFF703422, 0xFF521c13));
		list.add(new GradientColor(0xFF8c3611, 0xFF69270d));
		list.add(new GradientColor(0xFF633826, 0xFF4f1a03));
		list.add(new GradientColor(0xFF73420e, 0xFF593000));
		list.add(new GradientColor(0xFF956642, 0xFF704d32));
		list.add(new GradientColor(0xFFc18e60, 0xFF996a3d));
		list.add(new GradientColor(0xFFd27f29, 0xFFa65c11));
		list.add(new GradientColor(0xFFffb300, 0xFFed7710));
		list.add(new GradientColor(0xFFffd900, 0xFFffa400));
		list.add(new GradientColor(0xFFffca1d, 0xFFf5a71c));
		list.add(new GradientColor(0xFFfff300, 0xFFffd400));
		list.add(new GradientColor(0xFFd4de1b, 0xFFb5bf07));
		list.add(new GradientColor(0xFFc1f900, 0xFF9fde23));
		list.add(new GradientColor(0xFF9cc925, 0xFF7ba60d));
		list.add(new GradientColor(0xFF6c8b1b, 0xFF57730e));
		list.add(new GradientColor(0xFF697800, 0xFF4a5200));
		list.add(new GradientColor(0xFF515918, 0xFF343b04));
		list.add(new GradientColor(0xFF5ba825, 0xFF377d00));
		list.add(new GradientColor(0xFF49b700, 0xFF378900));
		list.add(new GradientColor(0xFF1c881c, 0xFF156615));
		list.add(new GradientColor(0xFF007e3e, 0xFF005b2a));
		list.add(new GradientColor(0xFF009876, 0xFF007259));
		list.add(new GradientColor(0xFF00b3a2, 0xFF009488));
		list.add(new GradientColor(0xFF338594, 0xFF006779));
		list.add(new GradientColor(0xFF0095b7, 0xFF007089));
		list.add(new GradientColor(0xFF00aeef, 0xFF0090bf));
		list.add(new GradientColor(0xFF21d1f7, 0xFF00a2d9));
		list.add(new GradientColor(0xFF3794dd, 0xFF136db5));
		list.add(new GradientColor(0xFF0064bf, 0xFF004f96));
		list.add(new GradientColor(0xFF3983b6 ,0xFF246594));
		list.add(new GradientColor(0xFF0085ff, 0xFF0064bf));
		list.add(new GradientColor(0xFF2870e3, 0xFF1e54aa));
		list.add(new GradientColor(0xFF003494, 0xFF00205d));
		list.add(new GradientColor(0xFF481884, 0xFF33036e));
		list.add(new GradientColor(0xFF7c279b, 0xFF5d1d74));
		list.add(new GradientColor(0xFFce3c92, 0xFFab156d));
		list.add(new GradientColor(0xFFffaac9, 0xFFcc7695));
		list.add(new GradientColor(0xFFff95a3, 0xFFd9737f));
		list.add(new GradientColor(0xFFfb5589, 0xFFc43b67));
		list.add(new GradientColor(0xFFf42376, 0xFFd02261));
		list.add(new GradientColor(0xFFff308f, 0xFFbf246b));
		list.add(new GradientColor(0xFFe33e61, 0xFFb3213e));
		return list;
	}

Having a list of colors we need to create an Adapter with gradient filled buttons:

ButtonAdapter

package com.dibbus.android.demo.gradients;
import android.content.Context;
import android.graphics.Color;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.GridView;
public class ButtonAdapter extends BaseAdapter {
    private Context mContext;
    public ButtonAdapter(Context c) {
        mContext = c;
    }
    public int getCount() {
        return Gradients.AllGradients().size();
    }
    public Object getItem(int position) {
        return null;
    }
    public long getItemId(int position) {
        return 0;
    }
    public View getView(int position, View convertView, ViewGroup parent) {
        Button b;
        if (convertView == null) {
            b = new Button(mContext);
            b.setLayoutParams(new GridView.LayoutParams(LayoutParams.FILL_PARENT, 100));
            b.setPadding(8, 8, 8, 8);
            b.setTextSize(25f);
            b.setTextColor(Color.WHITE);
        } else {
            b = (Button) convertView;
        }
        final GradientColor gd = Gradients.AllGradients().get(position);
        b.setBackgroundDrawable(Gradients.NewGradient(gd));
        b.setText("Button " + (position + 1));
        return b;
    }
}

Notice the Gradients.NewGradient(gd); method which is just a simple helper to generate the brackground drawable from the 2 given colors:

NewGradient

public static GradientDrawable NewGradient(GradientColor gc) {
	GradientDrawable gd = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, new int[] {gc.getStartColor(), gc.getEndColor() });
	gd.setCornerRadius(0f);
	gd.setStroke(2, gc.getStartColor());
	gd.setCornerRadius(3f);
	return gd;
}

And that’s all there is. Quite easy with lots of great gradients!
If you just like the standard way of using the gradients like I mentioned in my other post about gradients, you can just take the two colors from the list and create a xml drawable from there.

More samples

I have posted this code on code.google.com so you can download the complete project:
http://code.google.com/p/android-gradients-sample/

Author: Folkert

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.

11 Comments

  1. I have learned from your previous article.
    Glad you created another good article/

  2. What NewGradient variations did you use to create the gradients in the other sample images? The code in your GoogleCode project generates the first set of gradients, but not the others.

    • I’ve used some variations from the colors in the class in the project. Each color has 56 variations as you can see in the code. You can take any combination:

      For example, the color name Ruby has 5 different colors, from light to dark.
      list.add(new GradientColor(“Ruby”, 0xFFf5d2db, 0xFFeba4b8, 0xFFcc1c4d, 0xFF9e032e, 0xFF7a0222, 0xFFffffff));

  3. Thank you, It is very nice!

  4. How can I download this project?

  5. Pingback: きれいなグラデーションボタンを使う | eiKatouの日記

  6. Shout out from Ireland, love the buttons utilized them for my own app. Many Thanks. Site bookmarked :)

  7. Tyvm for sharing this information. Not only did it help me out on my project, but it also made development a whole lot more fun :)

    Site bookmarked !

  8. Thanks for this nice technique. I had to reduce the PADDING to 1dp because my button text was partially hidden (this happened when I reduced the height of the button)

  9. You are crazy ! awesome stuff.

Leave a Reply

Required fields are marked *.

*


Page optimized by WP Minify WordPress Plugin