Membuat aplikasi Android pertama Anda

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

1. Sebelum memulai

Dalam codelab ini, Anda akan membuat aplikasi Android pertama dengan template project yang disediakan oleh Android Studio. Anda menggunakan Kotlin dan Jetpack Compose untuk menyesuaikan aplikasi Anda. Perhatikan bahwa Android Studio selalu diupdate dan terkadang ada perubahan UI, jadi tidak masalah jika Android Studio Anda terlihat sedikit berbeda dari screenshot di codelab ini.

Prasyarat

  • Pengetahuan Kotlin dasar

Yang akan Anda butuhkan

  • Versi terbaru Android Studio

Yang akan Anda pelajari

  • Cara membuat Aplikasi Android dengan Android Studio
  • Cara menjalankan aplikasi dengan alat Pratinjau di Android Studio
  • Cara mengupdate teks dengan Kotlin
  • Cara mengupdate Antarmuka Pengguna (UI) dengan Jetpack Compose
  • Cara melihat pratinjau aplikasi dengan Pratinjau di Jetpack Compose

Yang akan Anda build

  • Aplikasi yang memungkinkan Anda menyesuaikan pengantar.

Berikut adalah tampilan aplikasi saat Anda menyelesaikan codelab ini (kecuali jika akan disesuaikan dengan nama Anda):

Gambar ini menampilkan pratinjau default dengan teks yang bertuliskan, "Halo, nama saya Meghan!" dengan latar belakang magenta dan padding di sekelilingnya.

Yang akan Anda butuhkan

  • Komputer yang dilengkapi Android Studio.

2. Menonton video beserta kodenya (Opsional)

Jika Anda ingin menonton salah satu instruktur kursus saat tengah menyelesaikan codelab, putar video di bawah.

Sebaiknya luaskan video ke layar penuh (dengan ikon ini Simbol ini menampilkan 4 sudut pada kotak yang disorot untuk menunjukkan mode layar penuh. di pojok kanan bawah video) agar Anda dapat melihat Android Studio dan kodenya dengan lebih jelas.

Langkah ini opsional. Anda juga dapat melewati video dan langsung memulai petunjuk codelab.

3. Membuat project menggunakan template

Dalam codelab ini, Anda akan membuat aplikasi Android dengan template project Empty Compose Activity yang disediakan oleh Android Studio.

Untuk membuat project di Android Studio:

  1. Klik dua kali ikon Android Studio untuk meluncurkan Android Studio.

Gambar ini menampilkan logo untuk Android Studio.

  1. Dalam dialog Welcome to Android Studio, klik New Project.

Gambar ini adalah halaman pembuka Android Studio

Jendela New Project akan terbuka dengan daftar template yang disediakan oleh Android Studio.

Gambar ini menampilkan jendela Project baru, yang menyertakan template untuk membuat aplikasi bagi ponsel dan tablet, Wear OS, Android TV, dan Otomotif.

Di Android Studio, template project adalah project Android yang menyediakan cetak biru untuk jenis aplikasi tertentu. Template membuat struktur project dan file yang diperlukan oleh Android Studio untuk membuat project Anda. Berdasarkan template yang dipilih, template ini menyediakan kode awal untuk membantu Anda melakukan lebih cepat.

  1. Pastikan tab Phone and Tablet telah dipilih.
  2. Klik template Empty Compose Activity untuk memilihnya sebagai template untuk project Anda. Template Empty Compose Activity adalah template untuk membuat project sederhana yang dapat Anda gunakan untuk membuat aplikasi Compose. Template ini memiliki satu layar dan menampilkan teks "Hello Android!".
  3. Klik Berikutnya. Dialog New Project akan terbuka. Kolom ini memiliki beberapa kolom untuk mengonfigurasi project Anda.
  4. Konfigurasikan project Anda sebagai berikut:

Kolom Name digunakan untuk memasukkan nama project Anda, untuk jenis codelab ini "Kartu Ucapan".

Biarkan kolom Package name apa adanya. Ini adalah cara file Anda akan disusun dalam struktur file. Dalam hal ini, nama paket akan menjadi com.example.greetingcard.

Biarkan kolom Save location sebagaimana adanya. Project ini berisi lokasi tempat semua file yang terkait dengan project Anda disimpan. Catat lokasi tersebut di komputer agar Anda dapat menemukan file Anda.

Kotlin sudah dipilih di kolom Language. Bahasa menentukan bahasa pemrograman yang ingin Anda gunakan untuk project. Karena Compose hanya kompatibel dengan Kotlin, Anda tidak dapat mengubah kolom ini.

