ANDROID – DRAWING IMAGES –
SIMPLE EXAMPLE IN INTERFACE AND EVENT HANDLING
L. Grewe
DrawImage Application

Lets create an application that contains some text,
an image (that later we will write code to change)
and a button.
DrawImage Application Interface

Use XML to setup interface that contains
 TextView
 ImageView
 Button
.
–to display the image
XML Interface Creation
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:text="@string/hello" />
<ImageView
android:id="@+id/image_display"
android:src = "@drawable/droid"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width = "wrap_content"
android:layout_height ="wrap_content" />
<Button
android:id="@+id/btnChangeImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:text="Change Image" />
</LinearLayout>
The Layout --- the interface

Linear Layout
Lets Setup the images we want to
use




res/drawable-hdpi = contains drawable resources
like images for hdpi resolution use
res/drawable-mdpi = contains drawable resources
like images for mdpi resolution use
res/drawable-ldpi = contains drawable resources
like images for ldpi resolution use
You can add the images to all folders or only
some – the application will figure it out
Our images in res/drawablehdpi


We have the
droid.png you saw
on the first slide
Also have some
food oriented
images – dairy.png,
etc.
What is ImageView




Displays an arbitrary image
can load images from various sources (such as
resources or content providers)
takes care of computing its measurement from the
image so that it can be used in any layout manager
provides various display options such as scaling and
tinting.
Lets look again at that
<ImageView tag
<ImageView
android:id="@+id/image_display"
android:src = "@drawable/droid"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width = "wrap_content"
android:layout_height ="wrap_content" />



This means look in res/drawable-* for a resource
named droid
Notice there is a droid.png
It is referring to its base filename (not the extension)
Lets look again at that
<ImageView tag
<ImageView
android:id="@+id/image_display"
android:src = "@drawable/droid"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width = "wrap_content"
android:layout_height ="wrap_content" />


This gives an id to this ImageView widget of
image_display
This can be used in the code to “grab” hold of a code
reference to this widget (so you can manipulate it –
like change the image displayed)
Lets look again at that
<ImageView tag
<ImageView
android:id="@+id/image_display"
android:src = "@drawable/droid"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width = "wrap_content"
android:layout_height ="wrap_content" />

This centers both horizontally and vertically the
ImageView
Lets look again at that
<ImageView tag
<ImageView
android:id="@+id/image_display"
android:src = "@drawable/droid"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width = "wrap_content"
android:layout_height ="wrap_content" />

This sets the width and height to be just enough to
contain the content of the ImageView ---the image
being displayed
<ImageView tag> attributes
XML Attributes
Attribute Name
Related Method
Description
android:adjustViewBoun
ds
setAdjustViewBounds(bo
olean)
Set this to true if you
want the ImageView to
adjust its bounds to
preserve the aspect
ratio of its drawable.
android:baseline
setBaseline(int)
The offset of the
baseline within this view.
If true, the image view
android:baselineAlignBot setBaselineAlignBottom(b will be baseline aligned
tom
oolean)
with based on its bottom
edge.
android:cropToPadding
If true, the image will be
cropped to fit within its
<ImageView tag> attributes….
XML Attributes
Attribute Name
Related Method
Description
setMaxHeight(int)
An optional argument to
supply a maximum height
for this view.
setMaxWidth(int)
An optional argument to
supply a maximum width
for this view.
setScaleType(ImageView.
ScaleType)
Controls how the image
should be resized or
moved to match the size
of this ImageView.
android:src
setImageResource(int)
Sets a drawable as the
content of this
ImageView.
android:tint
setColorFilter(int,PorterDuf Set a tinting color for the
f.Mode)
image.
android:maxHeight
android:maxWidth
android:scaleType
What do we have so far?


A dummy application that displays the droid.png in
the ImageView
The button does nothing
Next --- lets make the Button do its
works

Step 1: Alter our Activity file DrawImageActivity.java
to create class variables for button (image_button)
and ImageView (iview)
public class DrawImageActivity extends Activity {
//button in GUI in main.xml
Button image_button;
//ImageView object in GUI defined in main.xml
ImageView iview;
Next --- lets make the Button do its
works

Step 2: create class variable that is an array of resource ids
representing our food images, called imageIDs[] create an
index called image_index to loop through this array and
restart to 0 when at the end of the array.)
public class DrawImageActivity extends Activity {
>>>>
//Array of images that will cycle through and display in ImageView
// represented by their IDS
Integer[] imageIds = { R.drawable.veggies, R.drawable.fruit, R.drawable.dairy,
R.drawable.snacks, R.drawable.drinks};
//image index to cycle through images defined in imageIds
int image_index =0;
Next --- lets make the Button do its
works

Step 3: inside onCreate() of DrawImageActivity, grab
the GUI elements and store in variables.
public class DrawImageActivity extends Activity {
>>>>>>>>>
/** Called when the activity is first created. */ @Override public void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//create a handle to our button and ImageView in GUI
image_button = (Button) findViewById(R.id.btnChangeImage);
iview = (ImageView) findViewById(R.id.image_display);
Next --- lets make the Button do its
works

Step 2: continue onCreate() of DrawImageActivity, to create
an event handler
public class DrawImageActivity extends Activity {
>>>>>>>>>onCreate() method >>>>>>>>
image_button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// change the image to next image in imageIds []
iview.setImageResource(imageIds[image_index]);
image_index++;
//point to next image
//if at end of image array return to the first image
if (image_index >= imageIds.length)
{ image_index =0; }
} });
}}
The Result
Visually Creating XML interface

I dragged and dropped an EditText view and a
Button. Below I show you the corresponding code.
res/layout/main2.xml
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText android:text="@string/hello" android:id="@+id/editText1" android:inputType="textMultiLine"
android:layout_width="169dp" android:layout_height="115dp" android:layout_x="11dp"
android:layout_y="20dp"></EditText>
<Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Button" android:layout_x="27dp" android:layout_y="146dp"></Button>
</AbsoluteLayout>
ImageView Class




Beyond the attributes of <ImageView>, the actual
ImageView class has a rich(er) set of methods….see
API…..
Here are some:
clearColorFilter(), getBaseline() getBaselineAlignBottom(), setAdjustViewBounds(boolean
adjustViewBounds), setBaseline(int baseline),
Here are some methods that can be used to set the ImageView
contents

setImageBitmap(Bitmap bm), setImageDrawable(Drawable drawable),
setImageMatrix(Matrix matrix), setImageResource(int resId),
setImageURI(Uri uri)
MORE>>>

There are more classes that can be useful for
display of imaes, some that have built in user
interaction events – See book and online for more
examples…..i.e. Gallery