Hướng dẫn Custom Dialog sử dụng XML Layout trong Android

Custom Dialog được sử dụng rất nhiều trong các ứng dụng, ví dụ như form đăng nhập hay đăng ký chẳng hạn, các bạn rất dễ bắt gặp những dạng custom dialog như vậy. Hôm nay mình sẽ hướng dẫn các bạn tạo một custom dialog đăng nhập như hình dưới đây nhé.

Xem thêm :

• Snagit 12 full crack – Phần mềm chụp và quay phim màn hình chuyên nghiệp
• Hướng dẫn Custom Toast trong Android

Giới thiệu về dialog trong android

Dialog có thể coi là một thông báo mà người dùng có thể tương tác trực tiếp được. Ví dụ khi các bạn muốn xóa một tập tin quan trọng hay muốn thoát một chương trình nào đấy thì việc hiển thì một thông báo để người dùng chắc chắn về hành vi của mình là rất quan trọng. Android hỗ trợ sẵn dialog cho lập trình viên nhưng đôi khi nó không phù hợp hoặc không đẹp, các bạn có thể tự thiết kế dialog cho mình, các bạn có thể kết hợp thêm selector, nó sẽ làm cho dialog của chúng ta đẹp lung linh. Sau đây tôi sẽ giới thiệu cho các bạn các bước thiết kế dialog riêng cho các bạn.

Tạo custom dialog trong android

Các bạn hãy xem qua code tham khảo của mình dưới đây nhé:

Tạo file activity_custom_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="dev4u.com.alertdialogdemo.CustomDialogActivity">

    <Button
        android:id="@+id/btn_AlertDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Display AlertDialog" />
</RelativeLayout>

Tiếp tục tạo file layout_custom_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="15dp">

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

        <TextView
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".3"
            android:text="Username:" />

        <EditText
            android:id="@+id/et_Username"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".7"
            android:imeOptions="actionDone"
            android:singleLine="true" />
    </LinearLayout>

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

        <TextView
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".3"
            android:text="Password:" />

        <EditText
            android:id="@+id/et_Password"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".7"
            android:imeOptions="actionDone"
            android:password="true"
            android:singleLine="true" />
    </LinearLayout>

    <CheckBox
        android:id="@+id/cb_ShowPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Show Password" />

</LinearLayout>

Cuối cùng là thêm code cho nó vào file main CustomDialogActivity.java

package dev4u.com.alertdialogdemo;


import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.method.PasswordTransformationMethod;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.EditText;
import android.widget.Toast;

public class CustomDialogActivity extends AppCompatActivity {

    Button btnAlertDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_dialog);

        btnAlertDialog = (Button) findViewById(R.id.btn_AlertDialog);

        btnAlertDialog.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                displayAlertDialog();
            }
        });
    }

    public void displayAlertDialog() {
        LayoutInflater inflater = getLayoutInflater();
        View alertLayout = inflater.inflate(R.layout.layout_custom_dialog, null);
        final EditText etUsername = (EditText) alertLayout.findViewById(R.id.et_Username);
        final EditText etPassword = (EditText) alertLayout.findViewById(R.id.et_Password);
        final CheckBox cbShowPassword = (CheckBox) alertLayout.findViewById(R.id.cb_ShowPassword);

        cbShowPassword.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked)
                    etPassword.setTransformationMethod(null);
                else
                    etPassword.setTransformationMethod(PasswordTransformationMethod.getInstance());
            }
        });

        AlertDialog.Builder alert = new AlertDialog.Builder(this);
        alert.setTitle("Login");
        alert.setView(alertLayout);
        alert.setCancelable(false);
        alert.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {

            @Override
            public void onClick(DialogInterface dialog, int which) {
                Toast.makeText(getBaseContext(), "Cancel clicked", Toast.LENGTH_SHORT).show();
            }
        });

        alert.setPositiveButton("Login", new DialogInterface.OnClickListener() {

            @Override
            public void onClick(DialogInterface dialog, int which) {
                // code for matching password
                String user = etUsername.getText().toString();
                String pass = etPassword.getText().toString();
                Toast.makeText(getBaseContext(), "Username: " + user + " Password: " + pass, Toast.LENGTH_SHORT).show();
            }
        });
        AlertDialog dialog = alert.create();
        dialog.show();
    }
}

Download source: 

Link Fshare: https://www.fshare.vn/file/RC2YFZGY7R2M
Link Dropbox: https://www.dropbox.com/s/epceyz9m87rf3qn/%5Bntcde.com%5DAlertDialogDemo.zip
Link Mediafire: http://www.mediafire.com/download/txvz2vh4iqv40is/%5Bntcde.com%5DAlertDialogDemo.zip

Lời kết

Qua bài viết hướng dẫn Custom Dialog trong Android ngắn trên hi vọng bạn có thể tự tạo cho mình một Alert Dialog đẹp và ưng ý. Trong quá trình tìm hiểu nếu bạn gặp bất kỳ lỗi nào hay có bất kỳ góp ý hay chia sẻ gì, mong bạn có thể để lại comment bên dưới hoặc gửi mail về [email protected]. Xin cảm ơn!!