Android custom button style "very common"

Source: Internet
Author: User

Let's see one today. Dynamically implement some effects by rewriting the button, such as rounded rectangles, circles, pressed font changes, background color changes, background images, etc.

To illustrate this, this implementation is absolutely not unique, and can be implemented simply through an XML file, only to make the style of the control completely code-ready and easier to package and apply to other projects

Here are a few pictures:


Figure 1 Initial state Figure 2 Press the TEXT0 of the first line


Figure 3 Press the second row of TEXT1 Figure 4 Press the third line of TEXT2, hold down the screen, there is no hint to toast

Here's a look at the code, a total of two classes, a layout file

1 Buttonm.java: Rewrite button, can be individually packaged and applied to other items

To illustrate this, this implementation is absolutely not unique, and can be implemented simply through an XML file, only to make the style of the control completely code-ready and easier to package and apply to other projects








Package Landptf.control;





Import Android.content.Context;


Import Android.graphics.Color;


Import android.graphics.drawable.GradientDrawable;


Import Android.util.AttributeSet;


Import android.view.Gravity;


Import android.view.MotionEvent;


Import Android.view.View;


Import Android.widget.Button;


/**


* Override button, custom button style


* @author LANDPTF


* @date 2015-6-8


*/


public class Buttonm extends button{


Private Gradientdrawable The style of the gradientdrawable;//control


private string backcolors = "";//Background color, String type


private int backcolori = 0;//background color, int type


private string backcolorselecteds = "";//pressed background color, String type


private int backcolorselectedi = 0;//pressed background color, int type


private int backgroundimage = 0;//background image, only provides ID


private int backgroundimageseleted = 0;//pressed background image, only provided ID


private string textcolors = "";//Text color, String type


private int textcolori = 0;//text color, int type


private string textcolorseleteds = "";//pressed text color, String type


private int textcolorseletedi = 0;//pressed text color, int type


Private float radius = 8;//fillet radius


private int shape = 0;//fillet style, rectangle, circle, etc., because the rectangle has an ID of 0, the default is rectangular


Private Boolean fillet = false;//Whether rounded corners are set





Public Buttonm (context context, AttributeSet attrs, int defstyle) {


Super (context, attrs, Defstyle);


Init ();


}





Public Buttonm (context context, AttributeSet Attrs) {


This is (context, attrs, 0);


}





Public Buttonm {


This is (context, NULL);


}





private void init () {


Change the default background color of the button to transparent, I do not like the original color


if (fillet) {


if (gradientdrawable = = null) {


gradientdrawable = new Gradientdrawable ();


}


Gradientdrawable.setcolor (color.transparent);


}else {


SetBackgroundColor (color.transparent);


}


Set text to center by default


Setgravity (Gravity.center);


Set Touch events


Setontouchlistener (New Ontouchlistener () {


@Override


public boolean Ontouch (View arg0, motionevent event) {


Press the change style


SetColor (Event.getaction ());


Set to false here to prevent the Click event from being masked


return false;


}


});


}


Change Style


private void SetColor (int state) {


if (state = = Motionevent.action_down) {


Press the


if (Backcolorselectedi!= 0) {


To determine whether to set a pressed background-color int


if (fillet) {


if (gradientdrawable = = null) {


gradientdrawable = new Gradientdrawable ();


}


Gradientdrawable.setcolor (Backcolorselectedi);


}else {


SetBackgroundColor (Backcolorselectedi);


}


}else if (!backcolorselecteds.equals ("")) {


if (fillet) {


if (gradientdrawable = = null) {


gradientdrawable = new Gradientdrawable ();


}


Gradientdrawable.setcolor (Color.parsecolor (backcolorselecteds));


}else {


SetBackgroundColor (Color.parsecolor (backcolorselecteds));


}


}


Determines whether the color of the pressed text is set


if (Textcolorseletedi!= 0) {


SetTextColor (Textcolorseletedi);


}else if (!textcolorseleteds.equals ("")) {


SetTextColor (Color.parsecolor (textcolorseleteds));


}


Determine if a pressed background image is set


if (backgroundimageseleted!= 0) {


Setbackgroundresource (backgroundimageseleted);


}


}


if (state = = motionevent.action_up) {


Lift up


if (Backcolori = = 0 && backcolors.equals ("")) {


If the background color is not set, the default is transparent


if (fillet) {


if (gradientdrawable = = null) {


gradientdrawable = new Gradientdrawable ();


}


Gradientdrawable.setcolor (color.transparent);


}else {


SetBackgroundColor (color.transparent);


}


}else if (Backcolori!= 0) {


if (fillet) {


if (gradientdrawable = = null) {


gradientdrawable = new Gradientdrawable ();


}


Gradientdrawable.setcolor (Backcolori);


}else {


SetBackgroundColor (Backcolori);


}


}else {


if (fillet) {


if (gradientdrawable = = null) {


gradientdrawable = new Gradientdrawable ();


}


Gradientdrawable.setcolor (Color.parsecolor (backcolors));


}else {


SetBackgroundColor (Color.parsecolor (backcolors));


}


}


If you set the font color, the default is black


if (Textcolori = = 0 && textcolors.equals ("")) {


SetTextColor (Color.Black);


}else if (Textcolori!= 0) {


SetTextColor (Textcolori);


}else {


SetTextColor (Color.parsecolor (textcolors));


}


if (backgroundimage!= 0) {


Setbackgroundresource (backgroundimage);


}


}


}





/**


* Set the background color of the button, if not set, the default is transparent


* @param BackColor


*/


public void Setbackcolor (String BackColor) {


This.backcolors = BackColor;


if (Backcolor.equals ("")) {


if (fillet) {


if (gradientdrawable = = null) {


gradientdrawable = new Gradientdrawable ();


}


Gradientdrawable.setcolor (color.transparent);


}else {


SetBackgroundColor (color.transparent);


}


}else {


if (fillet) {


if (gradientdrawable = = null) {


gradientdrawable = new Gradientdrawable ();


}


Gradientdrawable.setcolor (Color.parsecolor (BackColor));


}else {


SetBackgroundColor (Color.parsecolor (BackColor));


}


}


}





/**


* Set the background color of the button, if not set, the default is transparent


* @param BackColor


*/


public void Setbackcolor (int backcolor) {


This.backcolori = BackColor;


if (Backcolori = = 0) {


if (fillet) {


if (gradientdrawable = = null) {


gradientdrawable = new Gradientdrawable ();


}


Gradientdrawable.setcolor (color.transparent);


}else {


SetBackgroundColor (color.transparent);


}


}else {


if (fillet) {


if (gradientdrawable = = null) {


gradientdrawable = new Gradientdrawable ();


}


Gradientdrawable.setcolor (BackColor);


}else {


SetBackgroundColor (BackColor);


}


}


}





/**


* Set the color after the button is pressed


* @param backcolorselected


*/


public void setbackcolorselected (int backcolorselected) {


This.backcolorselectedi = backcolorselected;


}





/**


* Set the color after the button is pressed


* @param backcolorselected


*/


public void setbackcolorselected (String backcolorselected) {


This.backcolorselecteds = backcolorselected;


}











/**


* Set the background image of the button


* @param backgroundimage


*/


public void setbackgroundimage (int backgroundimage) {


This.backgroundimage = backgroundimage;


if (backgroundimage!= 0) {


Setbackgroundresource (backgroundimage);


}


}





/**


* Set button to press the background image


* @param backgroundimageseleted


*/


public void setbackgroundimageseleted (int backgroundimageseleted) {


this.backgroundimageseleted = backgroundimageseleted;


}





/**


* Set Button fillet radius size


* @param radius


*/


public void Setradius (float radius) {


if (gradientdrawable = = null) {


gradientdrawable = new Gradientdrawable ();


}


Gradientdrawable.setcornerradius (RADIUS);


}





/**


* Set Button text color


* @param textcolor


*/


public void Settextcolors (String textcolor) {


This.textcolors = TextColor;


SetTextColor (Color.parsecolor (TextColor));


}





/**


* Set Button text color


* @param textcolor


*/


public void Settextcolori (int textcolor) {


This.textcolori = TextColor;


SetTextColor (TextColor);


}





/**


* Set button pressed text color


* @param textcolor


*/


public void settextcolorselected (String textcolor) {


This.textcolorseleteds = TextColor;


}





/**


* Set button pressed text color


* @param textcolor


*/


public void settextcolorselected (int textcolor) {


This.textcolorseletedi = TextColor;


}





/**


* The shape of the button


* @param shape


*/


public void Setshape (int shape) {


This.shape = shape;


}





/**


* Set whether it is rounded corner


* @param fillet


*/


@SuppressWarnings ("deprecation")


public void Setfillet (Boolean fillet) {


This.fillet = fillet;


if (fillet) {


if (gradientdrawable = = null) {


gradientdrawable = new Gradientdrawable ();


}


Gradientdrawable.rectangle


Gradientdrawable.setshape (Shape);


Gradientdrawable.setcornerradius (RADIUS);


Setbackgrounddrawable (gradientdrawable);


}


}


}





