GridView item position - android

I have GridView:
<?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:cacheColorHint="#color/bg_default"
android:listSelector="#drawable/list_selector_background"
android:id="#+id/frag_books_grid_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnWidth="120px"
android:gravity="center"
android:horizontalSpacing="15dp"
android:scrollbars="none"
android:stretchMode="columnWidth"
/>
</LinearLayout>
And single item (placed in cell of this grid):
<ListView
xmlns:android="http://schemas.android.com/apk/res/android"
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:padding="15dp"
android:id="#+id/frag_book_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:verticalSpacing="5dp"/>
How it looks: http://i.imgur.com/rhZiu.png
Everything is fine with blue selection, but the contents of the cell is not centered inside of it.
This picture explains what I want: http://i.imgur.com/OumWu.png

Besides it's not recommended to have nested scrollable components, you have the dimensions of list view set to match_parent. So it's not possible to center, since it's already occupying all available space.
If you want to center, you first have make the listView smaller (setting fixed size). And then use gravity="center" on the container. You also can apply a uniform padding to the container, this will also make the listView look centered.

Related

Unable to add TextView into main xml Layout

I've been working on an app and am looking to adding a text view below the Camera view so that I could display some text there.
But, for some reason when trying to drag a text view into the layout it doesn't show up on the final screen.
This is my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
</LinearLayout>
Layout view com.google.android.CameraSourcePreview height is set as 'match_parent' , so its eating up all the space on the view-port.
Try giving particular height and you should be able to see textview added below CameraSourcePreview.
Hope it helps.
Most likely, you're not able to add the TextView due to there not being enough space on the screen.
You're using a LinearLayout which displays all of it's views one after the other in either a vertical or horizontal manner.
Your CameraSourcePreview has it's height and width set to match_parent, which means it'll stretch completely on the screen. However, in a LinearLayout, this also means that there's no space to place the next View because it'll be placed off the screen.
You can add android:layout_weight="1" to your CameraSourcePreview. This will allow your TextView to fit into the LinearLayout because it's basically your CameraSourcePreview telling others it'll resize itself to allow for other components to fit on the screen.
But if you don't want your CameraSourcePreview to resize itself based on other Views, then you should look into using some other Layouts instead of LinearLayout. Perhaps one such as ConstraintLayout or RelativeLayout will work better, since they allow overlapping Views on top of each other.
This is happening because the height of the camera view is taking the whole space on the display you can use layout_weight for LinearLayout to make some necessary space for your TextView.
Just make height of CameraSourcePreview equals to 0dp and add a property
android:layout_weight="1"
So this it would look like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
android:orientation="vertical">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="some text here" />
</LinearLayout>
Instead of using LinearLayout I suggest to use FrameLayout which is easy to control for your case. It is also possible to display textView on CameraSourcePreview by using following code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_gravity ="center">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="some text here"
android:layout_gravity ="center|bottom" />
</FrameLayout>

How to make a DialogFragment wrap its content and align a view to the bottom at the same time?

I would like to build a DialogFragment which contains a ListView and a bottom View (holding some buttons).
The ListView can show a variable number of items and thus has a variable height.
The bottom View has fixed height.
This is the 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="wrap_content"
android:orientation="vertical">
<ListView
android:id="#+id/myListView"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
<!-- Any kind of view. e.g. Button... -->
<View
android:id="#+id/myBottomView"
android:layout_width="match_parent"
android:layout_height="50dp" >
</View>
</LinearLayout>
Using a LinearLayout works fines as long as the ListView contains only a few items and the total height of the dialog is not larger than the screen size. In this case the dialog automatically wraps its content and is only as height as it needs to be be.
However, when the ListView contains a large number of items and the size exceeds the screensize, the dialog is automatically adjusted to its max height and the bottom view is not visible anymore.
This can be solved by using a RelativeLayout as root instead:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ListView
android:id="#+id/myListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/myBottomView" >
</ListView>
<!-- Any kind of view. e.g. Button... -->
<View
android:id="#+id/myBottomView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true" >
</View>
</RelativeLayout>
This solves the problem described before: The bottom view is always visible at the bottom, no matter how hight the ListView is. However, now the dialog always occupies its max. height and is not adjusted to the actual height of the ListView?
So each layouts solve one part of the problem but not both. How do I get both automatic sizing and bottom layout at the bottom at the same time?
EDIT:
Just need android:layout_weight="1" for ListView .
So your layout should look something like 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="wrap_content"
android:orientation="vertical">
<ListView
android:layout_weight="1" <!-- this will force listview to expand according to it's height.. -->
android:id="#+id/myListView"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
<View
android:id="#+id/myBottomView"
android:layout_width="match_parent"
android:layout_height="50dp" >
</View>
</LinearLayout>

