Belajar Android Dengan Kotlin : Perkenalan Mengenai EditText, Button dan Text View Part 1

bewoksatukosong.com | Hallo semuanya jadi di artikel kali ini, om bewok akan mencoba android menggunakan kotlin pertama kalinya, jadi kali ini gampang banget tutorial-nya, kita cuman memberikan data yang kita ketik, lalu kita tampilkan dibawahnya, sama seperti membuat app todo aja kali ya.

Langsung saja kita mulai, yang belum tau cara install kotlin dan cara install java jdk-nya dan cara install android studio-nya kamu bisa lihat website dibawah ini.

Cara Install Android Studio di Linux

Cara Install Android Studio di Windows

Jadi di artikel kali ini kita akan belajar mengenai

1. Edit Text (ini kalau di web semacem form input type="name")

2. Button (Ini ga perlu di jelasin lagi x ya)

3. Text View (Ini semacem Teks biasa)

Kita buat project-nya terlebih dahulu dengan cara

1. Buka File - New - New Project

2. Lalu pilih Empty Activity (Lihat gambar dibawah ya kalau masih bingung).

3. Lalu kita beri nama Latihan Pertama (om bewok saranin samain aja terlebih dahulu, biar gampang buat ngikutin tutorial-nya, nanti kalau udah jago, terserah lu dah 😁😁).

Selanjutnya kita design terlebih dahulu, caranya adalah kita masuk ke

res - layout - activity_main.xml

Ada 2 cara untuk mendesain, yang pertama kita tinggal drag and drop atau kita ketikan secara manual. Nah disini om bewok ketikan saja biar sama.

Lihat yang om bewok kotakin, ada 3 opsi

1. code (untuk desain melalui code)

2. split (kita bisa code atau juga tinggal drag & drop

3. design (kita tinggal drag & drop)

Om bewok pilih split, biar ketika om bewok coding, bisa tau posisi layout tersebut.

Kita ketikan di res - layout - activity_main.xml

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

    <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:ems="10"
            android:id="@+id/et_input"
            app:layout_constraintTop_toTopOf="parent"
            android:hint="Masukan Teks"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginTop="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp" />

    <Button
            android:text="Ubah"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/btn_submit"
            app:layout_constraintTop_toBottomOf="@+id/et_input"
            android:layout_marginTop="16dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp" />

    <TextView
            android:text="Data Kosong"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv_tampil"
            app:layout_constraintTop_toBottomOf="@+id/btn_submit"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginTop="16dp"
            android:autoText="false" />
</androidx.constraintlayout.widget.ConstraintLayout>

EditText id = et_input

Button id = btn_submit

TextView = tv_tampil

Hasilnya seperti dibawah ini, sederhana sekali, karena kita belajar dari basic terlebih dahulu ya, nanti kalau udah jago, bebas deh mau bikin app yang kayak gojek juga gapapa haha.

Hasil-nya seperti dibawah ini ya.

Nah tadi kan baru design-nya saja, kalau sekarang kita buat logic-nya atau bisa dibilang "bagaimana caranya agar mereka bisa berjalan aplikasi tersebut?"

Kalian masuk ke Folder Java - com.example.latihanpertama - MainActivity

Lalu kalian coding seperti dibawah ini, nanti om bewok jelasin satu persatu.

package com.example.helloworld

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.EditText
import android.widget.TextView

class MainActivity : AppCompatActivity(), View.OnClickListener {

    private lateinit var edtText : EditText
    private lateinit var btnSubmit : Button
    private lateinit var tvTampil : TextView

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

        edtText = findViewById(R.id.et_input)
        btnSubmit = findViewById(R.id.btn_submit)
        tvTampil = findViewById(R.id.tv_tampil)

        btnSubmit.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        if (v != null) {
            if (v.id == R.id.btn_submit) {
                val isiEditText = edtText.text.toString()
                tvTampil.text = isiEditText
            }
        }
    }
}

Selanjutnya tinggal kita run aplikasi-nya, kalian bisa menggunakan hp kalian atau menggunakan mobile secara virtual, om bewok saranin gunakan hp kalian, karena kalau menggunakan mobile secara virtual berat sekali, apalagi kalau laptop kita kalian kurang mumpuni.

Penjelasan-nya

Buat variabel edtText untuk EditText

Buat variabel btnSubmit untuk Submit

Buat variabel tvTampil untuk TextView

Lalu edtText memanggil id dari et_input yang sudah kita buat di activity_main.xml

btnSubmit memanggil id dari btn_submit dan tvTampil memanggil id dari tv_tampil.

btnSubmit setOnClickListener artinya saat kita click lakukan sesuatu.

If id sama dengan btn_submit maka edtText kita tampung didalam variabel isiEditText, lalu tvTampil.text sama dengan isiEditText