Bài 12:Sử dụng TextView, EditText và Button trong Android

- TextView, EditText, Button là 3 control cơ bản nhất của Android. Trong các bài tập trước bạn đã được làm quen với 3 control này rồi. Bài tập này Tôi sẽ làm lại mục đích giúp các bạn ôn tập lại đồng thời giúp hiểu thêm được một số thuộc tính mới của nó (trong Android người ta thường gọi một số các control là  Form Widgets).
1) TextView:
- Bạn chỉ muốn hiển thị thông tin mà không cho phép người dùng chỉnh sửa thì nên sử dụng control này.
- TextView tương tự như  JLabel bên Java, và như Label bên C#
- Dưới này Tôi chụp một số thuộc tính của TextView mà chúng ta thường xuyên sử dụng nhất:

-Tôi nói sơ qua chút về mấy cái thuộc tính trên:
    +textStyle: thiết lập kiểu của chữ như: normal,bold (Kiểu chữ đậm),italic (Kiểu chữ nghiêng).Ta có thể kết hợp cả 2 kiểu để tạo ra đoạn text có kiểu vừa đậm vừa nghiêng bằng cách sử dụng " | ": bold|italic
    +textSize: thiết lập kich cỡ chữ
    +fontFamily: thiết lập font
- Ta nên thiết lập id cho control để tiện bề xử lý.
- layout_width, layout_height nên thiết lập cho control(bắt buộc)
- Để thay đổi màu nền dùng background, thay đổi màu chữ dùng textColor…
- Để trợ giúp các bạn thay đổi màu nền và màu chữ của các control trong Android (dùng hex color), Tôi đã viết chương trình lấy màu theo mã hex color, các bạn có thể tải về tại : http://www.mediafire.com/?ujj2pyppdwemx69 . Giao diện như sau:

Chương trình này bạn có thể chọn button “…” để chọn custom color. Ứng với mỗi bảng màu khác nhau thì sẽ có mã Hex color khác nhau. Bạn copy mã này dán vào Ứng dụng Android của bạn thì sẽ có màu như ý muốn.
Thí dụ, ở màn hình trên Hex là “#3F8020“, bạn copy hex này và dán vào background của TextView (xem hình):
-Như bên trên Tôi nói là nên đặt tên Id cho control, mục đích để xử lý một số công việc theo yêu cầu. Dựa vào Id ta sẽ lấy được control theo đúng Id này, xem code bên dưới để biết cách lấy control theo Id:
TextView txt1= (TextView) findViewById(R.id.textView1);
- Mọi control đều kế thừa từ View, và hàm findViewById cũng trả về 1 View theo đúng Id truyền vào, đó là lý do ta ép kiểu về cho đúng với TextView (cách làm nhanh: ngay dòng lệnh này nhấn tổ hợp phím Ctrl +1 là nó sẽ tự ép kiểu nhanh cho bạn)
- Để hiển thị thông tin lên control TextView ta dùng lệnh dưới đây:
txt1.setText(“Hello tèo”);
- Đẩy lấy thông tin bên trong control TextView ta dùng lệnh dưới đây:
String msg=txt1.getText().toString();
2) EditText:
- Control này kế thừa từ TextView và cho phép chỉnh sửa dữ liệu (dĩ nhiên bạn có thể cấm chỉnh sửa dữ liệu bằng coding hay trong xml)
- Để sử dụng EditText rất đơn giản, bạn chỉ việc kéo thả control này vào giao diện và tiến hành thiết lập một số thuộc tính:
-
Như hình bên trên thì bạn chỉ cần kéo loại EditText mà bạn cần (vùng số 1) rồi thả vào giao diện (vùng số 2)
- Bạn xem Tôi chụp một số thuộc tính của EditText trong hình dưới này:

-Tương tự như TextView bạn cần thiết lập Id, các layout_width, layout_height
- Thuộc tính hint : để hiển thị thông tin gợi ý trong vùng nhập dữ liệu khi bạn chưa nhập bất kỳ dữ liệu nào vào, chỉ cần có dữ liệu là phần hint sẽ tự động mất đi.
-textSize để thiết lập kích cỡ font chữ cho EditText
- Trong inputType bạn thấy Tôi kết hợp nhiều giá trị lại với nhau bằng cách dùng toán tử “|”, tức là EditText này sẽ có đầy đủ các đặc tính ở bên vế phải mà ta truyền vào, ví dụ:
+textAutoCorrect : Tự động sửa đúng chính tả, giả sử bạn nhập “teh” thì nó sẽ tự động sửa thành “the“
+ vân vân… bạn tự tìm hiểu thêm trên mạng
- Ta cũng có thể dùng cửa sổ Properties để thiết lập thuộc tính cho dễ dàng hơn (click chuột vào EditText muốn đổi thuộc tính):

-Màn hình trên cho phép ta thay đổi thuộc tính của control một cách dễ dàng.
- Tương tự như TextView, ta cũng phải lấy được control thông qua Id, thao tác với dữ liệu bên trong EditText:
+Lấy control theo Id:
EditText txtbox=(EditText) findViewById(R.id.editText1);
+Thiết lập giá trị cho EditText
txtBox.setText(“nhập bất cứ cái gì vào đây xem sao”)
+Lấy dữ liệu bên trong EditText:
String msg=txtBox.getText().toString()
-Một số thuộc tính cần biết:
+lines: thiết lập số dòng
+maxLeght: thiết lập số kí tự có thể nhập
+gravity:xác định vị trí của text
+ <requestFocus/>: nhận focus khi start activity
Tôi xin tạm dừng vấn đề về EditText tại đây.Trong bài sau tôi sẽ hướng dẫn cách bắt sự kiện EditText rất quan trọng.
3) Button:
- Dùng để thiết lập sự kiện khi người dùng chọn lựa.
- Cũng kế thừa từ TextView
- Có 2 sự kiện mà người sử dụng thường xuyên thao tác:

