Android ImageView Example by XML and Programmatically
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 useImageView
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"/>
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 useImageView
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.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>