How to Show GridView Image In Android Fragments Using Json (categories and subcategories)

Question

Those are categories and subcategories. There can be subcategory or not. JsonCode to be used is as below.

categoryId is what will change to call subcategories. E.g. If you want to see subcategories of cars

Json Code

[{"Id":1,"TitleEN":"Cars","TitleAR":"سيارات","Photo":"http://souq.hardtask.co//Files/CategoryPhotos/ce686544-9f51-4213-b5db-7c015b788e8d.png","ProductCount":"3","HaveModel":"0","SubCategories":[{"Id":6,"TitleEN":"Cat6","TitleAR":"قسم6","Photo":"http://souq.hardtask.co//Files/CategoryPhotos/ce686544-9f51-4213-b5db-7c015b788e8d.png","ProductCount":"3","HaveModel":"0","SubCategories":[]}]},{"Id":2,"TitleEN":"Cat2","TitleAR":"قسم2","Photo":"http://souq.hardtask.co//Images/no_image.png","ProductCount":"8","HaveModel":"0","SubCategories":[{"Id":13,"TitleEN":"cat1 -1 ","TitleAR":"cat1 - 1","Photo":"http://souq.hardtask.co//Images/no_image.png","ProductCount":"8","HaveModel":"0","SubCategories":[]}]},{"Id":3,"TitleEN":"Cat3","TitleAR":"قسم3","Photo":"http://souq.hardtask.co//Images/no_image.png","ProductCount":"2","HaveModel":"0","SubCategories":[]},{"Id":4,"TitleEN":"Cat4","TitleAR":"قسم4","Photo":"http://souq.hardtask.co//Images/no_image.png","ProductCount":"1","HaveModel":"0","SubCategories":[]},{"Id":5,"TitleEN":"Cat5","TitleAR":"قسم5","Photo":"http://souq.hardtask.co//Images/no_image.png","ProductCount":"0","HaveModel":"0","SubCategories":[]},{"Id":8,"TitleEN":"Cat8","TitleAR":"قسم8","Photo":"http://souq.hardtask.co//Images/no_image.png","ProductCount":"0","HaveModel":"0","SubCategories":[]},{"Id":9,"TitleEN":"Slide01","TitleAR":"Slide02","Photo":"http://souq.hardtask.co//Files/CategoryPhotos/2ba07cb2-49a0-47e4-aba6-ef10a916fb12.png","ProductCount":"0","HaveModel":"0","SubCategories":[]}]

ImageAdapter

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    public ImageAdapter(Context c){
        mContext = c;
    }

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

    @Override
    public Object getItem(int position){
        return images.get(position);
    }

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

    public View getView(int position, View convertView, ViewGroup parent){
        ImageView imageview;
        if (convertView == null){
            imageview = new ImageView(mContext);
            imageview.setPadding(0, 0, 0, 0);
            //imageview.setLayoutParams(new GridLayout.MarginLayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
            imageview.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
            imageview.setAdjustViewBounds(true);
        } else {
            imageview = (ImageView) convertView;
        }

        Picasso.with(mContext).load(images.get(position)).placeholder(R.mipmap.ic_launcher).into(imageview);
        return imageview;
    }

    /*
    Custom methods
     */
    public void addItem(String url){
        images.add(url);
    }

    public void clearItems() {
        images.clear();
    }

    public ArrayList<String> images = new ArrayList<String>();
}

Movie Model

public class Movie implements Parcelable {
    public String TitleEN;
    public String TitleAR;
    public String Photo;
    public int id;

    public Movie(){

    }

    protected Movie(Parcel in) {
        TitleEN = in.readString();
        TitleAR = in.readString();
        Photo = in.readString();
        id = in.readInt();
    }

    @Override
    public int describeContents() {
        return 0;
    }

    @Override
    public void writeToParcel(Parcel dest, int flags) {
        dest.writeString(TitleEN);
        dest.writeString(TitleAR);
        dest.writeString(Photo);
        dest.writeInt(id);
    }

    @SuppressWarnings("unused")
    public static final Parcelable.Creator<Movie> CREATOR = new Parcelable.Creator<Movie>() {
        @Override
        public Movie createFromParcel(Parcel in) {
            return new Movie(in);
        }

        @Override
        public Movie[] newArray(int size) {
            return new Movie[size];
        }
    };
}