- Bây giờ Tôi sẽ làm một ví dụ về cách sử dụng 3 control này (bạn có thể xem lại bài tập các kiểu lập trình sự kiện trong Android):
- Ví dụ đơn giản là tính cộng trừ nhân chia, giao diện như bên dưới (nhấn nút nào thì thực hiện phép toán cho nút đó):

- Bạn xem Layout để dễ thiết kế:

- Coding mẫu:

package tranduythanh.com;
import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends Activity {
Button btncong,btntru,btnnhan,btnchia;
EditText editsoa,editsob;
TextView txtkq;
OnClickListener myclick=new OnClickListener() {
@Override
public void onClick(View arg0) {
switch(arg0.getId())
{
case R.id.btncong:
String sa=editsoa.getText()+””;
String sb=editsob.getText().toString();
int a=Integer.parseInt(sa);
int b=Integer.parseInt(sb);
txtkq.setText(a+” + “+b +” = “+(a+b));
break;
case R.id.btntru:
break;
case R.id.btnnhan:
break;
case R.id.btnchia:
break;
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btncong=(Button) findViewById(R.id.btncong);
btntru=(Button) findViewById(R.id.btntru);
btnnhan=(Button) findViewById(R.id.btnnhan);
btnchia=(Button) findViewById(R.id.btnchia);
editsoa=(EditText) findViewById(R.id.editsoa);
editsob=(EditText) findViewById(R.id.editsob);
txtkq=(TextView) findViewById(R.id.txtketqua);
btncong.setOnClickListener(myclick);
btntru.setOnClickListener(myclick);
btnnhan.setOnClickListener(myclick);
btnchia.setOnClickListener(myclick);
}
}

Bạn hãy trả lời cho Tôi: Hiện giờ đoạn code trên Tôi sử dụng loại Sự Kiện nào?
- Như vậy bạn đã hiểu được cách sử dụng TextView, EditText, Button.
-Bài sau sẽ nói về bắt sự kiện trên EditText:làm thế nào để biết người dùng bắt đầu nhập dữ liệu,đang nhập,và kết thúc,các action khi nhấn enter...
- Bạn phải hiểu thật tốt về 3 Control Tôi vừa nêu ở trên, nó rất là cơ bản và quan trọng, đa phần ứng dụng Android nào cũng sử dụng tối thiểu 3 Control này.
Chúc các bạn thành công.

Bài 11: Hướng dẫn import project vào Eclispe

Tôi xin lỗi hôm trước tôi có đưa cho bạn project mẫu mà không hướng dẫn các bạn import Eclipse.Nên hôm nay tôi xin hướng dẫn các bạn vì tôi biết những người mới học chưa chắc biết được vấn đề này

Bạn mở Eclicpse chọn File-->import:

 

 +Khi chọn import sẽ xuất hiện cửa sổ import--->Existing Project into Workspace:

 

+Nhấn next để tiếp tục.Ở mục Select root directory chọn Brower:

 

 

+Xuất hiện cửa sổ:

+Chọn project cần import.Nhấn ok 2 lần.Vậy là xong!

Chúc bạn thành công!

Mọi thắc mắc,góp y xin vui lòng comment bên dưới hoặc tại fan page:android

Bài 10:Custom Toast và Aler Dialog trong android

   Chào các bạn! Trong bài trước tôi có giới thiệu cho các bạn 2 cách để thông báo tới người dùng là Toast Notification và Aler Dialog.Nếu bạn thấy giao diện của nó quá "củ chuối" thì trong bài hôm nay tôi sẽ hướng dẫn các bạn "Custom" nó theo ý của mình.

   CUSTOM TOAST NOTIFICATION

Giao diện chính sẽ như sau:

Khi nhấn từng button sẽ hiện ra các Toast khác nhau.
-Tạo một Project mới có tên ToastCustom
-Trong file activity_main:

<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=".MainActivity" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="49dp"
        android:text="Custom Toast"
        android:textStyle="bold"
        android:textAppearance="?android:attr/textAppearanceLarge" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="58dp"
        android:layout_toLeftOf="@+id/textView1"
        android:text="Kiểu 1" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button1"
        android:layout_toRightOf="@+id/textView1"
        android:onClick="custom_2"
        android:text="Kiểu 2" />
</RelativeLayout>

 -Tạo một file có tên custom_toast trong folder layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:orientation="vertical"
    android:padding="10dp"
    android:background="#ff0000" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Custom toast với nền màu đỏ"
        android:textColor="#ffffff"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

-Cuối cùng trong Class MainActivity:

package com.example.toastcustom;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebChromeClient.CustomViewCallback;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends Activity {
    Button btn1;                //custom toast 1
  
    Button btn2;                //custom toast 2
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
      
        btn1=(Button)
                findViewById(R.id.button1);            //lấy id từ file xml
      
        btn1.setOnClickListener(new OnClickListener() {            //Bắt sự  kiện nhấn vào nút thứ nhất
          
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
              
                Toast toast=Toast.makeText(MainActivity.this, "Custom Toast kiểu 1", Toast.LENGTH_LONG);
              
                int gravity=Gravity.BOTTOM;        //Hiển thị ở trên màn hìn,ngoài ra còn left,right....
              
                int xOffset=0;                    //Hiển ở vị trí 0 theo chiều ngang màn hình (Chấp nhận giá trị âm)
              
                int yOffset=0;                    //Hiển ở vị trí 0 theo chiều dọc màn hình
              
                toast.setGravity(gravity, xOffset, yOffset);  
              
                toast.show();  //Show Toast notification;
            }
        });
    }
      
        //Bắt sự kiện click ở button 2
        public void custom_2(View v){
            //lấy file xml để custom Toast
            LayoutInflater inflater=(LayoutInflater)
                                    getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View view=inflater.inflate(R.layout.custom_toast, null);
          
            Toast toast=new Toast(MainActivity.this);
          
            toast.setView(view);    //custom Toast
          
            toast.show();
          
        }
    @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;
    }
}

