PowerSpinner – A lightweight dropdown popup spinner

A lightweight dropdown popup spinner, fully customizable with an arrow and animations for Android.

PowerSpinner Usage

Add following XML namespace inside your XML layout file.

xmlns:app="http://schemas.android.com/apk/res-auto"

PowerSpinnerView in XML

You can implement PowerSpinnerView in your XML layout as the below example. You can use PowerSpinnerView same as TextView. For instance, you can set the default text with the hint and textColorHint attributes..

<com.skydoves.powerspinner.PowerSpinnerView
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@color/md_blue_200"
  android:gravity="center"
  android:hint="Question 1"
  android:padding="10dp"
  android:textColor="@color/white_93"
  android:textColorHint="@color/white_70"
  android:textSize="14.5sp"
  app:spinner_arrow_gravity="end"
  app:spinner_arrow_padding="8dp"
  app:spinner_divider_color="@color/white_70"
  app:spinner_divider_show="true"
  app:spinner_divider_size="0.4dp"
  app:spinner_item_array="@array/questions"
  app:spinner_item_height="46dp"
  app:spinner_popup_animation="dropdown"
  app:spinner_popup_background="@color/background800"
  app:spinner_popup_elevation="14dp" />

Create PowerSpinner with Kotlin extension

You can also create the PowerSpinnerView programmatically with the Kotlin extension class.

val mySpinnerView = createPowerSpinnerView(this) {
  setSpinnerPopupWidth(300)
  setSpinnerPopupHeight(350)
  setArrowPadding(6)
  setArrowAnimate(true)
  setArrowAnimationDuration(200L)
  setArrowGravity(SpinnerGravity.START)
  setArrowTint(ContextCompat.getColor(this@MainActivity, R.color.md_blue_200))
  setSpinnerPopupAnimation(SpinnerAnimation.BOUNCE)
  setShowDivider(true)
  setDividerColor(Color.WHITE)
  setDividerSize(2)
  setLifecycleOwner(this@MainActivity)
}

Note: It’s highly recommended to set the height size of the item with the spinner_item_height attribute or the entire height size of the popup with the spinner_popup_height to implement the correct behaviors of your spinner.

Show and Dismiss

By default, the spinner popup will be displayed when you click the PowerSpinnerView, and it will be dismissed when you select an item. You can also show and dismiss manually with the methods below:

powerSpinnerView.show() // show the spinner popup.
powerSpinnerView.dismiss() // dismiss the spinner popup.

// If the popup is not showing, shows the spinner popup menu.
// If the popup is already showing, dismiss the spinner popup menu.
powerSpinnerView.showOrDismiss()

You can customize the default behaviours of the spinner with the method and property below:

// the spinner popup will not be shown when clicked.
powerSpinnerView.setOnClickListener { }

// the spinner popup will not be dismissed when item selected.
powerSpinnerView.dismissWhenNotifiedItemSelected = false

OnSpinnerItemSelectedListener

You can listen the selection of the spinner items with the setOnSpinnerItemSelectedListener method below:

powerSpinnerView.setOnSpinnerItemSelectedListener<String> { oldIndex, oldItem, newIndex, newText ->
   toast("$text selected!")
}

If you use Java, see the example below:

powerSpinnerView.setOnSpinnerItemSelectedListener(new OnSpinnerItemSelectedListener<String>() {
  @Override public void onItemSelected(int oldIndex, @Nullable String oldItem, int newIndex, String newItem) {
    toast(item + " selected!");
  }
});

Select an Item by an Index

You can select an item manually/initially with the method below:

powerSpinnerView.selectItemByIndex(4)

Note: selectItemByIndex must be invoked after setting items with the setItems method.

Store and Restore a selected Position

You can store and restore the selected position automatically and it will be re-selected automatically when the PowerSpinnerView is inflated with the property below:

powerSpinnerView.preferenceName = "country"

You can also set the property above with the attribute below in your XML layout:

app:spinner_preference_name="country"

You can remove or clear the stored position data with the methods below:

spinnerView.removePersistedData("country")
spinnerView.clearAllPersistedData()

SpinnerAnimation

You can set an animation when you display and dismiss the spinner with the method below:

app:spinner_popup_animation="normal"

This library supports the four animations below:

SpinnerAnimation.NORMAL
SpinnerAnimation.DROPDOWN
SpinnerAnimation.FADE
SpinnerAnimation.BOUNCE

NORMAL	DROPDOWN	FADE	BOUNCE

IconSpinnerAdapter

You can also check out the dafult custom adapter, IconSpinnerAdapter with the setItems and IconSpinnerItem methods below:

spinnerView.apply {
  setSpinnerAdapter(IconSpinnerAdapter(this))
  setItems(
    arrayListOf(
        IconSpinnerItem(text = "Item1", iconRes = R.drawable.unitedstates),
        IconSpinnerItem(text = "Item2", iconRes = R.drawable.southkorea)))
  getSpinnerRecyclerView().layoutManager = GridLayoutManager(context, 2)
  selectItemByIndex(0) // select a default item.
  lifecycleOwner = this@MainActivity
}