Fragament_main

    public class Fragament_main extends Fragment {


        public View mainFragmentView;
        public String LOG_TAG = "ShowcaseFragment";
        public ArrayList<Movie> movies = new ArrayList<Movie>();
        private RequestQueue mRequestQueue;
        public ImageAdapter imageAdapter;
        public static Fragament_main instance;
        GridView gridview;
        public boolean isDualPane = false;

        // static to preserve sorting over orientation changes (activity restart)
        public static String sortOrder = "popularity.desc", moreParams = "";
        public static boolean setting_cached = false;
        public int gridPos = -1;

        public Fragament_main() {
            // Required empty public constructor

            instance = this;


        }




     @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            mainFragmentView = inflater.inflate(R.layout.fragment_main, container, false);
            mRequestQueue = Volley.newRequestQueue(getContext());

            // setup adapters
            imageAdapter = new ImageAdapter(getContext());
            gridview = (GridView) mainFragmentView.findViewById(R.id.gridView);
            gridview.setAdapter(imageAdapter);

            //updateUI(setting_cached);
            //gridview.setOnItemClickListener(new GridClickListener());
            // manage grid col count wrt Orientation
            if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE)
                setGridColCount(3);
            else
                setGridColCount(2);

            return mainFragmentView;
        }

        @Override
        public void onActivityCreated(Bundle savedInstanceState) {
            super.onActivityCreated(savedInstanceState);

        }

        @Override
        public void onSaveInstanceState(Bundle outState) {
            super.onSaveInstanceState(outState);
            outState.putInt("GRIDVIEW_POSITION", gridview.getFirstVisiblePosition());
        }

        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            if (savedInstanceState != null)
                gridPos = savedInstanceState.getInt("GRIDVIEW_POSITION");
        }

        @Override
        public void onDestroyView() {
            super.onDestroyView();
            mRequestQueue.cancelAll(new RequestQueue.RequestFilter() {
                @Override
                public boolean apply(Request<?> request) {
                    return true;
                }
            });
        }

        /*class GridClickListener implements AdapterView.OnItemClickListener {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
                if (isDualPane){
                    android.support.v4.app.FragmentTransaction ft = getActivity().getSupportFragmentManager().beginTransaction();
                    DetailActivityFragment detailActivityFragment = DetailActivityFragment.newInstance(movies.get(position));
                    ft.replace(R.id.detailContainer, detailActivityFragment);
                    ft.commit();
                } else {
                    Intent intent = new Intent(getContext(), DetailActivity.class);
                    intent.putExtra(Intent.EXTRA_TEXT, (Parcelable) movies.get(position));
                    startActivity(intent);
                }
            }
        }*/

      /*  public void updateUI(boolean cached){
            movies.clear();
            imageAdapter.clearItems();
            setting_cached = cached;
            if (!cached)
                getMovies(sortOrder, moreParams);
            else
                getFavorites();
        }
    */
        public void getMovies(String sortOrder, String moreParams){
            String url = "http://souq.hardtask.co/app/app.asmx/GetCategories?categoryId=0&countryId=1";
            JsonObjectRequest req = new JsonObjectRequest(url, null,
                    new Response.Listener<JSONObject>() {
                        @Override
                        public void onResponse(JSONObject response) {
                            try {
                                JSONArray items = response.getJSONArray("results");
                                JSONObject movieObj;
                                for (int i=0; i<items.length(); i++){
                                    movieObj = items.getJSONObject(i);
                                    Movie movie = new Movie();
                                    movie.id = movieObj.getInt("id");
                                    movie.TitleEN = movieObj.getString("original_title");
                                    movie.TitleAR = movieObj.getString("overview");
                                    movie.Photo = "http://souq.hardtask.co/app/app.asmx/GetCategories?categoryId=0&countryId=1" + movieObj.getString("poster_path");
                                    movies.add(movie);
                                    // Add image to adapter
                                    imageAdapter.addItem(movie.Photo);
                                }
                            } catch (JSONException e){
                                e.printStackTrace();
                            }
                            getActivity().runOnUiThread(new Runnable() {
                                @Override
                                public void run() {
                                    gridview.setAdapter(imageAdapter);
                                    if (gridPos > -1)
                                        gridview.setSelection(gridPos);
                                    gridPos = -1;
                                }
                            });
                        }
                    }, new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
                    Log.d(LOG_TAG, "Error in JSON Parsing");
                }
            });

            mRequestQueue.add(req);
        }

       /* public void getFavorites(){
            movies.addAll((new MoviesDB()).getFavoriteMovies(getContext().getContentResolver()));
            for (Movie movie : movies){
                imageAdapter.addItem(movie.Photo);
            }
            gridview.setAdapter(imageAdapter);
            if (gridPos > -1)
                gridview.setSelection(gridPos);
            gridPos = -1;
        }*/

        public void updateFavoritesGrid(){
            if (setting_cached) {
                int p = gridview.getLastVisiblePosition();
                ///updateUI(true);
                gridview.smoothScrollToPosition(p);
            }
        }

        public void setGridColCount(int n){
            ((GridView) mainFragmentView.findViewById(R.id.gridView)).setNumColumns(n);
        }


    }

