I am stuck somewhere... I am writing an app for logging behaviour observations of grazing cows. The idea is that at the bottom of the screen, I have fields with identification of the individual animals. To register an observation, that field is dragged to one of the fields at the top, i.e. drag 240 to Grazing to show that now is cow # 240 grazing.
The layout of the screen is build up using a number of linear layouts. Basically the layout is
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="250dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="100dp"
android:layout_height="150dp"
android:background="#drawable/shape">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:text="Grazing" />
</LinearLayout>
Then the linearlayout / textview pattern is repeated three more times at the top and a similar pattern is used at the bottom (the shown part of the xml is edited)
At the moment I am stuck at three different issues:
1) How can I divide the screen space at the top and the bottom equally between the four drag zones and drop zones, respectively? I have tried to use weight rather than fixed values for the width, but if I try that, the app crashes. - btw, the number of zones may vary slightly.
2) How do I get the text to center in the zones. When I search, I am told I have to use layout_gravity="center", but that does not work - as far as I understand the layout, that will put the textview in the center of the linearlayout - how do I then make sure that the text is in the middle of the textview?
3) Why are the bottom zones partially "falling off screen"? They are equal to the upper zones, exept that they are wrapped in a linearlayout with layout_gravity="bottom" - i believed that would cause them to have the bottom at the bottom of the screen..
(If it matters, I am doing development using Aide on my phone)
Divide the height in this manner. Here i have divided the height of the screen in 3 linearlayouts
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
For the first and third question you can use Fahim's answer, Using layout_weight is the solution.
If you want to use layout_wight for horizontal Linearlayouts android:layout_width must be "0dp" and for vertical layouts you need to set android:layout_height="0dp"
And if you want to set the text in the middle of the TextView you should set android:gravity="center". android:layout_gravity="center" will set the TextView in the center of its parent and has nothing to do with the text.
Related
I've been struggling with this problem for awhile now. Basically, I've created a class that returns me a properly stylized GraphicalView chart; I have one class for bar charts and another for pie charts (I used renderer.setInScroll(true) BTW). I populate my Activity with a few charts and a few TextViews, but the more I add Views (any View) they are pushed off the top of the screen and there is a big empty space at the bottom of the scroll view.
My XML:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scrollingProfilePaid"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/paidLayoutLinearParent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="00dp"
android:orientation="vertical">
<TextView
android:id="#+id/totalScore"
android:layout_width="wrap_content"
android:layout_height="350dp"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<LinearLayout
android:id="#+id/pastScoresChart"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:orientation="vertical"/>
<TextView
android:id="#+id/totalTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<TextView
android:id="#+id/totalAverageResponseTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<LinearLayout
android:id="#+id/pastTimesChart"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:orientation="vertical"/>
<!--...........-->
</LinearLayout>
</ScrollView>
What I've tried:
1.ScrollView->android:fillViewport="true"
2.Instead of specifying a height for the charts I set it in the java class using pastScoresChart.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, (int)(dens*350)));
3.Wrapping the ScrollView in a , using a child Relative Layout with android:alignParentTop="true" as the header, another child Relative Layout with android:alignParentBottom="true" as the footer, and changing the ScrollView to android:alignBelow="#id/header". This just made the Scrollview about 40px tall, seemingly making the problem worse.
4.Oodles of other things that I can't recall this second.
I've found a workaround of setting android:marginTop="500dp" (or a similarly large value) in the ScrollView will push the Views back down into their approximate respective positions. Unfortunately it is difficult to get it to fit exactly, and it worries me for device compatibliity. Any suggestions?
The empty space at the bottom of the ScrollView must be because of it's child (LinearLayout) attribute android:layout_gravity="center". Try to use like this:
<LinearLayout
android:id="#+id/paidLayoutLinearParent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
OBS 1: The android:layout_marginTop="00dp" attribute is unnecessary.
OBS 2: fill_parent is deprecated starting from API Level 8 and is replaced by match_parent. So, use match_parent. More on: http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html
OBS 3: Here is a tip about debugging layouts: change the background color of the views to see what are the bounds of each view.
Is there a way to limit how big a tablelayout/scroll view can get so that what ever view that comes after is not hidden?
For example, I have the following XML below an the first TextView and button are wrap contents so they will occupy a certain space. Now the Scroll/View table has its rows dynamically added ( and can get big or can be 0 rows). The last linearlayout has to be shown at all time. So Ideally I want the linearlayout to occupy 10% of the screen and whatever left (after the allocating the first Textview and button space) is allocated for tablelayout/scrollview.
Is there a way to do that? When the table is empty the linear layout should push up and not stay at the bottom of the screen. I have tried using weights but it seems I am just not getting it
<TextView ..../>
<Button ..../>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:shrinkColumns="*"
android:stretchColumns="*" >
</ScrollView>
<LinearLayout
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
... />
<TextView
... />
</LinearLayout>
you'll be surprised to know but it is just very simple.Just put your scrollview between the button and the linear layout. Use android:layout_below and android:layout_above to achieve this. Keep everything wrap_content.
I have spent hours trying to work this out, and spent a long time looking through other answers.
I'm evidently missing something simple, but really have been trying.
I cut my code down to the very basics to find the problem.
A layout has a backround, the top half of which is nice graphics, below the top half I am hoping to have the buttons.
The background is on the top, first linearlayout ( vertical ).
Then, inside this, are two vertical linear layouts.
The top vertical layout, has a weight of 1.
The bottom vertical layout, has a weight of 1.
This means to me, that the top layout should take up HALF of the screen. The buttons then going in the second layout should be ok to take up the rest of the screen.
However, when I start adding to the second layout, it no longer takes up half of the screen, but starts taking up space on the top half.
All I want to do, is to add four imagebuttons to the bottom half of the screen, centralised horizontally.
here is my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/menubackground"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<!-- Layout 1, the top half -->
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<!-- Layout 2, the bottom half, containing buttons -->
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:src="#drawable/playbtnimg" android:layout_weight="1"/>
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:src="#drawable/achievementsbtnimg" android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
Those two buttons, are now starting to take up around 2/3rd of the vertical space. They should not be going into the top half of the screen.
I'm trying to use layouts in this way so it will work on different screen sizes.
I would like the images to scale to fit within their linear layout cell, and not be cut off at the top of sides.
Any help is much appreciated.
Add a weightsum attribute to your root element ie the parent LinearLayout
here is what it would look like
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/menubackground"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="2"
android:orientation="vertical">
same would be for the LinearLayout having buttons
This would help further you can read more in android documentation
Try adding this code where you are using ImageButtons as backgrounds.
android:adjustViewBounds="true"
Fixed a similar issue I was having.
Hope it works and happy coding.
For many "header" TextViews across the pages I'm designing for a program, I would like them to be the parent.Width / 2 then properly aligned. While that would be fairly easy to code in the Java, I am attempting to do as much as possible in the XML layouts to avoid XML-Java code intersections until the last little bits (button presses, finish page, etc).
Do I have to go through each page and calculate every item's specific width myself or is there a way to put something along the lines of "fill_parent / 2"?
EDIT: Forgot to mention what is likely a key note - almost everything I am doing is in RelativeLayouts, I have very little use for LinearLayouts in this project.
If you have a LinearLayout that is flush to the left and right, you can do the following:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:gravity="left"
android:orientation="horizontal">
<TextView
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:text="I take up half the width!!!1" />
</LinearLayout>
By setting the weightSum on the parent, you're saying that the weights of the children should equal that amount. By setting the single child's weight to half of that, it'll take up half the space. Make sure to set the width of the child to 0 so it knows to use the weight value to calculate its space relative to its parent.
Then, you can align it however you'd like by setting gravity on the parent LinearLayout.
Use a tableview with two columns where each column is stretched and has a text view. Then hide the second textview
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1">
<TableRow>
<TextView android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Set Item Name "/>
<TextView android:id="#+id/hiddenTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="invisible"/>
</TableRow>
</TableLayout>
I am trying to setup an activity in Android that has 50% of the screen hight for a ScrollView and the other 50% for a ListView.
To do this I have set the weight of each to "1".
Like This:
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip">
<ScrollView android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1">
<TableLayout android:id="#+id/my_table"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:shrinkColumns="0">
<TableRow android:padding="5dip"
android:id="#+id/fault_heading"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/table_title"
android:paddingRight="20dip"/>
</TableRow>
<!-- More rows are added at run time. -->
</TableLayout>
</ScrollView>
<ListView android:id="#+id/comments"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"></ListView>
</LinearLayout>
When both the ScrollView and the ListView have too much content to display without scrolling this works perfectly.
When the ScrollView only needs 20% of the screen and the ListView needs 70% the ListView grows to 70% so it can display without scrolling. This is not what I expected to happen but is good.
The problem I have is when the ListView has so much data that it would need the whole screen to display AND the Scroll view only 1 or 2 rows of data in it. In this case the ListView grows to take up almost the full height and leaves space equivalent to about one line of text for the scroll view.
I can't seem to get my head around how to reserve a certain proportion of the screen for the ScrollView no matter how big the ListView gets.
The amount of space the ScrollView can grab seems directly proportional to the number of rows in it's child table. When this is only 1 the scroll view is only about half a cm in height.
What about changing android:layout_height for to be a minimum value instead of 0dip?
UPDATED: As per the comments below the solution was to set the outer LinearLayout to have height "fill_parent"
Use these parameters in the ListView section
android:layout_height="0dp"
android:layout_weight="1"