-Cuối cùng nhấn ctrl+F11 để chạy!
Kết quả:

-Khi ta thay giá trị xOffset thành -100 sẽ có:

Dowload source code:custom toast

  Custom AlerDialog

Giao diện chính rất đơn giản:

Khi nhấn button nó đều cho kết quả giố nhau.Nhưng tôi làm theo 2 cách khác nhau:

-Bạn tạo một Project mới có tên Dialog_Custom

-Trong file activity_main:

<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=".MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="71dp"
        android:text="Custom Dialog"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="25dp"
        android:text="Cách 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/button1"
        android:layout_below="@+id/button1"
        android:layout_marginTop="33dp"
        android:text="Cách 2" />

</RelativeLayout>

 -Tạo một file có tên alert_dialog trong folder layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5dp" />

    <TextView
        android:id="@+id/text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="#FFF"
        android:layout_toRightOf="@+id/image"/>/>

     <Button
        android:id="@+id/dialogButtonOK"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text=" Đóng... "
        android:layout_marginTop="5dp"
        android:layout_marginRight="5dp"
        android:layout_below="@+id/image"
        />

</RelativeLayout>

-Cuối cùng trong Class MainActivity:

package com.example.dialog_custom;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {
    Context context=this;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //Cách 1
        Button c1=(Button)
                findViewById(R.id.button1);
        c1.setOnClickListener(new OnClickListener() {
          
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
            showDialog1();  
            }
        });
      
        //Cách 2
                Button c2=(Button)
                        findViewById(R.id.button2);
                c2.setOnClickListener(new OnClickListener() {
                  
                    @Override
                    public void onClick(View arg0) {
                        // TODO Auto-generated method stub
                    showDialog2();  
                    }
                });
    }
  
    public void showDialog1(){
         final AlertDialog dialog=new AlertDialog.Builder(context).create();//Tạo dialog
      
        //lấy file xml từ folder layout
        LayoutInflater inflater=(LayoutInflater)
                                getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view=inflater.inflate(R.layout.alert_dialog, null);
      
        dialog.setView(view);        //set giao diện
      
        TextView text = (TextView) view.findViewById(R.id.text);            //Bạn chú ý view.findViewById()...Xác định nó là của dialog
        text.setText("Xin chào các bạn đến với lập trình Android!");
        ImageView image = (ImageView) view.findViewById(R.id.image);
        image.setImageResource(R.drawable.ic_launcher);

        Button dialogButton = (Button)    view.findViewById(R.id.dialogButtonOK);
        // if button is clicked, close the custom dialog
        dialogButton.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                dialog.dismiss();   //Ẩn dialog
            }
        });
      
        dialog.show();
    }
  
    public void showDialog2(){
        // custom dialog
        final Dialog dialog = new Dialog(context);
        dialog.setContentView(R.layout.alert_dialog);     //set giao diện cho dialog
        dialog.setTitle("Lập trình Android...");

        // set the custom dialog components - text, image and button
        TextView text = (TextView) dialog.findViewById(R.id.text);            //Bạn chú ý dialog.findViewById()...Xác định nó là của dialog
        text.setText("Xin chào các bạn đến với lập trình Android!");
        ImageView image = (ImageView) dialog.findViewById(R.id.image);
        image.setImageResource(R.drawable.ic_launcher);

        Button dialogButton = (Button) dialog.findViewById(R.id.dialogButtonOK);
        // if button is clicked, close the custom dialog
        dialogButton.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                dialog.dismiss();   //Ẩn dialog
            }
        });

        dialog.show();
    }
    @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;
    }

}

-Cuối cùng nhấn ctrl+F11 để chạy!
Kết quả:

Dowload source code:custom dialog

Mọi thắc mắc,góp y xin vui lòng comment bên dưới hoặc tại fan page:android

.

Bài tập 9: Thực hành về Toast Notification và Alert Dialog

Vì trong tất cả các ứng dụng Tôi thấy rằng chúng ta hay sử dụng Toast và Alert Dialog để kiểm tra một điều gì đó, hay đơn giản chỉ là xuất thông báo. Vì vậy bài tập này Tôi sẽ hướng dẫn các bạn làm quen với Toast & Alert Dialog, sau đó các bạn sẽ được thực hành với các control cơ bản và nâng cao.
- Cả Toast và Alert Dialog khi hiển thị lên thì các tiến trình (hay các lệnh) khác  vẫn cứ tiếp tục làm việc.
1) Toast:
- Toast có thể được tạo và hiển thị trong Activity hoặc trong Servive.
- Không cho phép người sử dụng tương tác
- Khi hiển thị sau khoảng thời gian nào đó sẽ tự đóng lại
- Có 2 giá trị mặc định (ta nên sử dụng 2 giá trị này, không nên gõ con số cụ thể vào): hằng số Toast.LENGTH_SHORT hiển thị trong  2 giây, Toast.LENGTH_LONG hiển thị trong 3.5 giây.
Cách tạo Toast:

Toast toast=Toast.makeText(YourActivity.this, “Hiển thị gì thì ghi ở đây”,   Toast.LENGTH_SHORT);

toast.show();

- Khi nào bạn nên sử dụng Toast?
Theo Tôi thì tùy bạn, bạn có thể sử dụng trong trường hợp hiển thông báo trong các mục thiết lập thông số cấu hình, hay đơn giản chỉ là hiển thị lên để xem thông tin tạm thời nào đó (giống như để kiểm tra một vấn đề sảy ra chẳng hạn).
- Hình dưới đây cho bạn biết 1 Toast đang hiển thị:
2) Alert Dialog:
- Hiển thị và cho phép người dùng tương tác, ví dụ bạn nhìn hình Tôi chụp bên dưới, khi nhấn nút “Cancel”, chương trình sẽ hiển thị Alert Dialog hỏi xem có chắc chắn muốn xóa hay không? Bấm No thì không, bấm Yes thì tắt chương trình.
- Cách tạo Alert Dialog:

AlertDialog.Builder b=new AlertDialog.Builder(YourActivity.this);

b.setTitle(“Question”);

b.setMessage(“Are you sure you want to exit?”);

b.setPositiveButton(“Yes”, new DialogInterface. OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which)

{

finish();

}});b.setNegativeButton(“No”, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which)
{
dialog.cancel();
}
});
b.create().show();