2 activity_buttonm.xml layout file, the three empty linearlayout are defined for the demo effect, and the child controls are added to each of the following








<?xml version= "1.0" encoding= "Utf-8"?>


<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"


Android:layout_width= "Match_parent"


android:layout_height= "Match_parent"


android:orientation= "Vertical" >





<linearlayout


Android:id= "@+id/ll_button1"


Android:layout_width= "Match_parent"


android:layout_height= "Wrap_content"


android:layout_margintop= "30DP"


android:orientation= "Horizontal" >





</LinearLayout>





<linearlayout


Android:id= "@+id/ll_button2"


Android:layout_width= "Match_parent"


android:layout_height= "Wrap_content"


android:layout_margintop= "30DP"


android:orientation= "Horizontal" >





</LinearLayout>





<linearlayout


Android:id= "@+id/ll_button3"


Android:layout_width= "Match_parent"


android:layout_height= "Wrap_content"


android:layout_margintop= "30DP"


android:orientation= "Horizontal" >





</LinearLayout>








</LinearLayout>








3 ButtonMActivity.java:ButtonM Test Class








Package Landptf.control;





Import android.app.Activity;


Import Android.graphics.Color;


Import android.graphics.drawable.GradientDrawable;


Import Android.os.Bundle;


Import Android.view.View;


