Tạo góc bo tròn cho EditText và Button trong Android

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ẻ