Banyaknya aplikasi dalam OS Android membuat Developer ingin menjadi yang berbeda dari aplikasi lainnya. Salah satu membedakan aplikasi kita dengan aplikasi lainnya adalah atribut yang digunakan dari tiap-tiap widget yang telah kita tambahkan pada aplikasi kita. Ada banyak komponen yang bisa kita ubah sesuai dengan keinginan kita. Misalnya tombol, editText dan lain-lain pada aplikasi yang kita buat. Kita bisa membuat secantik mungkin agar developer aplikasi lain tidak mencontoh atau meniru hasil desain kita.
Pada tutorial ini kita akan belajar cara membuat desain EditText menjadi rounded atau bulat menggunakan cara yang mudah di android studio.
Berikut Tahapan-tahapan untuk membuatnya :
1. Membuat file .xml rounded corner
File .xml rounded corner berisi sintak untuk membentuk widget menjadi rounded (sudut membulat) tahapan membuatnya :
Klik kanan pada folder drawable yang ada dalam folder res, pilih New=>Drawable resource file
Isikan filename misal dengan nama rondedcorner, kemudian OK
Isikan sintak file roundedcorner.xml seperti berikut :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/white"/>
<corners android:radius="10dp" />
<stroke
android:width="2dp"
android:color="@color/biru"
/>
</shape>
</item>
</selector>
2. Membuat activity baru
Buat aktivity baru, misal dengan nama Login
Buka layout activity_login.xml isi dengan sintak seperti berikut :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Login"
android:background="@color/birumuda"
>
<TextView
android:id="@+id/tekslogin"
android:layout_marginTop="54dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LOGIN USER"
android:textSize="20dp"
android:textColor="@color/black"
android:textStyle="bold"
android:gravity="center"
android:layout_centerHorizontal="true"
/>
<EditText
android:id="@+id/editekuser"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/tekslogin"
android:layout_marginTop="54dp"
android:hint="Inputkan Username"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:background="@drawable/roundedcorner"
android:drawablePadding="15dp"
android:inputType="text"
android:minHeight="48dp"
android:paddingHorizontal="15dp"
/>
<EditText
android:id="@+id/editekpassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/editekuser"
android:layout_centerInParent="true"
android:layout_marginTop="10dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:background="@drawable/roundedcorner"
android:hint="Inputkan Password"
android:inputType="textPassword"
android:minHeight="48dp"
android:paddingHorizontal="15dp"
android:drawablePadding="15dp"
/>
<Button
android:id="@+id/tombollogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/editekpassword"
android:layout_centerHorizontal="true"
android:layout_marginLeft="40dp"
android:layout_marginTop="20dp"
android:layout_marginRight="40dp"
android:background="@drawable/roundedcorner"
android:paddingLeft="80dp"
android:paddingRight="80dp"
android:text="LOGIN"
android:textStyle="bold" />
</RelativeLayout>
Hasilnya :
Perhatikan sintak di atas, pada setiap widget terdapat sintak :
android:background="@drawable/roundedcorner"
Baris sintak tersebut memanggil file roundedcorner.xml yang berada dalam folder drawable yang sudah kita buat tadi.
