Load data from Firebase Real database into Gridview

Question

I just have some problem when I want to retrieve data from firebase and load it into GridView but the data doesn't appear till I rotate my phone from portrait to landscape Or vice versa:

This when I start the app ( data doesn't appear )

When I rotate my phone to landscape view data start to appear

Finally, when I re-rotate my phone to portrait view, data loaded successfully

I tried some ways to figure out it like (refresh grid view gridview.notifyalldatachanged()) but none of them solve this problem.

my code is very simple : create new custom adapter and set it to gridview

public class ReceipesActivity extends AppCompatActivity {

GridView gridView;
ArrayList<String> RecipeImageUrl=new ArrayList<String>();
ArrayList<String> RecipeTitle=new ArrayList<String>();
DatabaseReference mdata;
MyCustomAdapter myCustomAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_receipes);
    gridView = (GridView) findViewById(R.id.GridviewID);
    mdata = FirebaseDatabase.getInstance().getReference("Categories").child("انواع الخبز");
    LoadDataFromFirebase();
    myCustomAdapter = new MyCustomAdapter(RecipeImageUrl,RecipeTitle);
    gridView.setAdapter(myCustomAdapter);
}

@Override
protected void onStart() {
    super.onStart();
}

//My Custom Adapter for GridView

public class MyCustomAdapter extends BaseAdapter {

    ArrayList<String> RecipeImageUrl;
    ArrayList<String> RecipeTitle;

    MyCustomAdapter(ArrayList<String> RecipeImageUrl,ArrayList<String> RecipeTitle) {
        Toast.makeText(ReceipesActivity.this, "hey to start", Toast.LENGTH_SHORT).show();
        this.RecipeImageUrl = RecipeImageUrl;
        this.RecipeTitle = RecipeTitle;
    }

    @Override
    public int getCount() {
        return this.RecipeImageUrl.size();
    }

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

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater layoutInflater = getLayoutInflater();
        View view = layoutInflater.inflate(R.layout.grid_view_custom, null);
        ImageView imageView = (ImageView) view.findViewById(R.id.GridRecipeImageID);
        TextView textView = (TextView) view.findViewById(R.id.GridRecipeTitleID);
        Toast.makeText(ReceipesActivity.this, "sdfgsfg" + RecipeTitle.get(position), Toast.LENGTH_SHORT).show();
        textView.setText(RecipeTitle.get(position));            Picasso.with(getApplicationContext()).load(RecipeImageUrl.get(position)).into(imageView);
        return view;
    }

}

public void LoadDataFromFirebase() {
    mdata.addValueEventListener(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {
            for (DataSnapshot ds : dataSnapshot.getChildren()) {
                RecipeTitle.add(ds.child("title").getValue().toString());
                RecipeImageUrl.add(ds.child("image").getValue().toString());
            }
        }
        @Override
        public void onCancelled(DatabaseError databaseError) {
        }
      });
    }
}

Answer 1

Did you try to add myCustomAdapter.notifyDataSetChanged() after populating RecipeTitle and RecipeImageUrl list?

Here is an example:

public void LoadDataFromFirebase() {
    mdata.addValueEventListener(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {
            for (DataSnapshot ds : dataSnapshot.getChildren()) {
                RecipeTitle.add(ds.child("title").getValue().toString());
                RecipeImageUrl.add(ds.child("image").getValue().toString());
            }
            myCustomAdapter.notifyDataSetChanged();  // THIS WILL NOTIFY YOUR ADAPTER WHEN DATA IS CHANGED
        }
        @Override
        public void onCancelled(DatabaseError databaseError) {
        }
    });
}