How to display the data in grid view from json api

Question

I am working on a project in that I want to display the data in grid view from the JSON API. Please help me; I am new to this. My JSON consists of an image URL and I also want that image to be displayed in the grid view. Below is my JSON API.

{
    "status": 200,
    "msg": "success",
    "data": [
        {
            "category_name": "ELECTRONICS",
            "category_description": "ELECTRONICS Items",
            "category_image": "images/uploads/a8cee9e723f669813b999ee6bfe611f42018-05-1712-36-17.jpg"
        },
        {
            "category_name": "Sports",
            "category_description": "Sports Accesories",
            "category_image": "images/uploads/76f2c9778df71ae83d04bc0d6178042f2018-05-1712-36-17.jpg"
        },
        {
            "category_name": "Dress",
            "category_description": "All Kind of dress",
            "category_image": "images/uploads/05a5efb96308db381116e90478fce2272018-05-1712-36-17.jpg"
        },
        {
            "category_name": "Cars",
            "category_description": "Automobiles",
            "category_image": ""
        }
    ]
}

Answer 1

all you need to do is make your Models and adapter then use a GridLayoutManager when populating data into RecyclerView

Answer 2

PhotosFragment.java

public class PhotosFragment extends Fragment{

    private Contxt ctx;
    private ViewGroup vg;

    private RecyclerView recyclerPhotos;
    private PhotosGridAdapter photosGridAdapter;

    private ArrayList<PagePhotosModel> allPhotosList = new ArrayList<>();

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        ctx = context;
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        vg = (ViewGroup) inflater.inflate(R.layout.fragment_photos, container, false);
        vg.setClickable(true);
        return vg;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        findViews();

        initRecycler();

        getDataFromSever();
    }

    private void findViews() {
        recyclerPhotos = (RecyclerView) getView().findViewById(R.id.recycler_photos);
    }

    private void initRecycler(ArrayList<PagePhotosModel> allPhotosList) {
            photosGridAdapter = new PhotosGridAdapter(ctx, allPhotosList, PhotosFragment.this);
            RecyclerView.LayoutManager mLayoutManager = new GridLayoutManager(ctx, 2);
            recyclerPhotos.setLayoutManager(mLayoutManager);
            recyclerPhotos.setItemAnimator(new DefaultItemAnimator());
            recyclerPhotos.setAdapter(photosGridAdapter);
    }

    // Implement retrofit Or volley to get json data from server
    private getDataFromSever(){

    //here use the method whatever you want to get data from serverand add data to allPhotosList

    photosGridAdapter.updateDataInList(allPhotosList);

    }
}

fragment_photos.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorGrayBg"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_photos"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="@dimen/_4sdp"
        android:layout_marginTop="@dimen/_4sdp"
        android:stretchMode="columnWidth"
        android:visibility="visible">

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

</LinearLayout>

PhotosGridAdapter.java

public class PhotosGridAdapter extends RecyclerView.Adapter<PhotosGridAdapter.MyViewHolder> {

    private Context ctx;
    private PhotosFragment photosFragment;
    private ArrayList<PagePhotosModel> photosList;

    public class MyViewHolder extends RecyclerView.ViewHolder {
        private final ImageView imgPhoto;

        public MyViewHolder(View view) {
            super(view);
            imgPhoto = (ImageView) view.findViewById(R.id.img_photo);
        }
    }

    public PhotosGridAdapter(Context ctx, ArrayList<PagePhotosModel> photosList, PhotosFragment photosFragment) {
        this.ctx = ctx;
        this.photosList = photosList;
        this.photosFragment = photosFragment;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item_photo_grid, parent, false);

        return new MyViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(final MyViewHolder holder, final int position) {
        final PagePhotosModel photosModel = photosList.get(position);

        Glide.with(ctx)
                .load(UrlImage)
                .asBitmap()
                .centerCrop()
                .placeholder(R.drawable.image_placeholder) // can also be a drawable
                .error(R.drawable.image_placeholder) // will be displayed if the image cannot be loaded
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .override(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL)
                .into(imgUserImage);

    }

    @Override
    public int getItemCount() {
        return photosList.size();
    }

    public void updateDataInList(ArrayList<PagePhotosModel> photosList) {
        this.photosList = photosList;
        notifyDataSetChanged();
    }

}

item_photo_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/img_photo"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/_130sdp"
                    android:background="@color/colorGrayLight"
                    android:src="@drawable/image_placeholder" />


</FrameLayout>

Answer 3

Here is a brief solution to your problem:

• Create a class that will make objects with the following attributes: categoryName,CategoryDescription and category_image.
• You need to be able to parse the JSON and when you do it, make objects of the above class: watch this
• Use a RecyclerView with a GridLayoutManager( here is a helping video, it uses a LinearLayoutManager, so you have to use a GridLayoutManager instead)

GridLayoutManager arranges the items in a two-dimensional grid, like the squares on a checkerboard. Using a RecyclerView with GridLayoutManager provides functionality like the older GridView layout.

Answer 4

Your JSON file could be on a server or in the assets folder and using the recyclerView's GridLayoutManager instead of LinearLayoutManager is good for what you are going to do.