How to add Custom Spinner in android

How to add Custom Spinner in android

Spinner is a widget that is used to select an item from a list of items. When the user tap on a spinner a drop-down menu is visible to the user. In this article, we will learn how to add custom spinner in the app

Create a new file algorithm_spinner.xml 

<?xml version="1.0" encoding="utf-8"?> 

<RelativeLayout

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"> 

    <ImageView

        android:id="@+id/image_view"

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:src="@drawable/gfg" /> 

    <TextView

        android:id="@+id/text_view"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignBottom="@+id/image_view"

        android:layout_alignParentTop="true"

        android:layout_margin="20dp"

        android:layout_toEndOf="@+id/image_view"

        android:gravity="center"

        android:text="Quick Sort"

        android:textColor="@android:color/black"

        android:textSize="20sp" /> 

</RelativeLayout> 

Create a new file AlgorithmItem.java

public class AlgorithmItem { 

    private String algorithmName; 

  

    public AlgorithmItem(String countryName) 

    { 

        algorithmName = countryName; 

    } 

  

    public String getAlgorithmName() 

    { 

        return algorithmName; 

    } 

} 

Create a new file AlgorithmAdapter.java

public class AlgorithmAdapter extends ArrayAdapter<AlgorithmItem> { 

    public AlgorithmAdapter(Context context, 

                            ArrayList<AlgorithmItem> algorithmList) 

    { 

        super(context, 0, algorithmList); 

    } 

  

    @NonNull

    @Override

    public View getView(int position, @Nullable

                                      View convertView, @NonNull ViewGroup parent) 

    { 

        return initView(position, convertView, parent); 

    } 

  

    @Override

    public View getDropDownView(int position, @Nullable

                                              View convertView, @NonNull ViewGroup parent) 

    { 

        return initView(position, convertView, parent); 

    } 

  

    private View initView(int position, View convertView, 

                          ViewGroup parent) 

    { 

        // It is used to set our custom view. 

        if (convertView == null) { 

            convertView = LayoutInflater.from(getContext()).inflate(R.layout.algorithm_spinner, parent, false); 

        } 

  

        TextView textViewName = convertView.findViewById(R.id.text_view); 

        AlgorithmItem currentItem = getItem(position); 

  

        // It is used the name to the TextView when the 

        // current item is not null. 

        if (currentItem != null) { 

            textViewName.setText(currentItem.getAlgorithmName()); 

        } 

        return convertView; 

    } 

} 

Add the following code in activity_main.xml file. Here we add our spinner on the layout. This will add a textview and a spinner.

<?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"

    tools:context=".MainActivity"> 

  

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Learn Algorithms"

        android:textStyle="bold"

        android:textSize="18sp"

        android:layout_above="@+id/spinner_algorithm"

        android:layout_marginStart="10dp"

        android:layout_marginBottom="25dp"

        /> 

  

    <Spinner

        android:layout_margin="5dp"

        android:id="@+id/spinner_algorithm"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"

        android:layout_marginTop="18dp" /> 

  

</RelativeLayout> 

Now add the following code in the MainActivity.java file

public class MainActivity extends AppCompatActivity { 

  

    ArrayList<AlgorithmItem> algorithmItems; 

    AlgorithmAdapter adapter; 

  

    @Override

    protected void onCreate(Bundle savedInstanceState) 

    { 

        super.onCreate(savedInstanceState); 

        setContentView(R.layout.activity_main); 

  

        initList(); 

        Spinner spinner = findViewById(R.id.spinner_algorithm); 

  

        // we pass our item list and context to our Adapter. 

        adapter = new AlgorithmAdapter(this, algorithmItems); 

        spinner.setAdapter(adapter); 

  

        spinner.setOnItemSelectedListener( 

            new AdapterView.OnItemSelectedListener() { 

                @Override

                public void onItemSelected(AdapterView<?> parent, 

                                           View view, int position, long id) 

                { 

  

                    // It returns the clicked item. 

                    AlgorithmItem clickedItem = (AlgorithmItem) 

                                                    parent.getItemAtPosition(position); 

                    String name = clickedItem.getAlgorithmName(); 

                    Toast.makeText(MainActivity.this, name + " selected", Toast.LENGTH_SHORT).show(); 

                } 

                @Override

                public void onNothingSelected(AdapterView<?> parent) 

                { 

                } 

            }); 

    } 

  

    // It is used to set the algorithm names to our array list. 

    private void initList() 

    { 

        algorithmItems = new ArrayList<>(); 

        algorithmItems.add(new AlgorithmItem("Quick Sort")); 

        algorithmItems.add(new AlgorithmItem("Merge Sort")); 

        algorithmItems.add(new AlgorithmItem("Heap Sort")); 

        algorithmItems.add(new AlgorithmItem("Prims Algorithm")); 

        algorithmItems.add(new AlgorithmItem("Kruskal Algorithm")); 

        algorithmItems.add(new AlgorithmItem("Rabin Karp")); 

        algorithmItems.add(new AlgorithmItem("Binary Search")); 

    } 

} 

Sreen output: