Android tutorial - image viewer for android - android app development - android studio - android development tutorial



Android Image View example
android programming - android software - android emulator

What is Image View

  • Android is enriched with some of the best User interface design widgets. That allows you to build robust and good looking ui based application.
  • Image View is one of the UI widget that is used to display images in your Application. Image View is come with different configuration options to support different scale Types.
  • In Android, you can use “android. widget. Image View” class to display an image file. Image file is easy to use but hard to master, because of the various screen and dpi in Android devices.
  • In this tutorial, we didn’t go in deep about dpi and various screen issue, we just use ImageView to display a “png” image, when user click on a button, it will change to another “png” image.
 Android Image View example

Add Image to Resources

  • Put your images into folder “res/drawable-ldpi“, “res/drawable-mdpi” or “res/drawable-hdpi“.
  • See figure below, no matter which folder you put, Android will find your image automatically. In this case, both “android.png” and “android3d.png” images are used for Demo - android emulator - android tutorialnstration.
 Android Image View example
    • Again, read official Android’s “Drawable Resource ” and “Screen Support ” article to understand what is dpi and resources in Android.
android programming - android software - android emulator

Add Image View

  • Open “res/layout/main.xml” file, just add an ImageView and Button for Demo - android emulator - android tutorialnstration. By default, imageView1 will display “android.png”.
android development tutorial

File : MyAndroidAppActivity.java

android codes - android tutorial - android sdk
<?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" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/android" />

    <Button
        android:id="@+id/btnChangeImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Change Image" />

</LinearLayout>
click below button to copy the code from android tutorial team

File : MyAndroidAppActivity.java Code

  • Simple, when button is clicked, change it to “android3d.png”.
android programming - android software - android emulator

File : MyAndroidAppActivity.java

android codes - android tutorial - android sdk
package com.wikitechy.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.ImageView;
import android.view.View;
import android.view.View.OnClickListener;

public class MyAndroidAppActivity extends Activity {

	Button button;
	ImageView image;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		addListenerOnButton();

	}

	public void addListenerOnButton() {

		image = (ImageView) findViewById(R.id.imageView1);

		button = (Button) findViewById(R.id.btnChangeImage);
		button.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				image.setImageResource(R.drawable.android3d);
			}

		});

	}

}
click below button to copy the code from android tutorial team

Demo - android development tutorial - android emulator - android tutorial

  • Run the application.
  • Result, “android.png” is displayed.
 Android Image View example
  • Click on the button, image will changed to “android3d.png”.
 Android Image View example

Related Searches to image viewer for android