Using Picasso Images not showing in Recycler view

Question

I am trying to show images from a Firebase database in recycler view in android studio but the images are not displaying. I am not sure where I have gone wrong or what the problem is.

Main Activity.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.test.test.AddBrandPage"
        android:weightSum="1">


    <TextView
        android:id="@+id/editText"
        android:layout_width="383dp"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="17dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Select your favourite stores..."
        android:textAlignment="center"
        android:textSize="22sp" />

    <LinearLayout
        android:id="@+id/alphaindex"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal"></LinearLayout>


    <android.support.v7.widget.RecyclerView
        android:id="@+id/recylView"
        android:layout_width="337dp"
        android:layout_height="370dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/editText2"
        android:layout_marginLeft="14dp"
        android:layout_marginRight="14dp"
        android:layout_marginStart="14dp"
        android:layout_marginTop="24dp"
        android:layout_weight="0.23"
        android:scrollbars="vertical">              
        </android.support.v7.widget.RecyclerView>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.11"
        android:layout_marginTop="20dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_skip"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:background="@color/colorPrimary"
            android:text="Skip"
            android:textAllCaps="true"
            android:textColor="@android:color/background_light"
            android:textSize="20sp"
            android:textStyle="normal|bold" />

        <Button
            android:id="@+id/btn_submit"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="20dp"
            android:background="@color/colorPrimary"
            android:text="Submit"
            android:textAllCaps="true"
            android:textColor="@android:color/background_light"
            android:textSize="20sp"
            android:textStyle="normal|bold" />

      </LinearLayout>

    </LinearLayout>

Logo_items.xml

      <?xml version="1.0" encoding="utf-8"?>
      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:cardView="http://schemas.android.com/apk/res-auto"
          android:id="@+id/logo_container"
          android:layout_width="match_parent"
          android:layout_height="100dp"
          android:background="@android:color/darker_gray"
          android:gravity="center_vertical|center_horizontal"
          android:orientation="vertical"
          android:paddingBottom="10dp"
          android:paddingLeft="10dp"
          android:paddingRight="10dp"
          android:paddingTop="10dp"
          android:visibility="visible"
          cardView:layout_collapseParallaxMultiplier="1.0">

    <android.support.v7.widget.CardView
        android:layout_width="155dp"
        android:layout_height="100dp"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        cardView:cardBackgroundColor="@android:color/white">


        <GridLayout
            android:id="@+id/cardView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal|center_vertical"
            android:orientation="vertical">


            <ImageView
                android:id="@+id/img_logo"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_column="1"
                android:layout_gravity="center_horizontal|center_vertical"
                android:layout_row="0"
                android:paddingBottom="5dp"
                android:paddingLeft="2.5dp"
                android:paddingRight="2.5dp"
                android:paddingTop="5dp">

            </ImageView>

        </GridLayout>

        <CheckBox
            android:id="@+id/checkbox"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginLeft="130dp"
            android:layout_marginTop="66dp"
             />

    </android.support.v7.widget.CardView>

    </LinearLayout>

LogoItems.java

    public class LogoItems {

        //declare variables(the items displayed in the layout)
        private String logo;//, name;

        public String getLogo() {
            return logo;
        }

        public void setLogo(String logo) {
            this.logo = logo;
        }

     }

Main Activity.java

package com.test.test;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class AddBrandPage extends AppCompatActivity implements OnClickListener {

    //declare variables
    private RecyclerView recyclerView;
    private RecyclerView.LayoutManager layoutManager;
    private RecyclerView.Adapter adapter;
    private DatabaseReference myRef;
    private Button btn_skip;
    private Button btn_submit;
    //private String name;
    //private String url;

    List<LogoItems> brandLogo = new ArrayList<>();
    //HashMap<String, String> dataSet = new HashMap<>();



    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_add_brand_page);

        //initialize variables
        btn_skip = (Button) findViewById(R.id.btn_skip);
        btn_submit = (Button) findViewById(R.id.btn_submit);
        myRef = FirebaseDatabase.getInstance().getReference().child("/brands");

        // set the main recyclerview view in the layout
        recyclerView = (RecyclerView) findViewById(R.id.recylView);
        recyclerView.setHasFixedSize(true);

        // set the main layoutManager of the recyclerview
        layoutManager = new GridLayoutManager(this, 2);
        recyclerView.setLayoutManager(layoutManager);


        loadLogoImgData();


        // set the recycler view adapter
        adapter =  new LogoAdapter(brandLogo, getBaseContext());
        recyclerView.setAdapter(adapter);

        //set the listener for the buttons click event
        btn_skip.setOnClickListener(this);
        btn_submit.setOnClickListener(this);


    }

    @Override
    public void onClick(View view) {

        if (view == btn_skip) {
            //if skip button clicked close current window and go to user main page
            finish();
            startActivity(new Intent(getApplicationContext(), UserMainPage.class));

        }

    }



    public void loadLogoImgData(){

        brandLogo.clear();
        myRef.addValueEventListener(new ValueEventListener() {

            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {

                for (DataSnapshot brandSnapshot : dataSnapshot.getChildren()){
                    LogoItems value = brandSnapshot.getValue(LogoItems.class);
                    LogoItems brandDetails = new LogoItems();
                   // String name = value.getName();
                    String logos = value.getLogo();
                    //brandDetails.setName(name);
                    brandDetails.setLogo(logos);
                    brandLogo.add(brandDetails);

            }
        }


            @Override
            public void onCancelled(DatabaseError databaseError) {

            }
        });

      }
    }

