Cara Membuat Spinner Custom Untuk Menambahkan Gambar di Aplikasi Android

Tutorial Cara Membuat Custom Spinner Untuk Menampilkan Teks dan Gambar di Android Studio

Halo para android software engineer, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini saya akan membagikan tutorial tentang bagaimana cara membuat spinner custom untuk menampilkan teks dan gambar di android studio.

Spinner adalah widget yang mirip dengan daftar drop-down untuk memilih item. Jadi widget ini digunakan untuk memilih satu item dari banyaknya item yang di tampilkan.

Sebelumnya, saya sudah pernah membagikan tutorial tentang Cara Membuat Spinner Sederhana Di Android Studio. Dalam tutorial tersebut kalian belajar cara membuat spinner secara dasar, hanya menampilkan teks saja. Namun pada tutorial kali ini saya akan membagikan tutorial cara menampilkan menu dari spinner beserta gambar.

- Advertisement -

Sebenarnya untuk membuat spinner custom ini cukuplah mudah, kalian hanya perlu membuat custom adapter dan custom layout. Saya sering membagikan tutorial custom yang semuanya sama menggunakan Adapter. Adapter ini sangatlah penting dalam pembuatan aplikasi android karena ini akan mempermudah kita dalam melakukan pengembangan aplikasi.

Jadi, dalam tutorial ini kalian akan belajar cara membuat custom spinner untuk menampilkan item berupa teks dan gambar di aplikasi android studio dengan cara yang mudah dan sederhana menggunakan Adapter.

Tutorial Cara Membuat Custom Spinner Teks dan Gambar Di Android Studio

Buatlah project android studio baru dengan informasi sebagai berikut:

Application Name:Spinner App
Package Name:com.androidrion.spinnerapp
Languge:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml layout yang digunakan dalam project ini:

  1. activity_main.xml
  2. spinner_custom.xml

Daftar file java class yang digunakan dalam project ini:

  1. MainActivity.java
  2. CustomSpinnerAdapter.java

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Spinner App.

XML Layout File

Buka file activity_main.xml dalam folder layout pada project android studio kalian. Tambahkan widget Spinner dalam RelativeLayout. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?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:gravity="center"
    tools:context=".MainActivity">

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:spinnerMode="dropdown" />

</RelativeLayout>

Buatlah file xml layout baru dengan cara klik kanan pada folder layout, lalu pilih New>Layout resource file. Simpan file xml layout baru tersebut dengan nama spinner_custom.xml. Buatlah tampilan yang menarik sesuai kalian, tambahkan TextView di dalamnya dan yang paling penting adalah tambahkan ImageView karena dalam tutorial ini kita akan menampilkan gambar pada item Spinner. Berikut ini adalah kode lengkap untuk file spinner_custom.xml

app/res/layout/spinner_custom.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:padding="5dp"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="8dp"
        android:text="Custom Text"
        android:textColor="@android:color/black" />
</LinearLayout>

Java Class File

Sebelum kita menulis kode pada file MainActivity.java, kita terlebih dahulu membuat file java adapter class baru dengan cara klik kanan pada folder java. Lalu pilih New>Java class. Simpan file java baru tersebut dengan nama CustomSpinnerAdapter. Berikut ini adalah kode lengkap untuk file CustomSpinnerAdapter.java

app/java/com.androidrion.spinnerapp/CustomSpinnerAdapter.java

Dan sekarang kalian bisa membuka file MainActivity dalam folder java. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.spinnerapp/MainActivity.java

package com.androidrion.spinnerapp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Spinner;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    int[] ikon = {R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher};
    String[] elemen = {"Air", "Api", "Udara", "Tanah"};

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

        Spinner spinner = findViewById(R.id.spinner);
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(MainActivity.this, "Kamu memilih " + elemen[position], Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {

            }
        });

        CustomSpinnerAdapter customSpinnerAdapter = new CustomSpinnerAdapter(getApplicationContext(), ikon, elemen);
        spinner.setAdapter(customSpinnerAdapter);
    }
}

Run Project

Setelah semuanya selesai, jalankan project android studio kalian. Apabila kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah Cara Membuat Custom Spinner Untuk Menampilkan Gambar Di Android Studio. Tutorial di atas sangatlah mudah untuk dikerjakan karena kita hanya memerlukan kode yang sedikit untuk bisa membuat spinner menampilkan gambar pada item.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.