Pilih API 21: Android 5.0 (Lollipop) dari menu di kolom Minimum SDK. Minimum SDK menunjukkan versi minimum Android yang dapat dijalankan oleh aplikasi Anda.

Kotak centang Gunakan library android.support lama sudah tidak dicentang.

d22bfe6ae8de4147.png

  1. Tekan Selesai. Proses ini mungkin memerlukan waktu lama - sembari menunggu Anda dapat melakukan aktivitas lain. Ketika Android Studio sedang menyiapkan, status progres dan pesan menunjukkan apakah Android Studio masih menyiapkan project Anda. Tampilannya mungkin terlihat seperti ini:

Gambar ini menampilkan status progres yang berputar dan teksnya bertulis, "2 proses berjalan...".

Pesan yang terlihat serupa dengan ini akan menginformasikan Anda saat penyiapan project dibuat.

Gambar ini menampilkan pesan sinkronisasi Gradle yang bertuliskan, "Sinkronisasi Gradle selesai dalam 44 detik 546 md".

  1. Anda mungkin melihat panel What's New yang berisi informasi terkini tentang fitur-fitur baru di Android Studio. Tutup sekarang.

Gambar ini menampilkan panel What's New, yang menyediakan informasi tentang update di Android Studio.

  1. Klik Split di kanan atas Android Studio, ini memungkinkan Anda untuk melihat kode dan desain. Anda juga dapat mengklik Code untuk melihat kode saja atau klik Design untuk melihat desain saja.

b19824b6bdd2eb0e.png

Setelah menekan Split, Anda akan melihat tiga area:

1dd07c51c7fff62c.png

  • Tampilan Project (1) menampilkan file dan folder project Anda
  • Tampilan Code (2) adalah tempat Anda mengedit kode
  • Tampilan Design (3) adalah tempat Anda melihat pratinjau tampilan aplikasi

Di tampilan Design, Anda akan melihat panel kosong dengan teks ini:

Teks di bagian ini bertuliskan "Build berhasil diperlukan sebelum pratinjau dapat ditampilkan" di satu baris dan "Build and Refresh" di baris di bawah.

  1. Klik Build & Refresh. Proses build mungkin memerlukan waktu beberapa saat, tetapi setelah selesai, pratinjau akan menampilkan kotak teks yang bertuliskan "Hello Android!". Aktivitas Compose kosong berisi semua kode yang diperlukan untuk membuat aplikasi ini.

Gambar ini menampilkan Pratinjau Default dengan teks yang bertuliskan, "Hello Android!".

4. Menemukan file project

Di bagian ini, Anda akan terus menjelajahi Android Studio dengan lebih memahami struktur file.

  1. Di Android Studio, lihat tab Project. Jendela Project menampilkan file dan folder project Anda. Saat Anda menyiapkan project, nama paketnya adalah com.example.greetingcard. Anda dapat melihat paket tersebut di sini, di tab Project. Paket pada dasarnya adalah folder tempat kode berada. Android Studio menyusun project dalam struktur direktori yang terdiri dari paket.
  2. Jika perlu, pilih Android dari menu drop-down di tab Project.

Gambar ini menampilkan tab Project dengan menu Android yang dipilih.

Ini adalah tampilan standar dan susunan file yang Anda gunakan. Ini akan berguna saat Anda menulis kode untuk project karena Anda bisa dengan mudah mengakses file yang akan Anda kerjakan di aplikasi. Namun, jika Anda melihat file di file browser, seperti Finder atau Windows Explorer, hierarki file disusun dengan sangat berbeda.

  1. Pilih Project Source Files dari menu drop-down. Sekarang Anda dapat menjelajahi file dengan cara yang sama seperti di penjelajah file apa pun.

Gambar ini menampilkan tab Project dengan menu Project Source Files yang dipilih.

  1. Pilih Android lagi untuk beralih kembali ke tampilan sebelumnya. Anda dapat menggunakan tampilan Android untuk latihan ini. Jika struktur file Anda terlihat aneh, periksa untuk memastikan Anda masih dalam tampilan Android.

5. Memperbarui teks

Setelah mengenal Android Studio, saatnya mulai membuat kartu ucapan!

Lihat tampilan Code file MainActivity.kt. Perhatikan bahwa ada beberapa fungsi yang dihasilkan secara otomatis dalam kode ini, khususnya fungsi onCreate() dan setContent().

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           GreetingCardTheme {
               // A surface container using the 'background' color from the theme
               Surface(
                   modifier = Modifier.fillMaxSize(),
                   color = MaterialTheme.colors.background
               ) {
                   Greeting("Android")
               }
           }
       }
   }
}

