(Tutorial Android) Floating Label For Edittext Android Material Design


Salah satu komponen yang paling dasar di Android yaitu EditText. EditText merupakan komponen input dari user. Sejak diperkenalkannya material design, komponen EditText sedikit ditambahin animasi yang menarik yaitu Floating Label. Konsep Floating Label EditText diperkenalkan pada material design dengan tampilan yang interaktif. Tampilannya ibarat hint di EditText lalu saat user memulai menginputkkan text maka hint tersebut bergerak ke atas dari posisi semula.

Nah. Bagaimana caranya menciptakan floating label? Pada design support library terdapat komponen yang dinamakan TextInputLayout untuk menampilkan floating label. Selain itu kita juga sanggup menampilkan pesan error dengan setErrorEnabled() dan setError().

Berikut implementasinya

Tambahkan library support design di gradle app.


Tambahkan TextInputLayout di layout activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     tools:context="wim.example.com.androidfloatinglabel.MainActivity">      <android.support.design.widget.TextInputLayout         android:id="@+id/lyUsername"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_centerHorizontal="true"         android:layout_marginTop="10dp">         <EditText             android:id="@+id/username"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:ems="10"             android:hint="Username"/>     </android.support.design.widget.TextInputLayout>      <android.support.design.widget.TextInputLayout         android:id="@+id/lyEmail"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_below="@+id/lyUsername"         android:layout_centerHorizontal="true"         android:layout_marginTop="10dp">         <EditText             android:id="@+id/email"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:ems="10"             android:inputType="textEmailAddress"             android:hint="Email"/>     </android.support.design.widget.TextInputLayout>      <android.support.design.widget.TextInputLayout         android:id="@+id/lyPassword"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_below="@+id/lyEmail"         android:layout_centerHorizontal="true"         android:layout_marginTop="10dp">         <EditText             android:id="@+id/password"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:ems="10"             android:hint="Password"             android:inputType="textPassword"/>     </android.support.design.widget.TextInputLayout>      <Button         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Submit"         android:id="@+id/btnSubmit"         android:layout_below="@+id/lyPassword"         android:layout_marginTop="30dp"         android:layout_alignLeft="@+id/lyPassword"         android:layout_alignStart="@+id/lyPassword"         android:layout_alignRight="@+id/lyPassword"         android:layout_alignEnd="@+id/lyPassword" />  </RelativeLayout>

Edit kelas MainActivity.java berikut :
package wim.example.com.androidfloatinglabel;  import android.support.design.widget.TextInputLayout; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.text.TextUtils; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.Toast;  public class MainActivity extends AppCompatActivity {      Button btnSubmit;     TextInputLayout lyUsername, lyEmail, lyPassword;     EditText textUsername, textEmail, textPassword;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);          btnSubmit = (Button) findViewById(R.id.btnSubmit);         lyUsername = (TextInputLayout) findViewById(R.id.lyUsername);         lyEmail = (TextInputLayout) findViewById(R.id.lyEmail);         lyPassword = (TextInputLayout) findViewById(R.id.lyPassword);         textUsername = (EditText) findViewById(R.id.username);         textEmail = (EditText) findViewById(R.id.email);         textPassword = (EditText) findViewById(R.id.password);          btnSubmit.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v) {                 validation();             }         });     }      private void validation(){         if(TextUtils.isEmpty(textUsername.getText().toString())){             lyUsername.setErrorEnabled(true);             lyUsername.setError("Username must not empty");             return;         }else{             lyUsername.setErrorEnabled(false);         }          if(TextUtils.isEmpty(textEmail.getText().toString())){             lyEmail.setErrorEnabled(true);             lyEmail.setError("Email must not empty");             return;         }else{             lyEmail.setErrorEnabled(false);         }          if(TextUtils.isEmpty(textPassword.getText().toString())){             lyPassword.setErrorEnabled(true);             lyPassword.setError("Password must not empty");             return;         }else{             lyPassword.setErrorEnabled(false);         }          if(!new EmailValidation().validateEmail(textEmail.getText().toString())){             lyEmail.setErrorEnabled(true);             lyEmail.setError("Please enter a valid email address");             return;         }else{             lyEmail.setErrorEnabled(false);         }          Toast.makeText(this, "Thank You!", Toast.LENGTH_SHORT).show();     } }

