Bài 1 – TextView, ảnh, nút bấm

Mở Eclipse, hoặc Android Studio, nháy vào file, new, android application project, cửa sổ bật ra như sau:

Ghi tên là baidau, dòng thứ ba sửa chỗ example thành chữ khác, com.bai chẳng hạn. Nếu bạn để nguyên nó là com.example thì khi bạn submit app lên Google Play sẽ bị từ chối ngay từ lúc upload file apk.  Vậy để cho quen thì mọi ứng dụng cứ sửa luôn example thành tên khác, đỡ quên.

Ấn next cho đến hết.

Màn hình bật ra

Hãy xóa từ chữ Override thứ hai đến hết cái ngoặc } dưới chữ return true, còn lại như sau

Bây giờ hãy nhìn vào màn hình, các chữ extends, override, super không cần nhìn đến, nó là thủ tục. Chỉ cần biết hiện có một class tên là MainActivity, ta sẽ thêm các thứ cần thiết vào.

Nháy đúp vào folder res bên trái, nháy đúp vào layout, nháy tiếp vào activity­_main, màn hình bung ra như sau

Copy đoạn sau thay vào trong activity­_main.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" >   

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ghi chữ ở đây"
        android:textColor="#800000"
        android:textSize="20dp" />

</LinearLayout>

Màn hình như sau.

Ta vừa làm bước 1 gọi là thiết kế giao diện, đưa ra màn hình cái textView, là ô để ghi chữ vào. Folder layout là chỗ để tạo các file có đuôi xml, dùng để thiết kế giao diện hiển thị mọi thứ.

Bây giờ quay về mainactivity.java, copy đoạn sau vào trên chữ Override

TextView tv;

Dòng này ta khai báo một TextView có tên tv. Màn hình báo lỗi đỏ, hãy ấn tổ hợp Ctrl+Shift+O để nhập thư viện cần dùng vào.

Copy dòng sau xuống dưới dòng 

setContentView(R.layout.activity_main);

tv = (TextView)findViewById(R.id.tv);

Dòng này ta khai báo địa chỉ của TextView ở trong file activity_main.

Nháy chuột phải vào baidau, Run as, Android Application.

Màn hình bật ra bạn nháy chọn điện thoại,tích vào chỗ Use same device for future launches, OK, ta đã có chương trình đầu tiên trên điện thoại Android.

Để nối điện thoại vào máy tính để test app, bạn đọc bài này.

Copy tiếp dòng này vào dưới dòng findViewById

tv.setText("Gõ chữ tùy ý");

Save và chạy chương trình.

Vậy dòng code này mạnh hơn dòng chữ trong activity_main, dù trong file xml ta viết gì thì nó sẽ vẫn hiện chữ theo code.

Để cho chữ vào giữa, bạn quay lại file vào activity­_main trong layout, thêm dòng sau vào

android:layout_gravity="center_horizontal"

Nháy chuột phải vào res, New, Folder, đặt tên là drawable, finish

Copy một file ảnh bất kỳ vào trong drawable, ở đây tôi có ảnh tên là abc.

Trong file activity_main, copy các dòng sau vào trên dòng dưới cùng

<ImageView
            android:id="@+id/img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"           
            android:contentDescription="@null"
            android:src="@drawable/abc" />

Copy dòng sau vào trên chữ Override

ImageView im;

Ấn Ctrl+Shift+O để nhập thư viện mới vào.

Copy dòng sau xuống dưới dòng 

setContentView(R.layout.activity_main);

im = (ImageView) findViewById(R.id.img);

Chạy thử để thấy ảnh hiện ra màn hình.

Lại copy đoạn sau vào file activity_main, trên dòng cuối cùng, lưu lại

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="41dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp" >

        <Button
            android:id="@+id/bu1"
            android:layout_width="85dp"
            android:layout_height="40dp"
            android:text="Nút bấm"
            android:textColor="#0000cd"
            android:textSize="14sp" />

        <Button
            android:id="@+id/bu2"
            android:layout_width="65dp"
            android:layout_height="40dp"
            android:layout_marginLeft="4dp"
            android:text="Next"
            android:textColor="#0000cd"
            android:textSize="14sp" />
    </LinearLayout>

Copy dòng sau vào trên chữ Override

Button b1, b2;

Ấn Ctrl+Shift+O để nhập thư viện mới vào.

Copy dòng sau xuống dưới dòng 

setContentView(R.layout.activity_main);

b1 = (Button) findViewById(R.id.bu1);

b2 = (Button) findViewById(R.id.bu2);

Copy tiếp các dòng sau xuống dưới

b1.setOnClickListener(new View.OnClickListener() {

                  @Override

                  public void onClick(View v) {

                        tv.setText("Hai con chim");  

                  }

            });

Lưu lại, chạy chương trình, ấn nút bấm để thấy chữ hai con chim. Nút Next ấn không thấy gì vì ta chưa code cho nó.

Như vậy trong bài đầu tiên ta đã thực hiện các thao tác rất cơ bản của lập trình Android. Đó là thiết kế giao diện, đưa chữ, ảnh, nút bấm ra màn hình, xử lý code để có chữ mình muốn.

Tất cả các ứng dụng Android đều có các bước làm tương tự, đầu tiên là ở file xml trong layout, tiếp đến là khai báo biến, tham chiếu địa chỉ, rồi xử lý code.

Bạn chẳng cần biết extends, override, super là gì vẫn làm được, chúng luôn có ở đó, hầu như trong mọi chương trình, ta cứ code mà không đụng vào chúng.

Nhìn vào file activity_main.xml bạn sẽ thấy các từ width, height, marginLeft, chúng có nghĩa đúng như tiếng Anh, là rộng, cao, cách bên trái.

Hãy tự tìm hiểu thêm bằng cách để con trỏ vào chữ l trong dòng android:layout_marginLeft="4dp"

Rồi gõ phím Ctrl+Space bar, để xem các gợi ý, bạn tùy chọn xem nó thay đổi ra sao.