Cara Membuat Border Pada Widget Button di Aplikasi Android

Tutorial Cara Membuat Border Pada Button di Android Studio

Halo semuanya, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Sebelumnya, saya sudah pernah membagikan kalian tutorial cara merubah warna pada button ketika di klik. Untuk itu, pada artikel ini saya akan membagikan tutorial cara menambahkan border pada widget button di android studio.

Button adalah komponen yang dapat disesuaikan dengan gaya visual yang bisa diperbaharui. Komponen button ini memiliki beberapa style bawaan untuk mendukung berbagai tingkat, karena biasanya setiap user interface berisi beberapa tombol berbeda untuk menunjukkan aksi yang berbeda.

Untuk itu, dalam tutorial ini saya akan membagikan cara membuat border untuk widget button di aplikasi android studio agar terlihat berbeda dengan button lainnya.

- Advertisement -

Tutorial Cara Menambahkan Border Pada Widget Button di Android Studio

Buatlah projek android studio baru dengan informasi sebagai berikut:

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

Daftar file xml layout yang digunakan dalam projek ini:

  • activity_main.xml

Daftar file xml drawable yang digunakan dalam projek ini:

  • border.xml

Daftar file java activity yang digunakan dalam projek ini:

  • MainActivity.java

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

XML Drawable File

Buatlah file xml dalam folder drawable dengan cara klik kanan pada folder drawable lalu pilih New>Drawable resource file. Simpan file tersebut dengan nama file border. Tambahkan kode dibawah ini pada file border.xml untuk membuat border pada button. Berikut ini adalah kode lengkap untuk file border.xml

app/res/drawable/border.xml

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

XML Layout File

Buka file activity_main.xml pada projek android studio kalian dan tambahkan widget button dalam RelativeLayout. Pada widget Button, tambahkan atribut background dan panggil file xml drawable border yang telah kita buat untuk atribut background. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="16dp"
        android:background="@drawable/border"
        android:text="Android Rion"
        android:textColor="@color/colorPrimary" />

</RelativeLayout>

Java Activity File

Buka file MainActivity.java kalian dalam folder java. Tambahkan kode dibawah ini untuk mengetahui bahwa button telah di klik dengan menampilkan toast pada aplikasi. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.buttonapp/MainActivity.java

package com.androidrion.buttonapp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Button Clicked", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Run ‘app’

Sekarang jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian bisa melihat button di tengah aplikasi yang telah kita buatkan border di sekelilingnya. Jika kalian mengklik button tersebut, maka aplikasi akan menampilkan toast. Apabila kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat dan menambahkan border pada widget button di aplikasi android studio. Tutorial diatas sangatlah sederhana karena kita hanya memerlukan file xml drawable untuk membuat border pada widget button. Berbeda pada tutorial sebelumnya yaitu tentang cara membuat button berbeda warna ketika di klik, pada tutorial ini efek dari ini button ketika di klik tidak terlihat namun menampilkan toast untuk membuktikan bahwa tombol telah di klik.

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.