I am trying to remove the extra space that shows among the images in a gridview.
My XML file has the following format:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<GridView
android:id="#+id/gallery_grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="2"
android:stretchMode="columnWidth" />
</FrameLayout>
Note: I tried changing the value in the horizontalSpacing attribute but that does not seem to do anything. I want the images to be shown in 2 columns when in portrait mode and 3 columns when in landscape mode. What I do not want is the wasted space among the images. I would like to have them stretched and remove the wasted space.
Try this :
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<GridView
android:id="#+id/gallery_grid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="2"
android:stretchMode="columnWidth" />
</FrameLayout>
You asking the system to fill all the screen with 2 columns, so I think he override the attribute android:horizontalSpacing.
This is where the magic happens:
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
In the getView() method of your GridView adapter. Increase the values (width, heigth) to suite your requirements
try this
<GridView
android:id="#+id/gallery_grid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:clickable="true"
android:columnWidth="100dp"
android:drawSelectorOnTop="true"
android:focusable="true"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="2dp" />
Related
I have this Gridview
<GridView
android:id="#+id/gridview_example"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:layout_marginLeft="45dp"
android:layout_marginRight="45dp"
android:layout_marginTop="35dp"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:numColumns="3"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:fadeScrollbars="false"
android:scrollbarStyle="outsideInset"
android:scrollbarSize="30dp"
android:smoothScrollbar="true">
</GridView>
for which I'm trying to increase the scroll width. I've tried using scrollbarSize but nothing changes. Is there a way to increase the width of the scrollbar without customizing it?
I'm new in Android development so please be gentle :)
Update: Tested this possible solution and added my gridview inside the scrollview
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:layout_marginLeft="45dp"
android:layout_marginRight="45dp"
android:layout_marginTop="35dp"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_above="#+id/bottomMenu"
android:scrollbarSize="50dip">
<GridView
android:id="#+id/gridview_holes"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="3"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp">
</GridView>
</ScrollView>
But the gridview is much more smaller and I'm seeing just the gridview thin scroll.
please try this
android:scrollbarAlwaysDrawVerticalTrack=true
android:scrollbars=vertical
use Scrollview for scrolling sub view
https://developer.android.com/reference/android/widget/ScrollView.html
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 tried add button below gridview in linearlayout at following code. But when i execute my app i only see gridview there is no button item. So it may basic mistake but i can't see it.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:background="#2a2a2a"
>
<GridView
android:id="#+id/grid_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnWidth="150dp"
android:numColumns="auto_fit"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"></GridView>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:text="#string/cam_string" />
</LinearLayout>
Change the orientation of your LinearLayout to vertical. I suspect you're not seeing the Button because the GridView takes up all horizontal space, then the LinearLayout adds the Button in a place off the screen that's not visible. You also may want to change the layout_height of the GridView to "0dip" and give it the `android:layout_weight=1' attribute so that it will fill all space except that taken up by the Button.
Other than the suggested Solution by others you can try the alternative using relative layout.
You can use a RelativeLayout for this purpose instead of LinearLayout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#2a2a2a" >
<GridView
android:id="#+id/grid_view"
android:layout_above="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnWidth="150dp"
android:numColumns="auto_fit"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"></GridView>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/cam_string" />
</RelativeLayout>
I had created a window with RelativeLayout and insterted two controls in it; one is GridView and the other one is WebView.
I will bind images to gridview to use like menu and i will load a html page in webview for ads.
But i have problems with these controls.
For example, if user scrolls gridview vertically it is disappearing behind webview however, in that i was expecting webview was slide with gridview too when user scroll gridview.
So i wonder, can i group these controls together to act simultaneously?
My another problem with orientation, when i turn my device to landscape mode webview is disappearing from screen.
Lastly if i set GridView's layout_height attribute fill_parent, i can't see WebView, so i set it as wrap_content. But this time WebView doesn't align at bottom, it aligns at GridView's after and there is space between screen bottom and webview.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg480480">
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="auto_fit"
android:verticalSpacing="45dp"
android:horizontalSpacing="10dp"
android:columnWidth="150dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:layout_marginTop="30dp"
android:scrollbars="none"
android:layout_alignParentTop="true" />
<WebView
android:id="#+id/webView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:gravity="bottom"
android:layout_below="#id/gridview" />
</RelativeLayout>
Here are some screen shots.
I guess the main problem is that both the GridView and the Webview specify layout_height="fill_parent". I guess you probably don't want the GridView to fill the whole parent area, so use "wrap_content" instead.
I don't know enough of the desired layout of the page but I would recommend using a LinearLayout to start and get comfortable. It really depends what the grid view and the web view should show and where your main content is.
In the example below I have simply assumed that your web view wants to take up the majority of the screen.
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ff0000"
android:numColumns="auto_fit"
android:verticalSpacing="45dp"
android:horizontalSpacing="10dp"
android:columnWidth="150dp"
android:stretchMode="columnWidth"
android:layout_marginTop="30dp"
android:scrollbars="none"
/>
<WebView
android:id="#+id/webView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00ff00"
android:scaleType="centerInside" />
</LinearLayout>
If the assumption is not correct then you would probably specify it the other way round (Webview=>wrap_conent)
Improve the WebView layout code as below:
<GridView
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/webView1"
android:layout_alignParentTop="true"
android:layout_marginTop="30dp"
android:columnWidth="150dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:scrollbars="none"
android:stretchMode="columnWidth"
android:verticalSpacing="45dp" />
<WebView
android:id="#+id/webView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:scaleType="centerInside" />
FYI, android:layout_alignParentBottom="true" will display WebView at the bottom of the screen. and include android:layout_above="#+id/webView1" inside the GridView.
Give a try to this layout code.
You need to add
android:layout_above="#+id/webView1"
in your gridview
also
android:layout_alignParentBottom="true"
in your webview
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg480480"
android:orientation="vertical"
>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="auto_fit"
android:verticalSpacing="45dp"
android:horizontalSpacing="10dp"
android:columnWidth="150dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:layout_above="#+id/webView1"
android:layout_marginTop="30dp"
android:scrollbars="none"
android:layout_alignParentTop="true" />
<WebView
android:id="#+id/webView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/gridview" />
</RelativeLayout>
I'm trying to display an image above and below a grid. This is the initial screen with Logo on top, 4 buttons as a grid view then image on the bottom. With my current code the bottom image is not displaying at all. Also I would like to stick the bottom image "bottomboxes" to the bottom of the display.
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingTop="20dp"
android:src="#drawable/stuffbox"
android:gravity="center"/>
<GridView
android:id="#+id/gridview"
android:paddingTop="10dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="40dp"
android:numColumns="2"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/bottomboxes"
android:paddingTop="20dp"
/>
</LinearLayout>
Your current layout has the GridView set to fill_parent both directions. This will force the gridview to fill the entire linearlayout and push the other views away.
Instead you should put:
<GridView
android:id="#+id/gridview"
android:paddingTop="10dp"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:columnWidth="40dp"
android:numColumns="2"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"/>
The lines android:layout_height="0" and android:layout_weight="1" tell the gridview to fill the remaining available space in the layout, while still allowing the imageviews to have their place.