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

1. Android – Drawing Images – Simple example in Interface and Event handling L. Grewe

2. DrawImage Application • Lets create an application that contains some text, an image (that later we will write code to change) and a button.

3. DrawImage Application Interface • Use XML to setup interface that contains • TextView • ImageView –to display the image • Button .

4. 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>

5. The Layout --- the interface • Linear Layout

6. 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

7. 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.

8. 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.

9. 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)

10. 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)

11. 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

12. 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

13. <ImageView tag> attributes

14. <ImageView tag> attributes….

15. What do we have so far? • A dummy application that displays the droid.png in the ImageView • The button does nothing

16. 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;

17. 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;

18. 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);    

19. 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; }                      } });              } }

20. The Result

21. 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>

22. 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)

23. 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