Ý nghĩa của các hàm :
- setTitle : thiết lập tiêu đề cho Dialog
- setMessage: Thiết lập nội dung cho Dialog
-setIcon : để thiết lập Icon
-setPositiveButton, setNegativeButton thiết lập hiển thị Nút chọn cho Dialog (ở đây bạn không quan tâm Nút chấp nhận hay Nút hủy nó thuộc PositiveButton hay NegativeButton vì đó là tùy thuộc bạn chọn. Chú ý là ở đối số thứ 2 của các hàm này sẽ là DialogInterface. OnClickListener chứ không phải View. OnClickListener
- create() để tạo Dialog
- show() để hiển thị Dialog.

Mọi thắc mắc,góp y xin vui lòng comment bên dưới hoặc tại fan page:android

Bài tập 8: Các kiểu lập trình sự kiện trong Android

Bài tập này Tôi sẽ trình bày 6 kiểu lập trình sự kiện trong Android. Tôi sẽ sử dụng một số Control căn bản để Demo, đặc biệt là Button dùng để tạo sự kiện.

1. Onclick in XML
2. Inline anonymous listener
3. Activity is listener
4. Listener in variable
5. Explicit listener class
6. View Subclassing

- Tôi sẽ lần lượt đưa ra 6 ví dụ khác nhau cho 6 kiểu lập trình sự kiện ở trên, các bạn hãy cố gắng theo dõi, nó rất quan trọng để làm các bài tập tiếp theo.
1. Onclick in XML:
- Ví dụ 1: Đơn giản chỉ là cộng 2 số, bạn thiết kế giao diện như bên dưới:
- Khi nhấn vào nút “Tổng 2 số”, chương trình sẽ xuất kết quả như hình bên trên : 80+33= 113
- Bạn xem Layout Outline để dễ thiết kế (chú ý là bạn có thể bỏ LinearLayout1 đi):

- Chú ý là ta sử dụng Onclick in XML:
- Trong đoạn lệnh ở trên thì ta sử dụng android:conClick=”btn_tong2so”, tức là ta đã gán một sự kiện click cho Button này, sự kiện này tên là btn_tong2so. Ta cần khai báo một hàm btn_tong2so ở trong Activity class như hình bên dưới:
- Khi chạy ứng dụng bạn sẽ được kết quả như bên dưới:

2. Inline anonymous listener
- Ví dụ viết chương trình chuyển đổi năm dương lịch qua năm âm lịch như hình bên dưới:
- Khi người sử dụng nhập vào EditText giá trị là 1 năm Dương Lịch bất kỳ nào đó rồi nhấn nút “Chuyển đổi”, chương trình sẽ chuyển năm dương lịch thành năm âm lịch. Trong ví dụ trên nếu người sử dụng nhập 2013 thì sẽ ra năm âm lịch là “Quý Tỵ”.
- Chú ý là ta tạo một anonymous listener, trước tiên bạn hãy xem Outline XML để cho dễ bề thiết kế:
- Để chuyển từ năm dương lịch sang năm âm lịch bạn cần biết một số thông tin sau:

- Bây giờ ta tiến hành gán sự kiện cho nút “Chuyển đổi” (ở đây id Tôi để là button1), mở Activity class lên vào sửa lệnh như bên dưới:
-  Bạn tự đưa lệnh vào Bước 1, Bước 2, bước 3 ở trên. Cách lấy dữ liệu nhập vào từ EditText đã hướng dẫn ở phần Onclick in XML, làm theo cái này để lấy được giá trị là năm dương lịch ra, sau đó lấy năm này xử lý theo bảng Can và Chi như hướng dẫn thì Ta sẽ ra được năm Âm lịch tương ứng.
3. Activity is listener:
- Trong cách viết sự kiện này thì Activity sẽ implements interface có kiểu sự kiện (rất nhiều loại interface). Ở đây Tôi chỉ ví dụ trường hợp cho Button các trường hợp khác các bạn tự tìm hiểu và suy luận ra.
- Tôi sẽ có một bài ví dụ nhỏ sau: Hãy xây dựng ứng dụng tính Chỉ số khối cơ thể -chữ viết tắt BMI (Body Mass Index )- được dùng để đánh giá mức độ gầy hay béo của một người. Chỉ số này có thể giúp xác định một người bị bệnh béo phì hay bị bệnh suy dinh dưỡng.
+Cách tính như sau:
Gọi W là khối lượng của một người (tính bằng kg) và H là chiều cao của người đó (tính bằng m), chỉ số khối cơ thể được tính theo công thức:
Phân loại để đánh giá như sau:

• BMI < 18: người gầy
• BMI = 18 – 24,9: người bình thường
• BMI = 25 – 29,9: người béo phì độ I
• BMI = 30 – 34,9: người béo phì độ II
• BMI > 35: người béo phì độ III

Tôi sẽ thiết kế giao diện như hình bên dưới và cung cấp Outline, các bạn hãy thiết kế lại để nâng cao kinh nghiệm:
-Bạn thấy đó: Thông số bên trên chính là của chính Tôi, Tên Tôi là Thanh, chiều cao 1.68 mét, cân nặng 58 kg. Khi Tôi chọn “Tính BMI” thì chương trình sẽ tính ra được BMI của Tôi là 20.5 và chẩn đoán là “Bình thường”, tức là Tôi có sức khỏe tốt, dáng người chuẩn (có thể là niềm ước ao của một số các bạn trong lớp).
- Để các bạn đỡ căng thẳng thì Tôi xin nói lý do vì sao Tôi lại viết phần mềm này làm ví dụ minh họa. Bởi vì bạn gái của Tôi luôn luôn chê Tôi gầy (hay gọi là Xí Quách gì đó). Tôi đã chứng mình là Tôi có dáng người chuẩn không cần chỉnh bằng cách viết phần mềm này (công thức theo chuẩn Quốc Tế nên nó là một bằng chứng không thể chối cãi). Tôi nghĩ các bạn cũng có thể dùng nó để chứng minh rằng mình không bị Béo Phì Cấp độ 3.
- Quay trở lại ví dụ ,Bạn xem Outline của giao diện này dưới đây (Tôi cố tình không cung cấp source XML nhằm mục đích kích thích các bạn tự tìm tòi):

- Đây là nội dung Coding trong Activity:

import java.text.DecimalFormat;
import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
public class MainActivity extends Activity
implements OnClickListener{
Button btnChandoan;
EditText editTen,editChieucao,
editCannang,editBMI,editChandoan;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnChandoan=(Button) findViewById(R.id.btntinhBMI);
btnChandoan.setOnClickListener(this);
editTen=(EditText) findViewById(R.id.editten);
editChieucao=(EditText) findViewById(R.id.editchieucao);
editCannang=(EditText) findViewById(R.id.editcannang);
editBMI=(EditText) findViewById(R.id.editBMI);
editChandoan=(EditText) findViewById(R.id.editChanDoan);
}
@Override
public void onClick(View arg0) {
double H=Double.parseDouble(editChieucao.getText()+””);
double W=Double.parseDouble(editCannang.getText()+””);
double BMI=W/Math.pow(H, 2);
String chandoan=””;
if(BMI<18)
{
chandoan=”Bạn gầy”;
}
else if(BMI<=24.9)
{
chandoan=”Bạn bình thường”;
}
else if(BMI<=29.9)
{
chandoan=”Bạn béo phì độ 1″;
}
else if(BMI<=34.9)
{
chandoan=”Bạn béo phì độ 2″;
}
else
{
chandoan=”Bạn béo phì độ 3″;
}
DecimalFormat dcf=new DecimalFormat(“#.0″);
editBMI.setText(dcf.format(BMI));
editChandoan.setText(chandoan);
}
}

- a) Bạn quan sát Activity này sẽ implements interface OnClickListener
- b) Bản thân interface OnClickListener có mộ Abstract Method là onClick(View arg0) nên ta phải Override nó.
- c) Để Button có thể hiểu được sự kiện thì Ta phải gọi dòng lệnh: btnChandoan.setOnClickListener(this); bản thân Activity là một sự kiện nên ta dùng this để truyền vào hàm.
- d) Bạn quan sát thêm Tôi có sử dụng : DecimalFormat dcf=new DecimalFormat(“#.0“); Mục đích là Tôi định dạng 1 số lẻ thập phân, bạn muốn 2 số lẻ thập phần thì ghi “#.00″ hay muốn 3 thì “#.000″ …vân vân.
Bạn có thể load đầy đủ coding mẫu ở đây: http://www.mediafire.com/?71khpisxa3wmvq5
4) Listener in variable:
- Tương tự như Activity Is listener, nhưng  khác ở chỗ thay vì implement interface cho Activity thì nó lại được lưu trữ vào một biến có kiểu Listener trong activity. Làm cách này thì ta có thể chia sẻ chung một biến sự kiện cho các control khác nhau.
- Ví dụ bạn xem hình bên dưới:
- Bạn thấy đó, ở trên khai báo 1 biến có kiểu listener là interface OnClickListener.
- Và biến này sẽ được chia sẻ cho 2 Button Login và Cancel.
- Bây giờ Tôi sẽ cung cấp ví dụ Chuyển đổi độ F qua C và ngược lại. Bạn xem giao diện bên dưới:
- Giao diện bên trên sẽ có 3 button. Ta sẽ tạo một biến sự kiện và chia sẻ cho 3 Button ở trên.
- Bạn xem Outline để thiết kế:
- Đây là công thức chuyển đổi:
-Bạn xem coding Activity:

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
public class MainActivity extends Activity {
private Button btnFar,btnCel,btnClear;
private EditText txtFar,txtCel;
private OnClickListener myVarListener=new OnClickListener() {
@Override
public void onClick(View arg0) {
//Lấy F và C từ control ở đây
if(arg0==btnFar)
{
//Bạn xử lý chuyển đổi F–>C theo công thức
}
else if(arg0==btnCel)
{
//Bạn xử lý chuyển đổi C–>F theo công thức
}
else if(arg0==btnClear)
{
txtFar.setText(“”);
txtCel.setText(“”);
txtFar.requestFocus();
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnFar = (Button)findViewById(R.id.btnFar);
btnCel = (Button)findViewById(R.id.btnCel);
btnClear = (Button)findViewById(R.id.btnClear);
txtFar = (EditText)findViewById(R.id.txtFar);
txtCel = (EditText)findViewById(R.id.txtCel);
btnFar.setOnClickListener(myVarListener);
btnCel.setOnClickListener(myVarListener);
btnClear.setOnClickListener(myVarListener);
}
}

Bạn tự viết lệnh cho 2 nút chuyển đổi : cách lấy dữ liệu đã hướng dẫn ở những kiểu lập trình sự kiện trước, bắt buộc bạn phải lấy được. Sau khi lấy được thì chỉ cần ráp vào công thức là xong.
5) Explicit listener class:
- Trường hợp này ta tách riêng một class đóng vai trò là class sự kiện riêng.
- Khi nào lượng coding trong ứng dụng khổng lồ và phức tạp thì ta nên tách class sự kiện riêng để dễ quản lý.
Tôi ví dụ giải phương trình bậc 2, bạn xem giao diện bên dưới:
- Khi chọn “Tiếp tục”, chương trình sẽ xóa trắng toàn bộ dữ liệu trên màn hình đồng thời focus tới ô Nhập a.
- Khi chọn “Giải PT”, chương trình sẽ tiến hành lấy thông số a,b,c và tiến hành giải phương trình bậc 2 và cho ra kết quả như hình trên.
- Khi chọn “Thoát”, chương trình sẽ được đóng lại.
- Bạn xem Outline dưới đây:
- Tiến hành coding, bạn mở Activity class và coding như bên dưới:

import java.text.DecimalFormat;
import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends Activity {
Button btnTieptuc,btnGiai,btnThoat;
EditText edita,editb,editc;
TextView txtkq;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnTieptuc=(Button) findViewById(R.id.btntieptuc);
btnGiai=(Button) findViewById(R.id.btngiaipt);
btnThoat=(Button) findViewById(R.id.btnthoat);
btnTieptuc.setOnClickListener(new MyEvent());
btnGiai.setOnClickListener(new MyEvent());
btnThoat.setOnClickListener(new MyEvent());
edita=(EditText) findViewById(R.id.edita);
editb=(EditText) findViewById(R.id.editb);
editc=(EditText) findViewById(R.id.editc);
txtkq=(TextView) findViewById(R.id.txtkq);
}
public void giaiPtb2()
{
String sa=edita.getText()+””;
String sb=editb.getText()+””;
String sc=editc.getText()+””;
int a=Integer.parseInt(sa);
int b=Integer.parseInt(sb);
int c=Integer.parseInt(sc);
String kq=””;
DecimalFormat dcf=new DecimalFormat(“#.00″);
if(a==0)
{
if(b==0)
{
if(c==0)
kq=”PT vô số nghiệm”;
else
kq=”PT vô nghiệm”;
}
else
{
kq=”Pt có 1 No, x=”+dcf.format(-c/b);
}
}
else
{
double delta=b*b-4*a*c;
if(delta<0)
{
kq=”PT vô nghiệm”;
}
else if(delta==0)
{
kq=”Pt có No kép x1=x2=”+dcf.format(-b/(2*a));
}
else
{
kq=”Pt có 2 No: x1=”+dcf.format((-b-Math.sqrt(delta))/(2*a))+
“; x2=”+dcf.format((-b-Math.sqrt(delta))/(2*a));
}
}
txtkq.setText(kq);
}
private class MyEvent implements OnClickListener
{
@Override
public void onClick(View arg0) {
if(arg0==btnTieptuc)
{
edita.setText(“”);
editb.setText(“”);
editc.setText(“”);
edita.requestFocus();
}
else if(arg0.getId()==R.id.btngiaipt)
{
giaiPtb2();
}
else if(arg0.getId()==R.id.btnthoat)
{
finish();
}
}
}
}

- Bạn quan sát coding ở bên trên. Tôi tạo một lớp sự kiện tên là MyEvent, control nào muốn được gán sự kiện chỉ cần gọi lệnh giống như Tôi gán cho Button Giải phương trình:
btnGiai.setOnClickListener(new MyEvent());
- Trong hàm public void onClick(View arg0) . Bạn để ý là lúc thì Tôi so sánh theo Object, lúc thì Tôi lại lấy Id ra để so sánh. Đây là cố ý của Tôi, Tôi muốn nói rằng các bạn có thể kiểm tra xem Button nào sẽ được chọn trên giao diện bằng cách so sánh đối tượng hoặc lấy Id ra để so sánh (tùy ý đồ lập trình của mỗi người)
- Ở đây Tôi có 1 lời khuyên cho các bạn là khi phải xử lý quá nhiều dòng lệnh (lệnh phức tạp) thì bạn nên viết thành từng hàm riêng, và trong hàm xử lý sự kiện  bạn chỉ cần gọi tên hàm mà thôi. Cụ thể là đối với Button “Giải PT” thì Tôi lại viết và gọi riêng hàm giaiPtb2(), còn đối với Button Tiếp tục và Thoát thì Tôi lại không cần thiết viết hàm vì xử lý quá đơn giản.
6. View Subclassing
- Kỹ thuật này không được phổ biến cho lắm. Bạn chỉ sài khi thêm Control động (lúc runtime) vào màn hình. Ta có thể dùng bất kỳ kỹ thuật nào (6 cách Tôi vừa nêu) để thêm sự kiện động cho một Button động.
-Ở cách cuối cùng này thì bạn phải override phương trình performClick của chính Button control:
- Như vậy các bạn đã được thực hành về các kiểu lập trình sự kiện trong Android, biết được cách lấy dữ liệu từ EditText, biết xử lý định dạng dữ liệu, củng cổ thêm được Layout.
- Trong các bài tập sắp tới các bạn sẽ được thực hành về Toast & Alert Dialog, và rất nhiều  các control cơ bản cũng như nâng cao trong Android .
- Bạn phải hiểu rõ các kỹ thuật lập trình này để tùy vào từng trường hợp cụ thể mà bạn nên quyết định kỹ thuật nào cho phù hợp.
Chúc các bạn thành công.

Mọi thắc mắc,góp y xin vui lòng comment bên dưới hoặc tại fan page:android

Bài tập 7: Làm quen với các Layout trong Android

Để thiết kế giao diện tốt cho Android thì trước tiên các bạn phải biết sử dụng một số Layout cơ bản trong Android:
1) Cách tạo Layout và kết nối Layout vào Activity
2) Cách sử dụng HierarchyViewer 
3) Các Layout cơ bản:

