android drawing images simple example in interface and event handling
Download
Skip this Video
Download Presentation
Android – Drawing Images – Simple example in Interface and Event handling

Loading in 2 Seconds...

play fullscreen
1 / 23

Android – Drawing Images – Simple example in Interface and Event handling - PowerPoint PPT Presentation


  • 71 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Android – Drawing Images – Simple example in Interface and Event handling' - kert


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
drawimage application
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
DrawImage Application Interface
  • Use XML to setup interface that contains
    • TextView
    • ImageView –to display the image
    • Button .
xml interface creation
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>

lets setup the images we want to use
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
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
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
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 tag1
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 tag2
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 tag3
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
what do we have so far
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
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 works1
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 works2
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 works3
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; }                    

 } });            

 } }

visually creating xml interface
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
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)
slide23
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
ad