Develop Reference

Android TableLayout in LinearLayout - Remove spaces in between columns and rows

I struggle more with UI design in Android than actually making the application, so I was giving something a go:
<?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="vertical" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/rowOne"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/BOne"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BTwo"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BThree"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BFour"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/rowTwo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/BFive"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BSix"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BSeven"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BEight"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/rowThree"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/BNine"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BTen"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BEleven"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BTwelve"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
</LinearLayout>
I have been trying to remove the spaces in between the rows and the columns, I tried giving a negative margin to the rows and the buttons like so:
android:layout_marginRight="-20sp"
But that is really "fiddly" not very accurate and I don't think it will scale the same for all screens (correct me if I am wrong). I also through giving the rows layout_weight attributes of one would make them cover the entire width of the screen (I know the weight is simply the importance given to the element). Perhaps I need to use stretchColumns? or perhaps there is another tag that might be useful here?
The reson that I have put it in a LinearLayout is because I plan to add other elements and experiment with those as well.

Replace your buttons :
<Button
android:id="#+id/BFour"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
with
<Button
android:id="#+id/BFour"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:text="Button" />

How to make the height of the two ListView controls to fit UI?

The layout posted below creates the the UI. I currently get a result as shown in a.png and c.png (there is a lot of empty space), but I hope to achieve something similar to b.png and d.png. How can I do this?
I want the height of lvReceiver and lvOnlyOrExcept to increase and decrease automatically by the rows of data.
What I get now looks like this:
a.png
c.png
What I want it to look like:
b.png
d.png
The layout used is this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/border_ui" >
<com.google.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
ads:adSize="SMART_BANNER"
ads:adUnitId="a15284e3e927f18"
ads:loadAdOnCreate="false" />
<LinearLayout
android:id="#+id/LinearLayoutName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/adView"
android:orientation="horizontal" >
<TextView
android:id="#+id/tvRuleNameTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rule Name" />
<TextView
android:id="#+id/tvRuleName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Rule Name" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayoutChecked"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/LinearLayoutName"
android:orientation="horizontal" >
<TextView
android:id="#+id/tvEnabledRule"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enabled Rule" />
<CheckBox
android:id="#+id/chEnabledRule"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="false"
android:text="" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayoutOption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/LinearLayoutChecked"
android:orientation="vertical" >
<TextView
android:id="#+id/tvReceiveTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Receive Number" />
<ListView
android:id="#+id/lvReceiver"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/tvOptionTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forward Option" />
<ListView
android:id="#+id/lvOnlyOrExcept"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center_vertical"
android:background="#DCDCDC"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/btnEdit"
style="#style/myTextAppearance"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:checked="true"
android:text="Edit" />
<Button
android:id="#+id/btnDelete"
style="#style/myTextAppearance"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Delete" />
<Button
android:id="#+id/btnClose"
style="#style/myTextAppearance"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Close" />
</LinearLayout>
</RelativeLayout>

The xml which you are inflating for the list views must be having excess padding/margin. Please post the xml which you are using to inflate for both the list views. The issue lies there

new to android: need to line buttons up horizontally

I need to line buttons up horizontally, however, my buttons are appearing vertically. They are all stacked up on top of each other.. do you know how I can do this horizontally?
<TableLayout
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="88dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
</TableLayout>

Using Linear layout you can easily represent your button in horizontally.
<LinearLayout
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
</LinearLayout>

You have not identified a TableRow for your TableLayout. Imagine how a table is created, row's go horizontally and columns go vertically.
Fixing your code would look something like this
<TableLayout
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="88dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" >
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
</TableRow>
</TableLayout>
Alternatively, to make things easier, I would recommend using a LinearLayout with the orientation set to horizontal.

