How can I fill array of Images both vertically and horizontally in android studio

Question

Goal: To make display array of images vertically and horizontally

The task is to make it infinitely go to right and left, it already works up and down but when I want to go to the right it doesn't. It need to be for whatever the size of the image and no matter the amount of the images as well as the column number.

I have tried these methods but none gave me the result I wanted:

https://stackoverflow.com/a/6716638/8889248

How to make grid view scroll horizontally not vertically in android?

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity">


         <GridView
            android:id="@+id/gv"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center"
            android:horizontalSpacing="20dp"
            android:columnWidth="200dp"
            android:numColumns="4"
            android:verticalSpacing="20dp"
            android:stretchMode="columnWidth"
             android:scrollbarAlwaysDrawHorizontalTrack="true"
             android:scrollbarAlwaysDrawVerticalTrack="true"
             android:scrollbars="horizontal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            >

         </GridView>




</LinearLayout>

grid_single.xml

        <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:orientation="vertical">
    
    
    
                <ImageView
                    android:id="@+id/grid_image"
                    android:layout_width="70dp"
                    android:layout_height="70dp" ></ImageView>


</LinearLayout>

MainActivity.java

    package com.example.gridview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    GridView grid;

    int[] imageId = {
            R.drawable.dog,
            R.drawable.elephant,
            R.drawable.tiger,
            R.drawable.fish,
            R.drawable.wolf,
            R.drawable.lion,
            R.drawable.horse,
            R.drawable.house,
            R.drawable.monkey,
            R.drawable.restaurant,
            R.drawable.fox,
            R.drawable.shark,
            R.drawable.nerd,
            R.drawable.confused,
            R.drawable.laughing
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        CustomGrid adapter = new CustomGrid(MainActivity.this,  imageId);
        grid=(GridView)findViewById(R.id.gv);
        grid.setAdapter(adapter);
        grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                                    int position, long id) {
                Toast.makeText(MainActivity.this, "You Clicked at " , Toast.LENGTH_SHORT).show();

            }
        });

    }

}

CustomGrid.java

 package com.example.gridview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomGrid extends BaseAdapter{
    private Context mContext;

    private final int[] Imageid;

    public CustomGrid(Context c, int[] Imageid ) {
        mContext = c;
        this.Imageid = Imageid;

    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return Imageid.length;
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        View grid;
        LayoutInflater inflater = (LayoutInflater) mContext
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        if (convertView == null) {

            grid = new View(mContext);
            grid = inflater.inflate(R.layout.grid_single, null);
            ImageView imageView = (ImageView)grid.findViewById(R.id.grid_image);
            imageView.setImageResource(Imageid[position]);


        } else {
            grid = (View) convertView;
        }

        return grid;
    }
}

width:200dp, height:200dp

width:70dp, height:70dp

Help me understand this..!! You have a grid with four columns and you want a horizont scrolling option for that right..?? — Venkatesh Talacheeru, Jun 15 '21 at 08:25
I believe that's not possible say you have 100 pictures and want to load them then their is nCr ways to make this and that won't give you a nice app experience. Have you ever seen this type of behavior earlier..?? — Venkatesh Talacheeru, Jun 15 '21 at 09:44
What am I trying to do is a display some squared images for a site. let's say for example I have 100 images therefor it will be in 20 columns so there will be 5 rows and I would like to be able to display all the images by scrolling left and right as well as up and down — Ayman Sharaf, Jun 15 '21 at 09:53
In android you need to specify the row or colum count to display the items inside it. I don't think android allow such feature you're trying to achieve — Venkatesh Talacheeru, Jun 15 '21 at 09:56
I will look deeper and If I found a solution will share it with you. Thanks. — Ayman Sharaf, Jun 15 '21 at 10:00

score 0 · Accepted Answer · answered Jun 17 '21 at 09:17

I Think I Figured Out What Exactly You Want To Do.

I Researched And Found Out How To Do It Using This Link: https://stackoverflow.com/a/36128774/15392527

Change Your activity_main.xml To This:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="900dp"
                android:layout_height="match_parent"
                android:orientation="horizontal">

                <GridView
                    android:id="@+id/gv"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:columnWidth="200dp"
                    android:gravity="center"
                    android:horizontalSpacing="20dp"
                    android:numColumns="4"
                    android:scrollbarAlwaysDrawHorizontalTrack="true"
                    android:scrollbarAlwaysDrawVerticalTrack="true"
                    android:scrollbars="horizontal"
                    android:stretchMode="columnWidth"
                    android:verticalSpacing="20dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent">

                </GridView>
            </LinearLayout>
        </FrameLayout>
    </HorizontalScrollView>


</androidx.constraintlayout.widget.ConstraintLayout>

How can I fill array of Images both vertically and horizontally in android studio

1 Answers1