Android Spinners Dropdownlist with Image Example

Android Spinners Dropdownlist with Image Example

In this android code snippet example, we are going to learn how to create Android Spinner Dropdownlist with Image. Android Spinner is among android View components that is always present in different applications.

Android Spinner comes in handy when you want to give your app users the option of selecting an item from a list of related items.

If you want to learn how to create android spinner without image, we wrote a simple and concise tutorial that covers this topic – Android Spinners Dropdownlist Example Tutorial.

We are going to have a list of items in our spinner and when each item is selected a corresponding image that is associated with this item is displayed.

We are going to make use of three Views – TextView that will serve as the title of the spinner View, the spinner will contain a list of item while the ImageView will hold the image associated with the selected item in the spinner.

Before we start, the first thing I will do is to list the environment and tools I used in this android code snippet but feel free to use whatever environment or tools you are familiar with.

Windows 7

Android Studio

Samsung Galaxy Fame Lite

Min SDK 14

Target SDK 19

To create a new android application project, following the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidSpinnersDropdownlistWithImage

Package: com.inducesmile.androidspinnersdropdownlistwithimage

Keep other default selections.

Continue to click on next button until Finish button is active, then click on Finish Button

Once you are done with creating your project, make sure you change the package name if you did not use the same package.

Incorporating resources

We are going to create our string-array resource. Open the strings.xml file located in the following path res/values/strings.xml

When you open the strings.xml file, you are free to use the code or design view for your design.

The design view is simple tool you can use to add a lot of resources to your application such as strings, integers, and color values and so on.

But we are going to make use of the standard way which is editing the strings.xml file by hand. In the bottom of the screen, hit the string.xml tab.

Copy and paste the following code in your strings.xml file.

<resources>

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

<string name="hello_world">Hello world!</string>

<string name="action_settings">Settings</string>

<string name="option_select">Choose objects</string>

<string-array name="object_array">

<item>House</item>

<item>Car</item>

<item>Cake</item>

<item>Money</item>

</string-array>

<integer-array name="object_image">

<item>@drawable/house</item>

<item>@drawable/car</item>

<item>@drawable/cake</item>

<item>@drawable/money</item>

</integer-array>

</resources>

Now that we have done with creating our items for the spinner, we will move on to design the main user interface for our application.

Open activity_main.xml file located in the res/layout folder. Copy and paste the following code in the file.

<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:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<TextView android:text="@string/option_select"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_marginLeft="20dp"

android:layout_marginStart="55dp"

android:textSize="16sp"

android:textStyle="bold"

android:layout_marginTop="27dp"

android:id="@+id/textView" />

<Spinner

android:id="@+id/spinner"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginRight="20dp"

android:layout_below="@+id/textView"

android:layout_alignLeft="@+id/textView"/>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/imageView"

android:layout_below="@+id/spinner"

android:layout_alignLeft="@+id/spinner"

android:layout_alignStart="@+id/spinner"

android:layout_marginTop="55dp" />

</RelativeLayout>

We have added three View control as we stated when we are describing how our application will look like.

Lets move over to the MainActivty.java file. In this file, we will get the instances of our View controls by using the findViewById method of the Activity class.

We will create a new ArrayAdapter that we will pass our list of items to. The adapter will bind its data to the spinners items.

Copy and pasts the code below to the file.

package inducesmile.com.androidspinnersdropdownlistwithimage;

import android.content.res.TypedArray;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.Spinner;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity {

private String[] listOfObjects;

private TypedArray images;

private ImageView itemImage;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

listOfObjects = getResources().getStringArray(R.array.object_array);

images = getResources().obtainTypedArray(R.array.object_image);

TextView spinnerHeader = (TextView)findViewById(R.id.textView);

itemImage = (ImageView)findViewById(R.id.imageView);

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

ArrayAdapter<String> spinnerAdapter = new ArrayAdapter<String>(getApplicationContext(),android.R.layout.simple_spinner_item, listOfObjects);

spinnerAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

spinner.setAdapter(spinnerAdapter);

spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

@Override

public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {

itemImage.setImageResource(images.getResourceId(spinner.getSelectedItemPosition(), -1));
}

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

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

Save the file and run your project. If everything works for you, an image like this will appear on your test device.

Android Spinners Dropdownlist with Image Example

You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

Remember to subscribe with your email so that you will be among the first to receive our new post once it is published

OTHER INTERESTING POSTS:

Add a Comment