android image "viewer" app

Question

I am trying to create an android app that will let me display images fullscreen with next and previous buttons on top to change between them.

Can anybody point me to some tutorials where i can find instructions on something similar?

If not, what is the best method to use to get the images into the app? I have tried several ways from creating object classes for the images and instantiating it with a drawable in each using the Bitmap Factory to return the image but that won't work.

I am a beginner to android and could really use reference material but can't find anything useful that covers this subject.

Answer 1

As a newbie myself I've been working with this and it's very simple. Here is some code (maybe there is a better way but this is the way I figured out how to do it):

package com.imageviewexample;

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

public class ImageViewExample extends Activity implements OnClickListener {

    /** Called when the activity is first created. */

    int image_index = 0;
    private static final int MAX_IMAGE_COUNT = 3;

    private int[] mImageIds = {
            R.raw.image1,
            R.raw.image2,
            R.raw.image3
    };

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

        Button btnPrevious = (Button)findViewById(R.id.previous_btn);
        btnPrevious.setOnClickListener(this);       
        Button btnNext = (Button)findViewById(R.id.next_btn);
        btnNext.setOnClickListener(this);

        showImage();        

    }

    private void showImage() {

        ImageView imgView = (ImageView) findViewById(R.id.myimage);             
        imgView.setImageResource(mImageIds[image_index]);       

    }

    public void onClick(View v) {

        switch (v.getId()) {

            case (R.id.previous_btn):

                image_index--;

                if (image_index == -1) {                    
                    image_index = MAX_IMAGE_COUNT - 1;                  
                }

                showImage();

            break;

            case (R.id.next_btn):

                image_index++;

                if (image_index == MAX_IMAGE_COUNT) {               
                image_index = 0;                
            }

                showImage();

            break;      

        }

    }
}

And this is the main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

<Button
    android:id="@+id/previous_btn"
    android:layout_width="124dip" 
    android:layout_height="wrap_content" 
    android:text="Previous"
    />

<Button
    android:id="@+id/next_btn"
    android:layout_width="124dip" 
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/previous_btn" 
    android:text="Next"
    />

<ImageView
    android:id="@+id/myimage"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:layout_below="@+id/previous_btn"
    />         

</RelativeLayout>

Answer 2

This is a picture viewer solution with grid view of picture resources from which you can choose a picture and display it as a single picture.In this single picture view, that is accomplished with PictureViewer.java you can browse threw resource pictures using left and right button. You can also return to grid view that is accomplished with HelloGridViewActivity.java. ImageAdapter.java is used to define grid view resources and methods. Hope this helps:

HelloGridViewActivity.java:

package com.example.hellogridview;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;

public class HelloGridViewActivity extends Activity {

private long prev=0,next= 0;

@Override
public void onCreate(Bundle savedInstanceState) {



    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    final GridView gridview = (GridView) findViewById(R.id.gridview);
    gridview.setAdapter(new ImageAdapter(this));

    gridview.setOnItemClickListener(new OnItemClickListener() {
    public void onItemClick(AdapterView<?> parent, View v, int position, long id) {


            prev = ImageAdapter.getPrevItemId(position);
            next = ImageAdapter.getNextItemId(position);

            showImage(gridview.getAdapter().getItemId(position),position);


        }
    });

}
private void showImage(long id, int pos){
    Intent pictureViewer = new Intent(this, PictureViewer.class);
    pictureViewer.putExtra("pictureId",id );
    pictureViewer.putExtra("picturePosition", pos);
    pictureViewer.putExtra("picturePrevId", prev);
    pictureViewer.putExtra("pictureNextId", next);

    startActivityForResult(pictureViewer,0);

  }
}    

ImageAdapter.java:

package com.example.hellogridview;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
private Context mContext;

public ImageAdapter(Context c) {
    mContext = c;
}

public int getCount() {
    return mThumbIds.length;
}

public Object getItem(int position) {
    return null;
}

public long getItemId(int position) {
    return mThumbIds[position];
}