Note: You can get the RecyclerView of the spinner with the getSpinnerRecyclerView() method.

If you use Java, see the example below:

List<IconSpinnerItem> iconSpinnerItems = new ArrayList<>();
iconSpinnerItems.add(new IconSpinnerItem("item1", contextDrawable(R.drawable.unitedstates)));

IconSpinnerAdapter iconSpinnerAdapter = new IconSpinnerAdapter(spinnerView);
spinnerView.setSpinnerAdapter(iconSpinnerAdapter);
spinnerView.setItems(iconSpinnerItems);
spinnerView.selectItemByIndex(0);
spinnerView.setLifecycleOwner(this);

Custom Spinner Adapter

You can also implement your own custom adapter and bind to the PowerSpinnerView. Firstly, create a new adapter and viewHolder, which extend each RecyclerView.Adapter and PowerSpinnerInterface<T> below:

class MySpinnerAdapter(
  powerSpinnerView: PowerSpinnerView
) : RecyclerView.Adapter<MySpinnerAdapter.MySpinnerViewHolder>(),
  PowerSpinnerInterface<MySpinnerItem> {

  override var index: Int = powerSpinnerView.selectedIndex
  override val spinnerView: PowerSpinnerView = powerSpinnerView
  override var onSpinnerItemSelectedListener: OnSpinnerItemSelectedListener<MySpinnerItem>? = null

With the custom spinner adapter, you can use your own custom spinner item, which includes information of the spinner item.

Note: You shoud override the spinnerView, onSpinnerItemSelectedListener properties and setItems, notifyItemSelected methods.

Next, you must call spinnerView.notifyItemSelected method when your item is clicked or the spinner item should be changed:

override fun onBindViewHolder(holder: MySpinnerViewHolder, position: Int) {
  holder.itemView.setOnClickListener {
    notifyItemSelected(position)
  }
}

// You must call the `spinnerView.notifyItemSelected` method to let `PowerSpinnerView` know the item is changed.
override fun notifyItemSelected(index: Int) {
  if (index == NO_SELECTED_INDEX) return
  val oldIndex = this.index
  this.index = index
  this.spinnerView.notifyItemSelected(index, this.spinnerItems[index].text)
  this.onSpinnerItemSelectedListener?.onItemSelected(
      oldIndex = oldIndex,
      oldItem = oldIndex.takeIf { it != NO_SELECTED_INDEX }?.let { spinnerItems[oldIndex] },
      newIndex = index,
      newItem = item
    )
}

Lastly, you can

spinnerView.setOnSpinnerItemSelectedListener<MySpinnerItem> { 
  oldIndex, oldItem, newIndex, newItem -> toast(newItem.text) 
}

PowerSpinnerPreference

You can use PowerSpinnerView in your PreferenceScreen XML for building preferences screens. Add the dependency below to your module‘s build.gradle file:

dependencies {
    implementation "androidx.preference:preference-ktx:1.2.0"
}

You can implement the spinner preference with the PowerSpinnerPreference in your XML file below:

<?xml version="1.0" encoding="utf-8"?>
<androidx.preference.PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto">

  <androidx.preference.Preference
    android:title="Account preferences"
    app:iconSpaceReserved="false" />

  <com.skydoves.powerspinner.PowerSpinnerPreference
    android:key="question1"
    android:title="Question1"
    app:spinner_arrow_gravity="end"
    app:spinner_arrow_padding="8dp"
    app:spinner_divider_color="@color/white_70"
    app:spinner_divider_show="true"
    app:spinner_divider_size="0.2dp"
    app:spinner_item_array="@array/questions1"
    app:spinner_popup_animation="dropdown"
    app:spinner_popup_background="@color/background900"
    app:spinner_popup_elevation="14dp" />

You don’t need to set preferenceName attribute, and OnSpinnerItemSelectedListener should be set on PowerSpinnerPreference. You can reference this sample codes.

val countySpinnerPreference = findPreference<PowerSpinnerPreference>("country")
countySpinnerPreference?.setOnSpinnerItemSelectedListener<IconSpinnerItem> { oldIndex, oldItem, newIndex, newItem ->
  Toast.makeText(requireContext(), newItem.text, Toast.LENGTH_SHORT).show()
}

Avoid Memory Leak

Dialog, PopupWindow and etc.. have memory leak issue if not dismissed before activity or fragment are destroyed. But Lifecycles are now integrated with the Support Library since Architecture Components 1.0 Stable released. So you can solve the memory leak issue simply by setting the lifecycle owner with the method below:

.setLifecycleOwner(lifecycleOwner)

By setting the lifecycle owner, the dismiss() method will be invoked automatically before destroying your activity or fragment.

PowerSpinner at GitHub: https://github.com/skydoves/PowerSpinner
Platform: Android
⭐️: 756