Using Picasso Images not showing in Recycler view - android-recyclerview

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;
}
}
}

Answer 1

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.