Android create custom button with two different color diagonally

In this post we set two different color to button diagonally with custom parameters.

Two create custom button we create custom button class in java.

By using this class you can set two different color to button with given percentage.

See more latest update about android here

In this example below method is used for pass two different color and percentage parameter.

If you pass 30% to method parameter and first color is GREEN and second color is RED than output is like this

Suppose if you pass 60% to parameter and first color is GREEN and second color is RED than output is like this

Method code is like this

public void setBackgroudColors(int upperColor,int lowwerColor,float colorPercentage)
{
m_color1 = upperColor;
m_color2 = lowwerColor;
percentage = colorPercentage;
invalidate();
}

Full code for custom class is below

public class CustomButton extends Button
{

float mTextX;
float mTextY;
private Paint m_paint1 = new Paint();
private Paint m_paint2 = new Paint();
private int m_color1 = 0XFF92C84D; 
private int m_color2 = 0XFFFF0000; 
private float percentage = 0;

public CustomButton(Context context)
{
super(context);
}

public CustomButton(Context context,AttributeSet attributeSet)
{
super(context,attributeSet);
}

@Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
m_paint1.setColor(m_color1);
m_paint2.setColor(m_color2);
int perHeight = (int) ((percentage * getHeight())/100);
int perWidth = (int) ((percentage * getWidth())/100); 

RectF rectf = new RectF(0, 0, getWidth() , getHeight());

Point a = new Point(0, 0);
Point b = new Point(0, perHeight*2);
Point c = new Point(perWidth*2, 0);

Path path = new Path();
path.moveTo(a.x, a.y);
path.lineTo(b.x, b.y);
path.lineTo(c.x, c.y);
path.close();

canvas.drawPath(path, m_paint1);

CharSequence text = getText();
canvas.drawText(text, 0, text.length(), mTextX, mTextY, getPaint());
}

public void setBackgroudColors(int upperColor,int lowwerColor,float colorPercentage)
{
m_color1 = upperColor;
m_color2 = lowwerColor;
percentage = colorPercentage;
invalidate();
}

@Override
public void onSizeChanged(int w, int h, int oldW, int oldH) {

measureText();
}

private void measureText() {
Paint paint = getPaint();
mTextX = (getWidth() - paint.measureText(getText().toString())) / 2;
mTextY = (getHeight() - paint.ascent() - paint.descent()) / 2;
}

@Override
protected void onTextChanged(CharSequence text, int start, int before, int after) {
measureText();
}

}

From your Activity Create button like this

final CustomButton button = (CustomButton)findViewById(R.id.customButton1);
button.setBackgroudColors(Color.GREEN,Color.RED,30);
button.setText("Test button");
button.setTextColor(Color.BLACK);

Finally in your XML file put your button code like this

<"YOUR PACKAGE NAME".CustomButton
android:id="@+id/customButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

I hope this post is helpful for you...

See more update about android here

Thanks...