Getting Views to fit - android

I have a main.xml with a LinearLayout with three items inside, LinearLayout, ListView and LinearLayout. I would like the ListView to be as big as possible while keeping the bottom LinearLayout always showing and not shrunk or knocked off the screen.
I have tried making the ListView height fillparent, but then the bottom LinearLayout doesn't show up, same with wrapcontent, since the ListView has lots of content.
When I make the ListView a set size, say 300dp, I have space below the bottom LinearLayout. I tried to fix this by making the top level LinearLayout gravity=fill, but that didn't help.
Also, depending on the android I try it on, the bottom LinearLayout will drop off the screen, or get shrunk.
In case it's relevant, the top level LinearLayout is set to fillparent for height.
My goal is to keep the top and bottom LinearLayout to wrap their content, and the middle ListView fill what's left... any suggestions?
Thanks in advance for your efforts!

I believe you can just add android:layout_weight="1" to the ListView, with the ListView set to a height of fill_parent, and the two LinearLayouts set to wrap_content. Regardless, I usually prefer to use a RelativeLayout. You can specify the header to align to the top of the screen, the footer to align to the bottom, and the ListView to fill the space in between, like so:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
>
//...insert stuff here
</LinearLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
//...insert stuff here
</LinearLayout>
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/footer"
android:layout_below="#id/header"
/>
</RelativeLayout>

Related

Grow LinearLayout inside Scrollview for bigger phones on Android

I have a Scrollview for the complete screen, so in small phones you can scroll and see the complete form.
For big screen/hdpi phones, the screen has enough size so it fits.
The problem is that since its a LinearLayout, all views are at the top, and there is white space at the bottom.
I set the weight on one of the items items inside the linear layout, but it does not grow.
my code:
<ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
HEADER STUFF
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
THIS PART I NEED TO GROW AS MUCH AS POSSIBLE SO THE FOOTER IS AT THE BOTTOM OF THE PAGE.
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/LightBlue"
android:orientation="vertical"
android:paddingBottom="10dp" >
FOOTER STUFF. NEED THIS TO BE AT THE FOOTER IF THE PHONE IS BIG ENOUGH.
</RelativeLayout>
<LinearLayout>
</ScrollView>
Simple answer: In the LinearLayout, change android:layout_height="wrap_content" to android:layout_height="match_parent".
Reason: By wrapping the content, you aren't giving the middle RelativeLayout with the most weight a chance to grow and fill the white space. Changing it to match the parent height gives it its space to blossom, so to speak.
Also, per Indiandroid's comment, you may want to put the ScrollView inside the LinearLayout and around the middle RelativeLayout that hosts the content so that the header and footer are fixed.
EDIT: If you intend to stretch the middle RelativeLayout by using weight in the LinearLayout, you will, after applying my previous part about switching the height to match_parent, have to move to ScrollView inside the LinearLayout around the middle RelativeLayout or it will grow indefinitely. This is because the ScrollView has no vertical bounds and by matching it's height with the LinearLayout, the LinearLayout also has no bounds.

Adjust gridview between two views within a layout in android

In my application, I have a layout which includes a LinearLayout--> Top, GridView--> Middle and a set of views which should be aligned to the bottom.
1. Layout when gridview is not having much content
2. Layout when grid view contents are increased
3. Layout as how it should be shown when Gridview content is very large
Presently my gridview is expanding when the contents in it is increasing that the lower level contents are not visible in the screen.
I don't want to assign specific height to the grid view as it is looking weird in screens with different dimensions.
Is there any way that the gridview expands only upto the bottom views? My parent layout is LinearLayout. I have tried out with relative layout, but it is not working.
I too faced the same problem and found the solution by modifying the respective xmls as below:
Use RelativeLayout as Parent Layout.
Place the Header Content in RelativeLayout
Use ScrollView for the GridView which changes dynamically.
Place the Footer Layout after ScrollView
as shown below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/txtTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<ScrollView
android:id="#+id/scro1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/txtTextView" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<GridView
android:id="#+id/scro1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
android:layout_below attribute in ScrollView makes the difference.

Positioning ListViews inside FrameLayout

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.

Not able to see views on screen

My Login screen layout seems like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/login_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff">
<include
android:id="#+id/headerlayout"
layout="#layout/headerview"
android:layout_height="50dip"
android:layout_width="fill_parent" />
<ImageView
android:id="#+id/imgIcon"
android:src="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/txtUserName"
android:layout_width="fill_parent"
android:layout_height="80dip"
android:lines="1"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="16dip"
android:text="User Name"/>
</LinearLayout>
However I am not able to see ImageView and TextView. Only headerview is visible and white layout below it. Why is it so?
Thanks,
Stone
just add
android:orientation="vertical"
in your <LinearLayout> tag.
Edit:
By default the orientation is set to Horizontal means every component will be added horizontally, since you are using "fill_parent" to the header, so it covers all the place(width) and leave no room for other components to appear. So when you add vertical all components are placed vertically. So enough room is available for components to layout themselves.More detail here
Bydefault LinearLayout aligns all children in a single direction horizontally (if you dont specify android:orientation ) .
So here in your case it was adding views horizontally. Your header portion took full width of the screen (as you have specified android:layout_width="fill_parent" in include tag)and no space is left for that TextView and ImageView.
You just have to add orientation tag in LinearLayout and set its value to vertical.
ie android:orientation="vertical".
LinearLayout from Android Docs says
LinearLayout aligns all children in a single direction — vertically or horizontally, depending on how you define the orientation attribute. All children are stacked one after the other, so a vertical list will only have one child per row, no matter how wide they are, and a horizontal list will only be one row high (the height of the tallest child, plus padding). A LinearLayout respects margins between children and the gravity (right, center, or left alignment) of each child.

Buttons below ListView are not fixed to the bottom of the screen when the ListView is empty

I have a Layout which contains a ListView some buttons below it.
What I want is for the buttons to be fixed to the bottom of the screen.
When the ListView has several items (more than what fits the screen) the code is working properly and the buttons appear in the bottom of the screen.
However, when the ListView is empty or does not require scrolling, the buttons are coming up the screen (they are not staying fixed in the bottom).
Here's the layout (some details omitted but I can add them if necessary):
<LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView />
<ListView
android:width="fill_parent"
android:height="wrap_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal|bottom"
android:orientation="horizontal"
android:layout_weight="0" />
<Button
android:layout_weight="1" />
<Button
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
I expected setting the "gravity" of the second LinearLayout to "bottom" to make the buttons fixed to the bottom of the screen, but it's not working in the mentioned case.
Any ideas?
Thanks.
You have the layout_height of your top LinearLayout set to wrap_content. This means that it will shrink as its contents shrink. Try setting it to fill_parent instead. Or, give it a layout_weight of 1.
One of the options is to create TextView which will be shown instead of listview, when it is empty.
You do it with listView.setEmptyView(emptyView)
Then set layout_weight of this TextView to same weight as your listview. So when listview is empty, its place will be taken by emptyView and buttons will stay fixed at the bottom.
Also set your emptyView to android:gravity="center".
Other option:
In vertical RelativeLayout add to the layout with buttons property android:layout_alignParentBottom="true".
All the stuff with listView put inside LinearLayout and add to it android:layout_above="#+id/buttons_layout".
That's it. Elements inside LinearLayout will take their place depending on weight but whole layout wont go beyond buttons.

Categories

Resources