Fungsi onCreate() adalah titik entri ke aplikasi ini dan memanggil fungsi lain untuk membuat antarmuka pengguna. Dalam program Kotlin, fungsi main() adalah tempat spesifik dalam kode Anda tempat compiler Kotlin dimulai. Di aplikasi Android, fungsi onCreate() mengisi peran tersebut.

Fungsi setContent() dalam fungsi onCreate() digunakan untuk menentukan tata letak Anda melalui fungsi composable. Semua fungsi yang ditandai dengan anotasi @Composable dapat dipanggil dari fungsi setContent() atau dari fungsi Composable lainnya. Anotasi ini memberi tahu compiler Kotlin bahwa fungsi ini digunakan oleh Jetpack Compose untuk membuat UI.

Selanjutnya, lihat fungsi Greeting(). Fungsi Greeting() adalah fungsi composable. Perhatikan anotasi @Composable di atasnya. Fungsi composable mengambil beberapa input dan menghasilkan apa yang ditampilkan di layar.

@Composable
fun Greeting(name: String) {
   Text(text = "Hello $name!")
}

Anda telah mempelajari fungsi sebelumnya (jika Anda perlu memuat kembali, kunjungi fungsi Buat dan gunakan di Kotlin codelab), tetapi ada beberapa perbedaan dengan fungsi composable.

67e3f969c53e7149.png

  • Nama fungsi @Composable menggunakan huruf besar.
  • Anda menambahkan anotasi @Composable sebelum fungsi.
  • Fungsi @Composable tidak dapat menampilkan apa pun.
@Composable
fun Greeting(name: String) {
   Text(text = "Hello $name!")
}

Saat ini, fungsi Greeting() menggunakan nama dan menampilkan Hello untuk orang tersebut.

  1. Update fungsi Greeting() untuk memperkenalkan diri Anda, bukan mengucapkan "Halo":
@Composable
fun Greeting(name: String) {
   Text(text = "Hi, my name is $name!")
}
  1. Build ulang DefaultPreview dengan menekan tombol 2c3d9b02e673771c.png di kiri atas panel desain:

Gambar ini menampilkan Pratinjau Default dengan teks yang bertuliskan "Hai, nama saya Android!".

Bagus. Anda mengubah teks, tetapi teks memperkenalkan Anda sebagai Android, yang mungkin bukan nama Anda. Selanjutnya, Anda akan mempersonalisasinya agar memperkenalkan nama Anda.

Fungsi DefaultPreview() adalah fitur keren yang memungkinkan Anda melihat tampilan aplikasi tanpa harus mem-build seluruh aplikasi. Agar menjadi fungsi Pratinjau, Anda perlu menambahkan anotasi @Preview.

Seperti yang dapat Anda lihat, anotasi @Preview menggunakan parameter yang disebut showBackground. Jika showBackground disetel ke true, latar belakang akan ditambahkan ke pratinjau aplikasi Anda.

Karena Android Studio secara default menggunakan tema terang untuk editor, perbedaan antara showBackground = true dan showBackground = false mungkin akan sulit dilihat. Namun, seperti inilah perbedaan tampilan dengan tema gelap. Perhatikan latar belakang putih pada gambar yang disetel ke true.

Gambar ini menampilkan teks "Halo Android" dalam font hitam dengan latar belakang putih di bagian atas, dan "Halo Android" dalam font hitam dengan latar belakang gelap di bagian bawah.

  1. Update fungsi DefaultPreview() dengan nama Anda. Kemudian, build ulang dan lihat kartu ucapan yang dipersonalisasi.
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

Gambar ini menampilkan Pratinjau Default dengan teks yang bertuliskan "Hai, nama saya Meghan!".

6. Mengubah warna latar belakang teks

Sekarang Anda memiliki teks pengantar, tetapi hal ini cukup membosankan! Di bagian ini, Anda akan mempelajari cara mengubah warna latar belakang.

Untuk menetapkan warna latar belakang yang berbeda pada pendahuluan, Anda harus mengapit teks dengan Surface. Surface adalah penampung yang menampilkan bagian UI tempat Anda dapat mengubah tampilan, seperti warna latar belakang atau batas.

  1. Untuk mengapit teks dengan Surface, tandai baris teks, tekan (Alt+Enter untuk Windows atau Option+Enter di Mac), lalu pilih Surround with widget.

Gambar ini menampilkan komponen Text yang ditandai dan menu di bawahnya dengan "Surround with widget" yang dipilih.

  1. Pilih Surround with Container.

78e713bc774d05b1.png

Penampung default yang akan diberikan kepada Anda adalah Box, tetapi Anda dapat mengubahnya ke jenis penampung lainnya.

9fbdb58d26bd577a.png

  1. Hapus Box dan ketik Surface() sebagai gantinya.