Center ListView horizontally

As easy as it seems to be, as stubbornly this ListView won't center itself (or it's content within - doesn't matter to me).
This is activity layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.drobiazko.den.mobineon.MainActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
android:background="#drawable/bg">
<RelativeLayout android:id="#+id/clock_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!--<RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_dark">-->
<com.drobiazko.den.mobineon.ListViewRowsHeight
android:id="#+id/listview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:overScrollMode="never"
android:scrollbars="none"
android:divider="#null"
android:listSelector="#android:color/transparent"
android:persistentDrawingCache="scrolling|animation"
android:background="#android:color/holo_green_dark" />
<!--</RelativeLayout>-->
</LinearLayout>
This is ListView's item layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/btn_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/custom_btn_icon" />
<TextView android:id="#+id/btn_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/custom_btn_name" />
<TextView android:id="#+id/btn_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/custom_btn_count" />
</RelativeLayout>
I've tried everything (including simplifying layout to max), but it still won't go.
Funny that the first relative layout clock_container - centers like a charm, due to parent LinearLayout's android:gravity="center_horizontal". Why won't ListView?
Added later:
Inspired by FOliveira's answer, I've done some investigation and found that:
everything works fine, parent LinearLayout has android:gravity="center_horizontal" and centers his children respectfully. The reason for ListView's children are left-aligned is that ListView takes all possible width despite his android:layout_width="wrap_content" attribute.
Anyone knows why is that?
First of all , i would remove the first linear layout and stay only with the relative layout as the parent.
After having the relative layout as the main parent , set the CENTER_IN_PARENT attribute to true.
The mistake you are making is that you are setting the gravity of Linear Layout child to center horizontal, which is correct, but the only children being affected by this option is the Relative layout itself.

How to make several RelativeLayouts each occupying a potion of the screen?

