android – drawing images – simple example in interface and event handling
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
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<?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/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: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> attributesXML Attributes
Attribute Name Related Method Description
android:adjustViewBounds
setAdjustViewBounds(boolean)
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.
android:baselineAlignBottom
setBaselineAlignBottom(boolean)
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.
<ImageView tag> attributes….
XML Attributes
Attribute Name Related Method Description
android:maxHeight setMaxHeight(int) An optional argument to supply a maximum height for this view.
android:maxWidth setMaxWidth(int) An optional argument to supply a maximum width for this view.
android:scaleTypesetScaleType(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:tintsetColorFilter(int,PorterDuff.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. */ @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