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.
Related
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.
Does anyone know how to show multiple files in one XML file? This is like having a pane with two ListViews, one on the left and one on the right. I tried to set one ListView's android:gravity to the left and the other to the right. I have also tried using LinearLayout and creating two RelativeLayouts on it but it still doesn't do anything.
Any links, comments, suggestions or sample codes are much appreciated...
Use a relative layout. Then have the left one align to the parent's left edge, and the right one layout_toRightOf the left list.
Simple side by side layout with each view taking up half the screen
<?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="horizontal" >
<ListView
android:id="#+id/list1"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1" />
<ListView
android:id="#+id/list2"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
i made a simple test for an android app to ScrollView a TextView, almost there are no errors but i get a Warning ( This ScrollView layout or its LinearLayout parent is useless) and i dont know what to do . i wish i get your help
here is the code:
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<ScrollView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_weight="1">
<TextView android:id="#+id/TextView01" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hi"/>
</ScrollView>
</LinearLayout>
Take a second to think about it! If the linear layout takes up all the space it could take up (say 200x400 pixels), then the Scroll view takes up as much space as the linear layout can take up (200x400 pixels), then your linear layout has just become useless! (in theory)
Try to add more stuff after you scroll view -- this may make your warning go away
should be the top most parent... Remove your LinearLayout from top ant you are done.
First off, this is not a duplicate question, to best of my ability I've tried all (there are many) similar questions. Solutions to such problems appear to be very subjective, specific to a given scenario.
My layout currently appears as follows. Black boxes are images (logo and body, respectively), colours represent each layout:
My 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:background="#000"
android:padding="0px"
android:layout_margin="0px"
android:orientation="vertical">
<LinearLayout
android:layout_weight="16"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
android:gravity="top|center"
android:orientation="horizontal">
<ImageView
android:id="#+id/logo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/logo"
android:layout_gravity="top|center" />
</LinearLayout>
<LinearLayout
android:layout_weight="4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00F"
android:gravity="bottom|left"
android:orientation="vertical">
<ImageView
android:id="#+id/body"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/body"
android:layout_gravity="bottom|left" />
</LinearLayout>
</LinearLayout>
Here you can see I have a parent linear layout, split into two children linear layouts. This is because I need the images to be positioned differently within that part of the page.
In a nutshell, I need logo to be vertically aligned to the top, and body horizontally aligned to bottom-left.
Now, a few things that I've tried:
Using RelativeLayout rather than Linear
Switching gravity with layout_gravity for both LinearLayout and ImageView, along with combinations of excluding each
Fairly confident match_parent for width and height is what I want, but I have tried different combinations with wrap_content
What I've come to understand:
gravity:top requires the parent view use orientation:horizontal
gravity:left requires the parent view use orientation:vertical
gravity applies to the children of the view
linear_gravity applies how the child aligns with it's parent
Using the same value for gravity on the parent and linear_gravity on the child might have the same effect (when using one instead of the other)?
Hopefully this is enough information. I'm having a very difficult time wrapping my head around how these layouts work.
Thank you SO much for the help!
I think your problem is you are setting dimensions of the image views to match_parent. I would use a RelativeLayout as it seems to be the most efficient in your case (pseudo-XML-code):
RelativeLayout (width=match_parent, height=match_parent)
ImageView (width=wrap_content, height=wrap_content,
alignParentTop=true, centerHorizontal=true)
ImageView (width=wrap_content, height=wrap_content,
alignParentBottom=true, alignParentLeft=true)
You don't need any gravity setting here. You might want to play with the scaleType attribute depending on your image sizes.
So I'm trying to create a screen which has a ListView and over that I need to be able to float another custom horizontal ListView, right at the bottom edge of the screen. When the user scrolls on the vertical listview, the horizontal one would go invisible and reappear when the scrolling stops. I figured FrameLayout would be my best bet for overlapping views. But I can't seem to make this work. The Horizontal listview seems to occupy the whole screen space. Any ideas? Is this even the right approach? I wish to have something similar to a fixed div in HTML.
Here's my XML:
UPDATE-1: Used RelativeLayout as suggested, but still a no-go. The HorizontalListView still seems to be occupying the whole screen. I'm using the HorizintalListView from here
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView
android:id="#+id/messages"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="5dip" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<test.ui.app.HorizontalListView
android:id="#+id/folders"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF" />
</RelativeLayout>
</RelativeLayout>
I got it to work by setting the height of the inner Relative Layout myself instead of using 'wrap_content'.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView
android:id="#+id/messages"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="80dip"
android:layout_alignParentBottom="true" >
<test.ui.app.HorizontalListView
android:id="#+id/folders"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF" />
</RelativeLayout>
</RelativeLayout>
You cannot adjust the views inaide FrameLayout.So it will be better for you to go for RelativeLayout.
Or you can put your listviews inside RelativeLayout or linearlayout and then you can adjust.
Hope this will help you. :)
Like the other answerer said, you could use a RelativeLayout:
set android:layout_alignParentLeft|Right|Top|Bottom="true" for the vertical list view
set android:layout_alignParentLeft|Right|Bottom="true" for the horizontal list view (and height to "wrap_content" or fixed size)
Or if you reeeeaaaally want to stick with FrameLayout (maybe for performance reasons...), you could somply add a huge android:layout_marginTop to the horizontal list view. But this solution is uglier, since you need to set exact values. For example if the whole screen is 320dp height, and you want the horizontal list view to be 80dp height, you need to set the top margin to 240dp. However if you run this on a screen with different aspect ratio, the horizontal list view will be ugly.