Membuat floating action button FAB AIDE Android Studio

CARA MEMBUAT TOMBOL FLOATING ACTION BUTTON FAB AIDE ANDROID STUDIO

Apa itu Floating Action Button ( FAB ) ?



Tombol tindakan mengambang atau Floating Action Button (FAB) adalah tombol melingkar yang memicu tindakan utama di UI aplikasi Anda. Halaman ini menunjukkan kepada Anda cara menambahkan FAB ke tata letak Anda, menyesuaikan beberapa tampilan, dan merespons ketukan tombol.

Bagaimana cara membuat FAB?



Secara default, FAB diwarnai oleh colorAccentatribut, yang dapat Anda sesuaikan dengan palet warna tema .

Anda dapat mengonfigurasi properti FAB lainnya menggunakan atribut XML atau metode yang sesuai, seperti berikut ini:

  • Ukuran FAB, menggunakan app:fabSize atribut atau setSize() dalam activity.
  • Warna riak FAB, menggunakan app:rippleColor atribut atau setRippleColor() dalam activity.
  • Ikon FAB, menggunakan android:src atribut atau setImageDrawable() dalam activity.
Edit file build.gradle, lalu tambahkan
dependencies appcompat-v7, support-design, dan support-v4 }

build.gradle


dependencies {
 compile 'com.android.support:appcompat-v7:+'
 compile 'com.android.support:support-v4:+'
 compile 'com.android.support:design:+'
    compile fileTree(dir: 'libs', include: ['*.jar'])
}
       


Selanjutnya, masuk ke folder values dan values-v21 lalu edit file styles.xml, ganti tema dari parent="@android:style/Theme.Material.Light" menjadi parent="Theme.AppCompat.Light.NoActionBar".



<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
 </style>
</resources>
       


langkah terakhir adalah menambahkan CoordinatorLayout dan android.support.design.widget.FloatingActionButton, Kodenya bisa di lihat di bawah ini :


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
 <android.support.design.widget.CoordinatorLayout
  android:id="@+id/coorLay"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">
  
 <android.support.design.widget.FloatingActionButton
  android:id="@+id/mainFab"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="bottom|end"
  android:layout_margin="14dp"
  android:src="@drawable/ic_launcher"/>
 </android.support.design.widget.CoordinatorLayout>

</LinearLayout>
       


Download example project :







Komentar

Posting Komentar