Even more gradient buttons for Android


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

[code lang=”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>

[/code]

Then we need a simple gradient color class:

GradientColor

[code lang=”java”]
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;
}
}
[/code]

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

AllGradients

[code lang=”java”]
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;
}
[/code]

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

ButtonAdapter

[code lang=”java”]
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;
}
}
[/code]

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

NewGradient

[code lang=”java”]
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;
}
[/code]

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/

13 thoughts on “Even more gradient buttons for Android”

  1. Reza says:

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

  2. James says:

    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.

    1. Folkert says:

      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. Gabriel says:

    Thank you, It is very nice!

  4. Gabriel says:

    How can I download this project?

    1. Folkert says:

      I’ve added the project as a download. You can grab it from here:
      http://code.google.com/p/android-gradients-sample/downloads/list

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

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

  8. Smile says:

    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 !

  9. dasebasto says:

    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)

  10. Suhas says:

    You are crazy ! awesome stuff.

  11. Robert says:

    Dude! I have been looking for an example of programmatic gradient buttons all over! Thank you so much for this. I was going insane trying to find this! Everyone is using damn XML to do their buttons.

    Thanks again,

    Robert

  12. Pingback: More buttons? | Dibbus.com
  13. Trackback: More buttons? | Dibbus.com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">