Custom (Tùy chỉnh) Alert Dialog trong Android
Đôi khi, chúng ta muốn hiển thị hộp thoại cho người sử dụng cho EditText, Button. Thì chúng ta phải đi định nghĩa lại lớp AlertDialog
Ví dụ: Trong ví dụ này chúng ta sẽ làm ứng dụng gồm: 1 TextView và 1 Button. Khi người sử click vào Button "Click to login" sẽ xuất hiện một Alert Dialog, trong Alert Dialog xuất hiện form đăng nhập gồm có: Username, Password, Login, Cancel, thông tin này được lấy từ tập tin login_dialog.xml. Tiến hành tạo project, vào thư mục res /layout -> activity_main.xml thiết kế giao diện sau:
Bước 1: Tạo một project tên là CustomAlertDialog: File->New->Android Application Project điền các thông tin ->Next ->Finish
Bước 2: Mở res -> layout -> xml (hoặc) activity_main.xml và thêm code, chúng ta sẽ tạo các đối tượng Buton trong Linear Layout.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#2186c6"> <TextView android:textColor="#fff" android:textSize="20dp" android:layout_height="wrap_content" android:id="@+id/textView1" android:text="Hiệp Sĩ IT Demo" android:layout_width="wrap_content" android:layout_gravity="center_horizontal" android:paddingTop="10dp" android:paddingBottom="10dp" android:layout_weight="1"> </TextView> <Button android:layout_width="match_parent" android:id="@+id/btnLoginDialog" android:text="Click to Login" android:layout_gravity="center_vertical" android:layout_height="wrap_content"> </Button> </LinearLayout> Bước 4: Tạo tập tin login_dialog.xml trong drawable
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_height="match_parent" android:paddingLeft="10dp" android:paddingRight="10dp" android:background="#fff" android:layout_width="300dp" android:paddingTop="10dp"> <EditText android:layout_height="wrap_content" android:id="@+id/edtUsername" android:layout_width="match_parent"> <requestFocus></requestFocus> </EditText> <EditText android:id="@+id/edtPassword" android:layout_height="wrap_content" android:inputType="textPassword" android:layout_width="match_parent"> </EditText> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/linearLayout1"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0.5" android:id="@+id/btnLogin" android:text="Login"> </Button> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0.5" android:id="@+id/btnCancel" android:text="Cancel"> </Button> </LinearLayout> </LinearLayout> Bước 4: Xử lý sự kiện trong Button "Click to login"
public void onClick(View v) { // TODO Auto-generated method stub final EditText edtUserName, edtPassword; Button btnLogin, btnCancel; AlertDialog.Builder dialogBuilder = new AlertDialog.Builder(this); LayoutInflater inflater = this.getLayoutInflater(); View dialogView = inflater.inflate(R.layout.login_dialog, (ViewGroup)findViewById(R.layout.activity_main)); edtUserName = (EditText) dialogView.findViewById(R.id.edtUsername); edtPassword = (EditText) dialogView.findViewById(R.id.edtPassword); btnLogin = (Button) dialogView.findViewById(R.id.btnLogin); btnCancel = (Button) dialogView.findViewById(R.id.btnCancel); btnLogin.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub if(edtUserName.getText().equals("hiepsiit")&& edtPassword.getText().equals("hiepsiit")){ Toast.makeText(MainActivity.this, "Đăng nhập thành công", Toast.LENGTH_LONG).show(); finish(); } else Toast.makeText(MainActivity.this, "Đăng nhập không thành công", Toast.LENGTH_LONG).show(); } }); btnCancel.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub finish(); } }); dialogBuilder.setView(dialogView); dialogBuilder.setTitle("Đăng nhập"); AlertDialog b = dialogBuilder.create(); b.show(); } Toàn bộ code java:
package hiepsiit.com.customalertdialog; import android.app.Activity; import android.app.AlertDialog; import android.app.Dialog; import android.os.Bundle; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.Button; import android.widget.EditText; import android.widget.Toast; public class MainActivity extends Activity implements OnClickListener{ Button btnLoginDialog; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btnLoginDialog = (Button) findViewById(R.id.btnLoginDialog); btnLoginDialog.setOnClickListener(this); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public void onClick(View v) { // TODO Auto-generated method stub final EditText edtUserName, edtPassword; Button btnLogin, btnCancel; AlertDialog.Builder dialogBuilder = new AlertDialog.Builder(this); LayoutInflater inflater = this.getLayoutInflater(); View dialogView = inflater.inflate(R.layout.login_dialog, (ViewGroup)findViewById(R.layout.activity_main)); edtUserName = (EditText) dialogView.findViewById(R.id.edtUsername); edtPassword = (EditText) dialogView.findViewById(R.id.edtPassword); btnLogin = (Button) dialogView.findViewById(R.id.btnLogin); btnCancel = (Button) dialogView.findViewById(R.id.btnCancel); btnLogin.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub if(edtUserName.getText().equals("hiepsiit")&& edtPassword.getText().equals("hiepsiit")){ Toast.makeText(MainActivity.this, "Đăng nhập thành công", Toast.LENGTH_LONG).show(); finish(); } else Toast.makeText(MainActivity.this, "Đăng nhập không thành công", Toast.LENGTH_LONG).show(); } }); btnCancel.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub finish(); } }); dialogBuilder.setView(dialogView); dialogBuilder.setTitle("Đăng nhập"); AlertDialog b = dialogBuilder.create(); b.show(); } }
Ứng dụng này được phát triển bởi adt bundle, android 4.2 sử dụng minimum sdk 11 and target sdk 21.
Kết quả khi chạy ứng dụng:
Sau đó click vào Button "Click to login":
Cập nhật công nghệ từ Youtube tại link: https://www.youtube.com/channel/UCOxeYcvZPGf-mGLYSl_1LuA/videos
Để tham gia khóa học công nghệ truy cập link: http://thuvien.hocviendaotao.com
Mọi hỗ trợ về công nghệ email: dinhanhtuan68@gmail.com
