{"id":741,"date":"2016-02-04T12:17:44","date_gmt":"2016-02-04T12:17:44","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=741"},"modified":"2019-06-12T06:35:20","modified_gmt":"2019-06-12T06:35:20","slug":"button","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/button","title":{"rendered":"Button Tutorial With Examples In Android Studio"},"content":{"rendered":"

In Android, Button<\/strong> represents a push button. A Push buttons can be clicked, or pressed by the user to perform an action. There are different types of buttons used in android such as CompoundButton, ToggleButton, RadioButton.<\/p>\n

\"Button<\/center>Button is a subclass of TextView<\/a> class and compound button is the subclass of Button class. On a button we can perform different actions or events like click event, pressed event, touch event etc.<\/strong><\/p>\n

Android buttons are GUI components which are sensible to taps (clicks) by the user. When the user taps\/clicks on button in an Android app, the app can respond to the click\/tap<\/em>. These buttons can be divided into two categories: the first is Buttons with text on, and second is buttons with an image on. A button with images on can contain both an image and a text. Android buttons with images on are also called\u00a0ImageButton<\/em>.<\/p>\n

Button code in XML:
\n<\/strong><\/p>\n

The below code will create Button and write “Abhi Android” text on it.<\/p>\n

<Button\r\nandroid:id=\"@+id\/simpleButton\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:text=\"Abhi Android\"\/>\r\n<\/pre>\n
\"Button<\/center><\/p>\n
\n
Attributes of Button in Android:<\/strong><\/h4>\n
Now let\u2019s \u00a0we discuss some important attributes that helps us to configure a Button in your xml file (layout).<\/p>\n
1. id:<\/strong><\/span> id is an attribute used to uniquely identify a text Button. Below is the example code in which we set the id of a Button.<\/p>\n
<Button\r\nandroid:id=\"@+id\/simpleButton\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:text=\"Abhi Android\"\/>\r\n<\/pre>\n
2. gravity: <\/strong><\/span>The gravity attribute is an optional attribute which is used to control the alignment of the text like left, right, center, top, bottom, center_vertical, center_horizontal etc.<\/p>\n
Below is the example code with explanation included in which we set the right and center vertical gravity for text of a Button.<\/p>\n
<Button\r\nandroid:id=\"@+id\/simpleButton\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:text=\"Abhi Android\"\r\nandroid:layout_centerInParent=\"true\"\r\nandroid:gravity=\"right|center_vertical\"\/><!--set the gravity of button-->\r\n<\/pre>\n
\"Button<\/center>3. text<\/strong>:<\/span> text attribute is used to set the text in a Button. We can set the text in xml as well as in the java class.<\/p>\n
Below is the example code with explanation included in which we set the text \u201cLearning Android @ AbhiAndroid\u201d in a Button.<\/p>\n
<Button\r\n    android:id=\"@+id\/simpleButton\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:layout_centerInParent=\"true\"\r\n    android:text=\"Learn Android @ AbhiAndroid\"\/><!--display text on button--><\/pre>\n
\"Setting<\/center>Setting Text Using Java class:<\/strong><\/p>\n
Below is the example code in which we set the text on Button programmatically means in java class. The output will be same as the above.<\/p>\n
Button button = (Button) findViewById(R.id.simpleButton);\r\nbutton.setText(\"Learn Android @ AbhiAndroid\");\/\/set the text on button<\/pre>\n
4.textColor:<\/strong><\/span> textColor attribute is used to set the text color of a Button. Color value is in the form of “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”.<\/p>\n
Below is the example code with explanation included in which we set the red color for the displayed text of a Button.<\/p>\n
<Button\r\nandroid:id=\"@+id\/simpleButton\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_centerInParent=\"true\"\r\nandroid:text=\"AbhiAndroid\"\r\nandroid:textColor=\"#f00\"\/><!--red color for the text-->\r\n<\/pre>\n
\"Setting<\/center>Setting Text Color On Button Inside Java class:<\/strong><\/p>\n
Below is the example code in which we set the text color of a Button programmatically means in java class.<\/p>\n
Button simpleButton=(Button) findViewById(R.id.simpleButton<\/em>);\r\nsimpleButton.setTextColor(Color.RED<\/em>);\/\/set the red color for the text<\/pre>\n
5. textSize:<\/strong><\/span> textSize attribute is used to set the size of the text on Button. We can set the text size in sp(scale independent pixel) or dp(density pixel).<\/p>\n
Below is the example code in which we set the 25sp size for the text of a Button.<\/p>\n
<Button\r\nandroid:id=\"@+id\/simpleButton\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_centerInParent=\"true\"\r\nandroid:text=\"AbhiAndroid\"\r\nandroid:textSize=\"25sp\" \/><!--25sp text size-->\r\n<\/pre>\n
\"Setting<\/center>Setting textSize In Java class:<\/strong><\/p>\n
Below is the example code in which we set the text size of a Button programmatically means in java class.<\/p>\n
Button simpleButton=(Button)findViewById(R.id.simpleButton<\/em>);\r\nsimpleButton.setTextSize(25);\/\/set the text size of button\r\n<\/pre>\n
6. textStyle:<\/strong><\/span> textStyle attribute is used to set the text style of a Button. The possible text styles are bold, italic and normal. If we need to use two or more styles for a Button then \u201c|\u201d operator is used for that.<\/p>\n
Below is the example code with explanation included, in which we set the bold and italic text styles for text of a button.<\/p>\n
<Button\r\n    android:id=\"@+id\/simpleButton\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:layout_centerInParent=\"true\"\r\n    android:text=\"AbhiAndroid\"\r\n    android:textSize=\"20sp\"\r\n    android:textStyle=\"bold|italic\"\/><!--bold and italic text style--><\/pre>\n
\"Set<\/center>7. background:<\/strong><\/span> background attribute is used to set the background of a Button. We can set a color or a drawable in the background of a Button.<\/p>\n
Below is the example code in which we set the gren color for the background, Black color for the displayed text and set 15dp padding from all the side\u2019s for Button.<\/p>\n
<Button\r\nandroid:id=\"@+id\/simpleButton\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_centerInParent=\"true\"\r\nandroid:text=\"Download\"\r\nandroid:textSize=\"20sp\"\r\nandroid:padding=\"15dp\"\r\nandroid:textStyle=\"bold|italic\"\r\nandroid:background=\"#147D03\" \/><!--Background green color--><\/pre>\n
\"setting<\/center>Setting background in Button In Java class:<\/strong><\/p>\n
Below is the example code in which we set the background color of a Button programmatically means in java class.<\/p>\n
Button simpleButton=(Button)findViewById(R.id.simpleButton<\/em>);\r\nsimpleButton.setBackgroundColor(Color.BLACK<\/em>);\/\/set the black color of button background\r\n<\/pre>\n
8. padding:<\/strong><\/span> padding attribute is used to set the padding from left, right, top or bottom. In above example code of background we also set the 10dp padding from all the side\u2019s of button.<\/p>\n
9. drawableBottom: <\/strong><\/span>drawableBottom is the drawable to be drawn to the below of the text.<\/p>\n
Below is the example code in which we set the icon to the below of the text.<\/strong><\/p>\n
Make sure you have image saved in your drawable folder name ic_launcher.<\/p>\n
<Button\r\n    android:id=\"@+id\/simpleButton\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:layout_centerInParent=\"true\"\r\n    android:background=\"#147D03\"\r\n    android:text=\"Download Code\"\r\n    android:textSize=\"20sp\"\r\n    android:padding=\"15dp\"\r\n    android:textStyle=\"bold|italic\"\r\n    android:drawableBottom=\"@drawable\/ic_launcher\"\/><!--image drawable on button--><\/pre>\n
\"drawableBottom<\/center>10. drawableTop, drawableRight And drawableLeft:<\/strong><\/span> Just like the above attribute we can draw drawable to the left, right or top of text.<\/p>\n
In the Below example we set the icon to the right of the text. In the same way you can do for other two attribute by your own:
\n<\/strong><\/p>\n
<Button\r\n    android:id=\"@+id\/simpleButton\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:layout_centerInParent=\"true\"\r\n    android:background=\"#147D03\"\r\n    android:text=\"Download Code\"\r\n    android:textSize=\"20sp\"\r\n    android:padding=\"15dp\"\r\n    android:textStyle=\"bold|italic\"\r\n    android:drawableRight=\"@drawable\/ic_launcher\"\/><!--image drawable on Right side of Text on button--><\/pre>\n
\"drawableRight<\/center><\/p>\n
\n
Button Example In Android Studio:<\/strong><\/h4>\n
Below is the example of button in which we display two buttons with different background and whenever a user click on the button the text of the button will be displayed in a toast.<\/p>\n
Download Code<\/a> ? <\/a><\/p>\n
\"Button<\/center>Step 1:<\/strong><\/span> Create a new project in Android Studio and name it ButtonExample.<\/p>\n
Select File -> New -> New Project and Fill the forms and click \"Finish\" button.\r\n<\/pre>\n
Step 2:<\/strong><\/span> Now open res -> layout ->\u00a0xml (or) activity_main.xml\u00a0and add following code. Here we are designing the UI of two button in Relative Layout.<\/p>\n
<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    tools:context=\".MainActivity\">\r\n\r\n    <Button\r\n        android:id=\"@+id\/simpleButton1\"\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_centerHorizontal=\"true\"\r\n        android:layout_marginTop=\"100dp\"\r\n        android:background=\"#00f\"\r\n        android:drawableRight=\"@drawable\/ic_launcher\"\r\n        android:hint=\"AbhiAndroid Button1\"\r\n        android:padding=\"5dp\"\r\n        android:textColorHint=\"#fff\"\r\n        android:textSize=\"20sp\"\r\n        android:textStyle=\"bold|italic\" \/>\r\n\r\n    <Button\r\n        android:id=\"@+id\/simpleButton2\"\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_centerInParent=\"true\"\r\n        android:background=\"#f00\"\r\n        android:drawableLeft=\"@drawable\/ic_launcher\"\r\n        android:hint=\"AbhiAndroid Button2\"\r\n        android:padding=\"5dp\"\r\n        android:textColorHint=\"#fff\"\r\n        android:textSize=\"20sp\"\r\n        android:textStyle=\"bold|italic\" \/>\r\n\r\n\r\n<\/RelativeLayout><\/pre>\n
Step 3:<\/strong><\/span> Now Open\u00a0 app -> package -> MainActivity.java and the following code. Here using setOnClickListener() method on button and using Toast we will display which button is clicked by user.<\/p>\n
package example.abhiandriod.buttonexample;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.view.Menu;\r\nimport android.view.MenuItem;\r\nimport android.view.View;\r\nimport android.widget.Button;\r\nimport android.widget.Toast;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n    Button simpleButton1, simpleButton2;\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        simpleButton1 = (Button) findViewById(R.id.simpleButton1);\/\/get id of button 1\r\n        simpleButton2 = (Button) findViewById(R.id.simpleButton2);\/\/get id of button 2\r\n\r\n        simpleButton1.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View view) {\r\n                Toast.makeText(getApplicationContext(), \"Simple Button 1\", Toast.LENGTH_LONG).show();\/\/display the text of button1\r\n            }\r\n        });\r\n        simpleButton2.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View view) {\r\n                Toast.makeText(getApplicationContext(), \"Simple Button 2\", Toast.LENGTH_LONG).show();\/\/display the text of button2\r\n            }\r\n        });\r\n    }\r\n\r\n    \r\n}<\/pre>\n
Output:<\/strong><\/span><\/p>\n
Now start the AVD in Emulator and run the App. You will see two button. Click on any button and you will see the message on screen which button is clicked.<\/p>\n
\"button<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"
In Android, Button represents a push button. A Push buttons can be clicked, or pressed by the user to perform an action. There are different types of buttons used in android such as CompoundButton, ToggleButton, RadioButton. Button is a subclass of TextView class and compound button is the subclass of Button class. On a button … Continue reading Button Tutorial With Examples In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-741","page","type-page","status-publish","hentry"],"acf":[],"psp_head":"Button Tutorial With Examples In Android Studio \u2013 Abhi Android<\/title>\r\n<meta name=\"description\" content=\"Learn the Button concept and attributes with code and examples in Android Studio. In Android, Button represents a push button. A Push buttons can be clicked, or pressed by the user to perform an action.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/ui\/button\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/comments?post=741"}],"version-history":[{"count":3,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/741\/revisions"}],"predecessor-version":[{"id":2776,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/741\/revisions\/2776"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media?parent=741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}