Cara Membuat Border Pada EditText atau TextView di Android Studio

Hai guys, bagaimana kabar kalian hari ini? Saya harap kalian dalam keadaan yang baik-baik saja. Pada artikel ini, saya akan membagikan tutorial desain atau user interface tentang cara membuat border pada widget edittext maupun textview di android studio.

Mempercantik aplikasi adalah salah satu cara agar pengguna atau user aplikasi kalian betah berlama-lama dalam aplikasi tersebut. Semakin banyaknya pengguna dari aplikasi kalian, maka itu akan semakin bagus. Tetapi, tidak sedikit aplikasi yang menampilkan user interfacenya sederhana. Mereka harus mempercantik tampilan aplikasi tersebut. Ada banyak macam atau cara untuk mempercantik tampilan aplikasi dan salah satu nya adalah membuat border pada EditText. Membuat border pada widget EditText akan membuat pengguna mengetahui batasan dari area tulisan tersebut dan mengetahui bahwa itu adalah area untuk mengetik.

Jadi, dalam tutorial ini kalian akan belajar cara membuat border pada edittext atau textview di android studio dengan tutorial yang mudah.

- Advertisement -

Tutorial Cara Membuat Border Pada EditText atau TextView di Android Studio

Buatlah projek android studio baru dengan informasi sebagai berikut:

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

Daftar file xml yang digunakan dalam projek ini:

  • activity_main.xml
  • border.xml

Dibawah ini adalah langkah-langkah dalam pembuatan Text App.

XML Drawable File

Buatlah file xml drawable dengan cara klik kana pada folder drawable lalu pilih New>Drawable resource file. Simpan file tersebut dengan nama background. Berikut ini adalah kode lengkap untul file background.xml

app/res/drawable/background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="@android:color/black" />
</shape>

XML Layout File

Sekarang buka file activity_main.xml dalam folder layout pada projek android studio kalian. Gunakan kode dibawah ini untuk membuat TextView dan EditText menampilkan border. Berikut 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:gravity="center"
        android:orientation="horizontal">

        <TextView
            style="@style/TextAppearance.AppCompat.Medium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="EditText"
            android:textColor="@android:color/black" />

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

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@android:color/black" />
    </LinearLayout>

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

    <EditText
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_marginTop="4dp"
        android:background="@drawable/background"
        android:focusable="true"
        android:gravity="top"
        android:hint="Ini Adalah EditText Area"
        android:inputType="textMultiLine"
        android:padding="8dp" />

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

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

        <TextView
            style="@style/TextAppearance.AppCompat.Medium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textColor="@android:color/black" />

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

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@android:color/black" />
    </LinearLayout>

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/background"
        android:gravity="center"
        android:text="TextView"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        android:textStyle="bold" />


</LinearLayout>

Run ‘app’

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

AKHIR KATA

Itulah tadi tutorial desain singkat cara membuat border pada widget edittext atau textview di android studio.

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.