Chào các bạn, hôm trước chúng ta đã tạo được ứng dụng đầu tiên, Hello world rồi. Hôm nay chúng ta bắt đầu tìm hiểu một số thành phần giao diện cơ bản nhất trong Android là TextView, EditText và Button.

[qads]

Để bắt đầu thì các bạn tạo mới Project (Như ở bài 1 Hello world đã làm) và mở file xml ra (activity_main.xml) như sau.

Tại đây, mặc định sẽ mở vào tab Design là tab cho chúng ta xem trước giao diện và có thể kéo thả nhưng mình không muốn các bạn học cách kéo thả, vì nó rất khó kiểm soát giao diện. Vì vậy các bạn hãy chuyển sang tab Text.

Các bạn có thể nhìn thấy màn hình xem trước (4), nếu không có thì bạn hãy click vào Preview (2) để mở nó. Một giao diện chúng ta code (3). Code đến đâu chúng ta sẽ theo dõi được sự thay đổi tới đó.
Trên màn hình, các bạn sẽ nhìn thấy một đoạn code TextView như thế này.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!" />

Đoạn này chính là để hiển thị dòng chữ “Hello world” ra màn hình điện thoại. Các bạn nhìn dòng android:text=”Hello World!”, chính nó đó, các bạn có thể thay đổi text cho nó bằng tên bạn, tên người yêu bạn,… và chạy ứng dụng sẽ thấy text được thay đổi.
Vậy TextView là một thành phần giúp chúng ta hiển thị chữ lên màn hình. Các bạn nhớ Text – chữ, View – hiển thị.

Rồi. Tiếp theo, các bạn thay thế toàn bộ code trong file bằng đoạn code sau và quan sát giao diện của chúng ta.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    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="com.nguyenvanquan7826.tut2texteditbutton.MainActivity">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter text here" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click me" />

</LinearLayout>

Các bạn sẽ được giao diện như hình sau:

Trong đoạn code trên, chúng ta sửa một chút và thêm 2 đoạn của EditText và Button.

• EditText là một thành phần cho phép chúng ta nhập dữ liệu vào.
• Button là một thành phần cho phép chúng ta click vào để thao tác thực hiện xử lý một điều gì đó. Để xử lý được thì cần thêm code bên Java.

Bây giờ các bạn hãy chạy thử ứng dụng và xem nhé.

• Mình nói thêm, đến đây chưa phải toàn bộ về 3 thành phần TextView, EditText, Button. Trong các bài tiếp theo, chúng ta sẽ vừa học và vừa bổ xung nhiều kiến thức về chúng.
• Một điều nữa, ngôn ngữ chúng ta dùng để code giao diện là XML. Mỗi thành phần trong XML bắt đầu bằng thẻ mở (VD thẻ mở của TextView là <TextView> ) và kết thúc bằng thẻ đóng hoặc đóng ngay trong thẻ mở (VD TextView đóng ngay trong thẻ mở />, thẻ đóng của LinearLayout là </LinearLayout>). Phần này các bạn code giao diện nhiều sẽ dần dần hiểu ra.
• Mình rất chú trọng vào code giao diện trong loạt bài này, vì theo mình thấy, code giao diện tốt thì học Android mới tốt, code giao diện dở thì học Android rất dở.

Bài hôm nay tạm dừng tại đây! Chúc các bạn học hiệu quả. Nếu có thắc mắc, góp ý hoặc cảm nhận về bài viết, hãy để lại lời nhắn của bạn bên dưới bài viết nhé!