Trying to explore Spinner example on android studio ? Here is the simple example to play with Spinner Control.

In this example i am going implement spinnercontrol with imageView.

Image will change after choosing items from spinner(DropDown).

Here are some Properties of Spinner that you can play around :

XML attributes

android:dropDownHorizontalOffset   Amount of pixels by which the drop down should be offset horizontally.
android:dropDownSelector List selector to use for spinnerMode=”dropdown” display.
android:dropDownVerticalOffset Amount of pixels by which the drop down should be offset vertically.
android:dropDownWidth Width of the dropdown in spinnerMode=”dropdown”.
android:gravity Gravity setting for positioning the currently selected item.
android:popupBackground Background drawable to use for the dropdown in spinnerMode=”dropdown”.
android:prompt The prompt to display when the spinner’s dialog is shown.
android:spinnerMode Display mode for spinner options.

Source –

Android Studio Spinner Example with ImageView

Spinner Example with ImageVIew

Lets Get Started :

Create a New project.

This required to create Spinner Example with imageview

  • Images (Res/drawable/demo.png)
  • Acitivity_main.xml
  • Strings.xml


Lets First Create UI.

  • Drag Spinner control to Activity
  • Drag Imageview control to Activity
  • Assign unique id to both the controls

This is how your Activity_main.xml should looks like.


Now you are done with Layout. Image isn’t visible on design view of activity xml file ? don’t get worried it will appear on emular once you run your project.

To show spinner values on Emulator you need to do Java coding.

Here is the java Coding for Spinner Control with Imageview


What i have done over here is,


First Initialize UI Component from layout file.

Added setOnItemSelectedListener  with 3 arguments and added image source to each one using if else condition

To show values on Spinner we need to add values on Strings.xml file

    <string name="app_name">ImageSpinner</string>

   <string name="choose_image">Choose Image</string>

    <string-array name="color">
        <item> Apple </item>
        <item> Microsoft </item>
        <item> Google </item>



I hope you are clear with the logics and design implementation for this simple program. Lets get started.

You can download full source for this program from here. Download

Leave a Reply

Your email address will not be published. Required fields are marked *