The Button Button

A Button responds to user clicks. Place a button in the XML file.

<Button
     android:id="@+id/btn"
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:text="@string/self_destruct" />
Copy the code

To listen for button clicks, we set them up in the Activity.

public class MyActivity extends Activity { protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.content_layout_id); final Button button = findViewById(R.id.button_id); Button. SetOnClickListener (new View. An OnClickListener () {public void onClick (View v) {/ / here is the button click event, in the main thread execution}}); }}Copy the code

Above we used view.onClickListener. The onClick method is executed when the button is clicked. The system will execute the onClick method in the main thread of the App. We can update the UI in here. But don’t do anything too time-consuming.

Notice that OnClickListener is actually an interface in the View. SetOnClickListener is also a View method. In other words, even if we’re not using a button, we can listen for clicks in this way. Namely the setOnClickListener (View. An OnClickListener ()).

You’re going to have a TextView, an ImageView listening for click events, or an entire Layout listening for click events. The listener mode is used here.

In fact, Button inherits from TextView.

Button, TextView background Settings

How to add movement to the button?

A Button can be pressed or not pressed, and we can give these two states different background colors and text colors. This article is going to be about selectors, lists of states. Just like our shape, the selector is also an XML file.

<? The XML version = "1.0" encoding = "utf-8"? > <selector xmlns:android="http://schemas.android.com/apk/res/android"> </selector>Copy the code

Set Button Background

  • Prepare the shape file

Prepare the shape file. I’m going to have three shapes here. They represent three different states.

shape_btn_1_normal.xml

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#6CB3DD" /> <corners android:radius="2dp" /> </shape>Copy the code

shape_btn_1_pressed.xml

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#1E6283" /> <corners android:radius="4dp" /> </shape>Copy the code

shape_btn_disable.xml

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#6D6D6D" /> </shape>Copy the code
  • New Selector file

Create the drawable file bg_1.xml

<? The XML version = "1.0" encoding = "utf-8"? > <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/shape_btn_disable" android:state_enabled="false" /> <item android:drawable="@drawable/shape_btn_1_normal" android:state_enabled="true" android:state_pressed="false" /> <item android:drawable="@drawable/shape_btn_1_pressed" android:state_enabled="true" android:state_pressed="true" /> </selector>Copy the code
  • Set Button Background

Set the background in Layout.

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_1"
        android:text="RFDev btn 1" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:background="@drawable/bg_1"
        android:enabled="false"
        android:text="RFDev btn 2" />
Copy the code

Let’s run it and see what it looks like. The background color of the button is different when the button is pressed and when it is not.

The selector is introduced

StateListDrawable is a drawable object defined in an XML file that uses multiple different images to represent the same figure, depending on the state of the object.

For example, a Button widget can be one of many different states (pressed, focused, or neither), and objects can be drawn from a list of states, providing a different background picture for each state. A list of states can be described in an XML file. Each figure is represented by a

element within a single

element. Each

uses various attributes to describe the state of the graph applied as a drawable object. During each state change, the list of states is iterated from top to bottom, and the first item that matches the current state is used – this selection is not based on a “best match,” but rather the first item that meets the minimum condition of the state. So selector points to a StateListDrawable, so we’re not going to focus on a StateListDrawable here, we’re just going to focus on XML.


grammar

Refer to the following syntax:

<? The XML version = "1.0" encoding = "utf-8"? > <selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize=["true" | "false"] android:dither=["true" | "false"] android:variablePadding=["true" | "false"] > <item android:drawable="@[package:]drawable/drawable_resource" android:state_pressed=["true" | "false"] android:state_focused=["true" | "false"] android:state_hovered=["true" | "false"] android:state_selected=["true" | "false"] android:state_checkable=["true" | "false"] android:state_checked=["true" | "false"] android:state_enabled=["true" | "false"] android:state_activated=["true" | "false"] android:state_window_focused=["true"  | "false"] /> </selector>Copy the code

Precautions for Use

We can set the background for Button, and we can set the same background for TextView.

<TextView
        android:id="@+id/tv1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="12dp"
        android:background="@drawable/bg_1"
        android:gravity="center"
        android:text="RFDev text view 1" />
Copy the code

Bg_1 with state_PRESSED set. If the TextView does not have a click event, the user clicks or presses the TextView and the background does not change. Once you set the click event to the TextView, click on it again to see the background change.

In this article we will use Button and TextView as examples. In fact, other subclasses of View, like ImageView, LinearLayout can set the background in this way.

Android Zero Basics tutorial video reference