Tạo Góc Bo Tròn Cho EditText Và Button Trong Android - Huỳnh Phú Sĩ

Trong CSS3, ta dễ dàng tạo góc bo tròn cho đối tượng bằng cách thêm vài dòng lệnh đơn giản, ví dụ:

input[type=text], input[type=password], input[type=file], select, textarea { margin-bottom: 5px; padding: 5px; border: 1px solid #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }

Nhưng trong Android thì khác hoàn toàn, muốn đẹp như trên web thì phải thao tác rất nhiều. Dưới đây là một cách để tạo góc bo tròn cho hai đối tượng là EditText và Button.

Bước 1. Trong thư mục drawable, lần lượt tạo 2 tệp xml

botron_edittext.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:background="#018cc5" android:layout_above="@+id/tvRegister"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/logo"/> <LinearLayout android:layout_marginTop="20dp" android:layout_marginLeft="30dp" android:layout_marginRight="30dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <EditText android:id="@+id/edtUsername" android:layout_marginBottom="10dp" android:layout_width="match_parent" android:layout_height="45dp" android:background="@drawable/botron_edittext" android:textColor="#000000" android:hint="Tên đăng nhập" android:singleLine="true" android:padding="5dp"/> <EditText android:id="@+id/edtPassword" android:layout_marginBottom="10dp" android:layout_width="match_parent" android:layout_height="45dp" android:background="@drawable/botron_edittext" android:textColor="#000000" android:hint="Mật khẩu" android:inputType="textPassword" android:singleLine="true" android:padding="5dp"/> <Button android:id="@+id/btnLogin" android:layout_marginBottom="10dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Đăng nhập" android:textAllCaps="false" android:textSize="20sp" android:textColor="#ffffff" android:background="@drawable/botron_button" android:padding="4dp"/> <TextView android:id="@+id/tvForgetPassword" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Quên mật khẩu?" android:textColor="#ffffff" android:textSize="15sp"/> </LinearLayout> </LinearLayout> <TextView android:id="@+id/tvRegister" android:layout_alignParentBottom="true" android:background="#0377A6" android:layout_width="match_parent" android:layout_height="40dp" android:gravity="center" android:text="Đăng ký tài khoản" android:textSize="15sp" android:textStyle="bold" android:textColor="#ffffff"/> </RelativeLayout>

botron_button.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!-- Set màu nền--> <solid android:color="@color/colorPrimaryDark" > </solid> <!-- đặt thuộc tính màu và độ rộng của đường viền --> <stroke android:width="1dp" android:color="@color/colorPrimaryDark" > </stroke> <!-- các thuộc tính căn chỉnh--> <padding android:left="5dp" android:top="5dp" android:right="5dp" android:bottom="5dp" > </padding> <!-- và đây là bán kính đường tròn ở 4 góc --> <corners android:radius="2dp" > </corners> </shape>

Bước 2. Đặt thuộc tính background cho đối tượng

<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/botron_edittext" android:padding="5dp"/> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Đăng nhập" android:background="@drawable/botron_button" android:padding="4dp"/>

Chúc các bạn thành công!

Bình luận

Chia sẻ