Use a linearlayout as follows:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#646464"
android:gravity="center|center_vertical"
android:paddingBottom="5dp"
android:paddingTop="5dp" >
<Button
android:id="#+id/inner_artist_profile"
android:layout_width="60dp"
android:layout_height="25dp"
android:text="Profile"
android:textColor="#AEAEAE"
android:background="#drawable/sub_nav_left" />
<Button
android:id="#+id/inner_artist_news"
android:layout_width="60dp"
android:layout_height="25dp"
android:text="News"
android:textColor="#AEAEAE"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/inner_artist_profile"
android:background="#drawable/sub_nav_middle" />
<Button
android:id="#+id/inner_artist_events"
android:layout_width="60dp"
android:layout_height="25dp"
android:text="Events"
android:textColor="#AEAEAE"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/inner_artist_news"
android:background="#drawable/sub_nav_middle" />
<Button
android:id="#+id/inner_artist_videos"
android:layout_width="60dp"
android:layout_height="25dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/inner_artist_events"
android:background="#drawable/sub_nav_middle"
android:text="Videos"
android:textColor="#AEAEAE" />
<Button
android:id="#+id/inner_artist_albums"
android:layout_width="60dp"
android:layout_height="25dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/inner_artist_videos"
android:background="#drawable/sub_nav_right"
android:text="Albums"
android:textColor="#AEAEAE" />
</RelativeLayout>
this is from a working project modify id's according to need

Instead of a TableLayout, I think you should use a LinearLayout with a WeightSum. To distribute the widths of the 4 buttons evenly, set their widths to 0 and their weight to 1. Then set the weight sum of the LinearLayout to 4 (the number of buttons). Like this:
<LinearLayout
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="88dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal"
android:weightSum="4">
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
</LinearLayout>

There are many ways to do this.Please check following is one of the way
<LinearLayout 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:weightSum="4" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>

Add TableRow to TableLayout and here is the working code
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="88dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal" >
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
</TableRow>
</TableLayout>

Or encapsulate the Button objects within a TableRow tag e.g
<TableRow>
<Button></Button>
</TableRow>

How to tell Android relative layout to take all space left betwean two elements. Does not matter how much is that space

How to tell Android relative layout to take all space left between two elements. Does not matter how much is that space.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TableLayout android:layout_below="#id/title_container"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id = "#+id/usb_config_title">
<TableRow android:layout_gravity="center_horizontal">
<TextView android:layout_width="398dp"
android:layout_height="4px"
android:text=" "/>
<TextView android:layout_width="4px"
android:layout_height="4px"
android:text=" "
android:background="#color/title_background"/>
<TextView android:layout_width="398dp"
android:layout_height="4px"
android:text=" "/>
</TableRow>
<TableRow android:layout_gravity="center_horizontal">
<TextView android:text="#string/usb_stick"
android:layout_width="398dp"
android:gravity="center"
android:layout_height="wrap_content"
android:textSize="22dp"/>
<TextView android:layout_width="4px"
android:layout_height="fill_parent"
android:text=" "
android:background="#color/title_background"/>
<TextView android:text = "#string/usb_internal_memory"
android:layout_width="398dp"
android:gravity="center"
android:layout_height="wrap_content"
android:textSize="22dp"/>
</TableRow>
<TableRow android:layout_gravity="center_horizontal">
<TextView android:layout_width="398dp"
android:layout_height="5px"
android:text=" "/>
<TextView android:layout_width="4px"
android:layout_height="5px"
android:text=" "
android:background="#color/title_background"/>
<TextView android:layout_width="398dp"
android:layout_height="5px"
android:text=" "/>
</TableRow>
</TableLayout>
<LinearLayout android:orientation="horizontal"
android:layout_below="#id/usb_config_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ListView
android:id="#+id/list3"
android:layout_width="398px"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
android:scrollbarAlwaysDrawVerticalTrack="true"
/>
<TextView android:layout_width="4px"
android:layout_height="fill_parent"
android:text=" "
android:background="#color/title_background"/>
<ListView
android:id="#+id/list4"
android:layout_width="398px"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
android:scrollbarAlwaysDrawVerticalTrack="true"
/>
</LinearLayout>
<include layout="#layout/buttons_bottom_with_relative"/>
</RelativeLayout>
So i need id/list3 to last till button bar which is. At the moment id/list3 is covered by button bar.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="bottom"
android:layout_weight="1"
android:id="#+id/controls"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="false"
style="#android:style/ButtonBar"
android:background="#drawable/bottom_layout_selector"
>
<Button
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/startButton"
android:text="#string/start"
android:visibility="invisible"
/>
<Button
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/stopButton"
android:text="#string/stop"
android:visibility="invisible"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/nextButton"
android:text="#string/next"
android:visibility="invisible"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/resetStatistics"
android:text="#string/reset_statistics"
android:visibility="invisible"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/histogramSettings"
android:text="#string/histogram_settings"
android:visibility="invisible"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/saveButton"
android:text="#string/save"
android:visibility="invisible"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/loadConfig"
android:text="#string/load_config"
android:visibility="invisible"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/saveConfig"
android:text="#string/save_config"
android:visibility="invisible"
/>
</LinearLayout>

