Membuat aplikasi Android pertama Anda

1. Sebelum memulai

Instal Android Studio di komputer jika Anda belum melakukannya. Pastikan komputer Anda memenuhi persyaratan sistem yang diperlukan untuk menjalankan Android Studio (ada di bagian bawah halaman download). Jika Anda memerlukan petunjuk yang lebih mendetail terkait proses penyiapan, lihat codelab Mendownload dan menginstal Android Studio.

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 mengubah 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):

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 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.

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

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

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 mengerjakan project lebih cepat.

3. Pastikan tab Phone and Tablet telah dipilih.
4. 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!".
5. Klik Next. Dialog New Project akan terbuka. Kolom ini memiliki beberapa kolom untuk mengonfigurasi project Anda.
6. 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 Use legacy android.support libraries sudah tidak dicentang.

7. Tekan Finish. 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:

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

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

9. 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.

Setelah menekan Split, Anda akan melihat tiga area:

• 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:

10. 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.

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. Tab 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.

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.

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

4. 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().

Catatan: Ingat bahwa fungsi adalah bagian dari program yang melakukan tugas tertentu.

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.

Catatan: Compiler mengambil kode Kotlin yang Anda tulis, melihatnya baris demi baris, dan menerjemahkannya menjadi sesuatu yang dapat dipahami komputer. Proses ini disebut mengompilasi kode.

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 ingin mengingat kembali, kunjungi fungsi Buat dan gunakan di codelab Kotlin), tetapi ada beberapa perbedaan dengan fungsi composable.

• 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. Ubah fungsi Greeting() untuk memperkenalkan diri Anda, bukan mengucapkan "Hello":

@Composable
fun Greeting(name: String) {
   Text(text = "Hi, my name is $name!")
}

2. Build ulang DefaultPreview dengan menekan tombol di kiri atas panel desain:

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.

Android Studio secara default menggunakan tema terang untuk editor sehingga 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.

3. Ubah fungsi DefaultPreview() dengan nama Anda. Kemudian, build ulang dan lihat kartu ucapan yang dipersonalisasi.

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

6. Mengubah warna latar belakang

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.

2. Pilih Surround with Container.

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

3. Hapus Box dan ketik Surface() sebagai gantinya.

@Composable
fun Greeting(name: String) {
   Surface() {
       Text(text = "Hi, my name is $name!")
   }
}

4. Penampung Surface memiliki parameter color, tetapkan ke Color.

@Composable
fun Greeting(name: String) {
   Surface(color = Color) {
       Text(text = "Hi, my name is $name!")
   }
}

5. Saat mengetik Color, Anda mungkin melihat warnanya merah dan digarisbawahi. Untuk mengatasi hal ini, scroll ke bagian atas file yang bertuliskan import, lalu tekan ketiga tombol.

6. 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

7. 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.

Sekarang 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.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.GreetingCard

8. Perhatikan Color yang Anda ketik di tanda kurung Surface telah berubah dari warna merah dan digarisbawahi menjadi digarisbawahi warna merah. Untuk memperbaikinya, tambahkan titik setelahnya. 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 fitur ini akan menyarankan warna yang berbeda.

9. 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!")
   }
}

10. Klik Build & Refresh. Teks dikelilingi oleh warna yang Anda pilih.

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 untuk mengurutkan impor baru sesuai abjad.

import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.padding

2. Tambahkan pengubah padding ke teks dengan ukuran 24.dp, klik Build & Refresh.

Catatan: Anda mempelajari lebih lanjut piksel kepadatan mandiri (DP) di jalur berikutnya, tetapi lihat artikel ini jika Anda ingin membaca lebih lanjut sekarang.

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

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 mem-build aplikasi Android pertama Anda dengan Compose, bagus sekali!

Codelab ini adalah bagian dari kursus Dasar-Dasar Android dengan Compose. Untuk mempelajari cara menjalankan aplikasi Anda di emulator atau perangkat fisik, lihat codelab berikutnya di jalur ini.

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 Preview.
• 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

• Kosakata Dasar-Dasar Android di Kotlin
• Mengenal Android Studio
• Ringkasan project
• Membuat project
• Menambahkan kode dari template
• Jetpack Compose