Android - Simple Image Viewer

Submitted by: 
Operating System: 
Visitors have accessed this post 4143 times.

In this tutorial we will try to create a Simple Image Viewer using Android. This simple app can use for viewing some images in a convenient way. Android is open source to developers who has an interest in developing mobile apps. It is available to any devices such as TV, phones, watches etc. So let's now do the coding.

Getting Started:

First you will have to download & install the Android Development IDE (Android Studio or Eclipse). Android Studio is an open source development feel free to develop your things.

Here's the link for the Android Studio https://developer.android.com/studio/index.html.

Layout Design

We will now create the design for the application, first to do is to create a resource that we will be using to display the image. To create a resource, go to drawable folder then import all the image that you will you use to this folder.
tut1

Now that we're done with the image resource, first locate the layout file called activity_main.xml, this is the default name when you create a new activity. Then write these codes inside your layout file.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="<a href="http://schemas.android.com/apk/res/android"
  3. " rel="nofollow">http://schemas.android.com/apk/res/android"
  4. </a> xmlns:app="<a href="http://schemas.android.com/apk/res-auto"
  5. " rel="nofollow">http://schemas.android.com/apk/res-auto"
  6. </a> xmlns:tools="<a href="http://schemas.android.com/tools"
  7. " rel="nofollow">http://schemas.android.com/tools"
  8. </a> android:layout_width="match_parent"
  9. android:layout_height="match_parent"
  10. tools:context="com.razormist.simpleimageviewer.MainActivity">
  11.  
  12. <ImageView
  13. android:id="@+id/iv_display"
  14. android:layout_width="wrap_content"
  15. android:layout_height="wrap_content"
  16. android:layout_alignParentTop="true"
  17. android:scaleType="fitXY"
  18. app:srcCompat="@drawable/img1"
  19. android:layout_marginBottom="30dp"
  20. android:layout_above="@+id/btn_right" />
  21.  
  22. android:id="@+id/btn_right"
  23. android:layout_width="wrap_content"
  24. android:layout_height="wrap_content"
  25. android:text="RIGHT"
  26. android:layout_marginRight="42dp"
  27. android:layout_marginEnd="42dp"
  28. android:layout_alignBaseline="@+id/btn_left"
  29. android:layout_alignBottom="@+id/btn_left"
  30. android:layout_alignParentRight="true"
  31. android:layout_alignParentEnd="true" />
  32.  
  33. android:id="@+id/btn_left"
  34. android:layout_width="wrap_content"
  35. android:layout_height="wrap_content"
  36. android:layout_alignParentBottom="true"
  37. android:layout_alignParentLeft="true"
  38. android:layout_alignParentStart="true"
  39. android:layout_marginBottom="33dp"
  40. android:layout_marginLeft="43dp"
  41. android:layout_marginStart="43dp"
  42. android:text="LEFT" />
  43.  
  44.  
  45.  
  46. </RelativeLayout>

Android Manifest File

The Android Manifest file provides essential information about your app to the Android system in which the system must required before running the code. It describe the overall information about the application. It contains some libraries that needed to access the several method within the app.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="<a href="http://schemas.android.com/apk/res/android"
  3. " rel="nofollow">http://schemas.android.com/apk/res/android"
  4. </a> package="com.razormist.simpleimageviewer">
  5.  
  6. <application
  7. android:allowBackup="true"
  8. android:icon="@mipmap/ic_launcher"
  9. android:label="@string/app_name"
  10. android:roundIcon="@mipmap/ic_launcher_round"
  11. android:supportsRtl="true"
  12. android:theme="@style/AppTheme">
  13. <activity android:name=".MainActivity"
  14. android:configChanges="orientation"
  15. android:screenOrientation="portrait">
  16. <intent-filter>
  17. <action android:name="android.intent.action.MAIN" />
  18.  
  19. <category android:name="android.intent.category.LAUNCHER" />
  20. </intent-filter>
  21. </activity>
  22. </application>
  23. </manifest>

The Main Function

This code contains the main function of the application. This code will allow you to select image based on the button interaction. To start with first locate your MainActivity java file and open it, then write these some important variables inside the MainActivity class.

  1. private ImageView iv_display;
  2. private Button btn_right, btn_left;
  3. private int current_image_index;
  4. private int[] images = {R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4, R.drawable.img5};

Then write these several method inside the activity class to make the apps work properly.

  1. void DisplayImage(){
  2. iv_display = (ImageView)findViewById(R.id.iv_display);
  3. }
  4.  
  5. void SwitchButton(){
  6. btn_right = (Button)findViewById(R.id.btn_right);
  7. btn_left = (Button)findViewById(R.id.btn_left);
  8. btn_right.setOnClickListener(new View.OnClickListener() {
  9. @Override
  10. public void onClick(View v) {
  11. current_image_index++;
  12. current_image_index = current_image_index % images.length;
  13. iv_display.setImageResource(images[current_image_index]);
  14. }
  15. });
  16.  
  17. btn_left.setOnClickListener(new View.OnClickListener() {
  18. @Override
  19. public void onClick(View v) {
  20. current_image_index--;
  21.  
  22. if(current_image_index < 0){
  23. current_image_index = images.length - 1;
  24. }
  25. iv_display.setImageResource(images[current_image_index]);
  26. }
  27. });
  28. }

Finally, initialize all the methods inside the onCreate method to run the application.

  1. DisplayImage();
  2. SwitchButton()

Try to run the app and see if it worked.

There you have it we have created a Simple Image Viewer using Android. I hope that this tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!!!


Comments

good work. working fine.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.