Image is not displayed

[Alex Munozz]

Hi,

I want to display an image in an ImageView. I have several records in the database with a title, a description, the latitude, the longitude and an image of the place. I watch the title and the description, but not the image. The rest is not necessary to display it.
The image is not in the database, is caught in the gallery and its uri is stored as a String.

Data are displayed using a ListView.

Here is the code:

Layouts:

For every item of the ListView:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >
 
    <ImageView
        android:id="@+id/flugar"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@android:drawable/ic_dialog_info" />
 
    <TextView
        android:id="@+id/titl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/flugar"
        android:text="TextView" />
 
    <TextView
        android:id="@+id/desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/flugar"
        android:layout_toRightOf="@+id/flugar"
        android:text="TextView" />
 
</RelativeLayout>

For the ListView:

<?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" >
 
    <ListView
        android:id="@+id/lista"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
     />
    
</LinearLayout>

The adapter:

import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.net.Uri;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class LugarAdapter extends BaseAdapter
{
	Context contexto;
	private List<Lugar> dlugares;
	Lugar lgu = new Lugar("","",0.0,0.0,"");
	
	public LugarAdapter(Context contex, List<Lugar> litems) 
	{
        this.contexto = contex;
        this.dlugares = litems;
    }
	
	private class ViewHolder 
	{
        ImageView fotoView; 
        TextView txtTitulo; 
        TextView txtDesc; 
    }
	
	public View getView(int posicion, View convertView, ViewGroup parent) 
	{
        ViewHolder holder = null;
        int imgAncho = 75;
        int imgAltura = 75;
        String rutaimg = null;
         
        LayoutInflater mInflater = (LayoutInflater)
            contexto.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        if (convertView == null) 
        {
            convertView = mInflater.inflate(R.layout.lista_item, null);
            holder = new ViewHolder();
            holder.txtDesc = (TextView) convertView.findViewById(R.id.desc);
            holder.txtTitulo = (TextView) convertView.findViewById(R.id.titl);
            holder.fotoView = (ImageView) convertView.findViewById(R.id.flugar);
            convertView.setTag(holder);
        }
        else 
        {
            holder = (ViewHolder) convertView.getTag();
        }
 
        Lugar lugItem = (Lugar) getItem(posicion);
 
        holder.txtDesc.setText(lugItem.getDescripcion());
        holder.txtTitulo.setText(lugItem.getNombre());
        rutaimg = lgu.getfotolugar();
        Bitmap bitmap = lgu.obtenerImagendelaRuta(rutaimg, imgAncho, imgAltura);
        holder.fotoView.setImageBitmap(bitmap);
       
        Uri urimg = Uri.parse(rutaimg);
        holder.fotoView.setImageURI(urimg);
        //holder.fotoView.setImageBitmap(bm);
        //holder.fotoView.setImageResource(lugItem.getfotolugar());
 
        return convertView;
    }

	@Override
    public int getCount() {
        return dlugares.size();
    }
 
    @Override
    public Object getItem(int position) {
        return dlugares.get(position);
    }
 
    @Override
    public long getItemId(int poscion) {
        return dlugares.indexOf(getItem(poscion));
    }
}

To save items in the ListView first I retrieve data from a cursor and I insert them in an ArrayList of type of a class named Lugar.

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;

public class Lugar {

	private String nomlugar;
	private String descriplugar;
	private double lnglugar;
	private double latlugar;
	private String fotolugar;
	private int imagen;
	
	public Lugar(String nlugar, String dlugar, double lglugar, double ltlugar, String flugar)
	{
		this.nomlugar = nlugar;
		this.descriplugar = dlugar;
		this.lnglugar = lglugar;
		this.latlugar = ltlugar;
		this.fotolugar = flugar;
	 }
	
        public String getNombre()
       {
	   return nomlugar;
       }

       public void setNombre(String nmlugar) 
       {
	    this.nomlugar = nmlugar;
	}

        public String getDescripcion()
        {
	     return descriplugar;
        }
	
