Membuat radio button image Android studio

Radio button adalah salah satu elemen form yang digunakan untuk opsi pemilihan. Pada artikel ini, sugismart akan memberikan contoh cara pembuatan radio button dengan menggunakan image seperti contoh di atas. Untuk image, kalian bisa bebas menggunakan image sendiri.

Langsung saja yuk..

Tambahkan script dibawah ini ke layout xml kalian

Catatan : Hilangkan spasi pada < Linearlayout, < RadioGroup dan < RadioButton

Contoh 1 (Image di tengah radio button)

< LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical">
 < RadioGroup
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:id="@+id/txt_gambar"
  android:orientation="horizontal">
  < RadioButton
   android:id="@+id/icon1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:buttonTint="#fff"
   android:background="@mipmap/icon1"/>
  < RadioButton
   android:id="@+id/icon2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginLeft="5dp"
   android:buttonTint="#fff"
   android:background="@mipmap/icon2"/>
  < RadioButton
   android:id="@+id/icon3"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginLeft="5dp"
   android:buttonTint="#fff"
   android:background="@mipmap/icon3"/>
 </ RadioGroup>
</ LinearLayout>

Untuk membuat radiobutton, kita tambahkan terlebih dahulu RadioGroupnya. Lalu tambahkan radiobutton yang masing-masing memiliki id.

android:buttonTint -> memberikan warna pada lingkaran radio button.

android:background -> memberikan image pada radio button.

Apabila kalian tidak ingin menampilkan lingkaran radio button, tinggal tambahkan saja script di bawah ini

android:button="@null"

Contoh 2 (Image di samping radio button)

Catatan : Hilangkan spasi pada < Linearlayout, < RadioGroup dan < RadioButton

< LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical">
 < RadioGroup
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:id="@+id/txt_gambar"
  android:orientation="horizontal">
  < RadioButton
   android:id="@+id/icon1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:drawableRight="@mipmap/icon1"/>
  < RadioButton
   android:id="@+id/icon1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:drawableRight="@mipmap/icon2"/>
  < RadioButton
   android:id="@+id/icon1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:drawableRight="@mipmap/icon3"/>
</ RadioGroup>
</ LinearLayout>

Selamat, kalian sudah berhasil membuat radio button image Android studio.

Cara menambahkan menu pada floating action button Android

Floating action button (FAB) adalah salah satu komponen material design pada android dengan bentuk seperti tombol lingkaran yang terlihat seakan mengambang pada layout aplikasi. Floating action button (FAB) biasa digunakan sebagai indikator aksi utama yang bisa dilakukan oleh user di suatu aktivitas/activity.

Untuk contohnya, kamu bisa lihat di gambar bawah ya..

Sekarang, mari kita buat Floating action button dengan menambahkan beberapa menu seperti contoh di atas.

1. Buka file activity_main.xml, yang ada di folder res/layout/activity_main.xml
2. Tambahkan script di bawah ini :

Catatan : Hilangkan spasi pada < TextView dan < com

< TextView
 android:id="@+id/textfab2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_above="@+id/fab1"
 android:layout_alignParentRight="true"
 android:layout_alignRight="@id/fab2"
 android:layout_marginRight="68dp"
 android:visibility="invisible"
 android:layout_marginBottom="27dp"
 android:background="#ebe7d6"
 android:textSize="20dp"
 android:textStyle="bold"
 android:text="Menu 2" />
< com.google.android.material.floatingactionbutton.FloatingActionButton
 android:id="@+id/fab2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_above="@+id/fab1"
 android:layout_alignParentRight="true"
 android:layout_marginRight="25dp"
 android:layout_marginBottom="10dp"
 android:visibility="invisible"
 android:src="@drawable/ic_menu2"
 app:backgroundTint="@color/colorFAB" />
< TextView
 android:id="@+id/textfab1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_above="@+id/fab"
 android:layout_alignParentRight="true"
 android:layout_alignRight="@id/fab1"
 android:background="#ebe7d6"
 android:layout_marginRight="74dp"
 android:layout_marginBottom="20dp"
 android:textSize="20dp"
 android:visibility="invisible"
 android:textStyle="bold"
 android:text="Menu 1" />
< com.google.android.material.floatingactionbutton.FloatingActionButton
 android:id="@+id/fab1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_above="@+id/fab"
 android:layout_alignParentRight="true"
 android:layout_marginRight="25dp"
 android:layout_marginBottom="1dp"
 android:visibility="invisible"
 android:src="@drawable/ic_menu1"
 app:backgroundTint="@color/colorFAB" />
