Basic Concept of Spinner Control and ImageView Control in Android

In this tutorial following is shown:

  • Basic concepts of Spinner Control of Android
  • Basic concepts of ImageView Control of Android
  • How to add new Array from strings.xml file
  • How to add images in an Android Applicaion is also shown.

Points to be remembered:

  1. When you add images in the application first add all the images in the res/drawable-hdpi folder.
  2. Keep the first character of image name in small caps or image will not be loaded in the application.

Code:

activity_main.xml

<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:paddingBottom=”@dimen/activity_vertical_margin”
android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
tools:context=”.MainActivity” >

<Spinner
android:id=”@+id/spinner1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentTop=”true”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”22dp”
android:entries=”@array/image_list” />

<TextView
android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignLeft=”@+id/spinner1″
android:layout_below=”@+id/spinner1″
android:layout_marginLeft=”14dp”
android:text=”TextView” />

<ImageView
android:id=”@+id/imageView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignLeft=”@+id/spinner1″
android:layout_below=”@+id/textView1″
android:layout_marginTop=”70dp”
android:src=”@drawable/desert” />

</RelativeLayout>

strings.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>

<string name=”app_name”>Demo</string>
<string name=”action_settings”>Settings</string>
<string-array name=”image_list”>
<item>Desert</item>
<item>Koala</item>
<item>JellyFish</item>
<item>LightHouse</item>
<item>Penguins</item>
</string-array>

</resources>

MainActivity.java

package com.example.demo;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ImageView;
import android.widget.Spinner;
import android.widget.TextView;
public class MainActivity extends Activity{

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Spinner spin=(Spinner)findViewById(R.id.spinner1);
final ImageView img=(ImageView)findViewById(R.id.imageView1);
final TextView t1=(TextView)findViewById(R.id.textView1);

spin.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener(){

@Override
public void onItemSelected(AdapterView<?> arg0, View arg1,
int arg2, long arg3) {
// TODO Auto-generated method stub
if(spin.getSelectedItem().equals(“Desert”))
{
img.setImageResource(R.drawable.desert);
t1.setTextColor(Color.GREEN);
t1.setText(“You have selected Desert Image”);
}
else if(spin.getSelectedItem().equals(“Koala”))
{
img.setImageResource(R.drawable.koala);
t1.setTextColor(Color.BLUE);
t1.setText(“You have selected Koala Image”);
}
else if(spin.getSelectedItem().equals(“JellyFish”))
{
img.setImageResource(R.drawable.jellyfish);
t1.setTextColor(Color.RED);
t1.setText(“You have selected JellyFish Image”);
}
else if(spin.getSelectedItem().equals(“Penguins”))
{
img.setImageResource(R.drawable.penguins);
t1.setTextColor(Color.YELLOW);
t1.setText(“You have selected Penguins Image”);
}
else if(spin.getSelectedItem().equals(“LightHouse”))
{
img.setImageResource(R.drawable.lighthouse);
t1.setTextColor(Color.MAGENTA);
t1.setText(“You have selected LightHouse Image”);
}

}

@Override
public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub

}});

}

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

}

https://youtu.be/EEdSSuvLGFY

Add a Comment

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