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 –to display the image  Button.

XML Interface Creation <LinearLayout xmlns: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" /> <ImageView android:src = android:layout_gravity="center_horizontal|center_vertical" android:layout_width = "wrap_content" android:layout_height ="wrap_content" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal|center_vertical" android:text="Change Image" />

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/drawable- hdpi  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:src = 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:src = 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:src = 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:src = 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

attributes XML Attributes Attribute NameRelated MethodDescription 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:baselinesetBaseline(int) The offset of the baseline within this view. android:baselineAlignBot tom setBaselineAlignBottom(b oolean) If true, the image view will be baseline aligned with based on its bottom edge. android:cropToPadding If true, the image will be cropped to fit within its padding.

attributes…. XML Attributes Attribute NameRelated MethodDescription android:maxHeightsetMaxHeight(int) An optional argument to supply a maximum height for this view. android:maxWidthsetMaxWidth(int) An optional argument to supply a maximum width for this view. android:scaleType setScaleType(ImageView. ScaleType) Controls how the image should be resized or moved to match the size of this ImageView. android:srcsetImageResource(int) Sets a drawable as the content of this ImageView. android:tint setColorFilter(int,PorterDuf f.Mode) Set a tinting color for the image.

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. 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 <AbsoluteLayout xmlns:android=" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">

ImageView Class  Beyond the attributes of, 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), clearColorFiltergetBaseline getBaselineAlignBottomsetAdjustViewBoundssetBaseline  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) setImageBitmapBitmapsetImageDrawableDrawable setImageMatrixMatrixsetImageResource setImageURIUri

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