Custom EditText in Android

 

Trong phần lớn các ứng dụng, người ta thường không để EditText ở dạng mặc định mà Android cung cấp, thông thường sẽ có một số custom để có được giao diện ứng dụng đẹp mắt. Trong bài viết này, chúng tôi sẽ hướng dẫn các bạn custom EditText theo 2 cách mà chúng tôi rất thường xuyên sử dụng cho các dự án của mình. Cụ thể ở đây là màn hình đăng nhập. 

Eng Sub: 

Step 1: Tạo dự án, thiết kế giao diện màn hình Login như sau: 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical"
    android:id="@+id/lin_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="25dp"
        android:id="@+id/lin_child"
        android:background="#ffffff"
        android:paddingRight="25dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Login"
            android:layout_marginTop="160dp"
            android:textAlignment="center"
            android:textAllCaps="false"
            android:textColor="#421a8a"
            android:textSize="20sp"
            android:textStyle="bold" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginTop="60dp"
            android:background="@drawable/backgroud_edittext_login"
            android:paddingLeft="10dp"
            android:drawableLeft="@drawable/email"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_marginTop="30dp"
            android:layout_height="50dp"
            android:drawableLeft="@drawable/account_outline"
            android:paddingLeft="6dp"
            android:background="@drawable/backgroud_edittext_login"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Forget Password ?"
            android:layout_marginTop="20dp"
            android:textAlignment="textStart"
            android:textAllCaps="false"
            android:textColor="#fdb306"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginTop="70dp"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:textSize="18sp"
            android:gravity="center"
            android:textStyle="bold"
            android:background="@drawable/background_button_login"
            android:textColor="#ffffff"
            android:text="Login"/>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:gravity="center"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New User?"
                android:textAlignment="center"
                android:textAllCaps="false"
                android:textColor="#000000"
                android:textSize="20sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:text="Sign Up"
                android:textAlignment="center"
                android:textAllCaps="false"
                android:textColor="#fdb306"
                android:textSize="20sp"
                android:textStyle="bold" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Step 2: Tạo một file background xml trong thư mục drawable như sau (backgroud_edittext_login.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />

    <stroke
        android:width="1dp"
        android:color="#421a8a" />

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

</shape>

Step 3: Bạn set background của EditText là file background xml đã tạo ở Step 2

<EditText
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginTop="60dp"
    android:background="@drawable/backgroud_edittext_login"
    android:paddingLeft="10dp"
    android:drawableLeft="@drawable/email"/>

<EditText
    android:layout_width="match_parent"
    android:layout_marginTop="30dp"
    android:layout_height="50dp"
    android:drawableLeft="@drawable/account_outline"
    android:paddingLeft="6dp"
    android:background="@drawable/backgroud_edittext_login"/>

Chính là dòng này android:background="@drawable/backgroud_edittext_login" trong đoạn code trên.

Dòng code android:drawableLeft="@drawable/email" chính là set cho thuộc tính android:drawableLeft="" có một icon như hình bên dưới. Trong trường hợp của ví dụ này là icon email và icon lock.

Link tải 2 icon dùng trong ví dụ:

Icon email: https://www.mediafire.com/file/fmfi7s89cg2j7pc/email.xml/file

Icon lock: https://www.mediafire.com/file/8gdzt6ccayr8t8d/lock_outline.xml/file       

Eng Sub: 

Hình ảnh giao diện ứng dụng của bạn sau khi thiết kế sẽ như thế này: