Android ImageView Example by XML and Programmatically

By Arvind Rai, August 21, 2015
On this page we will provide Android ImageView example by XML and programmatically. To show image by XML, we need to add ImageView tag in our layout in XML. ImageView tag has the attribute android:src which will refer image kept in res/drawable directory. To show image programmatically, instantiate ImageView in Activity class and assign image by setImageResource() and add it to layout by LinearLayout.addView(). To refer layout programmatically we should provide an id to our layout in XML.

ImageView by XML

To use ImageView with XML, we need to create an ImageView tag as follows.
<ImageView
 android:id="@+id/image"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#000000"
 android:gravity="center"
 android:padding="32dp"
 android:contentDescription="@string/imgDesc"
 android:src="@drawable/image1"/> 
Find the description of some attributes.
android:gravity : The values are like CENTER, LEFT, RIGHT, TOP, BOTTOM etc.
android:src : To refer image, first put your images in res/drawable directory and assign it as @drawable/image_name.

When the layout is loaded by the Activity, the image referred in ImageView tag will be shown. We can change it later programmatically by calling imageView.setImageResource(R.drawable.image2).

ImageView Programmatically

To use ImageView programmatically, we need to consider below points.
1. Our Layout in XML should contain an android:id as android:id="@+id/myLayout".
2. We need to instantiate ImageView in our Activity.
3. Prepare LayoutParams.
4. Assign image to ImageView by setImageResource().
5. Instantiate layout and add ImageView instance by addView.

Find the code snippet.
ImageView imagebyCode = new ImageView(this);
imagebyCode.setImageResource(R.drawable.image3);
LinearLayout.LayoutParams params =  new LinearLayout
     .LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
imagebyCode.setLayoutParams(params);        
LinearLayout myLayout = (LinearLayout)findViewById(R.id.myLayout);
myLayout.addView(imagebyCode);  

Complete Example

Find the project structure in eclipse.
Android ImageView Example by XML and Programmatically
Now find the class and XML files.
MainActivity.java
package com.concretepage;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
public class MainActivity extends Activity {
	private ImageView imagebyXML;
	private ImageView imagebyCode;
	private LinearLayout myLayout;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
    	myLayout = (LinearLayout)findViewById(R.id.myLayout);
		imagebyXML = (ImageView)findViewById(R.id.image);
	}
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
                getMenuInflater().inflate(R.menu.menu_main, menu);
                return true;
        }
        public void changeImage(View v) {
    	  if (imagebyCode != null) {
    		imagebyCode.setVisibility(View.GONE);
    	  }
    	  imagebyXML.setVisibility(View.VISIBLE);
    	  imagebyXML.setImageResource(R.drawable.image2);
        }
        public void imageByCode(View v) {
        	imagebyXML.setVisibility(View.GONE);
		imagebyCode = new ImageView(this);
    	        imagebyCode.setImageResource(R.drawable.image3);
        	LinearLayout.LayoutParams params =  new LinearLayout
    			.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
        	imagebyCode.setLayoutParams(params);        
    	        myLayout.addView(imagebyCode);
        }
} 

res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"    
    tools:context=".MainActivity"
    android:id="@+id/myLayout">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btnmsg1"
        android:onClick="changeImage"/>
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btnmsg2"
        android:onClick="imageByCode"/>
    <ImageView
	android:id="@+id/image"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="#000000"
	android:gravity="center"
	android:padding="32dp"
	android:contentDescription="@string/imgDesc"
	android:src="@drawable/image1"/>
</LinearLayout> 

res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Concretepage</string>
    <string name="imgDesc">Image Description</string>
    <string name="btnmsg1">Change Image</string>
    <string name="btnmsg2">Show Image (By Code)</string>
</resources>  

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.concretepage"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk android:minSdkVersion="16"/>
    <application 
        android:allowBackup ="false"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity  android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest> 

Output

1. When activity loads layout XML first time.
Android ImageView Example by XML and Programmatically
2. On click of Change Image.
Android ImageView Example by XML and Programmatically
3. On click of show image.
Android ImageView Example by XML and Programmatically

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us