I have a table layout inside a linear layout
after inflating 3 buttons in the table row the last button go off screen
I mean the 3 buttons don't fit the screen width
what should i do?
here is the code
<TableLayout
android:id="#+id/buttonTableLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:stretchColumns="0,1,2"
android:layout_weight="1">
<TableRow
android:id="#+id/tableRow0"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TableRow>
</TableLayout>
The TableRow doesn't check if it's content fit the Screen Size. I guess your Buttons take all of the Space and therefore the last Buttons is outside of the Screen.
I can think of 2 Solutions for this issue:
Use a LinearLayout with weights for each Button:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_weight="1.0" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_weight="1.0" />
</LinearLayout>
You can do this programmatically too of course.
More about weights can be found here: https://developer.android.com/guide/topics/ui/layout/linear.html
Use a Flow-Layout. It automatically checks if your Views fit in the current line and places them in the next if there is not enough space. A good Open Source Library I use myself is this one: https://github.com/ApmeM/android-flowlayout
Related
I have a layout with 6 included layouts in a TableLayout. I want to do this in landscape mode, because a ScrollView would be awkward in my scenario.
I have a 48dp-high horizontal layout, which contains a square ImageView, a SeekBar with full weight, and a square ImageButton. I set the drawables for the ImageView in Java.
In the main layout, I use an include for each one and I am trying to even out the columns, because they only take up half the screen, by the way this is an activity with Theme.Holo.Dialog as its theme.
However, when I run the app, I get a 40-60% unbalanced view. Why? What am I doing wrong?
Part of layout-land/main.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
... >
...
<TableLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:stretchColumns="1"
android:layout_height="wrap_content">
<TableRow android:layout_width="match_parent" android:layout_height="wrap_content">
<include android:layout_weight="1" layout="#layout/toast_item" android:id="#+id/systemToast"/>
<include android:layout_weight="1" layout="#layout/toast_item" android:id="#+id/ringerToast"/>
</TableRow>
<TableRow android:layout_width="match_parent" android:layout_height="wrap_content">
<include android:layout_weight="1" layout="#layout/toast_item" android:id="#+id/notifyToast"/>
<include android:layout_weight="1" layout="#layout/toast_item" android:id="#+id/mediaToast"/>
</TableRow>
<TableRow android:layout_width="match_parent" android:layout_height="wrap_content">
<include android:layout_weight="1" layout="#layout/toast_item" android:id="#+id/alarmToast"/>
<include android:layout_weight="1" layout="#layout/toast_item" android:id="#+id/inCallToast"/>
</TableRow>
</TableLayout>
...
</LinearLayout>
layout-land/toast_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:orientation="horizontal"
android:gravity="center_vertical">
<ImageView
android:id="#+id/icon"
android:src="#drawable/ic_audio_alarm"
android:layout_width="48dp"
android:layout_height="48dp"
android:scaleType="center"
android:clickable="false"
android:layout_weight="0"/>
<SeekBar
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:layout_marginLeft="4dp"
android:maxHeight="1000dp"
android:layout_marginRight="4dp"
android:id="#+id/seekbar"/>
<ImageButton
android:id="#+id/schedules"
android:layout_width="48dp"
android:layout_height="match_parent"
android:scaleType="center"
android:layout_weight="0"
android:src="#drawable/ic_action_event"
android:background="?android:attr/selectableItemBackground"
/>
</LinearLayout>
I noticed you have android:layout_weight, but I didn't seem android:weightSum.
I would suggest you have android:weightSum="2" so that your two objects that have android:layout_weight="1" will distribute evenly.
According to the Android Documentation:
If there are three text fields and two of them declare a
weight of 1, while the other is given no weight, the third text field
without weight will not grow and will only occupy the area required by
its content. The other two will expand equally to fill the space
remaining after all three fields are measured.
If the third field is
then given a weight of 2 (instead of 0), then it is now declared more
important than both the others, so it gets half the total remaining
space, while the first two share the rest equally.
I am trying to make a sample Calculator application in which I need to nest multiple LinearLayouts within a parent RelativeLayout, each LinearLayout consists of 2 text boxes aligned horizontally and a radio button for the operation selected, so I have radio buttons for the operations of addition, subtraction, multiplication and division. and the UI should look something like the one in the image, wherein I have 2 text fields and a radio button aligned horizontally for every operation, but I am not able to come up with an effective way to nest the LinearLayouts effectively within the RelativeLayout, some help will be appreciated.
Here is the XML file that describes the UI of the application
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/layout1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText android:id="#+id/edit_number1"
android:inputType="number"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<EditText android:id="#+id/edit_number2"
android:inputType="number"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<RadioButton
android:id="#+id/addition"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/addition"
android:checked="false" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_below="#+id/layout1">
<EditText android:id="#+id/edit_number3"
android:inputType="number"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<EditText android:id="#+id/edit_number4"
android:inputType="number"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<RadioButton
android:id="#+id/subtraction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/subtraction"
android:checked="false" />
</LinearLayout>
</RelativeLayout>
Change the layout_height on each LinearLayout to wrap_content.
I am showing data from DB in an Activity. I want a Table and buttons on bottom. For data thought TableLayout would be best option for it. I added TableLayout to HorizontalView & to ScrollView making it scroll vertically & Horizontally. Am adding all rows dynamically - including header. This part is working fine.
I want is when the contents is less than the screen width, it should yet occupy the whole screen width. For eg. If a table fits well in Portrait mode then ofcourse for Landscape mode their will be blank space left on the right. I don't want that space to eb empty, instead to occupy by all columns. If the row width is greater than the screen width then no issues at all - as horiontal scrollbar appears.
I tried few variations, but nothing helped out. Any idea what settings to make to utlize all space (if at all avbl) & show it.
And yes, 1 more issue of horizontal scrollbar, it appears just on the last row. I want it to
appear below last row - so the border of last row is visible. My XML :
<?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">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:scrollbars="horizontal|vertical">
<HorizontalScrollView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="10dp" android:layout_marginBottom="10dp" >
<TableLayout android:id="#+id/browseTable" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_marginBottom="20dp"
android:background="#FF0000" android:stretchColumns="1,2,3">
</TableLayout>
</HorizontalScrollView>
</ScrollView>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="horizontal" android:gravity="center"
android:layout_marginTop="15dp">
<Button android:id="#+id/browseAddBtn" android:text="Add" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_marginRight="10dp" />
<Button android:id="#+id/browseViewBtn" android:text="Edit" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_marginRight="10dp" />
<Button android:id="#+id/browseReturnBtn" android:text="Return" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
OUTPUT :
I found one thing while solving your problem, about TableLayout when used inside a HorizontalScrollView. The android:stretchColumns is not working when we use Table Layout inside Horizontal Scroll View. So that you are getting blank space when screen is rotated or columns have less width data.
I hope you understand this. I am trying to solve this problem by replacing Horizontal Scroll View with some other. I will post answer if i get solution. Bye.
EDIT
Hi Tvd finally I got the solution for your problem. make below changes to your XML layout file.
In <HorizontalScrollView>
use
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
Use stretchColumns = "*" in TableLayout if you want all columns to be stretched.
Bye. :-)
I did some changes. some of your problem will solve by below layout code
<?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" >
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scrollbars="horizontal|vertical" >
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp" >
<TableLayout
android:id="#+id/browseTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#FF0000" >
</TableLayout>
</HorizontalScrollView>
</ScrollView>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
style="#android:style/ButtonBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/browseAddBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="Add" />
<Button
android:id="#+id/browseViewBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="Edit" />
<Button
android:id="#+id/browseReturnBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Return" />
</LinearLayout>
The layout definition is below. Basically I want the two buttons to be the same width, but right now their width is determined by the string they display, is there a better way to lay this out such that the buttons are the same width and that the Button+EditText combo fills the width of the screen?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/editorlinearlayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:id="#+id/setNameBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Set Item Name "/>
<EditText android:id="#+id/nameTxtBox"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:id="#+id/setGroupBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Set Group Name"/>
<EditText android:id="#+id/groupTxtBox"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
Edit:
I've tried using a TableLayout as was suggested below, but now the EditText's don't fill the remaining portion of the screen. See the image and layout below.
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableRow>
<Button android:id="#+id/setNameBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Set Item Name "/>
<EditText android:id="#+id/nameTxtBox"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</TableRow>
<TableRow>
<Button android:id="#+id/setGroupBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Set Group Name"/>
<EditText android:id="#+id/groupTxtBox"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</TableRow>
</TableLayout>
the trick is to combine the tableview defined in the edit above with a strechColumn tag:
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1">
<TableRow>
<Button android:id="#+id/setNameBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Set Item Name "/>
<EditText android:id="#+id/nameTxtBox"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</TableRow>
</TableLayout>
Use a TableLayout and TableRows.
Three options:
Put this in a TableLayout instead of the nested LinearLayout thing you are currently doing
Change your nesting from a vertical parent with horizontal children to a horizontal parent with vertical children (however, this opens up possible vertical positioning issues, so I don't favor this option)
Use a RelativeLayout and all of the layout_* attributes that RelativeLayout children have available to them
I'd favor option 1, personally.
you can use specific width and height for laout_width/layout_height, as in layout_width="150dip". You run the risk of having a button that can't fit all your text though, but if your text is fixed, you can double check to make sure it's all good.
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.