Tambahkan kelas utility untuk mengecek valid email
package wim.example.com.androidfloatinglabel;  import java.util.regex.Matcher; import java.util.regex.Pattern; /**  * Created by wim on 4/24/16.  */ public class EmailValidation {      private static simpulan String EMAIL_PATTERN = "^[a-zA-Z0-9#_ !$&'()*+,;=:.\"(),:;<>@\\[\\]\\\\]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*$";     private Pattern pattern = Pattern.compile(EMAIL_PATTERN);     private Matcher matcher;      public boolean validateEmail(String email) {         matcher = pattern.matcher(email);         return matcher.matches();     } }

Build dan jalankan maka balasannya sebagai berikut :




Source code lengkap sanggup dilihat di https://github.com/andronut/AndroidFloatingLabel

Sekian dan agar bermanfaat.
Happy Coding :)

Comments

Post a Comment

Popular posts from this blog

Pewarnaan Objek Geometri Di Java 2D

Image
Pewarnaan (filling) sanggup diterapkan ke dalam pembuatan objek geometri. Objek geometri sanggup digambar dengan method fill atau draw . Untuk menambahkan warna pada objek geometri, kita sanggup menambahkan method dari kelas Graphics. void setColor(Color c)  Objek Color didefinisikan sebagai sebuah warna. Kelas Color secara default memakai rentan warna RGB. Berikut ini yaitu pola penggunaan Color di Java 2D. /** * * @author Wim Sonevel */ import java.awt.*; import java.awt.geom.*; import javax.swing.*; public class SegiPanjangWarna extends JApplet { public static void main(String[] args) { JFrame frame = new JFrame(); frame.setTitle("Persegi Panjang Warna"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JApplet applet = new SegiPanjangWarna(); applet.init(); frame.getContentPane().add(applet); frame.pack(); frame.setVisible(true); } @Override public void init() { JPan...
Read more

Tugas Komplemen Terakhir

(Ainun Najib) 1. Buat sebuah aplikasi berbasis GUI untuk registrasi siswa gres : - hitung nilai tes untuk mata pelajaran tertentu dan jikalau rata-rata <  70 maka gagal - inputkan data-data siswa dan simpan dalam database - tampilkan data dalam bentuk tabel - data sanggup disimpan, diedit, dihapus dan dicari (Moh. Fachrudin) 2. Buat sebuah aplikasi berbasis GUI untuk registrasi musyrif gres : - hitung nilai tes b.arab, b.ing, Afkar, dan Al-Quran dan jikalau rata - rata < 70 maka gagal - inputkan data-data siswa dan simpan dalam database - tampilkan data dalam bentuk tabel - data sanggup disimpan, diedit, dihapus dan dicari (Aulia) 3. Buat sebuah aplikasi berbasis GUI untuk menghitung nilai selesai suatu matakuliah dan berikan nilai huruf.    - Rumus nilai selesai = kiprah 20% + uts 30% + uas 50 %    - Berikan nilai karakter :       46-55 Nilai C         56-65 Nilai C+  ...
Read more

Konsep Oop Encapsulation

Image
Encapsulation biasa disebut dengan Information Hidding. Encapsulation merupakan kombinasi dari data dan method pada paket suatu kelas dan menyembunyikan implementasi detail dari user terhadap object. Hak jalan masuk diatur dalam sebuah access modifier yang diantaranya yakni : - private : hanya sanggup diakses oleh kelas itu sendiri - protected : hanya sanggup diakses dalam package dan kelas turunannya - public : sanggup diakses dimanapun - default : hanya sanggup diakses dalam package saja Manfaat dari encapsulation : - Modularitas : Source code dari sebuah class sanggup dikelola secara independen dari source code class yang lain. Perubahan internal pada sebuah class tidak akan besar lengan berkuasa bagi class yang menggunakannya. - Information Hiding : Penyembunyian gosip yang tidak perlu diketahui objek lain. Untuk mengakses gosip sanggup memakai mediator method yang dikenal dengan setter dan getter. Sebagai contoh, buatlah 3 kelas masing-masing di package yang berbed...
Read more