Android GridView Gallery | pictures are separated by titles

I use the GridView gallery to build the application in the dialog box. All galleries work well, but now I want to separate some photos from another photo (some kind of Title needs to be created). For example, I have some photos named 1v1.jpg/1v2.jpg/1v3.jpg/2v1.jpg/2v2.jpg in the SD card folder, and now I want to display them in my GridView Gallery (assuming it has 2 columns)

How does it look:

1

1v1.jpg 1v2.jpg

1v3.jpg

two

2v1.jpg 2v2.jpg

wait

Now I only have a photo gallery

Some codes:

GridAdapter：

public class GridAdapter extends BaseAdapter {

    Context mContext;
    ArrayList<File> listFiles;

    public GridAdapter(Context context, ArrayList<File> files) {

        this.mContext = context;
        this.listFiles = files;

    }

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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        if(convertView == null)
        {
                convertView = LayoutInflater.from(mContext).inflate(R.layout.my_grid, parent, false);
        }

        final ImageView iv = (ImageView) convertView.findViewById(R.id.imageView);

       Glide.with(mContext)
                .load(listFiles.get(position).getAbsolutePath()) //path to picture
                .into(iv);


        return convertView;
    }

} //end of gridadapter

//Remaining code

public ArrayList<File> photoList;
public ArrayList<String> albumList;

photoList = imageReader(photoDir);
albumList = albumReader(photoDir);

//function to get all file paths (works)
    private ArrayList<File> imageReader(File root)
    {
        ArrayList<File> a = new ArrayList<>();
        File[] files = root.listFiles();
        for (File file : files) {
            if (file.isDirectory()) {                 
                a.addAll(imageReader(file));
            } else {
                if (file.getName().length() == 14)
                {
                    a.add(file);
                }
            }
        }
        return a;
    }
        //function to get all headers name (works)
        private ArrayList<String> albumReader(File root)
        {
            ArrayList<String> pages = new ArrayList<>();
            File[] files = root.listFiles();
            for (File file : files)
            {
                String photoName;
                String temp = "";
                photoName =  file.getName();
                if(photoName.length()==14)
                {
                    photoName = photoName.substring(0, 4);        
                    if (!temp.equals(photoName))
                    {
                        if(pages.isEmpty() || !pages.contains(photoName))
                        {
                            pages.add(photoName);
                            temp = photoName;
                        }
                        else
                        {
                            break;
                        }
                    }
                }

            }

            return pages;
        }

public void firstChoiceDialogGallery() {

        inflater = this.getLayoutInflater();

        // Dialog layout
        v = inflater.inflate(R.layout.dialog_choice, null);

        // Get gridView from dialog_choice
        gV = (GridView) v.findViewById(R.id.gridView);

        // GridAdapter (Pass context and files list)
        GridAdapter adapter = new GridAdapter(this, photoList);



        // Set adapter
        gV.setAdapter(adapter);

        final AlertDialog.Builder builder2 = new AlertDialog.Builder(this);
        builder2.setTitle("MY GALLERY");

        builder2.setView(v);
        builder2.setPositiveButton("NEXT", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {

            }
        }).setNegativeButton("BACK", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {

            }
        });

        builder2.setCancelable(false);
        final AlertDialog dialog = builder2.create();
        dialog.show();
    }

XML： grid_ item.xml

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


    <ImageView
        android:layout_width="@integer/width"
        android:layout_height="@integer/height"
        android:adjustViewBounds="true"
        android:id="@+id/imageView"
        android:layout_margin="5dp"
        android:layout_centerVertical="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

grid.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dialog_choice"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:numColumns="@integer/column_count"
        android:clickable="true"/>


</RelativeLayout>

As you can see, I wrote a function to get the header name, and the gallery can also work, but now I don't know how to place this name in a specific location and how to perform this operation. I'm considering putting it on an existing adapter, but it doesn't work

PS: I read about stickygridheaders, so there is no answer to give a link to the Lib source here, because I already know. The problem is that I'm not sure this is what I want, and I don't know how to implement it in the existing code

resolvent:

You need to create an item named item_ Row. XML or any custom adapter you want

Define the required view in the layout. According to your situation, you can see the image and text from the image I see:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="105dp"
android:layout_height="120dp">
<ImageView
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:id="@+id/ImgItem"
    android:layout_marginTop="7dp"
    android:layout_gravity="center"/>
<TextView
    android:id="@+id/textItem"
    android:layout_width="120dp"
    android:layout_height="25dp"
    android:textSize="16sp"
    android:layout_marginBottom="3dp"
    android:layout_gravity="center"
    android:textColor="#182b4b"
    android:gravity="center" />
</LinearLayout>

Now, create your adapter class, where you instruct the adapter to expand the newly created view (item_row, XML):

Ensure from

public class rowitem extends ArrayAdapter<String> {

private final Activity context;
private String[] nameItem;
private Bitmap[] iconsItem;

public rowitem(Activity context, String[] nameItem, Bitmap[] iconsItem) {
    super(context, R.layout.adapter_sketchmenuside, nameItem);
    // TODO Auto-generated constructor stub

    this.context = context;
    this.nameItem = nameItem;
    this.iconsItem = iconsItem;
}

public View getView(int posicion, View view, ViewGroup parent){
    LayoutInflater inflater = context.getLayoutInflater();
//inflate the item_row.xml view
    View rowView = inflater.inflate(R.item_row,null, 
true);

    TextView txtTitle = (TextView) rowView.findViewById(R.id.textItem);
    ImageView imageView = (ImageView) rowView.findViewById(R.id.ImgItem);

// Do your stuff
}

As a final step, set the new custom adapter to GridView wherever you declare it:

GridView myGrid = (GridView) view.findViewById(R.id.GrdCategory);

//in wherever you want, set the adapter:
myGrid.setAdapter(new rowitem(getActivity(), 
               namesArray, //here you send an Array with Strings for the names of the images
               imgArray, // here you send an array with the images you want to load
));

Yes, any question can let me know. If it is correct, please mark it as the correct answer. Happy coding!