@Composable
fun Greeting(name: String) {
   Surface() {
       Text(text = "Hi, my name is $name!")
   }
}
  1. Penampung Surface memiliki parameter color, tetapkan ke Color.
@Composable
fun Greeting(name: String) {
   Surface(color = Color) {
       Text(text = "Hi, my name is $name!")
   }
}
  1. Saat mengetik Warna, Anda mungkin melihat warnanya merah dan digarisbawahi. Untuk mengatasi hal ini, scroll ke bagian atas file yang bertuliskan impor, lalu tekan ketiga tombol.

Gambar ini menampilkan pernyataan impor di bagian atas MainActivity.kt.

  1. Tambahkan pernyataan ini ke bagian bawah daftar impor.
import androidx.compose.ui.graphics.Color

Daftar lengkap impor akan terlihat seperti ini:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.GreetingCard
import androidx.compose.ui.graphics.Color
  1. Dalam kode Anda, praktik terbaiknya adalah dengan tetap mencantumkan impor menurut abjad. Untuk melakukannya, tekan Help di toolbar bagian atas, ketik Optimize Imports, lalu klik Optimize Imports.

Gambar ini menunjukkan cara mencari Optimize Imports

Sekarang daftar lengkap impor akan terlihat seperti ini:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.MyApplicationTheme
  1. Perhatikan Warna yang Anda ketik di tanda kurung Permukaan telah berubah dari warna merah dan digarisbawahi menjadi digarisbawahi dengan warna merah. Untuk memperbaikinya, tambahkan titik setelah periode tersebut. Anda akan melihat pop-up yang menampilkan berbagai opsi warna.

Ini adalah salah satu fitur keren di Android Studio, yang cerdas dan akan membantu Anda jika bisa. Dalam hal ini, Anda tahu bahwa Anda ingin menentukan warna sehingga akan menyarankan warna yang berbeda.

Gambar kode ini menunjukkan Surface yang menerima argumen Color. Color memiliki titik di sampingnya dan terdapat menu di sampingnya dengan nama warna yang berbeda.

  1. Pilih warna untuk permukaan Anda. Codelab ini menggunakan magenta, tetapi Anda dapat memilih favorit Anda.
@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!")
   }
}
  1. Klik Build & Refresh. Teks dikelilingi oleh warna yang Anda pilih!

Gambar ini menampilkan Pratinjau Default dengan teks yang bertuliskan "Halo, saya Meghan!" dengan latar belakang magenta.

7. Menambahkan padding

Sekarang teks Anda memiliki warna latar belakang, selanjutnya Anda akan menambahkan beberapa ruang (padding) di sekitar teks.

Modifier digunakan untuk menambah atau mendekorasi composable. Satu Pengubah yang dapat Anda gunakan adalah pengubah padding, yang menerapkan ruang di sekitar elemen (dalam hal ini, menambahkan ruang di sekitar teks). Hal ini diperoleh dengan menggunakan fungsi Modifier.padding().

  1. Tambahkan impor ini ke bagian pernyataan impor.

Pastikan Anda menggunakan Optimize Imports sesuai abjad untuk impor baru.

import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.padding
  1. Tambahkan pengubah padding ke teks dengan ukuran 24.dp, klik Build & Refresh.
@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

Gambar ini menampilkan Pratinjau Default dengan teks yang bertuliskan "Halo, nama saya Meghan!" dengan latar belakang magenta dan padding di sekelilingnya.

Selamat - Anda telah mem-build aplikasi Android pertama Anda di Compose! Ini adalah pencapaian yang cukup besar. Luangkan waktu untuk bermain-main dengan berbagai warna dan teks lalu buat versi Anda sendiri.

8. Meninjau kode solusi

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.GreetingCardTheme

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           GreetingCardTheme {
               // A surface container that uses the 'background' color from the theme
               Surface(color = MaterialTheme.colors.background) {
                   Greeting("Android")
               }
           }
       }
   }
}

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

9. Kesimpulan

Anda telah mempelajari Android Studio dan memb-build aplikasi Android pertama Anda dengan Compose, bagus sekali!

Ringkasan

  • Untuk membuat project baru: Buka Android Studio, klik New Project > Empty Compose Activity > Next, masukkan nama untuk project Anda lalu konfigurasikan setelannya.
  • Untuk melihat tampilan aplikasi Anda, gunakan panel Pratinjau.
  • Fungsi composable mirip dengan fungsi reguler dengan beberapa perbedaan: nama fungsi memiliki huruf besar, menambahkan anotasi @Composable sebelum fungsi, fungsi @Composable tidak dapat menampilkan apa pun.
  • Modifier digunakan untuk menambah atau mendekorasi composable Anda.

Pelajari lebih lanjut