Android Studio #2 - Button's Introduction and uses

Hello friends, welcome to the another tutorial of programming infinity. In this tutorial, we will know about the button, its uses and how to use it. we will cover all the properties available as default in the android studio and we will also know how to customize it through our custom design. So friends, let's begin..

BUTTON

A Button is a very useful android's component, used for detecting the clicks i.e. provide a interface between the user and android. It has a default style as of the android phone i.e. the design of the button will varies according to device. we will customize in aspect of its background, Drawable, text, text color, style and more. It has some predefined functions which will help the developers in certain work as for detecting clicks, long clicks and press up, press down and so on. So friends, first know about the properties and after that we will know about the functions of the button.

PROPERTIES

The properties of the button can be customized through both XML and designer section. For the beginners, it is recommended to use the designer section for customization. It will help the beginners in making everything easier for designing components by a single click.

In XML, button is inserted into the layout with the <Button> tag. we can customize the button in the XML with some attributes. we will study about these attributes below. In Android Programming, there are three tags which are a must for that visible components to work properly. These are width, height and ID. Below is an example of the <Button> tag with the essential attributes.

<Button

android:id="@+id/button"

android:layout_width="WRAP_CONTENT"

android:layout_height="WRAP_CONTENT"

/>

In the above example code, we had seen that how the three important attributes are used along with button in the XML. Now friend's let us know about another properties:-

Properties	Used as	Used to
ID	android:id="@+id/--the id which you want to give--"	Used to add a unique id to the component, so that we can use it to find any component easily in the code.
WIDTH	android:layout_width="--width properties--"	Used to give a width to the component, takes value as wrap_content, match_parent, custom width in dp,px,in,mm,pt and the dimension resources. It is recommended when using custom width is to use dp along with the number as a unit. The wrap content means that the width of the button is only enough to wrap the content within it, match parent means that the width of the button will cover every available space horizontally on the screen. The dimension resources is a file in the android resource directory which is used for storing the dimensions like width, height and so on. It is used as '@android:dimen/app_icon_size' instead of the width properties.
HEIGHT	android:layout_height="--height properties--"	Used to give height to the button. used in a same way as of width.
VISIBILITY	android:visibility="--visibility properties --"	Used to provide the visibility to the button.takes value as visible, invisible and gone. visible is used for the button to be visible whereas invisible and gone is used for hide the button. The only difference between the invisible and gone is that, in the gone, the button becomes invisible will not take space for it, whereas invisible will take space.
TEXT	android:text="--the text of the button--"	Used to provide the text to the button. takes direct text and string resources. for preventing any error, it is recommended to use string resources instead of direct text.
TEXT GRAVITY	android:gravity="--the gravity of the text of the button--"	Used to provide the gravity of the text to the button. takes certain aligning values as left, right, center etc. It is used when we had to align the button text.
TEXT COLOR	android:textColor="--the text color of the button--"	Used to provide the color to text of the button. takes hex code, rgb code and color resources as its value. It also takes “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb” value.
TEXT SIZE	android:textSize="--the text size of the button--"	Used to provide the text size of the button. takes custom size and dimension resources as its value. In value the unit used is to be recommended sp along with value.
TEXT STYLE	android:textStyle="--the text style of the button--"	Used to provide a style to the text of the button. takes bold, italic and normal as its style.
STYLE	android:style="--the style of the button--"	Used to provide the style to the button. takes the value from the available styles, the default is the phone's default style.
BACKGROUND	android:background="--the background of the button--"	Used to provide the background to the button. takes color code, color resources and image resources as a value.
DRAWABLE BOTTOM/TOP/LEFT/RIGHT/START/END	android:drawableBottom/drawableTop/drawableLeft/drawableRight/drawableStart/drawableEnd="--the drawable resource of the button--"	Used to provide the icon to the respective side of the button. takes image resources as a value.
DRAWABLE PADDING	android:drawablePadding="--the padding--"	Used to provide the padding to the drawable of the button i.e space between the image and the borders of the button. takes custom value and dimension resources as value.
DRAWABLE TINT	android:drawableTint="--the color filter of the image--"	Used to provide the color to the drawable of the button, if set to null, the image will have its original color.
MARGIN TOP/LEFT/BOTTOM/RIGHT/START/END	android:margin/marginTop/marginLeft/marginBottom/marginRight/marginStart/marginEnd="--the margin of the button--"	Used to provide the margin to the button i.e. providing the space between the button and another components. takes custom value and dimension resources as a value. The Start and end is used instead of left and right respectively, if you are targeting your android app to devices having android version above or equal lollipop.
PADDING	android:padding/paddingTop/paddingBottom/paddingRight/paddingLeft/paddingStart/paddingEnd="--the padding of the button--"	Used to provide the padding to the button i.e. space between the inside components of button and the borders of the button. takes dimension resources and custom dimensions as a value. used in a same way as margins are used.
ENABLED	android:enabled="true/false"	Used to specify whether the button is enable/disabled i.e. the button is able to detect clicks or not. takes true/false as value, true means that it will detect clicks whereas false means it will not detect clicks.

Note:- Some properties of button can also be set by programming. The properties set by the code will override the properties set by the XML. e.g. If the color of the button is blue and, It is set red in the code, then in realtime, the button will have red color. Below are the codes for customizing properties:-

method	used for	value
Button.setText("Learn Android @ Programming Infinity");	sets the text of the button	takes string resources or direct text
Button.setTextColor(Color.RED);	sets the text color of the button	takes value same as taken in text color of XML
Button.setTextSize(25);	sets the text size of the text of the button	takes value in pixels
Button.setBackgroundColor(Color.BLACK);	sets the background color of the button	takes value in colors
Button.setBackgroundResource(R.mimpmap.ic_launcher);	sets the background image of the button	takes value in int as resource path. e.g. R.color.black, R.mipmap.ic_launcher

FUNCTIONS

After the designing of the button. It's time to add some functions to the button. In Android, there are total 3 functions/methods for the button. The first is to detect single clicks, second is for long clicks, and third is for up, down, hover etc. we can see the image given below to understand the way in which code is written for the methods. In android, before writing the methods of the button, it is necessary to initialize it. If the button you are using is only used in the onCretae() methos as shown in below image, then it is locally initialized as shown, but when it is called by another methods except onCreate(), then it is initialized with some variable as private or public, then use its for accessing it through ID. In below image, we can see that first the button is find with id, then its method is called, so for calling any visible component, it is required to first find its view with id to call its methods. 

SINGLE CLICKS LISTENER

UP, DOWN, PRESS, RELEASE LISTENER

LONG CLICK LISTENER

In the above image, we can clearly understand about, how to write code and enable methods for the button. we can understand more about the methods by reading the below table :-

Function	Extra methods	Work
SINGLE CLICK	none	detect simple click on the button
LONG CLICK	none	detect long click on the button
HOVER LISTENER	BUTTON PRESS/BUTTON RELEASE/DOWN/UP	fires listener when the button is pressed/released/pressed down/pressed up respectively. Keep in mind, that if the button is pressed continuously the button will continuously calls the pressed down or button press method and when it is released, it will call the button release and up method.

So friends, that is all about this tutorial. Hope you had enjoyed this tutorial. If you have any question, then ask in comment box. I will try my hard to answer your questions as soon as possible.
Thanks - Programming Infinity.