• FrameLayout
• LinearLayout
• TableLayout
• RelativeLayout
• AbsoluteLayout

*** Đồng thời bạn phải biết kết hợp các Layout này lại với nhau để cho ra được giao diện phức tạp như ý muốn.
- Tôi chỉ nêu ra một số đặc điểm, không thể nói hết ở đây. Các bạn sẽ từ từ cập nhập sau khi đã quen với Layout.
- Trước tiên bạn cần biết cách tạo một Layout mới và cách kết nối nó vào Activity như thế nào:
1) Cách tạo Layout và kết nối Layout vào Activity:
a) Layout mặc định đầu tiên khi bạn tạo một Android Project:
- Khi bạn tạo một Android Project thì mặc nhiên sẽ có một Activity được chỉ định chạy đầu tiên khi bạn thực thi ứng dụng:

- Bạn quan sát hình trên: Khi bạn tạo một ứng dụng Android thì mặc nhiên sẽ tạo luôn một Activity để thực thi đầu tiên khi bạn chạy ứng dụng. Ứng với một Activity thì nó sẽ có 1 Layout đi kèm. Trong hình trên thì MainActivity.java (số 1) sẽ có layout đi kèm là activity_main.xml (số 2 - và bạn nhớ luôn là activity_main này sẽ được tự động tạo ra trong thư mục gen của Android, dựa vào đây để ta kết nối Layout vào Activity).
- Như đã nói ở những bài tập trước: Mọi Activity muốn được triệu gọi thành công trong ứng dụng thì bắt buộc nó phải được khai báo trong AndroidManifest.xml (số 3). Bạn double click vào Manifest và nhìn vào vùng số 4, MainActivity được khai báo trong này đồng thời đăng ký là Activity sẽ khởi động lúc ứng dụng được thực thi (xem vùng Tôi bôi màu xanh phần intent-filter).
- Tiếp theo bạn Double – click vào tập tin MainActivity.java:

