[英]android button with double border and gradient
I want to create a custom button. 我想创建一个自定义按钮。 This button should have a gradient and a two pixel border, but the inner and outer edge should be in a different color (example: inner is red and outer is yellow).
此按钮应具有渐变和两个像素边框,但内边缘和外边缘应采用不同的颜色(例如:内部为红色,外部为黄色)。
My question: how do I program the double border (like in the image)?! 我的问题:如何编写双边框(如图中所示)?!
Image: 图片:
I tried with an XML file with two strokes, but it doesn't work. 我尝试使用两个笔划的XML文件,但它不起作用。
I could do this with a 9png file, but I want to do it with pure coding. 我可以用9png文件做到这一点,但我想用纯编码来做。
btn_bg.xml btn_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<padding android:left="3.5px"
android:top="3.5px"
android:right="3.5px"
android:bottom="3.5px"/>
<solid android:color="#d4e23a"/>
</shape>
</item>
<item >
<shape android:shape="rectangle">
<padding android:left="4.5px"
android:top="4.5px"
android:right="4.5px"
android:bottom="4.5px"/>
<solid android:color="#d4413a"/>
</shape>
</item>
<item >
<shape android:shape="rectangle">
<gradient android:startColor="#37c325"
android:endColor="#2573c3"
android:angle="-90"/>
</shape>
</item>
</layer-list>
set the above xml as button background. 将上面的xml设置为按钮背景。
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:background="@drawable/btn_bg"
android:gravity="center"
android:padding="10dp"
android:textStyle="bold"
>
</Button>
Result: 结果:
If you want to go by plain Java code then you need to create a class which extends the button, write all your logic in 如果你想使用普通的Java代码,那么你需要创建一个扩展按钮的类,写下你所有的逻辑
public void onDraw(Canvas iCanvas)
. public void onDraw(Canvas iCanvas)
。
I have pasted small code snippet from one of my project. 我从我的一个项目中粘贴了一些小代码片段。 Give it a try.
试试看。 thought I have not created the gradient, I have used plain colors.
以为我没有创建渐变,我使用了普通的颜色。
public class MyButton extends Button {
private Paint m_paint1 = new Paint();
private Paint m_paint2 = new Paint();
private int m_color1 = 0XFF92C84D; // LIKE AN OLIVE GREEN..
private int m_color2 = 0XFFFF0000; // LIKE AN OLIVE GREEN..
private RectF innerRect1, innerRect2;
public MyButton(Context context) {
super(context);
setBackgroundColor(Color.BLACK);
}
public void onDraw(Canvas iCanvas) {
// draw the button background
m_paint1.setColor(m_color1);
m_paint2.setColor(m_color2);
innerRect1 = new RectF(5, 5, getWidth() - 5, getHeight() - 5);
innerRect2 = new RectF(10, 10, getWidth() - 10, getHeight() - 10);
iCanvas.drawRoundRect(innerRect1, 0, 0, m_paint1);
iCanvas.drawRoundRect(innerRect2, 0, 0, m_paint2);
}
public static RelativeLayout.LayoutParams GetRelativeParam(int iLeft,
int iTop, int iWidth, int iHeight) {
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
iHeight, iWidth);
params.leftMargin = iLeft;
params.topMargin = iTop;
return params;
}
}
and 和
RelativeLayout relLay = new RelativeLayout(this);
MyButton m_button = new MyButton(this);
setContentView(relLay);
relLay.addView(m_button, MyButton.GetRelativeParam(0, 0, 100, 500));
Put the button inside a layout that you will create just for it. 将按钮放在您将为其创建的布局中。 So set to the layout the outest background color that you want.
因此,将布局设置为您想要的最佳背景颜色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.