LogoItemsAdapter.java

package com.test.test;
import android.content.Context;
import android.net.Uri;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.CheckBox;
import android.widget.ImageView;
import android.widget.Toast;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;
import java.util.List;


public class LogoAdapter extends RecyclerView.Adapter<LogoAdapter.LogoViewHolder> {

    List<LogoItems> brandLogo = new ArrayList<>();
   // private AddBrandPage addBrandPage;
    private Context context;

    public LogoAdapter(List <LogoItems> brandLogo, Context context){
        this.brandLogo = brandLogo;
        this.context = context;
        //addBrandPage = (AddBrandPage)context;
    }


    @Override
    public LogoAdapter.LogoViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.logo_items,parent,false);
        LogoViewHolder logoViewHolder = new LogoViewHolder(view);
        return logoViewHolder;
    }

    @Override
    public void onBindViewHolder(LogoAdapter.LogoViewHolder holder, int position) {

        //holder.logo.setImageURI(Uri.parse(brandLogo.get(position).getLogo()));
        Picasso.with(context).load(brandLogo.get(position).getLogo()).into(holder.logo);

    }

    @Override
    public int getItemCount() {

        return brandLogo.size();
    }



    public static class LogoViewHolder extends RecyclerView.ViewHolder{

        //declare variables
        public ImageView logo;
        CheckBox checkbox;
        //private View itemView;


        public LogoViewHolder(View itemView){
            super(itemView);

            //initialize variables inside the constructor
            logo = (ImageView)itemView.findViewById(R.id.img_logo);
            checkbox = (CheckBox)itemView.findViewById(R.id.checkbox);
           // this.itemView = itemView;

        }


    }


}

score 0 · Accepted Answer · answered Jun 05 '17 at 21:20

your code seems a bit vague like here :

myRef.addValueEventListener(new ValueEventListener() { 
@Override 
public void onDataChange(DataSnapshot dataSnapshot) { 
for (DataSnapshot brandSnapshot : dataSnapshot.getChildren()){    
LogoItems value =                
brandSnapshot.getValue(LogoItems.class); 
LogoItems brandDetails = 
 new LogoItems(); 
 // String name = value.getName(); 
 String logos = value.getLogo(); 
  //brandDetails.setName(name);
  brandDetails.setLogo(logos); 
  brandLogo.add(brandDetails); } }

Change this code to :

 myRef.addValueEventListener(new ValueEventListener() { 
 @Override 
 public void onDataChange(DataSnapshot dataSnapshot) { 
 for (DataSnapshot brandSnapshot : dataSnapshot.getChildren()){    
 LogoItems value =                
 brandSnapshot.getValue(LogoItems.class);
 brandLogo.add(value); } 

  startRecyclerView();

  }

Firebase methods are asynchronous, your present code inflates the recylcerview synchronously which means it is loaded before the data has been set and received.

The changed code starts recyclerview asynchronously after the data has been loaded from the database. You can add a progress bar to know the status. You can set it like this (Initialize it before this method and it will be visible by default) :

  mProgressBar.setVisibility(View.INVISIBLE);
  startRecyclerView();

This way the code looks organised.

Thanks Faisal. This resolved this issue. I made the suggested change and it worked perfectly. — No Longer Rooky Coder, Jun 05 '17 at 22:14

Using Picasso Images not showing in Recycler view

1 Answers1