I am trying to assign relative widths to columns in a ListView that is in a TabHost, using layout_weight as suggested here:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableLayout
android:id="#+id/triplist"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="4px">
<TableRow>
<ListView android:id="#+id/triplistview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</TableRow>
<TableRow>
<Button android:id="#+id/newtripbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Trip"/>
</TableRow>
[other tabs ...]
My row definition has 4 columns that I would like to size as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1.0"
android:padding="4px">
<TextView android:id="#+id/rowtripdate"
android:layout_weight=".2"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:inputType="date"/>
<TextView android:id="#+id/rowodostart"
android:layout_weight=".2"
android:layout_width="0dip"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/rowodoend"
android:layout_weight=".2"
android:layout_width="0dip"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/rowcomment"
android:layout_weight=".4"
android:layout_width="0dip"
android:layout_height="wrap_content">
Unfortunately, it seems to want to fit all the columns into the space that the button occupies, as opposed to the width of the screen. Or maybe there is another constraint that I do not understand. I'd appreciate your help.
(source: heeroz.com)
I think I forgot this property for the TableLayout element:
android:stretchColumns="0"
It appears to be working now.
I don't see anything obviously wrong in what you are showing there. To get a better picture of what is going on, you might try out the heirarchy viewer. It comes with the SDK. It will visualize for you how much space each of the "hidden" layers is taking, so you can figure out which one decided to only be that big.
Related
It's pritty hard to explain what I like to have. In my Layout I got a horizontal LinearLayout.
Now I'd like to know if its possible to create a thin border around it. For example take a look at the ListView, there it also haves those thin borders, I exactly like to have that in my LinearLayout.
I hope you understood me, if you need more information write a comment below.
Thx in advance
safari
Additional Information:
If you take a look at the screenshot you see there those redlines, exactly there i'd like to have those thin borders, like in my Listview up there! Under the screenshot you also find the code of the layout.
Code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="450dp"
android:layout_weight="1" />
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#android:id/tabcontent"
android:visibility="invisible" />
<LinearLayout
android:id="#+id/SmileyContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#android:id/tabcontent"
android:layout_weight="1" >
<TableRow
android:id="#+id/GoStartseite"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:onClick="onClickGoStartseite"
android:gravity="center"
android:layout_weight="0.6" >
<TextView
style="#style/SmallFont"
android:text="#string/gostartseite" />
</TableRow>
<TableRow
android:id="#+id/SmileyOverview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:onClick="onClickSmileyConfig"
android:gravity="center"
android:layout_weight="0.4" >
<TextView
style="#style/SmallFont"
android:text="#string/newfilter"/>
</TableRow>
</LinearLayout>
</RelativeLayout>
</TabHost>
</FrameLayout>
What I understood from your question is that it actually might require setting the background of your layout.
This can be done by creating your own border.xml. Here is somewhat similar question answering what you need.
if all you need is to create a border then take a parentView , set background by border color ,set pading by border thikness , then add child inside with foreground as its background .
I would like to make the following layout, see picture below, where the place of the EditText views stay correct positioned w.r.t. the arrows.
The layout below I've made with a RelativeLayout making use of margins, but this doesn't work when someone installs this app on a 540x960 resolution phone like the HTC sensations.
Thanks in advance for your help!
Valid XHTML http://www.tricky.dds.nl/gui.png.
Use a combination of LinearLayout and RelativeLayout. With LinearLayout you can create spaces on the screen that will be exactly alike on all devices. Let your top level container be a LinearLayout. For instance, to create the second row in the image you reffered to, do something like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
</TextView>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
</TextView>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</RelativeLayout>
</LinearLayout>
I have this layout file in my android application:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:id="#+id/textview1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is a tab" />
<TextView
android:id="#+id/textview2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is another tab" />
<LinearLayout
android:id="#+id/layoutSearch"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textview4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Search here" />
<EditText
android:id="#+id/editSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>
</TabHost>
My problem is that LinearLayout android:id="#+id/layoutSearch" shows only one of the elements it contains (the text view, in the code above) If I remove the textview, it shows the EditText.
How do I make it display both (and more) elements?
There's a lot of excess layout there, but it looks like the real issue is that layoutSearch is a vertical LinearLayout with two children, but the first child's height is set to fill_parent, so you naturally never see the second one. Try setting its height to 0px but giving it a layout_weight of 1, and it should expand to take all the available space not taken by the EditText below it.
In Android, I'm trying to basically create a table with 2 rows, where 1 row is say 10 pixels, and the other takes the rest of the screen. In silverlight, this is equivalent of a table with 2 rows, one on "Auto" and the other set to "*".
Is there any way to do this? I have been playing with the layout weight, but this is always a percentage, and I would like 1 row to be fixed size (wrap_content basically).
Any ideas?
edit:
I tried what was suggested, but it'snot working.. So I want the first row to take up the entire space, except what row 2 took up. Row 2 consists of 2 buttons side by side, Row 1 is just a ListView. Here is what I have:
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="1" android:background="#FF0000">
<ListView android:id="#+id/edit_group_listView"
android:layout_width="fill_parent" android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="0" android:background="#FFFF00">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="50dip" android:stretchColumns="2">
<TableRow>
<Button android:text="#string/button_save" android:id="#+id/edit_group_save"
android:layout_width="150dip" android:layout_height="50dip"
android:enabled="false" android:layout_column="1"></Button>
<Button android:text="#string/button_cancel" android:id="#+id/edit_group_cancel"
android:layout_width="150dip" android:layout_height="50dip"
android:layout_column="3"></Button>
</TableRow>
</TableLayout>
</LinearLayout>
When I view this all I see is the yellow linearlayout (the buttons), no listview at all. The listview has 50 items, and I can confirm it's visible by taking it out of this setup.
Yep, easy actually.
First cell must have the weight of 0. Second cell must have the weight of 1 and fill the parent by width. That way it will take up the remaning space within the container it's in.
Easy! Here's an example for your convenience
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="0" android:background="#FF0000">
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="SomeText" android:id="#+id/theview"/>
</LinearLayout>
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:background="#FFFF00">
</LinearLayout>
</LinearLayout>
=======================================
UPDATE
Mate you overcomplicated it like Crayze!
First. You don't need a table layout for that.
Second the problem is you set both heights of the layout to fill_parrent. So they are both fighting over for the screen size. To fix this you just have to set both the layout sizes to wrap_content. That will work just fine. Here have an example, without the table on your code.
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="1" android:background="#FF0000">
<ListView android:id="#+id/edit_group_listView"
android:layout_width="fill_parent" android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="0" android:background="#FFFF00">
<Button android:text="#string/button_save" android:id="#+id/edit_group_save"
android:layout_width="150dip" android:layout_height="50dip"
android:enabled="false" android:layout_column="1"></Button>
<Button android:text="#string/button_cancel" android:id="#+id/edit_group_cancel"
android:layout_width="150dip" android:layout_height="50dip"
android:layout_column="3"></Button>
</LinearLayout>
Use layout weight and set the fixed one to be 0, and the other one to be any number.
Okay so actually I figured this out by reviewing what Taranasus wrote, which was accurate to a degree.
This is the final XML that worked:
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="1" android:background="#FF0000">
<ListView android:id="#+id/edit_group_listView"
android:layout_width="fill_parent" android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="0" android:background="#FFFF00">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="50dip" android:stretchColumns="2">
<TableRow>
<Button android:text="#string/button_save" android:id="#+id/edit_group_save"
android:layout_width="150dip" android:layout_height="50dip"
android:enabled="false" android:layout_column="1"></Button>
<Button android:text="#string/button_cancel" android:id="#+id/edit_group_cancel"
android:layout_width="150dip" android:layout_height="50dip"
android:layout_column="3"></Button>
</TableRow>
</TableLayout>
</LinearLayout>
This site also helped: http://www.curious-creature.org/2009/02/22/android-layout-tricks-1/
The problems were that:
1. The orientation had to be "vertical", which actually doesn't make sense according to the docs.
2. The second row (the fixed one) has to have a height of wrap_content, which also doesn't make sense since Google docs about weight specifically say both elements should be fill_parent.
I've been toying around with a lot of different layout structures and can't seem to find the best one for my solution.
Essentially I need 3 rows that each take up 33% (height) of the device (in landscape mode). I thought would be perfect, but I can't seem to find a way to specify the height of a . It's possible I've overlooked a property somewhere, but I can't find it in the docs. I also thought of as an option but after playing around with that for a bit, I'm not sure that's the best solution either.
Can accomplish what I need? I will have other layouts specified within my rows (RelativeLayout primarily), but I just need the core structure to be 3 rows of 33% height each.
EDIT - Added Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rellay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/table_background">
<LinearLayout
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/connect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Connect To Server" />
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:maxLines="6"
android:textColor="#FFFFFF" />
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<RelativeLayout
android:id="#+id/cardssection"
android:layout_column="1" />
<Button
android:id="#+id/submitcards"
android:gravity="right"
android:maxWidth="10px"
android:text="Submit Cards"
android:layout_below="#id/label" />
</TableRow>
</TableLayout>
</LinearLayout>
</LinearLayout>
Take a look here How to split the screen with two equal LinearLayouts?. You just need add one more row to the solution. Note android:orientation="vertical" at the top-level LinearLayout.