I want to have a relative layout inside another full-screen relative layout, occupying full width but 50% of its parent's height, preferably done with XML and not java code.
I have figured out how how to align parent's center, and how to fill up the width, but is there a way to get 50% of parent's height? What about 30%? 6.2834%?
<?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">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="??????????"
android:layout_centerInParent="true" >
The reason I'm trying to do percentage is that, if I specify it with "dip", while the object will remain the same size, the layout will look a lot different on different screen sizes (e.g. a phone and a tablet).
EDIT:
Thank you for all the answers about using LinearLayout and weighting. I have looked at that before, too. I feel I might have over-simplified the problem. Say I need something like this:
I suppose I could use complicated LinearLayout and weighting to outline the center square, then having the center square to fill_parent, like so:
But then what should I do with the other 3 squares (layouts)? Can I have another "layer" of LinearLayout for another square? Or should I divide up the whole screen into many, many small cells and having these sublayouts span over multiple cells (not sure if this is even possible)?
Try to use LinearLayout with weightSum
<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:weightSum="2"
android:gravity="center_vertical"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FF0000">
</RelativeLayout>
</LinearLayout>
If you don't absolutely need it nested in one RelativeLayout you can use weight in a LinearLayout as others have pointed out. I just added in an additional RelativeLayout above and below so you can use the rest of the screen if you are trying to. If not, just remove the other RelativeLayouts.
<?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:id="#+id/ParentLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10" >
<RelativeLayout
android:id="#+id/RelativeLayoutTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2.5"
android:background="#color/torange" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/RelativeLayoutMid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="5"
android:background="#color/tpurple"
android:padding="8dp" >
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/describe"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/RelativeLayoutBottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2.5"
android:background="#color/torange" >
</RelativeLayout>
I usually go with a LinearLayout for this and set the weight to a certain percentage :
<?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="vertical">
<View
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="25"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="50">
</RelativeLayout>
<View
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="25"/>
</LinearLayout>
To your edit:
At some point you need to determine the layout. Start by taking the layout in groups. Look for patterns. In your simple explanation we have devised a way using a linearlayout to group 3 objects with one in the middle. With your new layout, could you group those items in any way?
Once you have simple layout patterns set, maybe add specific spacing that you are looking for by defining weights. Then you might want to add a relative layout and start anchoring views to specific views. Ask yourself do they overlap? Does one view always position on top of other views or on the sides. What defines the bounds of your views and then take it from there using linear layouts, weights, relative layouts, toLeftOf, toRightOf, bellow, above, margins, and padding.
Here is an example of what I mean by grouping like objects. It's by no means the best solutions but that all depends on how you define the positioning parameters.
Yellow = vertical linear layout
Green = horizontal linear layouts
You have 1 large vertical layout and inside two horizontal layouts with multiple objects inside of that. From there you can break it down into easier to manage portions on how to arrange and item within that layout. Now with relative layouts you could position items relative to another object, you could remove some of the work handled by the linear layouts but you will then be defining their distance relative to the other objects and might have to fiddle to get the layout to adjust properly on different screen sizes (reason to not use static positioning).
Maybe try using a LinearLayout with 3 layouts inside with android:layout_weight set to 1, 2, 1.
<?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="vertical" >
<RelativeLayout
android:background="#FF0000"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dip" >
</RelativeLayout>
<RelativeLayout
android:background="#00FF00"
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="0dip" >
</RelativeLayout>
<RelativeLayout
android:background="#FF0000"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dip" >
</RelativeLayout>
</LinearLayout>
RelativeLayout does not support percentage of width and height for children. Use LinearLayout with android:layout_weight attribute.

How can I set the height of GridView cell based on screen height?

In my layout I have only eight cells.
I want the cell divide all the space available on the screen. Is this possible?
This is my gridview layout:
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dataGrid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10px"
android:verticalSpacing="10px"
android:horizontalSpacing="10px"
android:numColumns="2"
android:gravity="fill" />
And this is the item layout:
<?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:padding="6dip" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#E00000"
android:textStyle="bold"
android:gravity="left"
android:textSize="16dip"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#000000"
android:textStyle="normal"
android:gravity="right"
android:textSize="12dip"/>
</LinearLayout>
</TableRow>
</LinearLayout>
Unfortunately, GridView is a tricky layout to manipulate to get internal views to fit a specific size like you are attempting. I think it is more appropriate to think of GridView as an advanced ListView for showing variable-length, scrollable lists like thumbnails in a photo album, as opposed to a "grid." I started down this route when I originally wanted to make a fixed sized grid for a game, but it is really not an appropriate layout for that at all.
Since your grid is always 8 cells, might I suggest using nested LinearLayouts (or if you don't want all the cells exactly the same size, the more complex TableLayout / TableRow combo) instead:
<?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="vertical"
android:weightSum="1.0" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0.5"
android:orientation="horizontal"
android:weightSum="1.0" >
<!-- Drop in 4 items here with layout_weight of 0.25 -->
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0.5"
android:orientation="horizontal"
android:weightSum="1.0" >
<!-- Drop in 4 items here with layout weight of 0.25 -->
</LinearLayout >
</LinearLayout >
This would make a fixed 2x4 grid that always exactly fills the screen.
First, Use PS instead of PX. This will should allow it to scale to different DPI devices.
Second, to get each cell to be even size you could put a tableView in each cell that contains a clear image. Set the size of the image with PS (not px). The table view should allow you to layer the layout ojects in each cell and the clear graphic should keep all of the cells the same size.
I would also remove any padding.
Let us know.
You should try [android:stretchMode][1]
[1]: http://developer.android.com/reference/android/widget/GridView.html#attr_android:stretchMode : Defines how columns should stretch to fill the available empty space, if any.

Categories

Resources