Tutorial Cara Mendapatkan Input Menggunakan EditText


Assalamualaikum Warahmatullahi Wabarakatuh. Pada tutorial dasar kali ini, saya akan mengajarkan pada kalian cara menggunakan komponen EditText di Android Studio, komponen ini digunakan untuk menerima input berupa Text dari User.


Ada bermacam-macam jenis text yang dapat diterima oleh user, yaitu: Text Biasa, Password, Nomor Telepon, Email, Number, URL dan lain-lain. kita dapat menyesuaikan jenis textnya sesuai dengan kita inginkan.

A. Jenis-Jenis Text Input pada EditText

Ada banyak sekali berbagai jenis text inputan yang bisa kalian gunakan dalam EditText diantaranya yang sudah saya sebutkan tadi, sebelum itu dalam pembuatan EditText ada beberapa atribut penting yang perlu kalian gunakan dan ketahui yaitu:
  • android:inputType: Untuk menentukan jenis text input yang akan digunakan.
  • android:hint: Untuk memberitahu user, apa yang harus di Inputkan.

Sekarang kita akan membuat contoh sederhana menggunakan EditText, pada contoh kali ini kita akan membuat beberapa EditText dengan berbagai macam type inputan, agar kalian bisa melihat perbedaanya.

Pertama buat project baru pada android studio, jika sudah, buka file activity_main.xml pada project yang kalian buat, lalu masukan kode berikut ini:

<?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:layout_margin="18dp"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <EditText
        android:id="@+id/nama"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Masukan Nama"
        android:inputType="textPersonName" />

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword" />

    <EditText
        android:id="@+id/email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Nomor Telepon"
        android:inputType="phone" />

    <EditText
        android:id="@+id/editText5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="URL Website"
        android:inputType="textUri" />

</LinearLayout>

Untuk membuat EditText cukup menambahkan tag <EditText> serta beberapa atribut didalamnya atau kalian juga bisa langsung mendrag/dropnya, jika kita lihat hasilnya akan seperti ini:

WildanTechnoArt-Jenis Jenis Input Text Pada EditText

Sekarang coba kalian jalankan project tersebut, lalu masukan input pada masing-masing EditText, maka hasilnya akan terlihat seperti ini:

Screenshot_Input TypeText EditText Example

B. Mendapatkan Input dan Mengeluarkan Output

Program kedua yang akan kita buat adalah, pada aplikasi tersebut user bisa menginputkan data melalui EditText dan mengeluarkan Outputnya melalui pesan dialog sederhana (Toast), untuk membuat program ini kita membuatuhkan satu widget EditText dan satu Button, Button tersebut akan kita gunakan untuk mengeksekusi perintah.

Baca Juga:

Sekarang kembali ke project yang kalian buat, buka kembali file activity_main.xml tersebut lalu ubah menjadi seperti ini:

<?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:layout_margin="18dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <EditText
        android:id="@+id/nama"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Masukan Nama"
        android:inputType="textPersonName" />

    <Button
        android:id="@+id/confirm"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Konfirmasi" />

</LinearLayout>

Berikut ini merupakan tampilan dari layout tersbut:

WildanTechnoArt-Input Output Example

selanjutnya buka file MainActivity.java kalian, lalu masukan source code berikut ini:

package android.cianjur.developer.net.basicandroid;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity{

    EditText Input_Nama;
    Button Confirm;
    String Nama;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Input_Nama = findViewById(R.id.nama);
        Confirm = findViewById(R.id.confirm);
        Confirm.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Nama = Input_Nama.getText().toString(); // Mendapatkan Input dan Memasukannya pada Variable Nama
                // Mengeluarkan Output yang didapat dari User
                Toast.makeText(getApplicationContext(), "Perkenalkan Nama Saya "+Nama, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Sekarang coba kalian jalankan project tersebut, maka lihatlah hasilnya.

WildanTechnoArt-Input Output Example2

Sekian dari saya, mohon maaf bila ada kesalahan, jika ada yang ingin ditanyakan silakan isi komentar dibawah. Wassalamualaikum Warahmatullahi Wabarakatuh.


Berlangganan Untuk Menerima Update Terbaru:

Posting Komentar