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:
Related
I have a fragment_layout.xml with two buttons (filter_1_btn, filter_2_btn) that perform filtering to the items of a RecyclerView. The problem is that when I scroll a bit (because the TextView above the buttons contains multiple lines of text) and then apply the filtering, then the NestedScrollView scrolls on top of the screen. Is there a way to stay at the same scrolled height after the filtering?
fragment_layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nested_scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:descendantFocusability="blocksDescendants"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical">
<TextView
android:id="#+id/description_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
android:text="Very long random text..." />
<Button
android:id="#+id/filter_1_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Filter 1"/>
<Button
android:id="#+id/filter_2_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Filter 2"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="24dp" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
This is happening because the recyclerView's container is set to wrap_content , so when the height get smaller than the NestedScrollView, it gets scrolled to top.
you can fix it by providing a height larger than NestedScrollView :
So add minHeight :
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nested_scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="blocksDescendants"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical">
<TextView
android:id="#+id/description_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
android:text="Very long random text..." />
<Button
android:id="#+id/filter_1_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Filter 1" />
<Button
android:id="#+id/filter_2_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Filter 2" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="1000dp">
<!-- Add min height to support scrolling-->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp" />
</FrameLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
I'm attempting to create my first Android app and I'd like to horizontally align the items on screen and in rows.
I've tried setting the layout_gravity to center_horizontal as shown below however that doesn't appear to do anything. What am I missing?
Code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.wear.widget.BoxInsetLayout 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="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/box_inset_layout_padding"
tools:deviceIds="wear">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/inner_frame_layout_padding"
app:boxedEdges="all"
android:minWidth="25px"
android:minHeight="25px">
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rowCount="8"
android:layout_gravity="center_horizontal"
android:columnCount="1"
android:orientation="horizontal">
<TextView
android:id="#+id/text"
android:visibility="visible"
android:textSize="9dp"
android:layout_row="1"/>
<TextView
android:id="#+id/text2"
android:visibility="visible"
android:text="#string/hello_world"
android:textAlignment="center"
android:textSize="9dp"
android:layout_row="2"/>
<TextView
android:id="#+id/serviceScore"
android:layout_row="4"
android:visibility="visible"
android:textAlignment="center"
android:textSize="50dp"/>
</GridLayout>
</FrameLayout>
</android.support.wear.widget.BoxInsetLayout>
UI:
Greet by Nice! Just add Gravity of layout center instead of center_horizontal of GridLayout.
android:layout_gravity="center"
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)
I am using a gridview to display a collection of items in the form of an image with a textview beneath them for their title.
The final item of collection of items is unique in the fact that it only has an image, no textview (this might be relevant).
At the moment I am finding that as soon as a row is created that has a normal item and an image only item in it, the textview is cutoff.
I have tried setting the min height and height of the items but it doesn't seem to affect the grid at all.
Grid:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#drawable/Background"
android:id="#+id/root_layout"
android:padding="10dip"
android:layout_height="match_parent">
<GridView
android:id="#+id/connection_grid"
android:listSelector="#android:color/transparent"
android:horizontalSpacing="25dip"
android:stretchMode="columnWidth"
android:verticalSpacing="25dip"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Grid Item:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="300dp">
<FrameLayout
android:id="#+id/screencap_layout"
android:layout_height="wrap_content"
android:background="#drawable/RowBorderBackground"
android:layout_width="wrap_content"
android:padding="1dip"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/connection_icon"
android:layout_width="200dip"
android:layout_height="147dip"
android:background="#drawable/grid_view_selector"
android:scaleType="centerCrop" />
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/devicetype_layout"
android:background="#drawable/RowBorderBackground"
android:layout_gravity="right|bottom"
android:layout_marginBottom="-2dip"
android:layout_marginRight="-2dip"
android:padding="2dip">
<TextView
android:text="NA"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/device_type" />
</RelativeLayout>
</FrameLayout>
<TextView
android:id="#+id/connection_name"
android:text="Machine 1"
android:gravity="center"
android:textSize="18dip"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
Set some paddingBottom to gridview gridview class.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#drawable/Background"
android:id="#+id/root_layout"
android:layout_height="match_parent">
<GridView
android:id="#+id/connection_grid"
android:listSelector="#android:color/transparent"
android:horizontalSpacing="25dip"
android:stretchMode="columnWidth"
android:verticalSpacing="25dip"
android:paddingBottom="20dip"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
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"