Tutorial Cara Membuat Menu Tampilan Seperti Roda (WheelView) Dengan Android Studio

Selamat datang kembali di blog Baru Berbagi, pada kesempatan malam ini Baru Berbagi mau memberikan Source Code lagi untuk mempercantik tampilan UI aplikasi teman – teman yaitu tampilan berbentuk seperti Roda (Wheel View ).

Ok. Mari kita buka Android Studio kita dan ikutu langkah demi langkah dengan harapan tidak terjadi Error.

1. Buatlah project baru dan pakailah Layout Empty Avtivity dengan nama Wheel View kemudian gunakan bahasa java dan Minimum API Level yang digunakan adalah API 22:Android 5.1(Lolipop) lalu kalian Click Finish.

2. Hubungkan komputer Atau laptop ke jaringan Internet.

3. Buka build.gradle(Project: Whell View) kemudian Tambahkan link dibawah ini di bagian allproject{repositories{}}.

  allprojects {
    repositories {
        google()
        jcenter()
        maven {url 'https://jitpack.io'}
    }
}

4. Kemudian buka build.gradle(Module: app) tambahkan liblary dibawah ini di dalam dependencies.

  //Wheel
    implementation 'com.github.psuzn:wheelview:1.0.0'

Karena perpustakaan ini di tulis oleh kotlin, jadi kita perlu menambahkan beberapa dependensi (dependencies) kotlin jadi ikutilah cara/solusi berikut ini.

A. Pilih Tools > Kotlin lalu click Configurate Kotlin in Project.

B. lalu pada choose configurator click Android with Gradle.

C. kemudian pada Configure Kotlin with Android with Gradle pilih All modules lalu di bagian Kotlin compiler pilih versi 1.3.72 kemudian click OK.

D. tunggulah sampai selasai mendownload.

E. Setelah selasai tampilan gradle akan berubah kurang lebih seperti gambar dibawah ini.

5. Click kanan folder Drawable pilih New lalu click kanan Vector Asset kemudian Click Clip Art lalu cari icon add berbentuk tanda (+) ubah warna menjadi putih dan beri nama ic_add.

6. Buka folder values lalu buka colors.xml dan ubah code warna seperti contoh di bawah ini.

  
  <?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#2A2A28</color>
    <color name="colorPrimaryDark">#2A2A28</color>
    <color name="colorAccent">#03DAC5</color>
</resources>

7. Buka activity_main.xml lalu tambahkan code.

  
  
  
  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:background="@color/colorPrimary"
    tools:context=".MainActivity">

   <me.sujanpoudel.wheelview.WheelView
       android:id="@+id/wheel_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_margin="16dp"
       app:wheelDividerStrokeWidth="1dip"
       app:wheelArcBackgroundColor="#074459"
       app:wheelSelectedArcBackgroundColor="@android:color/black"
       app:wheelCenterIcon="@drawable/ic_add"
       app:wheelCenterIconTint="@android:color/white"
       app:wheelAnchorAngle="270"
       app:wheelStartAngle="315"
       app:wheelTextSize="16dp"
       app:wheelSelectedTextColor="@android:color/white"
       app:wheelAnimationDuration="800"
       app:wheelMode="ANIMATE_TO_ANCHOR"/>

</RelativeLayout>

8. Buka Main_Activity.java tambahkan code.

  
  
  
  package com.baruberbagi.wheelview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.Arrays;

import kotlin.Unit;
import kotlin.jvm.functions.Function1;
import me.sujanpoudel.wheelview.WheelView;

public class MainActivity extends AppCompatActivity {

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

        final WheelView wheelView = (WheelView)findViewById(R.id.wheel_view);
        wheelView.setTitles(Arrays.asList("First","Second","Third","Fourth","Five","Six"));
        wheelView.setSelectListener(new Function1<Integer, Unit>() {
            @Override
            public Unit invoke(Integer integer) {
                ShowToast(integer);
                return Unit.INSTANCE;
            }
            private final void ShowToast(Integer index){
                Toast.makeText(MainActivity.this, ""+wheelView.getTitles().get(index), Toast.LENGTH_SHORT).show();
            }
        });
    }


}

untuk hasilnya bisa dilihat vidio dibawah ini.

Tutorial Cara Membuat Menu Tampilan Seperti Roda (WheelView) Dengan Android Studio

0 Response to "Tutorial Cara Membuat Menu Tampilan Seperti Roda (WheelView) Dengan Android Studio "

Post a Comment