Displaying Image / Picture Android Sample

 In this example, let see how to add Image in the Android Project below Text View.

Download source code from Github.

Steps to Displaying Image / Picture in Android Project :

Step 1 :

       Create new android project in eclipse. If you don't know how to create a android project in eclipse, Click here.

Step 2 :

      Copy the image you wish to display into res/drawable-mdpi folder. Refer below Screen shot, In this example, I have added the dubai_fireworks_2014.jpg.

       Note: Most of Android device have a generic restriction of maximum App Size 16MB, Kindly choose your images accordingly. (Preferred Size less than 2MB). If you are using bigger images resize using ImageReducer.

Step 3 (a) : Adding ImageView control in the XML :

• Now open your main activity xml file, under layout/activity_main.xml.Add following ImageView control to layout/activity_main.xml.

                <ImageView />

• Then, You have to add the width and height property to the ImageView control.

                <ImageView 

                       android:layout_width="wrap_content"

                       android:layout_height="wrap_content" />

• After that you have specify your image source. Give ctrl+space (Both mac and windows users)  after android:src="@drawable/,  you will get list of image files in the drawable folder.Select your image name then press enter.

               <ImageView 

                       android:layout_width="wrap_content"

                       android:layout_height="wrap_content"                              

                       android:src="@drawable/dubai_fireworks_2014" />

Step 3 (b) : Adding image using Eclipse Graphical View :

• Drag and drop ImageView from Images & Media tab to activity_main.xml Graphical view. 

• It will pop up the Resource Chooser window.Select the image from Project Resource, then press ok button.

Step 4 : 

      After step 3 successfully done, you can see the picture similar to this. Screen shot is taken from Graphical View.

Step 5 :

       In our example, I am displaying image below the text view, So I have added the android:layout_below="@id/textview1". textview1 is id of the TextView.

Step 6 :

     Updated activity_main.xml file:

           <TextView

                 android:id="@+id/textview1"

                 android:layout_width="wrap_content"

                 android:layout_height="wrap_content"

                 android:text="@string/hello_world" />

          <ImageView 

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:src="@drawable/dubai_fireworks_2014"

               android:layout_below="@id/textview1"/>

Step 7 :

      For each ImageView, you should add contentDescription. Now You will get warning near the content Description in the eclipse. 

Step 8 :       

      But you can run your project in the emulator with out any problem. Let see how to remove the warning message. 

Step 9 :

      Add android:contentDescription="", to the ImageView.

 <ImageView 

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/dubai_fireworks_2014"

        android:layout_below="@id/textview1"

        android:contentDescription="Dubai Fireworks 2014"

        />

Step 10 :

       After added the content Description. Again you will get warning message near the content description. [Warning Message : Hardcoded string "Dubai Fireworks 2014", should use @string resource].

Step 11 :

      Let see how to remove this warning message from eclipse. Now select the "Dubai Fireworks 2014" text in the android:contentDescription attribute. 

Step 12 :

      Next select, Refactor  -> Android -> Extract Android String.

Step 13 : 

      It will pop up the below window. Next click ok button. Now our warning message will get disappear from eclipse screen. Replace by R.String is refer name for your string.

Step 14 :

      It will add new string entry in the String.xml file. Refer that string name in the ContentDescription.

• Updated String.xml file :

             <?xml version="1.0" encoding="utf-8"?>

                  <resources>

                      <string name="app_name">Image Sample</string>

                      <string name="action_settings">Settings</string>

                      <string name="hello_world">Hello world!</string>

                      <string name="dubai_fireworks_2014">Dubai Fireworks 2014</string>

                  </resources>

•  Updated activity_main.xml file :

             <TextView

                    android:id="@+id/textview1"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="@string/hello_world" />

            <ImageView 

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:src="@drawable/dubai_fireworks_2014"

                    android:layout_below="@id/"

                    android:contentDescription="@string/dubai_fireworks_2014"/>

Step 15 :

      Now your application run in Android Emulator.Click here to see how to run application in emulator.

Step 16 :

      Now we have developed Display image in the Android Project.