My grid design is as such. But i want to remove the spaces on both sides of the grid elements. (Black marked)
I want the image to be expanded somewhat like
My XML layouts for the gridview
<?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="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<GridView
android:id="#+id/grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="100dip"
android:gravity="center"
android:numColumns="2"
android:stretchMode="spacingWidthUniform" />
</LinearLayout>
My grid element layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/grid_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:contentDescription="#string/im" >
</ImageView>
<TextView
android:id="#+id/grid_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:maxLength="23"
android:gravity="center"
android:layout_marginTop="10sp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:textSize="12sp" >
</TextView>
</LinearLayout>
Try Changing
<GridView
android:id="#+id/grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:verticalSpacing="1dp"
android:horizontalSpacing="1dp"
android:numColumns="2"
android:background="#abcdef"
android:stretchMode="columnWidth" />
You can replace GridView with GridLayout and use weights to make the images fill the screen. Here's the reference: http://developer.android.com/reference/android/widget/GridLayout.html, (See the section: Excess space distribution)
Related
I have a GridView in a vertical LinearLayout, that I want to have take up all remaining vertical space. The grid will always have 5 columns and 7 rows. The grid items are just a TextView. I want the grid items to expand proportionally (so that each item is one fifth of the width and one seventh of the height) to fill remaining space on any device. I tried setting layout weights, but that didn't do anything.
How can I make it fill the space?
Here's my activity:
<?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="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<TextView
android:text="#string/zero"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tv0"
android:gravity="end"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:paddingEnd="8dp"
android:paddingStart="8dp"
android:textColor="#e4e4e4"
android:background="#color/colorPrimaryDark"/>
<!-- A few more TextViews -->
<GridView
android:id="#+id/grid_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:horizontalSpacing="0dp"
android:verticalSpacing="0dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:numColumns="5"/>
</LinearLayout>
And here's the layout for the grid item:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#color/colorPrimary"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="15dp"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"/>
</FrameLayout>
I didn't understand exacly what you meant by "proportionally", but to make the GridView "fill the space" in your example you don't need to set layout weights:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/text" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/text" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/text" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/text" />
<GridView
android:id="#+id/grid_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:horizontalSpacing="0dp"
android:numColumns="5"
android:stretchMode="columnWidth"
android:verticalSpacing="0dp" />
</LinearLayout>
Generates the layout below:
Hi in my application I am displaying image and text by using grid view for that i used frame layout inside linear layout.
Now i want above the list view i want to display some image.
can anyone please help me.
xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<com.agilerise.hotel.SquareImageView
android:id="#+id/picture"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:paddingTop="50dp"
android:paddingBottom="50dp"
/>
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:layout_gravity="bottom"
android:textColor="#android:color/black"
/>
</FrameLayout>
<GridView
android:id="#+id/buttom"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:numColumns="3"
android:layout_weight="1">
</GridView>
</LinearLayout>
add list view in your xml
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1.68" >
</ListView>
and create item.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="50dip"
android:layout_height="50dip"
android:src="#drawable/ic_avatar"
android:scaleType="centerCrop"/>
</LinearLayout>
Then you should use ArrayAdapter in your activity class to create your listview...
I see the scroll line but it is not working. This is the code:
What could be the reason?
The layout:
<ScrollView xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/titleshopandsell"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:text="פריטים שתוכל למכור"
android:textColor="#880000"
android:textSize="12sp" />
<GridView
android:id="#+id/gridView1"
android:numColumns="auto_fit"
android:gravity="center"
android:verticalSpacing="3dp"
android:horizontalSpacing="2dp"
android:columnWidth="130dp"
android:stretchMode="columnWidth"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</GridView>
</LinearLayout>
</ScrollView>
What is the problem with my code?
GridView is also a special type of ScrollView.. you should change parent scrollView to Relative/Linear Layout.
Currently Both scrollView and GridView obstruct the proper scrolling.
I have some problems with my grid layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frag_books_grid_view_layout"
android:orientation="vertical">
<GridView
android:padding="0dp"
android:cacheColorHint="#color/bg_default"
android:listSelector="#drawable/list_selector_background"
android:id="#+id/frag_books_grid_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchMode="spacingWidth"
android:scrollbars="none"/>
</LinearLayout>
Single item:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:cacheColorHint="#color/bg_default"
android:scrollbars="none"
android:listSelector="#drawable/list_selector_background"
android:layout_gravity="center_vertical|left"
android:gravity="center_vertical|left"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:id="#+id/frag_book_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:verticalSpacing="5dp"/>
</LinearLayout>
Problem is that there is no left and right padding of single item. And it looks terrible when item is selected: http://i.imgur.com/rirNP.png
Please, help to fix it.
try it
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/menu_category"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
for information
http://developer.android.com/guide/topics/ui/layout/gridview.html
this one is best for three columns..
<GridView
android:id="#+id/gridview_Gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnWidth="65dp"
android:gravity="center"
android:horizontalSpacing="6dp"
android:listSelector="#00000000"
android:numColumns="3"
android:scrollbars="none"
android:stretchMode="columnWidth"
android:verticalSpacing="-1dp" />
I need somehow to do this :
I tried playing with Relative Layout, I placed top imageview and bottom button but how do I place my gridview in the center? BUT BETWEEN top image and bottom button?
Have the top image and the bottom button use wrap_content for height, and the GridView use 0dip for height along with a weight of 1. This will cause the top and bottom elements to measure first, and the GridView will get all remaining space in the middle.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView android:id="#+id/top_image"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<GridView android:id="#+id/grid"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1" />
<Button android:id="#+id/bottom_button"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
adamp's answer didn't work for me. This is what I found to work perfectly:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView android:id="#+id/top_image"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<Button android:id="#+id/bottom_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<LinearLayout
android:id="#+id/container_layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/bottom_button"
android:layout_below="#id/top_image"
android:gravity="center" >
<GridView android:id="#+id/grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</RelativeLayout>
I've used this with other LinearLayouts in place of the GridView, with android:gravity="center" set on the innermost layout as well to make all of its text views and images centered horizontally as well as vertically.
use something like this
<?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="wrap_content"
android:gravity="center">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/table">
<TableRow
android:weightSum="100">
<ImageView android:id="#+id/image1"
android:src="#drawable/icon"
android:visibility="visible"
android:gravity="center"
android:layout_weight="50" />
</TableRow>
<TableRow
android:weightSum="100">
<GridView
android:layout_height="wrap_content"
android:layout_width="wrap_content">
</GridView>
</TableRow>
<TableRow
android:weightSum="100">
<Button android:id="#+id/btn1"
android:visibility="visible"
android:gravity="center"
android:layout_weight="50" />
</TableRow>
</TableLayout>
</LinearLayout>
You could try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView android:id="#+id/top_image"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<GridView android:id="#+id/grid1"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1" />
<Button android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Add these to your Grid View:
android:layout_above="#id/bottom_button"
android:layout_below="#id/top_image"