Hello World với Android application

Trong bài viết trước, mình đã hướng dẫn các bạn cách tạo mới một Android project. Mình cũng đã hướng dẫn các bạn cách cấu hình một Emulator để chạy ứng dụng Android là như thế nào. Trong bài viết này, chúng ta sẽ đi chi tiết hơn xí và chúng ta sẽ chỉnh sửa dòng text mặc định khi tạo mới project từ “Hello World!” thành “Hello from Huong Dan Kotlin” và “Hello from Khanh” các bạn nhé!

Ứng dụng của chúng ta khi mới khởi tạo project và chạy sẽ hiển thị dòng text “Hello World!” như sau:

Như mình đã nói trong bài viết trước, class MainActivity sẽ đảm nhận việc hiển thị giao diện trên và nó sử dụng tập tin activity_main.xml trong thư mục res/layout của project để làm điều này.

Khi các bạn click vào tập tin activity_main.xml này, mặc định các bạn sẽ thấy giao diện design được hiển thị như sau:

Các bạn có thể chuyển qua chế độ xem Code (chỉ hiển thị nội dung tập tin activity_main.xml) hoặc Split (vừa xem được nội dung tập tin activity_main.xml vừa xem được giao diện sẽ được hiển thị như thế nào).

Như mình đã nói trong bài viết trước, Android Studio cho phép chúng ta kéo thả để design giao diện. Các bạn có thể kéo thả các component trong phần Palette để tạo giao diện cho ứng dụng của mình. Android Studio sẽ tự động generate nội dung của tập tin activity_main.xml dựa vào những gì chúng ta kéo thả, cấu hình cho các component của giao diện.

Nội dung của tập tin activity_main.xml hiện tại như sau:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello World!"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Ngoài tag root <androidx.constraintlayout.widget.ConstraintLayout> định nghĩa layout cho ứng dụng, các bạn còn có thể thấy, chúng ta còn có tag <TextView> định nghĩa nội dung của dòng text “Hello World!”.

Nói nôm na về layout trong Android application thì đó là cách mà các component của Android application sẽ được hiển thị. Các bạn hãy hình dung, Android application có thể chạy trên nhiều device khác nhau, mỗi device lại có kích thước khác nhau. Vậy việc hiển thị vị trí của từng component trong một giao diện sẽ như thế nào, khoảng cách giữa các component sẽ ra sao? Việc các bạn sử dụng layout nào sẽ quyết định việc hiển thị cho các component này! Android SDK định nghĩa một số layout mặc định như Linear Layout, Relative Layout, hay Constraint Layout mà chúng ta đang sử dụng cho ví dụ của chúng ta trong bài viết này. Các bạn nên tìm hiểu kỹ các loại layout để sử dụng cho đúng cho ứng dụng của mình!

TextView là một trong các component được cung cấp bởi Android SDK, nó giúp chúng ta hiển thị các dòng text trong Android application. Ngoài TextView thì chúng ta còn có Button để hiển thị nút nhấn, EditText để nhập chữ, …

Tùy từng component, chúng ta có thể định nghĩa chiều dài, chiều rộng, màu sắc và một số các thuộc tính khác nữa. Đối với component TextView mà chúng ta đang sử dụng, như các bạn thấy, có một số thuộc tính liên quan đến layout constraint với parent. Bạn có thể thay đổi dòng chữ hiển thị cho component này sử dụng thuộc tính android:text. Như mình đã nói ở trên, mình sẽ đổi text hiển thị sang “Hello from Huong Dan Kotlin” các bạn nhé!

Chạy lại ứng dụng, các bạn sẽ thấy kết quả như sau:

Để làm việc với một component trong Android application, ngoài việc design giao diện cho nó trong tập tin Activity XML của ứng dụng, chúng ta còn có thể sử dụng code để thêm các sự kiện, behavior theo nhu cầu của mình. Nhưng trước khi làm được điều này, cho mỗi component, chúng ta cần định nghĩa ID cho component đó. Trong code, chúng ta sẽ access tới component đó sử dụng giá trị ID này.

Ví dụ, cho component TextView trong ví dụ của chúng ta, mình có thể định nghĩa một ID sử dụng thuộc tính android:id như sau:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tvHelloWorld"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello from Huong Dan Kotlin"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<TextView

android:id="@+id/tvHelloWorld"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello from Huong Dan Kotlin"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Trong code, chúng ta có thể access tới component TextView này sử dụng dòng code sau:

package com.huongdankotlin.androidexample

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val tvHelloWorld = findViewById<TextView>(R.id.tvHelloWorld)    
    }
}

package com.huongdankotlin.androidexample

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import android.widget.TextView

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

val tvHelloWorld = findViewById<TextView>(R.id.tvHelloWorld)

}

Trong Android SDK thì class R sẽ đảm nhận việc quản lý tất cả các thông tin liên quan đến resource của ứng dụng. Từ hình ảnh, âm thanh cho đến các component của ứng dụng, chúng ta đều có thể access tới chúng thông qua class R này. Đối với các component thì chúng ta sử dụng ID của chúng để access tới chúng thông qua class R.

Sau khi đã access được tới component rồi thì các bạn có thể làm bất cứ điều gì với component đó. Ví dụ như, mình có thể thay đổi text hiển thị thành “Hello from Khanh” như sau:

package com.huongdankotlin.androidexample

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val tvHelloWorld = findViewById<TextView>(R.id.tvHelloWorld)
        tvHelloWorld.text = "Hello from Khanh"
    }
}

package com.huongdankotlin.androidexample

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import android.widget.TextView

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

val tvHelloWorld = findViewById<TextView>(R.id.tvHelloWorld)

tvHelloWorld.text = "Hello from Khanh"

}

Kết quả khi mình chạy lại ứng dụng sẽ như sau:

Post Views: 54

Trả lời Hủy