Lập trình Android – Custom Alert Dialog

Posted on by mtoplistChuyên mục:Top List

Lập trình Android

– Custom Alert Dialog

Bài trước

Bài sau

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();        
        
	}
	
	
}

 

Download ví dụ

Ứ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”:

Bài trước

Bài sau

mtoplist