        public void setDescripcion(String dsclugar) 
        {
	     this.descriplugar = dsclugar;
        }
	
        public double getlongitud()
        {
	    return lnglugar;
	 }

       public void setLongitud(double loglugar) 
       {
	    this.lnglugar= loglugar;
       }
	
      public double getlatitud()
      {
         return latlugar;
      }
	
     public void setLatitud(double ltlugar) 
     {
          this.latlugar = ltlugar;
     }
	
      public String getfotolugar()
      {
          return fotolugar;
      }

       public void setFoto(String ftlugar) 
       {
           this.fotolugar = ftlugar;
	}

	public int getImagen()
       {
		return imagen;
 	}
	
	public void setImagen(int pimg)
	{
		this.imagen = pimg;
	 }

	public Bitmap obtenerImagendelaRuta(String filePath,int reqWidth, int reqHeight) 
	{
		    
		BitmapFactory.Options options = new  BitmapFactory.Options();
		options.inJustDecodeBounds = true; 
		BitmapFactory.decodeFile(filePath, options);
		options.inSampleSize = calcularTamanoImagen(options, reqWidth, reqHeight);
		options.inJustDecodeBounds = false;
		
		return BitmapFactory.decodeFile(filePath, options);
	}
		
	private int calcularTamanoImagen(BitmapFactory.Options options, int reqWidth, int reqHeight) 
	{
		    
	    // Raw height and width of image
	    final int height = options.outHeight;
	    final int width = options.outWidth;
	    int tamanoImagen = 1;

	    if (height > reqHeight || width > reqWidth) 
	     {

	        // Calculate ratios of height and width to requested height and width
	        final int heightRatio = Math.round((float) height / (float) reqHeight);
	        final int widthRatio = Math.round((float) width / (float) reqWidth);

	        // Choose the smallest ratio as inSampleSize value, this will guarantee
	        // a final image with both dimensions larger than or equal to the
	        // requested height and width.
	        tamanoImagen = heightRatio < widthRatio ? heightRatio : widthRatio;
	     }

		    return tamanoImagen;
	}
}

import java.util.ArrayList;

import android.net.Uri;
import android.os.Bundle;
import android.app.Activity;
import android.database.Cursor;
import android.database.DatabaseUtils;
import android.view.Menu;
import android.widget.ListView;
import android.widget.Toast;

public class Mostrarlugares extends Activity {

	Uri urititl = MCProvider.CP_URI;
	String[] cols = {"nombre","descripcion","latitud","longitud","foto"};
	private ArrayList<Lugar> lugrs;
		
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_mostrarlugares);
		
		lugrs = new ArrayList<Lugar>();
		Cursor crr = null;
		
		crr = insertlugares();
		
		llenarlugares(crr);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.mostrarlugares, menu);
		return true;
	}

	
	public Cursor insertlugares()
	{
		Cursor cr = null;
				
		cr = getContentResolver().query(urititl, cols, null, null, null);
		
		return cr;
	}

	
	public void llenarlugares(Cursor cl)
	{
		ListView lview;
		
		
		if(cl != null) 
		 {
			if(cl.getCount() != 0) 
			{
				cl.moveToFirst();
				while(cl.isAfterLast() == false)
				{	
					Lugar l = new Lugar("","",0.0,0.0,"");
					
					l.setNombre(cl.getString(cl.getColumnIndex("nombre")));
					l.setDescripcion(cl.getString(cl.getColumnIndex("descripcion")));
					l.setLongitud(cl.getDouble((cl.getColumnIndex("longitud"))));
					l.setLatitud(cl.getDouble(cl.getColumnIndex("latitud")));
					l.setFoto(cl.getString(cl.getColumnIndex("foto")));
					lugrs.add(l);
					cl.moveToNext();
				}	
			 }
		 }
		
		lview = (ListView) findViewById(R.id.lista);
		LugarAdapter lugadaptador = new LugarAdapter(this,lugrs);
		lview.setAdapter(lugadaptador);
		
		String cursorDump = DatabaseUtils.dumpCursorToString(cl);
		Toast.makeText(Mostrarlugares.this, "" + cursorDump, Toast.LENGTH_LONG).show();
		
		cl.close();
	 }
}

