Wednesday, March 11, 2020

Android button Example

Using Button in Android, the component represents the button, captures the click event so the Button also sets the background color, text color, Drawable when changing the Button state

Button in Android

Button is a View type, it displays a button to wait for a user to click. Button inherits from TextView so the attributes, settings for TextView in the previous section are as effective as Button (You should read that part first)

Syntax of Button declaration in XML
<Button
    android:id="@+id/mybutton_id"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="Hello" />

Event in button
from Activity or from a ViewGroup object containing Button, to get Button and capture events when the user clicks, do the following:
final Button button = findViewById(R.id.mybutton_id);
button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
        Toast.makeText(MainActivity.this, "Hello!",
            Toast.LENGTH_SHORT).show();
    }
});
Some properties
Because Button extends from TextView, it has all the properties of TextView such as: android: text, android: textColor, android: textSize, android: textStyle, android: textAllCaps ... Apart from inherited properties, there are also Some properties to note:
Drawable  of button in Android
Use the android: drawableLeft, android: drawableRight, android: drawableTop, android: drawableBottom properties to assign Drawable images to the left, right, top, and bottom borders of the button.
If you want to set the distance of the Drawable images to the content area using the android: drawablePadding attribute
For example, there are 2 drawable as follows:
drawable/button_top_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:height="15dp" android:width="100dp" />
    <solid android:color="#fdd109" />
</shape>
drawable/button_left_right.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:height="30dp" android:width="30dp" />
    <solid android:color="#800789" />
</shape>
Apply to the Button as follows:
<Button
    android:id="@+id/mybutton_id"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="Hello"
    android:drawablePadding="10dp"
    android:drawableLeft="@drawable/button_left_right"
    android:drawableRight="@drawable/button_left_right"
    android:drawableTop="@drawable/button_top_bottom"
    android:drawableBottom="@drawable/button_top_bottom"/>
No border Button
The default buttons around the border and have effects when held down, click. If you want the Button to not draw this border, but still see the effect when you click it, set it
style="?android:attr/borderlessButtonStyle"
Android button Example

android background button
android:background="#edffac06"
How to set the background color value according to HEX, according to such color values, the background has changed as desired, but the effect when pressed, the effect when Button is in focus is lost.
Drawable Background / Bitmap Photos
android: background is also used to assign a Drawable to Button, for example:
drawable/button_oval_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:height="50dp" android:width="100dp" />
    <solid android:color="#c22ace" />
</shape>
Assign it to Button using: android: background = "@ drawable / button_oval_bg"
Android button Example

StateListDrawable background
Depending on the type of View element, there are states: activated, enabled, checked, selected, focused ...
Button is concerned with three states:

  • pressed when clicking the button
  • selected when the button is selected
  • normal when normal state
  • disabled when the button is disabled

For each of these states, you can set a Drawable so that Button draws when in that state. The states that you want to assign Drawable are defined in an XML file according to the structure:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item />
    <item />
    <!--...-->
    <item />
</selector>
For each item, a Drawable is defined for the state you want to assign. For example, the selector has 2 elements for the normal state and the click state
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        android:drawable="@drawable/drawable_pressed">
    <item android:drawable="@drawable/button_normal">
</selector>
In the above code, drawable_pressed and button_normal are 2 Drawable, android: state_pressed = "true" indicates that the item is for the state when pressed, the item does not set that state to be for normal state.

Even within selector items, it is also possible to write XML Drawable without external assignment like the android attribute: drawable = "@ drawable / drawable_pressed" above. The following example uses a selector with 2 items, one for normal state, one for pressing, Drawable of the item written right in the item.
drawable/button_3state.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#ce3f1b" />
            <stroke
                android:width="1dp"
                android:color="#ce0f0f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
     <item>
        <shape>
            <gradient
                android:startColor="#70c656"
                android:endColor="#53933f"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#53933f" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>
Assign to Button with
android: background = "@ drawable / button_3state"
Colored Button
Each Button can set the background color quickly while still retaining the ability to draw in many states by setting: android: backgroundTint to set the background color, and add style = "@ style / Widget.AppCompat.Button.Colored "
<Button
    android:id="@+id/mybutton_id"
    android:layout_height="wrap_content"
    android:layout_width="220dp"
    android:text="Xin chào"
    android:backgroundTint="#d50000"
    style="@style/Widget.AppCompat.Button.Colored" />
<Button
    android:layout_height="wrap_content"
    android:layout_width="220dp"
    android:text="Xin chào"
    android:backgroundTint="#9c27b0"
    style="@style/Widget.AppCompat.Button.Colored" />
<Button
    android:layout_height="wrap_content"
    android:layout_width="220dp"
    android:text="Xin chào"
    android:backgroundTint="#311b92"
    style="@style/Widget.AppCompat.Button.Colored" />
<Button
    android:layout_height="wrap_content"
    android:layout_width="220dp"
    android:text="Xin chào"
    android:backgroundTint="#00acc1"
    style="@style/Widget.AppCompat.Button.Colored" />
<Button
    android:layout_height="wrap_content"
    android:layout_width="220dp"
    android:text="Xin chào"
    android:backgroundTint="#00c853"
    style="@style/Widget.AppCompat.Button.Colored" />
<Button
    android:layout_height="wrap_content"
    android:layout_width="220dp"
    android:text="Xin chào"
    android:backgroundTint="#00c853"
    style="@style/Widget.AppCompat.Button.Colored" />
<Button
    android:layout_height="wrap_content"
    android:layout_width="220dp"
    android:text="Xin chào"
    android:backgroundTint="#ffd600"
    style="@style/Widget.AppCompat.Button.Colored" />
<Button
    android:layout_height="wrap_content"
    android:layout_width="220dp"
    android:text="Xin chào"
    android:backgroundTint="#000000"
    style="@style/Widget.AppCompat.Button.Colored" />
Android button Example
 Key search : Android button Example,Android Button with Examples,Button Tutorial With Examples In Android Studio,Android Button OnClick Example

No comments:

Post a Comment