public static long getPrevItemId(int position) {
    if(--position<0) position = 21;
    return mThumbIds[position];
}

public static long getNextItemId(int position) {
    if(++position>21) position = 0;
    return mThumbIds[position];
}

// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
    ImageView imageView;
    if (convertView == null) {  // if it's not recycled, initialize some attributes
        imageView = new ImageView(mContext);
        imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setPadding(8, 8, 8, 8);
    } else {
        imageView = (ImageView) convertView;
    }

    imageView.setImageResource(mThumbIds[position]);
    return imageView;
}

// references to our images
private static Integer[] mThumbIds = {
        R.drawable.sample_2, R.drawable.sample_3,
        R.drawable.sample_4, R.drawable.sample_5,
        R.drawable.sample_6, R.drawable.sample_7,
        R.drawable.sample_0, R.drawable.sample_1,
        R.drawable.sample_2, R.drawable.sample_3,
        R.drawable.sample_4, R.drawable.sample_5,
        R.drawable.sample_6, R.drawable.sample_7,
        R.drawable.sample_0, R.drawable.sample_1,
        R.drawable.sample_2, R.drawable.sample_3,
        R.drawable.sample_4, R.drawable.sample_5,
        R.drawable.sample_6, R.drawable.sample_7
  };
}    

PictureViewer.java:

package com.example.hellogridview;

import android.app.Activity;
import android.content.Intent;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;


public class PictureViewer extends Activity {

long picItem,picPrevItem,picNextItem;
int picPosition;
private ImageView m_vwImage;


public void onCreate(Bundle savedInstanceState){
    super.onCreate(savedInstanceState);
    setContentView(R.layout.picture_layout);


    //citanje podataka prosledjenih ovoj aktivnosti
    //namera koja je pokrenula ovu aktivnost
    Intent i = getIntent();

    picItem = i.getLongExtra("pictureId", -1);
    picPrevItem = i.getLongExtra("picturePrevId", -1);
    picNextItem = i.getLongExtra("pictureNextId", -1);
    picPosition = i.getIntExtra("picturePosition", -1);
    m_vwImage = (ImageView) findViewById(R.id.imageview);


    //menjamo ulazne vrednosti da bi ih takve prosledili kao povratne
    Log.i("Nemanja", "picItem" + picItem);

    Drawable image = getResources().getDrawable((int)picItem);
    m_vwImage.setImageDrawable(image);


    Button startButton = (Button) findViewById(R.id.return_button);
    startButton.setOnClickListener(new View.OnClickListener(){
        public void onClick(View view){
            finish();   
        }
    });     

    Button leftButton = (Button) findViewById(R.id.left_button);
    leftButton.setOnClickListener(new View.OnClickListener(){
        public void onClick(View view){
            Drawable imagePrev = getResources().getDrawable((int)picPrevItem);
            m_vwImage.setImageDrawable(imagePrev);

            if(--picPosition<0) picPosition = 21;
            picPrevItem = (ImageAdapter.getPrevItemId(picPosition));
            picNextItem = (ImageAdapter.getNextItemId(picPosition));

        }
    }); 

    Button rightButton = (Button) findViewById(R.id.right_button);
    rightButton.setOnClickListener(new View.OnClickListener(){
        public void onClick(View view){
            Drawable imageNext = getResources().getDrawable((int)picNextItem);      
            m_vwImage.setImageDrawable(imageNext);

            if(++picPosition>21) picPosition = 0;
            picNextItem = (ImageAdapter.getNextItemId(picPosition));
            picPrevItem = (ImageAdapter.getPrevItemId(picPosition));
        }
    }); 
}

}

HelloGridView Manifest:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.hellogridview"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk android:minSdkVersion="8" />

<application
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name" >
    <activity
        android:name=".HelloGridViewActivity"
        android:label="@string/app_name" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <activity
        android:name=".PictureViewer"
        android:label="@string/app_name" >
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />

            <category android:name="android.intent.category.DEFAULT" />
        </intent-filter>
    </activity>
</application>

</manifest>