When I run the project I don't watch any error in the logcat. The only problem I have is that the photo is not displayed.

How can I display the image?


Thanks.

[Steve Luke]

In your Adapter, starting at line 57, you get an item and call it lugItem, and all the properties that work seem to reference that variable. But the image URI you retrieve in line 61 comes from the class member lgu. It looks like lgu is a dummy instance that holds no data, and I don't see it change anywhere. So I think the problem is you are getting the URI from the wrong instance of Lugar, and line 61 should change to rutaimg = lugItem.getfotolugar();. Is there a reason the class member lgu exists?

[Alex Munozz]

If I declared lgu is because I wanted to access to functions that are in the Lugar class. But in this situation it's not necessary.
I changed lgu for lugitem but I can't watch the photo.
I checked the value of rutaimg and it's different in every record of the database. Well, this is not exact. I have three records in the database: two without image and one with image. When I wanted to check the value of rutaimg that is the path of the image, the records of the database that hasn't image had the value: com.app/mapa/2130837504 and the other without image has not value and I don't know why.

[Steve Luke]

So I am not sure I understand the state of things now. If the values returned from the database are wrong, you have to clean up the database and check the code which puts data in the db to see if it does it correctly. If the value in the database looks right, but no image shows up, then you have to check to see if that file exists and if it is an actual image.

[Alex Munozz]

Yes. But I know all the values in the database are right, the problem is that I don't know how to retrieve the image. The idea is to insert the title, the description and the image in the database. But the image is not stored in the database because it's very heavy for the memory, so I save the path of the image. The image is obtained from the gallery only, not from camera.

[Steve Luke]

So the values you get from the the database for the image URI are correct or not? You said:

When I wanted to check the value of rutaimg that is the path of the image, the records of the database that hasn't image had the value: com.app/mapa/2130837504 and the other without image has not value and I don't know why

What does that mean? The way I read it is:
For one entry in the database that does not have an image, the value assigned to rutaimg was com.app/mapa/2130837504.
For the second entry in the database that does not have an image, there was no value assigned to rutaimg. (null?)

This sounds like the values you are getting from the database are incorrect - one of them has a value, the other one doesn't, and you expect neither of them to have a value. If the value in rutaimg is not correct then how can you say you know the value in the database is correct? Have you used some other tool to inspect it directly?

Or maybe I mis-read what you wrote.

[Alex Munozz]

The only value that is not displayed correctly is the image and I know it because I don't watch anything.
When I insert one record in the database and I want to list the whole, I can watch all data except the image. Which value has rutaimg? Blank. So I know that the path for the image is not correct.

I think where is the error but I don't know how to fix it. It's in the value of the image's path when I insert a record in the database.

When I insert the image in an ImageView I want to obtain the path of this image and I do it as following:

Uri ufoto = Uri.parse("android.resource://" + getPackageName() + "/" + R.drawable.camara1);
sfoto = ufoto.toString();

