I'm stuck on something that is probably simple but I just can't seem to figure it out. An example of what I'm looking for is a screen with 4 buttons. One taking the entire top left quadrant, the 2nd taking the entire top right quadrant, the 3rd taking the entire bottom left quadrant and the 4th taking the entire bottom right quadrant. The end result would be that the 4 buttons fill the entire screen.
I seem to be able to equally stretch objects to fill the width of the screen or I can stretch objects to fill the height. What I can't seem to figure out is how to stretch the width and height at the same time.
Any help with this would be greatly appreciated.
I imagine you're trying to do this with one LinearLayout. I would probably just use two LinearLayouts to handle it. Something like:
<?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" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1">
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1">
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
Just tested that and it definitely works. LINT says nesting weights is bad for performance, but it definitely has the right layout.
Related
Hi I have found weird behaviour when trying to implement the following layout on android.
<?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:orientation="horizontal" >
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:orientation="horizontal" >
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="15dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:layout_margin="20dp"
android:textColor="#android:color/black"
android:lineSpacingMultiplier="1.1" />
</LinearLayout>
</LinearLayout>
This piece of layout is supposed to generate a textview on the right that takes up 75% of the screen. But for some reason the height of the Textview is calculated as if the weight of its parent is 0. The text inside the view seems to wrap perfectly, but not the view itself.
Is this normal behaviour or how can I get the textview to display the correct height?
Firstly please indent your code properly so it is easy to read. You can do that automagically in the XML editor by pressing Ctrl + Shift + F.
Secondly if you want the LinearLayouts to be 25% wide and 75% wide but fill the whole height of the screen then you need
android:layout_height="match_parent"
Thirdly, if you want the TextView to take up 75% of the screen, then why not just assign the weight directly to that and not have it wrapped in another LinearLayout?
Lastly, with weights you dont need to make the children weights add to 1. Having
android:layout_weight="1"
and
android:layout_weight="3"
is also ok.
I'm quite new in Android, so it'll probably be a stupid question, but here it goes.
I have a RelativeLayout of Activity. In this layout I have another Layout at bottom of a screen. Sometimes I hide it or make it visible, this matters not. Is it possible to make the another layout's height lets say 27% of total screen height? The idea is to keep the other content, except this layout on screen.
Have anyone tried something like this?
LinearLayout can handle this via android:layout_weight. For example, here is a layout containing three Button widgets, taking up 50%, 30%, and 20% of the height, respectively:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<Button
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="50"
android:text="#string/fifty_percent"/>
<Button
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="30"
android:text="#string/thirty_percent"/>
<Button
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="20"
android:text="#string/twenty_percent"/>
</LinearLayout>
However, you cannot simply declare that an arbitrary widget at an arbitrary point in your layout file should take up an arbitrary percentage of the screen size. You are welcome to perform that calculation in Java and adjust your widget's LayoutParams as necessary, though.
you can try this, is more complexe but useful.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/parent_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name" />
<LinearLayout
android:id="#+id/parent_of_bottom_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true" >
<LinearLayout
android:id="#+id/content_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="27">
//Add your content here
</LinearLayout>
</LinearLayout>
I'm having trouble figuring out why my image isn't within the bounds of my imageview. Instead, it is floating off to the left and hidden. Is this only because the Graphical Interface doesn't show it?
EDIT:
I edited the original code to more clearly show the issue i'm having and added a picture(i want the image to show in the red box):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/top_container"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
>
<View
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="195"
android:background="#00FF00"/>
<ImageView
android:id="#+id/img"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ff0000"
android:src="#drawable/img" />
<View
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:background="#0000FF"
/>
</LinearLayout>
</LinearLayout>
Ok I have it working. The height attribute of "block_container" is set to a random 200dp you WILL want to change the height to whatever your needs are, or potentially set it to "wrap_content". I tested this on emulator and device.
I am also assuming that you want all three block to be equally spaced. Notice how the parent "block_container" has a weight_sum of 9? Well the children are equal widths because they have a weight of 3 each (3 blocks * 3 weight each = 9 weight total).
I noticed before it looks like you were trying to use weight as width directly e.g. a weight of 569. Just remember weight != width directly.
EDIT: added the missing id attributes from some of the views
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/top_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/block_container"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:orientation="horizontal"
android:weightSum="9"
>
<View
android:id="#+id/left_block"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:background="#00FF00"/>
<ImageView
android:id="#+id/img"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:background="#ff0000"
android:src="#drawable/logo" />
<View
android:id="#+id/right_block"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:background="#0000FF"
/>
</LinearLayout>
</LinearLayout>
Why are you setting android:layout_height to be 0dp? I can't even get it to display unless I change this to something like fill_parent.
Either way, its because of your layout_weight for the parent LinearLayout. Specify a larger layout_weight for your ImageView and it will come into view.
<ImageView
android:id="#+id/my_img"
android:gravity="center"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="279"
android:src="#drawable/my_img" />
This worked for me.. but math might not be right.
I don't know where to begin with the issues with what you posted, some simple observations before even debugging further:
Your layouts ALL need ids (e.g. android:id="#+id/another_layout")
You have a width on the second linear layout of 0dp
Your first linear layout has a height of 0 dp, combined with the previous I'm surprised it renders at all
The last inner linear layout again has a width of 0dp
What are you trying to achieve? To me there seems to be a lot of layouts unless you have removed some elements to make it easier to understand? You could post a simple image of what you are trying to do then perhaps we can help you refine the markup?
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.
I am trying to draw some boxes in my activity, which will contain other layout elements, in XML. I want to do this using the relative dimensions, e.g. specify half of the height of the screen for each box. I understand that the correct way to do this is to set the initial height to 0px and use layout_weight, but I can't get the following example to work. I am expecting it to draw two identical rectangles (defined in /drawable/rect) in different vertical halves of the screen, but the screen is blank:
<?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:src="#drawable/rect"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:scaleType="fitXY"
android:layout_width="fill_parent"
android:layout_height="0px"
android:layout_weight="1"/>
<ImageView
android:src="#drawable/rect"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_width="fill_parent"
android:scaleType="fitXY"
android:layout_height="0px"
android:layout_weight="1"/>
</RelativeLayout>
Does anyone have any ideas?
Why is it?
android:layout_height="0px"
That makes the rectangles to have zero height, which might explain why they don't show up.