I don't know how to add Json data into GridView. Could you help me?

Answer 1

Go through this example to view images in grid, Convert your jsonArray into an ArrayList by using,

ArrayList<Cars> carsList = new Gson().fromJson(jsonArrayYouHave.toString(),new TypeToken<List<Cars>>() {
        }.getType());

Pass this Array to your Adapter.

Use this POJO,

    public class Cars {
    private String TitleAR;

    private String HaveModel;

    private String TitleEN;

    private String Id;

    private ArrayList<SubCategories> SubCategories;

    private String Photo;

    private String ProductCount;

    //Todo please add getter/setters for class Cars variables here

    public class SubCategories {
        private String TitleAR;

        private String HaveModel;

        private String TitleEN;

        private String Id;

        private ArrayList<String> SubCategories;

        private String Photo;

        private String ProductCount;

        //Todo please add getter/setters for class SubCategories variables here
    }

I'll suggest to use Retrofit as it'll provide you parsed arraylist which is converted into Response POJO you have provided. You can find many examples for Retrofit.

Answer 2

Step 1 Add the following dependencies in your app level gradle file.Dependencies are for retrofit, gsonConvertor butterknife and glide.

implementation 'com.squareup.retrofit2:retrofit:2.1.0'
implementation 'com.google.code.gson:gson:2.6.2'
implementation 'com.squareup.retrofit2:converter-gson:2.1.0'
implementation('com.squareup.retrofit2:retrofit:2.1.0') {
    // exclude Retrofit’s OkHttp dependency module and define your own module import
    exclude module: 'okhttp'
}
implementation 'com.google.code.gson:gson:2.6.2'
implementation 'com.squareup.retrofit2:converter-gson:2.1.0'
implementation 'com.squareup.okhttp3:logging-interceptor:3.4.1'
implementation 'com.squareup.okhttp3:okhttp:3.4.1'
implementation 'com.android.support:design:28.0.0'
implementation 'com.android.support:recyclerview-v7:28.0.0'

implementation "com.jakewharton:butterknife:$BUTTER_KNIFE_VERSION"
annotationProcessor "com.jakewharton:butterknife-compiler:$BUTTER_KNIFE_VERSION"
implementation 'com.github.bumptech.glide:glide:4.8.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'

Step 2 Create a class by name ApiClient and paste the following code in this class

public class ApiClient {
private static Retrofit retrofit = null;

public static Retrofit getRetrofit() {
    HttpLoggingInterceptor interceptor = new HttpLoggingInterceptor();
    interceptor.setLevel(HttpLoggingInterceptor.Level.BODY);
    OkHttpClient client = new OkHttpClient.Builder().addInterceptor(interceptor).build();


    retrofit = new Retrofit.Builder()
            .baseUrl("http://souq.hardtask.co")
            .addConverterFactory(GsonConverterFactory.create())
            .client(client)
            .build();



    return retrofit;
}
}

Step 3 Create a new Interface class by name APIInterface and paste the following code in this class

 @GET("/app/app.asmx/GetCategories")
Call<List<Product>> getProducts(@QueryMap Map<String, String> params);

Step 4 Create POJO classes according to json response. We have two classes Products and their subcategory.So I am creating first class by name Product

public class Product {

@SerializedName("Id")
@Expose
private Integer id;
@SerializedName("TitleEN")
@Expose
private String titleEN;
@SerializedName("TitleAR")
@Expose
private String titleAR;
@SerializedName("Photo")
@Expose
private String photo;
@SerializedName("ProductCount")
@Expose
private String productCount;
@SerializedName("HaveModel")
@Expose
private String haveModel;
@SerializedName("SubCategories")
@Expose
private List<SubCategory> subCategories = null;

public Integer getId() {
    return id;
}

public void setId(Integer id) {
    this.id = id;
}

public String getTitleEN() {
    return titleEN;
}

public void setTitleEN(String titleEN) {
    this.titleEN = titleEN;
}

public String getTitleAR() {
    return titleAR;
}

public void setTitleAR(String titleAR) {
    this.titleAR = titleAR;
}

public String getPhoto() {
    return photo;
}

public void setPhoto(String photo) {
    this.photo = photo;
}

public String getProductCount() {
    return productCount;
}

public void setProductCount(String productCount) {
    this.productCount = productCount;
}

public String getHaveModel() {
    return haveModel;
}

public void setHaveModel(String haveModel) {
    this.haveModel = haveModel;
}

public List<SubCategory> getSubCategories() {
    return subCategories;
}

public void setSubCategories(List<SubCategory> subCategories) {
    this.subCategories = subCategories;
}

}

And SubCategory

public class SubCategory {

@SerializedName("Id")
@Expose
private Integer id;
@SerializedName("TitleEN")
@Expose
private String titleEN;
@SerializedName("TitleAR")
@Expose
private String titleAR;
@SerializedName("Photo")
@Expose
private String photo;
@SerializedName("ProductCount")
@Expose
private String productCount;
@SerializedName("HaveModel")
@Expose
private String haveModel;
@SerializedName("SubCategories")
@Expose
private List<Object> subCategories = null;

public Integer getId() {
    return id;
}

public void setId(Integer id) {
    this.id = id;
}

public String getTitleEN() {
    return titleEN;
}

public void setTitleEN(String titleEN) {
    this.titleEN = titleEN;
}

public String getTitleAR() {
    return titleAR;
}

public void setTitleAR(String titleAR) {
    this.titleAR = titleAR;
}

public String getPhoto() {
    return photo;
}

public void setPhoto(String photo) {
    this.photo = photo;
}

public String getProductCount() {
    return productCount;
}

public void setProductCount(String productCount) {
    this.productCount = productCount;
}

public String getHaveModel() {
    return haveModel;
}

public void setHaveModel(String haveModel) {
    this.haveModel = haveModel;
}

public List<Object> getSubCategories() {
    return subCategories;
}

public void setSubCategories(List<Object> subCategories) {
    this.subCategories = subCategories;
}

}

Step 5 now we need a view for recyclerview holder(in your case gridview layout). For that we need to create a new layout file inside layout folder. you can name it li_product_view

<?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="wrap_content">

<RelativeLayout
    android:layout_width="200dp"
    android:layout_height="200dp">

    <ImageView
        android:id="@+id/ImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/ImageView"
        android:layout_alignTop="@id/ImageView"
        android:layout_alignRight="@id/ImageView"
        android:layout_alignBottom="@id/ImageView"
        android:text="@string/app_name"
        android:gravity="bottom|right" />

</RelativeLayout>

</RelativeLayout>

Step 6 Now we need itemHolder to hold the view for that purpose we will create a new class by name ProductsItemHolderand will have the following code

public class ProductsItemHolder extends RecyclerView.ViewHolder {
@BindView(R.id.ImageView)
ImageView imageView;
@BindView(R.id.tv_title)
TextView textView;
public ProductsItemHolder(@NonNull View itemView) {

    super(itemView);
    ButterKnife.bind(this,itemView);

}
public void bindData(Product datum, int position, int size) {
    Glide.with(itemView)
            .asBitmap()
            .load(datum.getPhoto())
            .into(imageView);

    textView.setText(datum.getTitleAR());

}
}

Step 7 Now we need adapter which contains the data to present inside recyclerview. Create a new class by name ProductsAdapter and paste the following code inside this class

public class ProductsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

private List<Product> mList;
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
    View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.li_product_view, viewGroup, false);
    return new ProductsItemHolder(view);
}

