Custom nút bấm android

Nút bấm nguyên bản của Android nhìn khá đơn điệu.

Ta muốn nút bấm bo tròn hai đầu, có màu sắc tùy ý, có viền, ta tạo một file xml có tên back trong thư mục drawable.

Nếu chưa có thư mục này, ta nháy chuột phải vào folder res để tạo nó.

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<solid android:color="#E6E6FA"/>

<stroke

android:width="1dip"

 android:color="#4b5320" />

<corners android:radius="20dp"/>

</shape>

Nếu không muốn có viền thì bỏ dòng stroke đi, muốn viền mỏng thì giảm chỉ số width xuống 0.5 chẳng hạn.

Bây giờ trong file xml định dạng nút bấm, ta thêm dòng sau.

android:background="@drawable/back"

Chạy thử, nút bấm trông như sau

Nếu bạn muốn nút bấm tròn, chỉ cần để chiều dài, rộng của nó là 50dp, rồi chỉnh file back, dòng corners thành

<corners android:radius="25dp"/>

Nếu bạn muốn khi ấn vào nút nó hiện màu xanh lá cây, hãy tạo một file có tên back2 trong thư mục drawable với code như sau.

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

 <item android:state_pressed="true" >

  <shape android:shape="rectangle"  >

   <corners android:radius="20dip" />

    <stroke android:width="0.5dip" android:color="#6699cc" />

 <gradient android:angle="-90" android:startColor="#66ff00" android:endColor="#bcd4e6"  />           

 </shape>

 </item>

<item android:state_focused="true">

  <shape android:shape="rectangle"  >

  <corners android:radius="20dip" />

 <stroke android:width="0.5dip" android:color="#6699cc" />

  <solid android:color="#afeeee"/>      

 </shape>

 </item> 

<item >

 <shape android:shape="rectangle"  >

 <corners android:radius="20dip" />

 <stroke android:width="0.5dip" android:color="#6699cc" />

<gradient android:angle="-90" android:startColor="#E6E6FA" android:endColor="#e6e8fa" />           

</shape>

</item>

</selector>

Chỉnh background của nút thành back2, khi đó lúc bạn ấn nút sẽ có màu xanh lá hiện lên chứng tỏ nó đang được ấn.

Khi bạn đặt nút bấm lên trên một view khác, như imageView chẳng hạn, bạn sẽ muốn nó trong suốt không có nền.

Để làm nút bấm trong suốt, trong file xml của nó bạn chỉ cần thêm dòng sau vào.

android:background="@android:color/transparent"

Nút bấm lúc này trông như một dòng chữ bình thường.

Để nút bấm trông có vẻ nổi như hình 3D, bạn chuẩn bị một cái ảnh hình nút bấm nổi, đây là ảnh tôi làm trong Word, dùng Insert Shapes, đổ nền.

Copy ảnh vào thư mục drawable, sau đó trong file xml, thêm dòng set nền cho nút bấm.

android:background="@drawable/tenanh"

Muốn nút có màu từ nhạt đến đậm, tạo một file xml tên bu trong thư mục drawable

<?xml version="1.0" encoding="UTF-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle" >

    <stroke

        android:width="2dp"

        android:color="#FFFFFFFF" />

    <gradient

        android:angle="225"

        android:endColor="#DD2ECCFA"

        android:startColor="#DD000000" />

    <corners

        android:bottomLeftRadius="7dp"

        android:bottomRightRadius="7dp"

        android:topLeftRadius="7dp"

        android:topRightRadius="7dp" />

</shape>

Sau đó set background cho nút.

android:background="@drawable/bu"

Lúc đó nút trông như sau.

Có thể thay đổi màu tùy ý trong file bu.

Muốn bóng mờ ở giữa thì sửa file bu thành.

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">      

    <item>     

        <shape>

            <corners

                android:radius="5dp" />

            <gradient

                android:angle="270"

                android:startColor="#8BB6F5"

                android:centerColor="#DFE8F9"

                android:endColor="#3F83E9"

                android:centerY="0.2"

                android:type="linear"

            />         

        </shape>

    </item>

</layer-list>