Cara Membuat Round Button / Button Yang Memiliki Sudut Tumpul Pada Android

Banyaknya bentuk desain dari client membuat kita mau tidak mau harus mengikutin kehendaknya ahahahah, desainnya seperti apa, pokoknya harus jadi!😀

oke kali ini saya akan membagi tutorial bagaimana cara membuat button yang pada sisi-sisinya tumpul (Round Button | Entah bahasa lainnya apa)

persiapan :

  1. activity_main.xml
  2. round_button.xml > kita tempatkan di drawable

Tidak perlu class .java ya, karna kita akan main main di layoutnya saja.

Bentuk awalnya sepertinya :

Screenshot from 2016-06-16 14-08-35

Mari kita mulai!!

kita buat round_button.xml di drawable terlebih dahulu

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:topLeftRadius="33dp"
        android:topRightRadius="30dp"
        android:bottomLeftRadius="33dp"
        android:bottomRightRadius="30dp"
        />
    <gradient
        android:angle="45"
        android:centerX="35%"
        android:startColor="@android:color/holo_red_dark"
        android:endColor="@android:color/holo_red_dark"
        />
    <size
        android:width="270dp"
        android:height="60dp"
        />
</shape>

 

Selanjutnya kita tinggal gunakan file xml tersebut sebagai background di activity_main.xml dibagian buttonnya

 

 

<?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="com.example.putuguna.roundbutton.MainActivity">

    <TextView
        android:gravity="center"
        android:id="@+id/hello"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hai! Saya Tombol yang akan dipercantik" />

    <Button
        android:layout_marginTop="10dp"
        android:layout_below="@+id/hello"
        android:background="@drawable/rounded_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Saya adalah Tombol"/>
</RelativeLayout>

Oke sudah selesai, dan hasilnya seperti ini :

Screenshot from 2016-06-16 14-18-08

Ganti warna sesuai kebutuhan saja. Selesai tutorialnya, sampe jumpa di tutorial selanjutnya. Semoga membantu. happy coding. Have fun!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s