Here is the xml file:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Scroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
	<RelativeLayout 
	    android:id="@+id/contenedor"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content" >
	
	    <LinearLayout 
	        android:id="@+id/cabecera"
	        android:layout_width="match_parent"
	        android:layout_height="wrap_content"
	        android:gravity="center"
			android:orientation="vertical"
			android:background="#CCCCFF"
			>
	        
	        <ImageView 
		        android:id="@+id/icon"
		        android:src="@drawable/guliver"
		        android:layout_width="wrap_content"
		        android:layout_height="wrap_content"
		        />
	        
	    </LinearLayout>
	    
	       	<EditText android:id="@+id/edit_titulo_lugar"
		    	android:layout_width="wrap_content"
		    	android:layout_height="wrap_content"
		   		android:layout_marginTop="100dp"
		  		android:layout_marginLeft="50dp"
		   		android:width="200dp" 
		   		android:hint="@string/titulo_lugar"
		   		android:inputType="text"
		    	/>
	         
	    	<EditText android:id="@+id/edit_descripcion_lugar"
		    	android:layout_width="wrap_content"
		    	android:layout_height="wrap_content"
		   		android:layout_marginTop="170dp"
		   		android:layout_marginLeft="50dp"
		   		android:width="200dp" 
		   		android:hint="@string/descripcion_lugar"
		   		android:inputType="text"
		   		/>
	    
	    	<ImageView
	            android:id="@+id/imgFoto"
	            android:layout_width="200dp"
		        android:layout_height="200dp"
		        android:layout_marginTop="260dp"
	            android:layout_marginLeft="40dp"
		        android:layout_gravity="center"
		        android:scaleType="fitXY"
		        android:adjustViewBounds="true"
	            android:background="#000000"
				android:src="@drawable/camara1"
	        	/>
	                
	        	<Button android:id="@+id/guardar"
			    	android:layout_width="wrap_content"
			    	android:layout_height="wrap_content"
			    	android:layout_below="@+id/textedit"
			    	android:text="@string/bguardar"
			    	android:layout_marginTop="500dp"
			    	android:layout_marginLeft="100dp"
			   		/>
		   
		   	    
	</RelativeLayout>
</ScrollView>

The ImageView where I insert the image is the second one, that has imgFoto id.
I insert the image selecting it from the gallery and what I want to do is to save the image's path in a String and when I list all records of the database I become the String path into Uri.

When I retrieve all the records in the database I can watch that all image values are the same.

How can I save the path of a selected image correctly?

Thanks.

[Steve Luke]

The image you 'saving' @drawable/camera1. This is not an image that is in the gallery, it is an image in the application's drawable folder(s). Also, you use the ID in R.drawable, which is an integer constant used to represent a drawable resource in code - it is not the address of the image and it is not safe to use for storing or retrieving images (you run the risk of overwriting an image that already had been saved, and if you change versions you may have a different ID so would not be able to find the image.)

So what image are you actually trying to load/store? Where does it exist? How do you load it initially?

[Alex Munozz]

The image I want to store is one selected by the user from the gallery. The user click on the ImageView and then he can choose insert an image from the gallery or from the camera. He must select from the gallery because it's the only option I have coded now. When the user has selected the image it is showed in an ImageView.

The user click on the save button and the title, the description and the image are saved in the database. But the image is not stored in the database, it's its path in a String format. But I don't know if it's possible to do something like this. I think so. The problem is that every time the user select an image it's a different one and I don't know how to store the path in the database.

[Steve Luke]

Alex Munozz wrote:The image I want to store is one selected by the user from the gallery. The user click on the ImageView and then he can choose insert an image from the gallery or from the camera. He must select from the gallery because it's the only option I have coded now. When the user has selected the image it is showed in an ImageView.

Okay, so at some point the user selects an image and you get the URI back as a result, and you use that URI to load the image into the ImageView, correct? Then what you need to do is store the URI that you get as a response to the user action and put that in the database. You will not be able to re-create that URI so you need to store it in a variable and when needed, put it in the database.

Pseudo code:

String imageUriString;
displayImage()
{
    URI imageURI = haveUserSelectImageToDisplay();
    boolean isValidImage = validateImageURIExists(imageURI);
    if (isValidImage)
    {
        imageUriString = imageURI.toString();
        loadImageIntoDisplay(imageURI);
    }
}

saveImage()
{
    String imageUriToSave = imageUriString;
    URI imageURI = new URI(imageUriToSave);
    boolean isValidImage = validateImageURIExists(imageURI);
    if (isValidImage)
    {
        putStringInDatabase(imageUriToSave);
    }
}

[Alex Munozz]

Ok. But how can I save the Uri of the image selected?

[Steve Luke]

Sorry, you were too quick to respond I edited my post with pseudocode to demonstrate.

To answer the question: you put it in a variable someplace - or if you are really safe, you have a database table that you immediately store the URI to as soon as the user selects it. Then when the user Saves you simply copy from one location in the DB to another.