Tạo custom dialog có góc bo tròn trên Android

Tạo Dialog tùy chỉnh với góc bo tròn

Ví dụ này hướng dẫn cách tạo một custom dialog (hộp thoại tùy chỉnh) với góc bo tròn trên Android.

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project và điền thông tin cần thiết.

Bước 2: Giao diện chính (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/customDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Custom Dialog" />

</LinearLayout>

Một nút bấm đơn giản để kích hoạt hiển thị custom dialog.

Bước 3: Logic chính (src/MainActivity.java)

package com.example.andy.myapplication;

import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        findViewById(R.id.customDialog).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Sử dụng theme tùy chỉnh cho AlertDialog
                final AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this, R.style.CustomAlertDialog);
                ViewGroup viewGroup = findViewById(android.R.id.content);
                View dialogView = LayoutInflater.from(v.getContext()).inflate(R.layout.customview, viewGroup, false);
                
                Button buttonOk = dialogView.findViewById(R.id.buttonOk);
                builder.setView(dialogView);
                
                final AlertDialog alertDialog = builder.create();
                
                buttonOk.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        alertDialog.dismiss();
                    }
                });
                
                alertDialog.show();
            }
        });
    }
}

Bước 4: Layout cho custom view (res/layout/customview.xml)

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Success"
            android:textAlignment="center"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu erat tincidunt lacus fermentum rutrum."
            android:textAlignment="center"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

        <Button
            android:id="@+id/buttonOk"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="15dp"
            android:background="@color/colorPrimary"
            android:text="Ok"
            android:textColor="#FFF" />

    </LinearLayout>
</LinearLayout>

Bước 5: Định nghĩa theme (res/styles.xml)

<style name="CustomAlertDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="android:windowBackground">@drawable/popup_background</item>
</style>

Bước 6: Drawable nền bo góc (res/drawable/popup_background.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <corners android:radius="6dp" />
</shape>

Đây là phần quan trọng tạo ra hiệu ứng góc bo tròn cho dialog.

Chạy ứng dụng

Triển khai ứng dụng lên thiết bị. Màn hình ban đầu hiển thị nút "Custom Dialog". Khi click, dialog tùy chỉnh với góc bo tròn sẽ xuất hiện. Nhấn "Ok" để đóng dialog.