< com.google.android.material.floatingactionbutton.FloatingActionButton
 android:id="@+id/fab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_alignParentRight="true"
 android:layout_margin="@dimen/fab_margin"
 app:backgroundTint="@color/cardview_dark_background"
 app:srcCompat="@android:drawable/ic_input_add" />

Cara menambahkan icon :
- Klik kanan pada folder res, lalu pilih New->Vector Asset.
- Buatlah 2 icon dengan nama : ic_menu1 dan ic_menu2

4. Setelah langkah-langkah di atas selesai. Mari kita buka file MainActivity.java yang ada di folder java

5. Pada method onCreate, tambahkan script di bawah ini :

fab = (FloatingActionButton)findViewById(R.id.fab);
fab1 = (FloatingActionButton)findViewById(R.id.fab1);
fab2 = (FloatingActionButton)findViewById(R.id.fab2);
textfab1 = (TextView)findViewById(R.id.textfab1);
textfab2 = (TextView)findViewById(R.id.textfab2);
open_fab = AnimationUtils.loadAnimation(getApplicationContext(), R.animation.open_fab);
close_fab = AnimationUtils.loadAnimation(getApplicationContext(),R.animation.close_fab);
forward_rotate = AnimationUtils.loadAnimation(getApplicationContext(), R.animation.forward_rotate);
backward_rotate = AnimationUtils.loadAnimation(getApplicationContext(),R.animation.backward_rotate);

//Berikut adalah contoh action saat floating button di click
fab.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
    int id = view.getId();
    animateFAB();
   }
});

6. Tambahkan juga script berikut di bawah public class MainActivity extends AppCompatActivity :

private FloatingActionButton fab,fab1,fab2;
private TextView textfab1,textfab2;
private Animation open_fab,close_fab,forward_rotate,backward_rotate;

7. Supaya terlihat cantik ketika menekan tombol floating, mari kita tambahkan beberapa animasi.

    Buat folder animation pada folder res, dan buatlah file-file berikut

Catatan : Hilangkan spasi pada < ?xml, < set, < scale, < alpha dan < rotate
    a. close_fab.xml

< ?xml version="1.0" encoding="utf-8"?>
< set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    < scale
        android:duration="300"
        android:fromXScale="0.8"
        android:fromYScale="0.8"
        android:interpolator="@android:animation/linear_interpolator"
        android:toXScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toYScale="0.0" />
    < alpha android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:interpolator="@android:animation/accelerate_interpolator"
        android:duration="300"/>
< /set>

    b. open_fab.xml

< ?xml version="1.0" encoding="utf-8"?>
< set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    < scale
        android:duration="300"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:animation/linear_interpolator"
        android:toXScale="0.8"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toYScale="0.8" />
    < alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:interpolator="@android:animation/accelerate_interpolator"
        android:duration="300"/>
< /set>

    c. backward_rotate.xml

< ?xml version="1.0" encoding="utf-8"?>
< set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    < rotate android:fromDegrees="45"
        android:toDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="300"
        android:interpolator="@android:animation/linear_interpolator"/>
</ set>

    d. forward_rotate.xml

< ?xml version="1.0" encoding="utf-8"?>
< set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    < rotate android:fromDegrees="0"
        android:toDegrees="45"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="300"
        android:interpolator="@android:animation/linear_interpolator"/>
< /set>

8. Setelah selesai menambahkan file-file di atas, silahkan buka kembali file MainActivity.java yang ada di folder java. Lalu tambahkan script di bawah ini :

public void animateFAB(){
 if(isFabOpen){
  fab.startAnimation(backward_rotate);
  fab1.startAnimation(close_fab);
  fab2.startAnimation(close_fab);
  textfab1.startAnimation(close_fab);
  textfab2.startAnimation(close_fab);

  fab1.setClickable(false);
  fab2.setClickable(false);
  isFabOpen = false;

 } else {
  fab.startAnimation(forward_rotate);
  fab1.startAnimation(open_fab);
  fab2.startAnimation(open_fab);
  textfab1.startAnimation(open_fab);
  textfab2.startAnimation(open_fab);

  fab1.setClickable(true);
  fab2.setClickable(true);
  isFabOpen = true;

 }
}

Selamat ! kamu berhasil membuat floating action button beserta dengan menunya.