Import Android.view.View.OnClickListener;


Import Android.view.ViewGroup.LayoutParams;


Import Android.widget.LinearLayout;


Import Android.widget.Toast;





/**


* BUTTONM Test class


* @author LANDPTF


* @date 2015-6-8


*/


public class Buttonmactivity extends activity{





Defines three empty layouts for loading button controls, only for demonstration purposes, not recommended in actual development


Private LinearLayout llButtonM1;


Private LinearLayout llButtonM2;


Private LinearLayout llButtonM3;


Defines three buttonm arrays


Private buttonm[] buttonM1;


Private buttonm[] buttonM2;


Private buttonm[] buttonM3;


Defines two sets of color values, pressing the background color of the button that is not pressed


private static final string[] ColorList = {"#7067E2", "#FF618F", "#B674D2", "#00C2EB"};


private static final string[] Colorselectedlist = {"#3C3779", "#88354C", "#613E70", "#00677D"};








@Override


protected void OnCreate (Bundle savedinstancestate) {


Super.oncreate (savedinstancestate);


Setcontentview (R.LAYOUT.ACTIVITY_BUTTONM);


Initview ();


}





Initializing controls


private void Initview () {


Instantiating a layout control


LlButtonM1 = (linearlayout) Findviewbyid (R.id.ll_button1);


LlButtonM2 = (linearlayout) Findviewbyid (R.id.ll_button2);


LlButtonM3 = (linearlayout) Findviewbyid (R.id.ll_button3);


Instantiate the control array, each defining 4


buttonM1 = new Buttonm[4];


buttonM2 = new Buttonm[4];


ButtonM3 = new Buttonm[4];


Gets the width of the screen, four button per line, with a gap of 60 total 300, except 4 for each control width


@SuppressWarnings ("deprecation")


int btnwidth = (Getwindowmanager (). Getdefaultdisplay (). GetWidth ()-300)/4;


Define the first layout


Linearlayout.layoutparams LP1;


for (int i = 0; i < 4; i++) {


Set style for buttonM1, rectangular rectangle


Buttonm1[i] = new Buttonm (this);


Font Color


Buttonm1[i].settextcolori (Android.graphics.Color.WHITE);


Font size


Buttonm1[i].settextsize (14);


Background color


Buttonm1[i].setbackcolor (Color.parsecolor (colorlist[i));


Selected Background color


Buttonm1[i].setbackcolorselected (Color.parsecolor (colorselectedlist[i));


Text hints


Buttonm1[i].settext ("TEXT" + i);


This sets the value of ID to I, otherwise the V.getid () in onclick will always be-1


Buttonm1[i].setid (i);


Define buttonM1 layout, width is adaptive, height is 0.6 times times width, weight is 1


Can also be written as LP1 = new Linearlayout.layoutparams (btnwidth, (int) (Btnwidth * 0.6));


LP1 = new Linearlayout.layoutparams (layoutparams.wrap_content, (int) (Btnwidth * 0.6), 1.0f);


The distance of the control from its right side, which is 60


Lp1.setmargins (0,0,60,0);


Buttonm1[i].setlayoutparams (LP1);


Set the ButtonM1 Click event


Buttonm1[i].setonclicklistener (New Onclicklistener () {


@Override


public void OnClick (View v) {


Toast.maketext (Buttonmactivity.this, "You have selected the first" + V.getid () + "A", Toast.length_short). Show ();


}


});


Set Paddingleft to 60


Llbuttonm1.setpadding (60, 0, 0, 0);


Add ButtonM1 to LlButtonM1


Llbuttonm1.addview (Buttonm1[i]);


}





Define a second layout


Linearlayout.layoutparams LP2;


for (int i = 0; i < 4; i++) {


Set style for buttonM2, rounded rectangle


Buttonm2[i] = new Buttonm (this);


Buttonm2[i].settextcolori (Android.graphics.Color.WHITE);


Buttonm2[i].settextsize (14);


To set whether rounded corners


Buttonm2[i].setfillet (TRUE);


To set the radius size of the fillet


Buttonm2[i].setradius (18);


Buttonm2[i].setbackcolor (Color.parsecolor (colorlist[i));


Buttonm2[i].setbackcolorselected (Color.parsecolor (colorselectedlist[i));


Buttonm2[i].settext ("TEXT" + i);


Buttonm2[i].setid (i);


LP2 = new Linearlayout.layoutparams (layoutparams.wrap_content, (int) (Btnwidth * 0.6), 1.0f);


Lp2.setmargins (0,0,60,0);


Buttonm2[i].setlayoutparams (LP2);


Buttonm2[i].setonclicklistener (New Onclicklistener () {


@Override


public void OnClick (View v) {


Toast.maketext (Buttonmactivity.this, "You have selected the first" + V.getid () + "A", Toast.length_short). Show ();


}


});


Llbuttonm2.setpadding (60, 0, 0, 0);


Llbuttonm2.addview (Buttonm2[i]);


}


Define a third layout


Linearlayout.layoutparams lp3;


for (int i = 0; i < 4; i++) {


Set style for buttonM3, rounded


Buttonm3[i] = new Buttonm (this);


Buttonm3[i].settextcolori (Android.graphics.Color.WHITE);


Buttonm3[i].settextsize (14);


Set to circle, default to Rectangle, Gradientdrawable.rectangle


Buttonm3[i].setshape (Gradientdrawable.oval);


Buttonm3[i].setfillet (TRUE);


Buttonm3[i].setbackcolor (Color.parsecolor (colorlist[i));


Buttonm3[i].setbackcolorselected (Color.parsecolor (colorselectedlist[i));


Buttonm3[i].settext ("TEXT" + i);


Buttonm3[i].setid (i);


LP3 = new Linearlayout.layoutparams (btnwidth,btnwidth);


Lp3.setmargins (0,0,60,0);


Buttonm3[i].setlayoutparams (LP3);


Buttonm3[i].setonclicklistener (New Onclicklistener () {


@Override


public void OnClick (View v) {


Toast.maketext (Buttonmactivity.this, "You have selected the first" + V.getid () + "A", Toast.length_short). Show ();


}


});


Llbuttonm3.setpadding (60, 0, 0, 0);


Llbuttonm3.addview (Buttonm3[i]);


}


}


}








Comments are basically explained, you can slowly accumulate these controls, and eventually form a control library of their own, in different projects to improve, make it more and more powerful





I'll tell you about it tomorrow. By inheriting relativelayout, implementing multiple control combinations that allow different projects to be applied, you can avoid rewriting the


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.