Home » Android » gridview – How to create horizontal scrolling grid view int android?-Exceptionshub

gridview – How to create horizontal scrolling grid view int android?-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I want to create a gridview (not recycler view) that can scroll horizontally. How do I do that?

The benefit is that you avoid adding recycler view from support library and minimize apk size.

How to&Answers:

Answer 1

If the items in the list are limited (if it contain large bitmaps creating even 10 such items could result in stack overflow, if it’s just text, you might go on for 50-100 items or even more), use HorizontalScrollView.

            <HorizontalScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:padding="10dp">

                <LinearLayout
                    android:id="@+id/hgrid"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:orientation="horizontal" />
            </HorizontalScrollView>

Then add items to the LinearLayout in your onCreate() method

LinearLayout layout = findViewById('hgrid');
if(layout.getChildCount()==0){
// add views to layout
}

Answer:

Answer 2 – also tested and working

Found a bit tricky answer but it works well, if carefully implemented.

It seems as simple as rotating the GridView by 90 degree and rotating the items inside GridView by -90 degree. But when doing this there are issues with layout sizing – explained below.

Even though GridView is rotated, the parent layout allocates space as per the dimensions of GridView without rotation. This will make GridView disappear.

WorkAround

Enclose GridView inside FrameLayout. Now set the dimension of FrameLayout according to the actual dimensions of horizontal GridView that you would like to see.

activity.xml

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

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

            <GridView android:id="@+id/photoGrid"
                android:listSelector="@android:color/transparent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

            <TextView
                android:padding="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-medium"
                android:clickable="true"
                android:singleLine="true"
                android:text="@string/photos"
                android:textColor="#000000"
                android:textSize="16sp"
                android:focusable="true" />

            <TextView
                android:padding="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:fontFamily="sans-serif-medium"
                android:text="@string/all_photos"
                android:textColor="#2196F3"
                android:textSize="14sp" />
        </FrameLayout>
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="180dp">

            <GridView android:id="@+id/clgGrid"
                android:listSelector="@android:color/transparent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

            <TextView
                android:padding="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-medium"
                android:clickable="true"
                android:singleLine="true"
                android:text="@string/collages"
                android:textColor="#000000"
                android:textSize="16sp"
                android:focusable="true" />
        </FrameLayout>
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="180dp">

            <GridView android:id="@+id/cameraGrid"
                android:listSelector="@android:color/transparent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

            <TextView
                android:padding="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-medium"
                android:clickable="true"
                android:singleLine="true"
                android:text="@string/camera"
                android:textColor="#000000"
                android:textSize="16sp"
                android:focusable="true" />
        </FrameLayout>
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="180dp">

            <GridView android:id="@+id/drawingGrid"
                android:listSelector="@android:color/transparent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

            <TextView
                android:padding="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-medium"
                android:clickable="true"
                android:singleLine="true"
                android:text="@string/drawing"
                android:textColor="#000000"
                android:textSize="16sp"
                android:focusable="true" />
        </FrameLayout>
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="180dp">

            <GridView android:id="@+id/colorBgGrid"
                android:listSelector="@android:color/transparent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

            <TextView
                android:padding="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-medium"
                android:clickable="true"
                android:singleLine="true"
                android:text="@string/color_backgrounds"
                android:textColor="#000000"
                android:textSize="16sp"
                android:focusable="true" />
        </FrameLayout>
    </LinearLayout>
</ScrollView>

Now in you Activity

int[] gridIds = new int[]{R.id.photoGrid, R.id.clgGrid, R.id.cameraGrid, R.id.drawingGrid, R.id.colorBgGrid};
GridView[] grids = new GridView[gridIds.length];

for(int i = 0; i<gridIds.length; i++) grids[i] = findViewById(gridIds[i]);
        ViewGroup.LayoutParams params = grids[photo].getLayoutParams();
        ViewGroup.MarginLayoutParams params1 = (ViewGroup.MarginLayoutParams) grids[photo].getLayoutParams();
        for(int i = 0; i<gridIds.length; i++) {
            grids[i].setRotation(-90);
            params.height = size.x;
            grids[i].setLayoutParams(params);
            params1.topMargin = -size.x/2 + imgSize - 15*dp;
            grids[i].setLayoutParams(params1);
            grids[i].setAdapter(new cAdapter(cursor, 0));
        }

Now Inside you adapter

    public class holder {
        holder(View v){
            img = v.findViewById(R.id.img);
            txt = v.findViewById(R.id.txt);
        }
        ImageView img;
        TextView txt;
    }
    public class cAdapter extends CursorAdapter {

        cAdapter(Cursor c, int flags) {
            super(mContext, c, flags);
        }

        @Override
        public int getCount() {
            int c = super.getCount();
            return c < MAX_IMG ? c : MAX_IMG;
        }

        @Override
        public View newView(Context context, Cursor cursor, ViewGroup parent) {
            View v = LayoutInflater.from(mContext).inflate(R.layout.li_main, parent, false);
            v.setTag(new holder(v));
            return v;
        }

        @Override
        public void bindView(View view, Context context, Cursor cursor) {
            holder h = (holder) view.getTag();
            final String imgPath = cursor.getString(cursor.getColumnIndex(MediaStore.Images.Media.DATA));
            int rotation = 90;
            try {
                ExifInterface ei = new ExifInterface(imgPath);
                int orientation = ei.getAttributeInt(ExifInterface.TAG_ORIENTATION, ExifInterface.ORIENTATION_NORMAL);
                switch (orientation){
                    case ExifInterface.ORIENTATION_ROTATE_90:
                        rotation += 90;
                        break;
                    case ExifInterface.ORIENTATION_ROTATE_180:
                        rotation += 180;
                        break;
                    case ExifInterface.ORIENTATION_ROTATE_270:
                        rotation += 270;
                        break;
                    case ExifInterface.ORIENTATION_FLIP_HORIZONTAL:
                        h.img.setRotationX(180);
                        break;
                    case ExifInterface.ORIENTATION_FLIP_VERTICAL:
                        h.img.setRotationY(180);
                        break;
                }
            } catch (IOException ignored) {}
            h.img.setRotation(rotation);
            Bitmap b = MediaStore.Images.Thumbnails.getThumbnail(cr, cursor.getLong(0), MediaStore.Images.Thumbnails.MINI_KIND, null);
            h.img.setImageBitmap(getRoundedCornerBitmap(b, 6*dp));
            h.img.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    startActivity(new Intent(mContext, ImageEditActivity.class).putExtra("path", imgPath));
                }
            });
        }
    }