Am developing a custom gallery using gridview in android. Now am facing the issue with the columns count ..my gridview xml is,
<GridView
android:id="#+id/gv_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="auto_fit"
android:choiceMode="multipleChoice"
android:stretchMode="columnWidth"
android:gravity="center"
android:columnWidth="179dp">
</GridView>
my grid item layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="179dp"
android:layout_height="131dp"
android:padding="1dp" >
<ImageView
android:id="#+id/iv_thumbnail"
android:contentDescription="#string/iv_content_description"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/tv_folder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentBottom="true"
android:text="#string/tv_folder"
android:padding="12dp"
android:textColor="#color/white"
android:background="#color/transparent_black"/>
</RelativeLayout>
of course it's dynamically maintaining columns according to device width but there is different column spacing in different devices..
how i can overcome this issue.?
To distribute the size uniformly don't use a fixed size for each grid item.
Set the width to wrap_content and you can also specify the number of columns
Related
Am trying to create image selection activity layout similar with Instagram like below image.
But in my case when i add RelativeLayout >> GridView, the image_button and camera_button is will be pushed off the screen.
Please can anyone help how do I arrange the layout to give me expected result?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/white"
tools:context=".imageEditClass"
android:id="#+id/activity_image_edit_class">
<FrameLayout
android:id="#+id/top_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.fenchtose.nocropper.CropperView
android:background="#ff282828"
android:id="#+id/croppingImagePreview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:nocropper__grid_opacity="0.8"
app:nocropper__grid_thickness="0.8dp"
app:nocropper__padding_color="#color/colorAccent"
app:nocropper__grid_color="#color/colorAccent" />
<ImageView
android:id="#+id/snap_button"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="16dp"
android:padding="8dp"
android:layout_gravity="start|bottom"
android:background="#drawable/black_transp_circ_ripple"
android:scaleType="center"
android:src="#mipmap/ic_crop_free_white_24dp"
android:contentDescription="Crop" />
<ImageView
android:id="#+id/rotate_button"
android:layout_width="40dp"
android:layout_height="40dp"
android:padding="8dp"
android:layout_margin="16dp"
android:layout_gravity="end|bottom"
android:background="#drawable/black_transp_circ_ripple"
android:scaleType="center"
android:src="#mipmap/ic_rotate_right_white_24dp"
android:contentDescription="Rotate" />
</FrameLayout>
<GridLayout
android:id="#+id/bottom_grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="3"
android:rowCount="3"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="211dp">
<GridView
android:id="#+id/galleryGridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnWidth="280dp"
android:gravity="center"
android:horizontalSpacing="1dp"
android:numColumns="4"
android:padding="1dp"
android:stretchMode="columnWidth"
android:verticalSpacing="2dp">
</GridView>
</RelativeLayout>
<Button
android:layout_width="125dp"
android:layout_height="wrap_content"
android:text="#string/galleryText"
android:background="#color/white"
android:textColor="#color/colorPrimary"
android:id="#+id/image_button"/>
<Button
android:layout_width="125dp"
android:layout_height="wrap_content"
android:text="#string/photoText"
android:background="#color/white"
android:textColor="#color/colorPrimary"
android:id="#+id/camera_button"/>
<Button
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="#string/saveText"
android:background="#color/colorPrimary"
android:layout_gravity="end|bottom"
android:id="#+id/crop_save_button"/>
</GridLayout>
</RelativeLayout>
You've defined your GridLayout to have 3 rows and 3 columns. You then provide a RelativeLayout containing a GridView as the first cell (position 0/0). You then provide a Button for "Gallery" which will be occupy position 0/1. You then provide a Button for "Photo" which will occupy position 0/2. Your "Save" `Button' will now occupy the cell at row 1, column 0. This isn't what you want.
Why do you have the RelativeLayout containing the GridView inside the GridLayout? It seems that you only need the GridLayout to evenly space the buttons at the bottom.
An alternative would be to indicate that the RelativeLayout should occupy 3 columns within the GridLayout, which would position the 3 buttons in the 3 cells of row index 1. You can do this by providing the RelativeLayout a ColumnSpec that has columnSpan=3. This tells the GridLayout that the RelativeLayout wants to be 3 cells (ie: the entire width of the row) wide.
I have the following GridView:
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/gridView"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:numColumns="3" />
Which I populate with this type of items:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"/>
</LinearLayout>
I set the image in the adapter by setting a bitmap. The images get the appropriate size for a GridView with 3 columns, but the items are way too high. This means that there is a lot of empty space above and below every image. How can I remove that space so the items have the same height as the images?
Here's an illustration of how it is right now:
Here's how it should be:
Add this in xml,
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:id="#+id/imageView"/>
For some reason, my CardView is only showing the first row of images in my grid view. (or my GridView is only showing the first row - I can't tell).
I am dynamically adding images into the gridView and using gridAdapter.notifyDataSetChanged(). Perhaps this is why the height of the CardView is not adapting? When I add android:layout_height="500dp" to the CardView, then I see all my images.
Is there a way to make the CardView wrap the content so I can see all of my images (other than hardcoding the height)?
Please note, I cannot hardcode the height as the number of rows of photos is dynamic.
Only showing one row of images, even when there are actually 2 rows of images
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="2dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/m_photos" />
<GridView
android:id="#+id/m_grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:clickable="true"
android:columnWidth="90dp"
android:drawSelectorOnTop="true"
android:focusable="true"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="none"
android:verticalSpacing="2dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
I faced This problem few days ago.For this case, Wrap_content not working perfectly.So Use layout height in fixed dp and use dimention for that. it works for my case.
<GridView
android:id="#+id/m_grid"
android:layout_width="match_parent"
android:layout_height="#dimen/gvHeight"
android:layout_margin="2dp"
android:clickable="true"
android:columnWidth="90dp"
android:drawSelectorOnTop="true"
android:focusable="true"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="none"
android:verticalSpacing="2dp" />
I came across this problem while making a launch pad activity. I have a GridView layout that is populated with app icons. I want to center it on the screen but just can not no matter what I've tried. If the icons are not enough to cover the whole screen width the GridView is aligned to the left. I put a white background in the GridView Layout to show the problem.
I change programmaticaly the size of the ImageView and the widthof the GridView column to offer more functionality so I see that increaasing the image size enough makes it look centered. But I want it to be centered regardless of the icons number or size. Can someone help?
(I also tried using a linear layout instead of a reletive for the GridView. no difference)
GridView Layout
<RelativeLayout 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:background="#ffffff" >
<GridView
android:id="#+id/gridView1"
android:numColumns="auto_fit"
android:gravity="center"
android:layout_gravity="center"
android:columnWidth="70dp"
android:stretchMode="columnWidth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
</GridView>
</RelativeLayout>
Single grid-item layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/grid_item_image"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:layout_height="wrap_content" >
</ImageView>
</LinearLayout>
For centering in the middle of another layout (RelativeLayout), use
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
e.g. for a GridView:
<RelativeLayout 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" >
<GridView
android:id="#+id/gridView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" >
</GridView>
</RelativeLayout>
In order to make your Items fill the whole screen at all times, use match_parent for your item-width and use weights.
I have a gridview, but it was always lined up two columns, I wish it was always lined up two columns.
This is grid layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/newsScroller"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F5F5F5" >
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/newsScrollerContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp" >
</GridView>
</ScrollView>
And this is item in grid.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="5dip"
android:layout_gravity="center" >
<ImageView
android:id="#+id/grid_item_image"
android:layout_width="130dip"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/icon" >
</ImageView>
<TextView
android:id="#+id/grid_item_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/grid_item_image"
android:layout_centerHorizontal="true"
android:layout_marginTop="2dp"
android:gravity="center"
android:shadowColor="#ffffff"
android:shadowDx="1"
android:shadowDy="2"
android:shadowRadius="2"
android:textColor="#333333"
android:textStyle="bold"
android:textSize="14sp" >
</TextView>
</RelativeLayout>
My problem, when I use the device nexus runs perfectly, but if I use a smaller screen devices will be just show one coloumn, as shown below:
And if i use the tablet, so will be five coloumn.
My question is that how it's always a two-column grid when i open in device anything or any screen size.
Thanks.
Instead android:numColumns="auto_fit" just use : android:numColumns="2"
In each grid item replace fill_parent with wrap_content.
A more complicated solution will be to calculate the screen width in code and then set the item width by code also.
You need to change the android:numColumns to 2, not auto_fit
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/newsScrollerContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="10dp"
android:numColumns="2"
android:verticalSpacing="10dp" >
You can set the number of columns by using this property android:numColumns=2 of grid view in your xml or using this method of grid view setNumColumns(2).Dont use auto fit.