Have you tried adding this to the linear layout that includes list3
android:layout_below="#id/usb_config_title"
android:layout_above="#id/controls"
So the linear layout positions itself between those two.
I don't think you can use the weight attribute for Relative layouts. If you align one layout to the top of the screen and one to the bottom then tell the one in the middle to above and below the other two it should fill in the space

What you probably need is to set the layout_weight property of the Relative Layout, and the whole thing to be within a LinearLayout. If you could show us the XML you have so far we can see for sure!

Layout invisible, button up on him

(i have put the code at the end of my post)
i would like to make a hidden menu.
I don't know if i take the good way.
I have some button visible, some invisible button and at the an another visible button.
One of the button in first layout have to set visible the hidden buttons.
I would like to have the last button just after the first bunch.
But like i have put invisible the Layout so i have an empty space.
I would like when i pressed the button for set visible that the last button go down.
I hope you will understand want i want to do and what i have done.
<?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"
android:background="#drawable/fond"
>
<ImageView
android:id="#+id/imageView1"
android:contentDescription="#string/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/top"
android:layout_gravity="top"
android:adjustViewBounds="true"
/>
<LinearLayout
android:layout_below="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/fond2"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="3"
>
<Button
android:id="#+id/button_garçon"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/Bg"
android:background="#drawable/button_purple"
android:layout_weight="1"
android:textColor="#ffffff"
android:onClick="actionGarçon"
/>
<Button
android:id="#+id/button_mixte"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/Bm"
android:background="#drawable/button_purple"
android:layout_weight="1"
android:textColor="#ffffff"
android:onClick="actionMixte"
/>
<Button
android:id="#+id/button_fille"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/Bf"
android:background="#drawable/button_purple"
android:layout_weight="1"
android:textColor="#ffffff"
android:onClick="actionFille"
/>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1"
>
<Button
android:id="#+id/button_param"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Bp"
android:background="#drawable/button_green"
android:layout_weight="1"
android:textColor="#ffffff"
android:onClick="actionParametre"
/>
</LinearLayout>
<!-- invisible -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="invisible"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/Tq"
android:textColor="#000000"
/>
<EditText android:id="#+id/edit_message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/Emc"
android:singleLine="true"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/Tpre"
android:textColor="#000000"
/>
<EditText android:id="#+id/edit_message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/Epre"
android:singleLine="true"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/Tsuf"
android:textColor="#000000"
/>
<EditText
android:id="#+id/edit_message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/Esuf"
android:singleLine="true"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/Tl"
android:textColor="#000000"
/>
<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="100"
>
<Button android:id="#+id/button_court"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Blc"
android:layout_weight="25"
android:background="#drawable/button_purple"
android:textColor="#ffffff"
android:onClick="actionCourt"
/>
<Button android:id="#+id/button_moyen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Blm"
android:layout_weight="25"
android:background="#drawable/button_purple"
android:textColor="#ffffff"
android:onClick="actionMoyen"
/>
<Button android:id="#+id/button_long"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Bll"
android:layout_weight="25"
android:background="#drawable/button_purple"
android:textColor="#ffffff"
android:onClick="actionLong"
/>
<Button android:id="#+id/button_tous"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Blt"
android:layout_weight="25"
android:background="#drawable/button_purple"
android:textColor="#ffffff"
android:onClick="actionTous"
android:state_pressed="true"
/>
</LinearLayout>
<Button android:id="#+id/button_orig"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/Bo"
android:background="#drawable/button_purple"
android:textColor="#ffffff"
android:onClick="actionOrigine"
/>
</LinearLayout>
<!-- /invisible -->
<Button android:id="#+id/button_recher"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/Br"
android:background="#drawable/button_green"
android:textColor="#ffffff"
android:onClick="actionRecherche"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Thanks in advance.

If I understand correctly you want to use android:visibility="gone" so that what ever you set to "gone" does not occupy any space on the layout.
Basically, instead of android:visibility="invisible" you should use android:visibility="gone"
See if that works.