@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int position) {
    int size= mList.size();
    ((ProductsItemHolder) viewHolder).bindData(mList.get(position), position,size);
}

@Override
public int getItemCount() {
    return mList.size();
}
public void setData(List<Product> userLists) {
    this.mList = userLists;
    notifyDataSetChanged();
}
}

Step 8 now inside the activity or fragment we need to get response from json and pass this response to recyclerview.

public class MainActivity extends AppCompatActivity {
APIInterface apiInterfacePages;
RecyclerView recyclerView;

List<MultipleResource.Datum> datumList= new ArrayList<>();
ProgressDialog dialog;
ProductsAdapter productsAdapter;
private List<Product> dataArrayList;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    apiInterfacePages= PageApiClient.getRetrofit().create(APIInterface.class);

    recyclerView= findViewById(R.id.recyclerView);
    productsAdapter= new ProductsAdapter();
    StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, LinearLayoutManager.VERTICAL);
    recyclerView.setLayoutManager(staggeredGridLayoutManager);
    getData();

}

private void getData() {
    dataArrayList = new ArrayList<>();


    Map<String, String> params = new HashMap<String, String>();
    params.put("categoryId", "0");
    params.put("countryId", "1");
    Call<List<Product>> call= apiInterfacePages.getProducts(params);
    call.enqueue(new Callback<List<Product>>() {
        @Override
        public void onResponse(Call<List<Product>> call, Response<List<Product>> response) {
            dataArrayList = response.body();
            productsAdapter.setData(dataArrayList);
            recyclerView.setAdapter(productsAdapter);


        }

        @Override
        public void onFailure(Call<List<Product>> call, Throwable t) {
            Log.i("Call response",t.getMessage());
        }
    });
}
}