18 June 2014

Using ImageView in Android

An Android Application without images is like A cake without cream.....
Displaying images in your app is an easy task . All you need to use is an ImageView ...
ImageView - It is a kind of  layout to hold images .
Lets make a simple application with an image .

Step 1 : Choose an image of your choice . You can save the image below if you don't have any .
mia logo
Step 2 : Store your image in your workspace in your project folder(MyFirstProject) in res -> drawable-hdpi
(name of the image must be in small alphabetical letters)
drawable-hdpi

Step 3 : Drag an ImageView from the Palette from Images & Media case .
drag imageview

Step 4 : You will get a dialog box which asks to select an image to be put in the ImageView . Select the desired image and press OK .
ok

Step 5 : You will see the image on your layout like the below screenshot .You can change the height and width of the image by dragging the blue border seen in the image below .
image position

Step 6 : Open the xml file (activity_main.xml) and see the code which will be as follows :
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logo" />
</LinearLayout>

If you do not get the image in your layout even if you have your image in the drawable-hdpi folder . Right-click the Project name in the Package Explorer to the left .

Step 7 : Run the Project .
run project

Use of ImageView in CrossAid
ImageView is used to a great extent in CrossAid as shown in the below screenshot .
imageview crossaid
The code for the ImageView from the above screenshot is :
<ImageView
      android:id="@+id/imageView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/bite"
      android:layout_gravity="center" />
  • The width and height of ImageView is same as that of the Image .(It wraps the actual height and width of the image - wrap_content) .
  • The Image is in the center so as the layout_gravity says "center" .

Previous Page Next Page Home
Top