Android drawing images simple example in interface and event handling
Download
1 / 23

- 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 '' - 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
Android drawing images simple example in interface and event handling

Android – Drawing Images – Simple example in Interface and Event handling

L. Grewe


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)


Android drawing images simple example in interface and event handling
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