- Nhìn vào hàm onCreate, bạn thấy dòng lệnh : setContentView(R.layout.activity_main); chính là dòng lệnh dùng để kết nối Layout vào Activity. Bạn nhớ là activity_main phải được tự động tạo ra trong gen như hình bên dưới:

b) Đổi Layout mặc định bằng một Layout khác bất kỳ:
- Để tạo một Layout mới, bạn click chuột phải vào Project/ chọn New/ chọn Android XML File:

- Khi bạn chọn Android XML File thì màn hình bên dưới xuất hiện: Đặt tên cho Layout, chọn kiểu Layout rồi nhấn nút Finish:

- Ở trên Tôi đặt tên là : my_new_layout, sau khi nhấn nút Finish bạn quan sát Package Explorer:

- Bạn thấy Tôi double – click vào layout : my_new_layout và kéo thả một số control vào giao diện như hình bên trên (bạn nhớ là my_new_layout phải được tự động xuất hiện trong gen – bạn tự kiểm tra).
- Bây giờ bạn vào lại MainActivity.java. Sửa lại dòng lệnh setContentView thành:

- Khởi động chương trình và bạn thấy ứng dụng sẽ chạy cái Layout mới này chứ không phải Layout cũ nữa:

2) Cách sử dụng HierarchyViewer:
- Như bạn đã biết, một Layout phải được kết nối vào Activity nào đó thông qua hàm setContentView, Android sẽ có cơ chế dịch XML thành Java code:

