Kinh nghiệm - Thủ thuật

Vậy làm thế nào để chúng ta có thể custom được một button trong Android? Trong bài hôm nay, chúng ta sẽ cùng tìm hiểu để custom 1 số thuộc tính cơ bản nhất của button.

1. Button mặc định

Để bắt đầu, chúng ta cùng xem lại 1 button mặc định trong Android là như thế nào. Với phương pháp dễ nhất, chúng ta sẽ kéo và thả 1 button từ Palette vào trong layout  Sau khi kéo thả button, chúng ta sẽ có 1 giao diện như trên. Trong Android hiện tại, khi bạn kéo thả view, nó sẽ mặc định được đặt trong ConstraintLayout, vậy nên bạn sẽ phải add các thuộc tính constraint cho button để nó có thể hiển thị tại vị trí mong muốn. Nếu không nó sẽ ăn vào vị trí mặc định là góc trên cùng bên trái ((x,y) = (0,0)).

Ngoài ra bạn có thể add button bằng cách code trong layout.xml của bạn. Ví dụ 1 đoạn code của button mặc định:

    android:id="@+id/StringEE"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="StringEE Button"

    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintEnd_toEndOf="parent"

    app:layout_constraintStart_toStartOf="parent"

    app:layout_constraintTop_toTopOf="parent" />

Với button trên, khi khởi chạy ứng dụng, chúng ta sẽ nhìn thấy hình ảnh như sau:  Lưu ý: màu của button và text sẽ thay đổi mặc định dựa theo theme Material được sử dụng.

Với button trên, khi khởi chạy ứng dụng, chúng ta sẽ nhìn thấy hình ảnh như sau:  Lưu ý: màu của button và text sẽ thay đổi mặc định dựa theo theme Material được sử dụng.

Đầu tiên, chúng ta cùng thay đổi màu của text trong button.

Để thay đổi màu text của button, chúng ta có 1 thuộc tính tên là textColor. Set giá trị cho thuộc tính textColor, màu text sẽ thay đổi như màu được set.

Đoạn code sau khi thêm thuộc tính textColor:

    android:id="@+id/StringEE"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="StringEE Button"

    android:textColor="@color/stringee_color"

    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintEnd_toEndOf="parent"

    app:layout_constraintStart_toStartOf="parent"

    app:layout_constraintTop_toTopOf="parent" />

    android:id="@+id/StringEE"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="StringEE Button"

    android:textColor="@color/stringee_color"

    android:background="@color/stringee_background_color"

    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintEnd_toEndOf="parent"

    app:layout_constraintStart_toStartOf="parent"

    app:layout_constraintTop_toTopOf="parent" />

android:backgroundTint="@color/stringee_background_color"

    android:id="@+id/StringEE"

    android:layout_width="200dp"

    android:layout_height="50dp"

    android:text="StringEE Button"

    android:textColor="@color/stringee_color"

    android:background="@drawable/stringee_oval"

    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintEnd_toEndOf="parent"

    app:layout_constraintStart_toStartOf="parent"

    app:layout_constraintTop_toTopOf="parent" />

    android:id="@+id/StringEE"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="StringEE Button"

    android:textColor="@color/stringee_color"

    android:background="@drawable/stringee_oval"

    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintEnd_toEndOf="parent"

    app:layout_constraintStart_toStartOf="parent"

    app:layout_constraintTop_toTopOf="parent" />