Bài 14:Custom Button

Custom Button

Chào các bạn!Hôm nay tôi sẽ hướng dẫn các bạn cách custom một button.
Tại sao lại phải custom?
Như các bạn đã biết giao diện mặc định của các view nói chung và button nói riêng khá là thô.Việc custom chúng là rất cần thiết để phù hợp với giao app của bạn.

Custom ta có thể thực trực tiếp qua code hoặc thông qua file xml.Trong bài hôm nay tôi sẽ giới thiệu tới các bạn custom button sử dụng file xml bởi nó khá đơn giản và dễ dàng.

Giao diện ví dụ như sau:

Trong ví dụ  này chúng ta sẽ tạo 3 button:
+Button 1 đơn giản chỉ là ta custom lại màu nền và tạo viền cho button
+Button 2 thì sẽ thay đổi màu nền theo trạng thái khác nhau của button
+Button 3 với hình ảnh bên trái và text bên phải.

Nào chúng ta cùng bắt đầu:
-Tạo trong folder /drawable tạo :

-btn1.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient  android:startColor="#ff0800"
                   android:endColor="#ffff00"
                android:angle="270"
                />
    <padding android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp"/>

    <stroke android:color="#000000"
            android:width="2dp"/>              <!-- Màu và độ rộng của viền -->

    <corners android:radius="4dp"/>         <!-- Thiết lập góc cạnh của nút -->

</shape>

 -btn2.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item android:state_pressed="true" >   <!-- Trạng thái khi nút click -->
               <shape>
                  <gradient
                       android:startColor="#ff0000"
                       android:endColor="#ffff00"
                       android:angle="270" />
             
                  <stroke
                       android:width="1dp"
                       android:color="#FFFFFF" />
         
                  <corners
                       android:radius="3dp" />
         
                  <padding
                      android:left="10dp"
                       android:top="10dp"
                       android:right="10dp"
                      android:bottom="10dp" />
             </shape>
     </item>

  <item>            <!-- Trạng thái bình thường khi không click -->
            <shape>
     
                  <solid
                       android:color="#ef4444" />            <!-- Thiết lập màu nền cho nút -->
             
                  <stroke
                       android:width="1dp"
                       android:color="#FFFFFF" />
             
                  <corners
                       android:radius="3dp" />
             
                  <padding
                       android:left="10dp"
                       android:top="10dp"
                       android:right="10dp"
                       android:bottom="10dp" />
              </shape>
 </item>

</selector>

-Để tạo Button 3 trong file activity_main.xml ta thêm thuộc tính android:drawableLeft="@drawable/ic_launcher"

 -activity_main.xml:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="131dp"
        android:background="@drawable/btn1"
        android:text="Button 3" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/button1"
        android:layout_below="@+id/button1"
        android:layout_marginTop="36dp"
        android:background="@drawable/btn2"
        android:text="Button 2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button2"
        android:layout_below="@+id/button2"
        android:layout_marginTop="30dp"
        android:drawableLeft="@drawable/ic_launcher"
        android:text="Button 3" />

</RelativeLayout>

Vậy là xong! Bây giờ bạn thử click vào button 1 và button 2 để xem sự khác nhau.
P/S:Tôi chưa ưng ý với màu này lắm nhưng do thời gian hạn hẹp nên bạn hãy tự lựa chọn phối màu cũng như kích thước sao cho phù hợp.

Download Source Code:custom button

Mọi thắc mắc,góp ý xin vui lòng comment tại fan page:android