I've got a vertical LinearLayout (green rectangle), and I'm trying to programatically inflate and insert multiple TableLayouts (red rectangle) to this LinearLayout. Each tablelayout contains 4 cells in a 2x2 arrangement.
It works except that any layout_marginBottom I set for the TableLayout has no effect, the red rectangles are always tightly packed inside the LinearLayout. I would like to create some vertical spacing in between each table.
Please suggest what is wrong with my XML:
LinearLayout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/levellist"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
TableLayout (inserted dynamically). Note the layout_marginBottom that has no effect :
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="100dp"
android:stretchColumns="*" >
<TableRow
android:id="#+id/TableRow01"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<include
android:id="#+id/levelview0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
layout="#layout/levelmenu_level" />
<include
android:id="#+id/levelview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
layout="#layout/levelmenu_level" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<include
android:id="#+id/levelview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
layout="#layout/levelmenu_level" />
<include
android:id="#+id/levelview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
layout="#layout/levelmenu_level" />
</TableRow>
</TableLayout>
You have a bunch of Views in this TableLayout that are the same. I would suggest trying to use a GridLayout. It should help with so memory management and recycling. But to answer your question, it looks like your are setting the margin for the entire table, not each row. Have you tried putting your layout_margin inside of your row tag? You can also try setting the Padding instead? That way you put the spacing inside of the rows. However, I believe you should get the same effect either way. Margin is outside of the view, padding is inside.
http://developer.android.com/reference/android/view/View.html#attr_android:paddingBottom
<TableRow
android:id="#+id/TableRow01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="???dip">
<include
android:id="#+id/levelview0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
layout="#layout/levelmenu_level" />
Related
I am trying to show three different vertical sections in my Android layout on one screen, each taking up one third of the screen, one on the top, one in the middle, and one on the bottom. Each section has a TextView and a ListView, and the ListViews can scroll so that you can see all items, but the overall page does not move. I have tried putting each TextView and ListView in a LinearLayout and setting the height of each LinearLayout to one third the total height of the screen, but the first ListView just shows all the items in it, taking up most of the screen, and the other sections are pushed down. I also tried using layout_weights, but for some reason it did not work. (EDIT: Setting layout_weight="1" ended up working, I'm not sure what I did wrong the first time) How can I make this work, or is there a better way to go about this?
<LinearLayout
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="horizontal" >
<ListView android:layout_width="0dp" android:layout_weight="1"
android:layout_height="match_parent" android:background="#FF0000"/>
<ListView android:layout_width="0dp" android:layout_weight="1"
android:layout_height="match_parent" android:background="#00FF00">
<ListView android:layout_width="0dp" android:layout_weight="1"
android:layout_height="match_parent" android:background="#0000FF">
</LinearLayout>
This will give you three equally wide columns: to make it rows, change the orientation to vertical and swap the values of layout_height and layout_width for each listview. If you need to add the TextViews, you'll have to make each listview in this code either a RelativeLayout LinearLayout or FrameLayout, using same width/height/weight and arranging the ListView and TextView inside to taste. To do this most efficiently, use a Framelayout and use a margin on the listview to offset it from the TextView. You can place the TextView relative to the ListView inside the FrameLayout by using the layout_gravity in the TextView.
Ie (swapping the first "column"):
<FrameLayout android:orientation="vertical" android:layout_width="0dp"
android:layout_weight="1" android:layout_height="match_parent"
android:background="#FF0000">
<TextView android:text="Column!" android:background="#3Eff0000"
android:layout_height="40dp" android:layout_width="match_parent">
<ListView android:layout_marginTop="48dp" android:layout_height="match_parent"
android:layout_width="match_parent" android:background="#8Aff0000"/>
</FrameLayout>
Use this:
<?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"
android:weightSum="3">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ff89ff91">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#1"
android:id="#+id/textView"
android:padding="5dp"
android:gravity="center" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_below="#+id/textView" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffff8177">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#2"
android:id="#+id/textView2"
android:padding="5dp"
android:gravity="center" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_below="#+id/textView2" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffe85d">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#3"
android:id="#+id/textView3"
android:padding="5dp"
android:gravity="center" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView3"
android:layout_below="#+id/textView3" />
</RelativeLayout>
</LinearLayout>
strong text
Hi All,
I need to get some help to implement implement a Vertical scroll view with Multiple Horizontal rows inside of it, this is what I have so far, any help or hint would be highly appreciated
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TableLayout android:id="#+id/threeByThreeTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="0,1,2"
android:padding="10dp"
>
<TableRow android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/mygallery1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
/>
</HorizontalScrollView>
</TableRow>
<TableRow android:id="#+id/tableRow2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/mygallery2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
/>
</HorizontalScrollView>
</TableRow>
<TableRow android:id="#+id/tableRow3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/mygallery3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
/>
</HorizontalScrollView>
</TableRow>
</TableLayout>
</ScrollView>
Put your TableLayout inside a ScrollView instead of a LinearLayout. Just keep in mind that a ScrollView can only have one child.
Why not just use a ListView and remove the lines between the items? Seems like that would work much better than rolling your own view
Put a Vertical Linear Layout inside your ScrollView
Inside the vertical linear layout, create your HorizontalScrollViews.
It should work probably, please let me know if you have questions.
I have a linear layout inside a scroll view, this linear layout contains many table layouts that are inserted dynamically during the application life. When I have more than 1 table layout they are too close to one another:
Here is the code for the table layouts:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/TableLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:orientation="vertical"
android:background="#color/eggshell" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/messageBoardTitleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fill"
android:textAppearance="?android:attr/textAppearanceMedium" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/messageBoardMessageTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fill" />
</TableRow>
and this is the code of the scroll view and the linear layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp" >
<ScrollView
android:id="#+id/messgaeBoardScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/messageBoardLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp" >
</LinearLayout>
</ScrollView>
How can I create some kind of a break between the two table layouts?
why don't you go for the android:layout_margin parameter in android... It will allow you to put some space between any two layout or between layout and screen border..
Check out this Android Developer Link..
Hope it will help you..!!!
Add android:layout_margin instead of padding
Padding adds space inside the layout, not between other layout
Remove your padding from your TableLayout which is android:padding="10dp" besides that try out with the margin android:margin="10dp".
As padding adds space in outer part of the view and margin leaves a space in inner part of your view.
Add
android:margin_top=10dp;
instead of layout_padding.
I have an Android layout question. I have a display where I am putting some text into the middle of a view that has a header at the top and three buttons at the bottom. What I am having trouble with is getting the TextView (which is inside a ScrollView) to stretch to fill up the available screen space. If I set the layout_height of the ScrollView to "fill_parent" the three buttons are pushed off the bottom of the screen. If I set it to "wrap_content" it is only as large as is needed to support the text that is put into the TextView.
Here is the XML for the layout I am using:
<?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="fill_parent"
android:orientation="vertical" >
<LinearLayout android:orientation="horizontal"
android:gravity="top"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher">
</ImageView>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
style="#android:style/TextAppearance.Large"
android:text="#string/meetingdetail" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="#+id/meeting"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
style="#android:style/TextAppearance.Medium" />
</ScrollView>
<Button android:id="#+id/navigation"
android:text="#string/naviation"
android:onClick="meetingInfoOnClick"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button android:id="#+id/mapsingle"
android:text="#string/mapsingle"
android:onClick="meetingInfoOnClick"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button android:id="#+id/goback"
android:text="#string/goback"
android:onClick="meetingInfoOnClick"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Could someone suggest what would work best to make the ScrollView with the TextView fill up the available space but still allow the three buttons to appear?
Set the height of the ScrollView to 0dp and its weight to 1.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<TextView android:id="#+id/meeting"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
style="#android:style/TextAppearance.Medium" />
</ScrollView>
However if you don't plan to have more than one views scrollable you should remove the ScrollView and use:
android:scrollbars="vertical"
attribute on your TextView since the TextView is scrollable itself.
Just replace your ScrollView tag code to..
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView android:id="#+id/meeting"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
style="#android:style/TextAppearance.Medium" />
</ScrollView>
It will work fine, if still you have any problem then tell me. if works then accept as answer.
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.