Background của các view control trong Android không có gì xa lạ với các bạn đã làm việc thuần thục với Android. Để cho các bạn dễ hình dung cách thức hoạt động cũng như cách vận dụng, sử dụng trong thực tế thì chúng ta bắt tay làm một màn hình Login. Chúng tôi trích dẫn từ trong chính những dự án chúng tôi đã làm.
Eng Sub:
Với màn hình Login này chúng ta có 5 bước thực hiện như sau:
Step 1: Khởi tạo file giao diện xml trong ứng dụng
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:id="@+id/lin_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginBottom="0dp"
android:background="@drawable/background_screen_login">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:layout_marginTop="120dp"
android:textAlignment="center"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_marginTop="200dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="50dp"
android:paddingTop="40dp"
android:paddingRight="20dp"
android:paddingLeft="20dp"
android:orientation="vertical"
android:background="@drawable/background_content_view">
<EditText
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/background_edittext_login"
android:paddingLeft="6dp"
android:drawableLeft="@drawable/account_outline"/>
<EditText
android:layout_width="match_parent"
android:layout_marginTop="30dp"
android:layout_height="50dp"
android:drawableLeft="@drawable/lock_outline"
android:paddingLeft="6dp"
android:background="@drawable/background_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:backgroundTint="#fdb306"
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>
</androidx.constraintlayout.widget.ConstraintLayout>Với thiết giao diện như trên, ứng dụng màn hình login của bạn sẽ như sau:
Step 2: Tạo các file background xml trong thư mục drawable của dự án như sau:
background_screen_login: là file background cho cả màn hình (màu cam). Code của file background dưới đây:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="0dp" />
<stroke
android:width="0.5dp"
android:color="#fdb306" />
<solid android:color="#fdb306" />
</shape>Trong đó:
corners: bo góc của Shap background
stroke: màu của viềng (cạnh)
solid: màu nền của Shape
android:shape="rectangle": thuộc tính này định nghĩa shape của mình hình gì, ví dụ: hình chữ nhật, hình tròn
background_content_view: là file background của phần nội dung màn hình login (màu trắng)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:bottomLeftRadius="250dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="0dp"
android:topRightRadius="100dp" />
<stroke
android:width="1dp"
android:color="#ffffff" />
<solid android:color="#ffffff" />
</shape>Trong đó:
android:radius="0dp": Nếu tất cả các góc của Shape đều bo tròn bằng nhau thì ta dùng thuộc tính này. Ví dụ android:radius="10dp"
android:bottomLeftRadius="250dp": bo góc dưới phía bên trái
android:bottomRightRadius="0dp": bo góc dưới phía bên phải
android:topLeftRadius="0dp": bo góc trên phía bên trái
android:topRightRadius="100dp": bo góc trên phía bên phải
background_edittext_login: là file background của EditText nhập dữ liệu như user name và password
<?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="#1e0e0e" />
<solid android:color="#ffffff" />
</shape>
background_button_login: là file background của button login
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="50dp" />
<stroke
android:width="0.5dp"
android:color="#fdb306" />
<solid android:color="#fdb306" />
</shape>
Như vậy, chúng ta đã hoàn tất các hiểu biết cơ bản về background xml với shape trong android xml.
Eng Sub: