Cara Membuat Outlined EditText Seperti Google di Aplikasi Android

Halo para developer. Bagaimana kabar kalian hari ini? Saya harap kalian baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial cara membuat EditText seperti pada aplikasi google di android studio.

Google telah membuat desain yang sangat cantik untuk memikat para penggunanya (user). Dengan desain yang mereka buat, pengguna ingin berlama-lama di dalam aplikasinya. Ketika kalian ingin mendaftar ataupun masuk kedalam aplikasi Google baik itu Google Account ataupun lainnya, kalian akan melihat EditText pada aplikasi tersebut sangatlah keren. Seperti pada gambar dibawah ini.

- Advertisement -

Alih-alih menggunakan tutorial cara membuat border pada EditText mending saran saya menggunakan tutorial ini karena menggunakan tutorial ini secara otomatis EditText telah menggunakan border. Plus ini keren banget dan mengunakannya juga cukup simpel karena kita hanya butuh 1 line code saja.

Jadi dalam tutorial ini kalian akan belajar cara membuat widget EditText di aplikasi android terlihat seperti pada aplikasi google menggunakan Material Design.

Tutorial Cara Membuat EditText Pada Aplikasi Android Seperti Google Menggunakan Material Design

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name:Text App
Package Name:com.androidrion.textapp
Languge:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml yang digunakan dalam projek ini:

  • activity_main.xml

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Text App.

Dependensi File

Untuk membuat EditText seperti google pada aplikasi android, kalian memerlukan Google Material Design pada projek android studio kalian. Tambahkan kode ini pada file build.gradle (Module: app) di aplikasi android studio kalian.

Gradle Scripts/build.gradle (Module: app)

    implementation 'com.google.android.material:material:1.0.0'

Ikuti tutorial dibawah ini untuk menambahkan kode pada file build.gradle pada projek android studio.

CARA MENAMBAHKAN KODE DEPENDENSI PADA PROJEK ANDROID STUDIO

XML Layout File

Buka file activity_main.xml dalam folder layout pada projek android studio kalian. Tambahkan widget TextInputLayout & TextInputEditText dalam LinearLayout. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?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:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="First Name" />
        </com.google.android.material.textfield.TextInputLayout>

        <View
            android:layout_width="8dp"
            android:layout_height="0dp" />

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Last Name" />
        </com.google.android.material.textfield.TextInputLayout>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="8dp" />

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Username" />
    </com.google.android.material.textfield.TextInputLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="8dp" />

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email" />
    </com.google.android.material.textfield.TextInputLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="8dp" />

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password" />
    </com.google.android.material.textfield.TextInputLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="8dp" />

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Confirm Password" />
    </com.google.android.material.textfield.TextInputLayout>

</LinearLayout>

Run ‘app’

Sekarang jalankan projek android studio kalian. Aplikasi akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial singkat cara membuat outlined edittext seperti google di aplikasi android. Tutorial diatas sangatlah mudah dikerjakan karena kita hanya memerlukan atribut style dan tidak memerlukan file java untuk membuat edittext seperti google.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.