How to display gridview Images in Tabs fragment

Question

I am trying to make a tab where I have to display images in gridview, so I made normal tabs from one of the library and made an adapter to display the images in my main activity code.

class TestAdapter extends FragmentPagerAdapter {
public TestAdapter (FragmentManager manager) {
    super(manager);
}

@Override
public Fragment getItem(int i) {
    Fragment fragment=null;
    if (i==0){
        fragment=new One();
    }
    if (i==1){
        fragment=new Two();
    }
    if (i==2){
        fragment=new Three();
    }
    return fragment;
}

@Override
public int getCount() {
    return 3;
}
@Override
public CharSequence getPageTitle(int position) {
    String title = new String();
    if (position==0){
        return "tab1";
    }

    if (position==1){
        return "tab2";
    }
    if (position==2){
        return "tab3";
    }
    return title;
  }
}

my fragment class.

public class One extends Fragment {
  public Integer [] imageIDs =      {
    R.drawable.img1, 
    R.drawable.img2, 
    R.drawable.img3,
    R.drawable.img4,
    R.drawable.img5,
    R.drawable.img6,
    R.drawable.img7,
    R.drawable.img8,
    R.drawable.img9,
    R.drawable.img10
};

public One() {
    // Required empty public constructor
}


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_one,container,false);
    GridView gridView = (GridView) view.findViewById(R.id.gridView);
    gridView.setAdapter(new MyAdapter(view.getContext())); // uses the view to get the context instead of getActivity().
    return view;
}

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

I have set my adapter as follow

public class MyAdapter extends BaseAdapter {
public Integer [] imageIDs =    
{
    R.drawable.img1, 
    R.drawable.img2, 
    R.drawable.img3,
    R.drawable.img4,
    R.drawable.img5,
    R.drawable.img6,
    R.drawable.img7,
    R.drawable.img8,
    R.drawable.img9,
    R.drawable.img10
};

private Context context;
public MyAdapter(Context c){
    context=c;
}

@Override
public int getCount() {
    return imageIDs.length;
}

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

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ImageView imageView;
    if (convertView==null){
        imageView =new ImageView(context);
        imageView.setLayoutParams(new GridView.LayoutParams(85,85));
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setPadding(5,5,5,5);
    }
    else {
        imageView=(ImageView)convertView;
    }
    imageView.setImageResource(imageIDs[position]);

    return imageView;
  }
}

I am able to make a grid view in an activity but in that I use to declare the images in the MainActivity class but here I am getting an error. Sso I declared in the adapter as adapter will be calling the images. It is compiled properly without any error but it is showing a run time error error as

04-23 10:39:11.950 571-571/? E/Vold: Error reading configuration (No such file or directory)... continuing anyways

So how to fix this and were do I have to declare the images.

Answer 1

Define images in your fragment like this one below, then inflate the fragment with the grid view images or a text view depending on which tab has been selected.

public class CardsFragment extends Fragment {
    private static final String ARG_POSITION = "position";

    private int position;

    GridView servicesGridView;

    String[] gridViewString = {
            "PROTECTION", "Child Registration", "Repatriation", "rsd", "REFERRAL", "Resettlement",};

    int[] gridViewImageId = {
            R.drawable.protection, R.drawable.childregistration,
            R.drawable.repatriation, R.drawable.rsd,
            R.drawable.refferal, R.drawable.resettlement,};

    //Create a new instance of a fragment at a specific pisition
    public static CardsFragment newInstance(int position) {
        CardsFragment f = new CardsFragment();
        Bundle b = new Bundle();
        b.putInt(ARG_POSITION, position);
        f.setArguments(b);
        return f;
    }

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

        position = getArguments().getInt(ARG_POSITION);
    }

    //Populate the fragment with TextViews and grid view images
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        if (position == 1) {

            View rootView = inflater.inflate(R.layout.activity_gv_services, container, false);

            // Here we inflate the layout we created above
            GridView gridView = (GridView) rootView.findViewById(R.id.gv_services);
            gridView.setAdapter(new GV_ServicesAdapter(getActivity().getApplicationContext(),gridViewString, gridViewImageId));
            return rootView;
        }else {
            FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
                    FrameLayout.LayoutParams.MATCH_PARENT);

            FrameLayout fl = new FrameLayout(getActivity());
            fl.setLayoutParams(params);

            final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, getResources()
                    .getDisplayMetrics());
            TextView v = new TextView(getActivity());
            params.setMargins(margin, margin, margin, margin);
            v.setLayoutParams(params);
            v.setLayoutParams(params);
            v.setGravity(Gravity.CENTER);
            v.setBackgroundResource(R.drawable.background_card);
            v.setText("CARD " + (position + 1));

            fl.addView(v);
            return fl;
        }
    }
}

Where activity_gv_services is a layout file that hosts the Grid view and gv_servicesis the grid view itself. As shown

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

<GridView
android:id="@+id/gv_services"
    android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="110dp"
android:gravity="center"
android:numColumns="auto_fit" />

</LinearLayout>

Then your MyAdapter class should look like this

public class MyAdapter extends BaseAdapter {
    private Context mContext;
    private final String[] gridViewString;
    private final int[] gridViewImageId;

    public MyAdapter(Context context, String[] gridViewString, int[] gridViewImageId) {
        mContext = context;
        this.gridViewImageId = gridViewImageId;
        this.gridViewString = gridViewString;
    }
    @Override
    public int getCount() {
        return gridViewString.length;
    }

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

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

    @Override
    public View getView(int i, View convertView, ViewGroup parent) {
        View gridViewAndroid;
        LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (convertView == null) {
            gridViewAndroid = new View(mContext);
            gridViewAndroid = inflater.inflate(R.layout.gv_services_image_text, null);
            TextView textViewAndroid = (TextView) gridViewAndroid.findViewById(R.id.TxtViewservices);
            ImageView imageViewAndroid = (ImageView) gridViewAndroid.findViewById(R.id.ImgViewservices);
            textViewAndroid.setText(gridViewString[i]);
            imageViewAndroid.setImageResource(gridViewImageId[i]);
        } else {
            gridViewAndroid = (View) convertView;
        }

        return gridViewAndroid;
    }
}

Where gv_services_image_text is a layout file that contains Imageview and TextView as shown

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gv_services_image_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">

<ImageView
android:id="@+id/ImgViewservices"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="15dp" />

<TextView
android:id="@+id/TxtViewservices"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:textSize="12sp" />

</LinearLayout>