- Ta có thể dùng HierarchyViewer để hiển thị cấu trúc UI của màn hình hiện tại trên emulator hoặc thiết bị thật:
Bạn vào thư mục SDK của bạn / vào thư mục Tools/ rồi chạy tập tin monitor.bat :

3) Các Layout cơ bản:
a) FrameLayout:
- Là loại Layout cơ bản nhất, đặc điểm của nó là khi gắn các control lên giao diện thì các control này sẽ luôn được “Neo” ở góc trái trên cùng màn hình, nó không cho phép chúng ta thay đổi vị trí của các control theo một Location nào đó.
- Các control đưa vào sau nó sẽ đè lên trên và che khuất control trước đó (trừ khi ta thiết lập transparent cho control sau):
- Bạn xem đoạn cấu trúc XML dưới này:

<?xml version=”1.0″ encoding=”utf-8″?>
<FrameLayout android:id=”@+id/mainlayout” android:layout_height=”fill_parent” android:layout_width=”fill_parent” android:orientation=”vertical” xmlns:android=”http://schemas.android.com/apk/res/android”&gt;
<ImageView android:layout_height=”wrap_content” android:layout_width=”wrap_content” android:padding=”5px” android:src=”@drawable/blue“/>
<ImageView android:layout_height=”wrap_content” android:layout_width=”wrap_content” android:padding=”5px” android:src=”@drawable/red“/>
</FrameLayout>

- Bạn thấy đó, hình màu đỏ và màu xanh luôn được “neo” ở góc trái màn hình. Hình màu đỏ đưa vào sau sẽ đè lên trên hình màu xanh.
Chú ý 2 dòng lệnh bên dưới:
- android:src=”@drawable/blue“
- android:src=”@drawable/red“
Là do ta kéo 2 cái hình tên là blue và red vào thư mục drawable của ứng dụng
b) LinearLayout
- Layout này cho phép sắp xếp các control theo 2 hướng trên giao diện: Hướng từ trái qua phải và hướng từ trên xuống dưới.

- Bạn có thể dùng margin, gravity, weight để hỗ trợ cho việc thiết kế. Ở đây Tôi không có thời gian nhiều nên chỉ nói đặc điểm chính của LinearLayout, các bạn tự tìm hiểu thêm.
- Ta có thể dùng Properties hỗ trợ sẵn trong Eclipse để thiết lập các thuộc tính cho control:
- Ví dụ như để căn lề các control trên giao diện ta dùng layout_gravity:

- hay để căn lề nội dung bên trong của control dùng gravity:

- Bạn cũng phải biết so sánh sự khác biệt giữa Padding và Margin:

- Ví dụ thay đổi Padding (internal spacing – khoảng cách giữa nội dung bên trong so với đường viền của control):

- Ví dụ về đổi Margin (external spacing – khoảng cách giữa control này với control khác):

c) TableLayout
-Cho phép sắp các control theo dạng lưới (dòng và cột)
- TableLayout sẽ xem dòng nào có số lượng control nhiều nhất để xác định rằng nó có bao nhiêu cột (lấy dòng có số lượng control nhiều nhất làm số cột chuẩn).

- Như vậy theo hình trên thì bạn phải nói là TableLayout này có 4 cột, 3 dòng.
- Dùng layout_span để trộn các cột:

- Dùng layout_column để di chuyển vị trí của control đến một cột nào đó trên 1 dòng:
- Dùng stretchColumns để dãn đều các control, các cell (ta thường dùng dấu “*”):
d) RelativeLayout:
- RelativeLayout cho phép sắp xếp các control theo vị trí tương đối giữa các control khác trên giao diện (kể cả control chứa nó). Thường nó dựa vào Id của các control khác để sắp xếp theo vị trí tương đối. Do đó khi làm RelativeLayout bạn phải chú ý là đặt Id control cho chuẩn xác, nếu sau khi Layout xong mà bạn lại đổi Id của các control thì giao diện sẽ bị xáo trộn (do đó nếu đổi ID thì phải đổi luôn các tham chiếu khác sao cho khớp với Id bạn mới đổi).
- Dưới đây là ví dụ về cách sử dụng RelativeLayout (bạn để ý những dòng tô đậm):
- Ta có thể sử dụng công cụ trong Eclipse để thiết kế :
e) AbsoluteLayout:
- Cho phép thiết lập các control giao diện theo vị trí tùy thích:

- Như vậy các Tôi đã giới thiệu sơ qua cách tạo Layout và cách sử dụng một số Layout cụ thể, tùy từng trường hợp mà các bạn ứng dụng vào. Thông thường ứng với mỗi một ứng dụng cụ thể thì bạn phải kết hợp nhiều loại Layout lại với nhau.
- Bạn cần hiểu rõ các loại Layout để giúp ích cho quá trình thiết kế giao diện
- Bài tập sau Tôi sẽ hướng dẫn các bạn cách sử dụng một số control cơ bản và cách viết sự kiến cho Button như thế nào.
Chúc các bạn thành công.

Mọi thắc mắc,góp ý xin vui lòng comment bên dưới hoặc tại fan page:android