April 2022 ~ Ngilmu

Daftar Isi : [Tampil]

Jika anda belum tau caranya membuat Project anda dapat melihatnya di Cara membuat Project dan Emulator di Android Studio Bumblebee 2021.1.1 Patch 2. Di sini saya akan membagikan cara saya dalam membuat Button di Android Studio Bumblebee 2021.1.1 menggunakan custom Drawable. Saya akan membuat 5 macam Button sesuai gambar di atas.

Button Type 1


  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
      <solid android:color="#00FFDD"/>
  </shape>

Button Type 2


  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
      <solid android:color="#E83A14"/>
      <corners android:radius="10dp"/>
  </shape>

Button Type 3


  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
      <stroke android:color="#56BBF1" android:width="2dp"/>
      <corners android:radius="10dp"/>
  </shape>

Button Type 4


  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
      <gradient android:startColor="#46244C" android:endColor="#CE49BF" android:type="linear"/>
      <corners android:radius="25dp"/>
  </shape>

Button Type 5


  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
      <solid android:color="#FFF56D"/>
      <corners android:radius="1000dp"/>
  </shape>

Main File XML

Selanjutnya membuat Button di main file xml. di Android Studio Bumblebee 2021.1.1 Patch 2, jika tidak menambahkan "android.widget" style yang dibuat di "drawable" akan tidak berhasil, terutama bagian warnanya. Untuk membuat style "drawable" terhubung dengan Button, menambahkan "android:backgroud". Script xmlnya di bawah ini.


  <?xml version="1.0" encoding="utf-8"?>
  <androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

      <android.widget.Button
          android:id="@+id/button1"
          android:layout_width="200dp"
          android:layout_height="50dp"
          android:background="@drawable/btn1"
          android:text="@string/button1"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintHorizontal_bias="0.501"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintVertical_bias="0.134"/>

      <android.widget.Button
          android:id="@+id/button2"
          android:layout_width="200dp"
          android:layout_height="50dp"
          android:background="@drawable/btn2"
          android:text="@string/button2"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintHorizontal_bias="0.501"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintVertical_bias="0.31"
          tools:ignore="TextContrastCheck" />

      <android.widget.Button
          android:id="@+id/button3"
          android:layout_width="200dp"
          android:layout_height="50dp"
          android:background="@drawable/btn3"
          android:text="@string/button3"
          android:textColor="#0277BD"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintHorizontal_bias="0.501"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintVertical_bias="0.499" />

      <android.widget.Button
          android:id="@+id/button4"
          android:layout_width="200dp"
          android:layout_height="50dp"
          android:background="@drawable/btn4"
          android:text="@string/button4"
          android:textColor="#FFFFFF"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintHorizontal_bias="0.498"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintVertical_bias="0.688" />

      <android.widget.Button
          android:id="@+id/button5"
          android:layout_width="80dp"
          android:layout_height="80dp"
          android:background="@drawable/btn5"
          android:text="@string/button5"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintHorizontal_bias="0.501"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintVertical_bias="0.869" />

  </androidx.constraintlayout.widget.ConstraintLayout>

Hasil setelah di run