|
1 | 1 | # Multiple Selection View |
2 | 2 |
|
3 | 3 | [](https://jitpack.io/#Rogavactive/MultipleSelectionView) |
| 4 | + |
| 5 | + |
| 6 | +# Overview |
| 7 | +MultipleSelectionView is an Android library that provides a custom view for multiple selection with modal. You can include it in your XML layout files and customize the UI and logic to suit your needs. |
| 8 | + |
| 9 | +# Features |
| 10 | +- Display a spinner with multiple selection functionality |
| 11 | +- Basic functionality: pass a list of items and listen to changes |
| 12 | +- Control displayed text after selection: use the provided function to generate a string from selected data |
| 13 | +- Custom adapter: create your own adapter from our abstract class and pass it to dropdown UI and logic |
| 14 | +- It is a parent of TextView and you can use all functions that TextView can, except "text" |
| 15 | +# Getting Started |
| 16 | +To use MultipleSelectionView in your Android project, you need to first add the following code to your root build.gradle file at the end of the repositories section: |
| 17 | + |
| 18 | +```gradle |
| 19 | +allprojects { |
| 20 | + repositories { |
| 21 | + ... |
| 22 | + maven { url 'https://jitpack.io' } |
| 23 | + } |
| 24 | +} |
| 25 | +``` |
| 26 | +Next, add the following code to your app module's build.gradle file to include MultipleSelectionView as a dependency: |
| 27 | + |
| 28 | +```gradle |
| 29 | +dependencies { |
| 30 | + implementation 'com.github.Rogavactive:MultipleSelectionView:1.0.1' |
| 31 | +} |
| 32 | +``` |
| 33 | +# Basic functionality |
| 34 | + |
| 35 | +First add it to your xml file |
| 36 | +```xml |
| 37 | + <ge.rogavactive.multipleselectionview.MultipleSelectionView |
| 38 | + android:id="@+id/default_multiple_selection_view" |
| 39 | + android:layout_width="match_parent" |
| 40 | + android:layout_height="wrap_content" |
| 41 | + android:hint="Select options" |
| 42 | + android:padding="10dp" |
| 43 | + app:msv_modal_text_size="14sp" |
| 44 | + app:msv_modal_background="@color/white" |
| 45 | + app:msv_modal_text_color="@color/black" |
| 46 | + app:msv_modal_tick_color="@color/teal_700" |
| 47 | + app:layout_constraintTop_toTopOf="parent" |
| 48 | + tools:ignore="HardcodedText" /> |
| 49 | +``` |
| 50 | +- Adjust text size in Basic Implementation dropdown items with `app:msv_modal_text_size` |
| 51 | +- Change modal text color by setting `app:msv_modal_text_size` |
| 52 | +- Change modal tick color by setting `app:msv_modal_tick_color` |
| 53 | +- Set dropdown background with `app:msv_modal_background` |
| 54 | + |
| 55 | +After that retrieve view in your Activity/Fragment and populate adapter with data |
| 56 | +```kotlin |
| 57 | + val adapter = binding.defaultMultipleSelectionView.populateAdapterWithItems( |
| 58 | + items = itemList, |
| 59 | + selectedItems = selectedItemsList, |
| 60 | + itemTransformFun = { "Option: $it" } |
| 61 | + ) |
| 62 | +``` |
| 63 | +- pass dropdown list to `items` |
| 64 | +- (Optional) pass `selectedItems` to indicate which items are selected at start. |
| 65 | +- (Optional) `itemTransformFun` is a function that takes data on each list item in dropdown and produces a string which will be displayed in its place |
| 66 | + |
| 67 | +In order to change main view you can treat it as a `TextView` . Every functionality of `TextView` is present here except setting a text from xml. |
| 68 | + |
| 69 | +# Extended functionality |
| 70 | +If basic functionality is not enough for us we can do more to create more manageable UI and logic. |
| 71 | +1. Create a ViewHolder which extends `MultipleSelectionListPopupViewHolder` |
| 72 | +```kotlin |
| 73 | + inner class MultipleSelectionListPopupViewHolderImpl(private val binding: ItemListBinding) : MultipleSelectionListPopupViewHolder<I>(binding.root) { |
| 74 | + override fun onStateChange(data: I, selected: Boolean) { |
| 75 | + // Logic goes here |
| 76 | + } |
| 77 | + } |
| 78 | +``` |
| 79 | +onStateChange gets called each time a view state changes and should get updated. |
| 80 | + |
| 81 | +2. Create an Adapter class and extend `MultipleSelectionViewAdapter<I>` |
| 82 | +```kotlin |
| 83 | + class MultipleSelectionViewAdapterImpl <I>() : MultipleSelectionViewAdapter<I>(){ |
| 84 | + |
| 85 | + override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MultipleSelectionListPopupViewHolderImpl { |
| 86 | + return MultipleSelectionListPopupViewHolderImpl( |
| 87 | + ItemListBinding.inflate(LayoutInflater.from(parent.context), parent, false) |
| 88 | + ) |
| 89 | + } |
| 90 | + } |
| 91 | +``` |
| 92 | +override onCreateViewHolder (Note that I am using viewBinding here, but it is not required in your implementation) |
| 93 | + |
| 94 | +3. Set data with `adapter.setItems(data)` |
| 95 | + |
| 96 | +4. Listen to changes with one of the two listeners: `setOnChangeListener` and `setOnSelectionFinishedListener` |
| 97 | + |
| 98 | +# Interaction with `MultipleSelectionViewAdapter<I>` |
| 99 | +1. Use `setItems` to set list of items to display in dropdown and (Optional) selected items at start. |
| 100 | +```kotlin |
| 101 | + fun setItems(items: List<I>, selectedItems: List<I> = listOf()) |
| 102 | +``` |
| 103 | +2. Listen to each selection change |
| 104 | +```kotlin |
| 105 | + fun setOnChangeListener(listener: MultipleSelection.OnSelectionChanged<I>) |
| 106 | +``` |
| 107 | +3. Listen to overall changes after modal dismiss |
| 108 | +```kotlin |
| 109 | + fun setOnSelectionFinishedListener(listener: MultipleSelection.OnSelectionFinished<I>) |
| 110 | +``` |
| 111 | +4. override `onFormatSelected` in your adapter implementation in order to control how selected items will be displayed |
| 112 | +```kotlin |
| 113 | + open fun onFormatSelected(selected: List<I>): String |
| 114 | +``` |
| 115 | + |
| 116 | +# Contributing |
| 117 | +Developers can contribute to the development of MultipleSelectionView by creating pull requests and closing issues or creating new issues. We welcome contributions from the community and appreciate your help in making MultipleSelectionView better for everyone. |
| 118 | + |
| 119 | +# License |
| 120 | +MultipleSelectionView is released under the MIT License. See [LICENSE](https://github.com/Rogavactive/MultipleSelectionView/blob/main/LICENSE) for details. |
0 commit comments