Why do not the TableLayout and LinearLayout weights mean the same? Or do I have an error in the layout XMLs?
4 button test
I've prepared a simple test with 4 buttons having weights 1,1,1,3. The result is not the same using TableLayout (one column) and LinearLayout (vertical).
On the following link you can see a screenshot of both TableLayout (left) and LinearLayout (right) implementation.
http://i.stack.imgur.com/9dYlB.png
In my opinion the LinearLayout is correct - sum is 6, so the fourth button with weight 3 should be taking half the space.
TableLayout XML
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="A" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="B" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="C" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="D" />
</TableRow>
</TableLayout>
LinearLayout XML
<?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" >
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="A" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="B" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="C" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:text="D" />
</LinearLayout>
Environment
ADT: 22.6.2
AVD: Intel Atom with 4.2.2 and 4.4.2 (both the same result)
It seems that if you change your weight value of the final button to 7 you'll achieve the same result as your second xml file. I think this is because it's accounting for the extra weight values you've put in the file by attributing both the tablerows and the buttons with weight. Here's what I used:
Edit: to be more clear, you have a weightsum (total) of 14 with this edited version, the final button has 7, which is half of the total. In your button-only layout you have a different weightsum.
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="A" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="B" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="C" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="D" />
</TableRow>
Related
I know how to divide a layout into 3 or 4 equal parts, but how do I divide a linear layout (horizontal) into 4 parts in this way?
As you can see, part number "1" is 3 times parts "3" and "4".
Instead, part number "2" is 2 times parts "3" and "4".
I've tried like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/edColore"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4"
android:background="#android:color/white"
android:text="ARANCIONE" />
<TextView
android:id="#+id/edGiorno"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#android:color/holo_green_light"
android:text="Button" />
<TextView
android:id="#+id/edOra"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_blue_light"
android:text="Button" />
<TextView
android:id="#+id/edPosizione"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_red_light"
android:text="Button" />
</LinearLayout>
But don't work as I want:
You should use android:weightSum
Defines the maximum weight sum. If unspecified, the sum is computed by
adding the layout_weight of all of the children. This can be used for
instance to give a single child 50% of the total available space by
giving it a layout_weight of 0.5 and setting the weightSum to 1.0.
Your XML will
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="8" >
<TextView
android:id="#+id/edColore"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4"
android:background="#android:color/white"
android:text="ARANCIONE" />
<TextView
android:id="#+id/edGiorno"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#android:color/holo_green_light"
android:text="Button" />
<TextView
android:id="#+id/edOra"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_blue_light"
android:text="Button" />
<TextView
android:id="#+id/edPosizione"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_red_light"
android:text="Button" />
</LinearLayout>
Try 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="wrap_content"
android:orientation="horizontal"
android:weightSum="10">
<TextView
android:id="#+id/edColore"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5"
android:background="#android:color/white"
android:text="ARANCIONE" />
<TextView
android:id="#+id/edGiorno"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="#android:color/holo_green_light"
android:text="Button" />
<TextView
android:id="#+id/edOra"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_blue_light"
android:text="Button" />
<TextView
android:id="#+id/edPosizione"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_red_light"
android:text="Button" />
</LinearLayout>
Check this latest code :
<?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="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/edColore"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="#android:color/white"
android:text="ARANCIONE" />
<TextView
android:id="#+id/edGiorno"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#android:color/holo_green_light"
android:text="Button" />
<TextView
android:id="#+id/edOra"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_blue_light"
android:text="Button" />
<TextView
android:id="#+id/edPosizione"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_red_light"
android:text="Button" />
</LinearLayout>
I want that it looks so (this is a screenshot from the Graphical Layout editor):
So I created the layout:
<?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" >
<LinearLayout
android:id="#+id/controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/clearButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/clearButtonText"
android:layout_weight="1"
/>
<EditText
android:id="#+id/searchText"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="5"
android:hint="#string/defaultSearchText"
>
<requestFocus/>
</EditText>
<Button
android:id="#+id/addButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/addButtonText"
android:layout_weight="1"
/>
</LinearLayout>
<ListView
android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
But when I ran my app on the emulator I saw:
When I clicked on the loupe there was still no sign of the buttons.
I think you should use weights for the width of the elements of your horizontal layout. This also means the width of the elements with a weight should be 0dp
<LinearLayout
android:id="#+id/controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/clearButton"
android:layout_width="0dp"
android:layout_weight="0.2"
android:layout_height="match_parent"
android:text="#string/clearButtonText"
/>
<EditText
android:id="#+id/searchText"
android:layout_width="0dp"
android:layout_weight="0.6"
android:layout_height="match_parent"
android:hint="#string/defaultSearchText"
>
<requestFocus/>
</EditText>
<Button
android:id="#+id/addButton"
android:layout_width="0dp"
android:layout_weight="0.3"
android:layout_height="match_parent"
android:text="#string/addButtonText"
/>
</LinearLayout>
I have a LinearLayout in vertical orientation, in the first row I added one button which fills the parent.
I want to implement the same thing using TableLayout.
What I've tried so far is:
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/firstRow">
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow >
</TableLayout>
The TableRow fills the parent, but the button inside the row won't fill the whole row.
How to make the button fill the parent like this?
Edit:
And how to make it vertically fill the parent like this:
use android:layout_weight="1"
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow>
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Why is doing layouts on Android" />
</TableRow>
<TableRow>
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="damn" />
</TableRow>
</TableLayout>
looks like :
<TableLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:layout_weight="1">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button" />
</TableRow>
I'm doing an app that have a tiled UI. I have a problem because I'm using an table layout with 2 table rows inside of it, but, I need to shrink the first row a little bit but I've already tried using padding and margins (android:paddingBottom & android:layout_marginBottom) but I don't get how to shrink the first row to do what I want to do. I attached 2 images that explain better what I want to do, the first one is what I got with the code that I put in here. The second explains better what I want to do.
I have to do a responsive UI so I nor thought to use a fixed android:layout_height.
This is what I have:
This is what I want to do:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="2dp"
android:layout_weight="1"
android:background="#drawable/camera"
android:gravity="top|center_horizontal"
android:onClick="camera" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="2dp"
android:layout_weight="1"
android:background="#drawable/gallery"
android:gravity="top|center_horizontal"
android:onClick="gallery" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="2dp"
android:layout_weight="1"
android:background="#drawable/bank_bbva"
android:gravity="top" />
</TableRow>
</TableLayout>
Why not to try this with layouts?
<?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="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="2dp"
android:layout_weight="0.5"
android:background="#drawable/camera"
android:gravity="top|center_horizontal"
android:onClick="camera" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="2dp"
android:layout_weight="0.5"
android:background="#drawable/gallery"
android:gravity="top|center_horizontal"
android:onClick="gallery" />
</LinearLayout>
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="2dp"
android:layout_weight="1"
android:background="#drawable/bank_bbva"
android:gravity="top" />
</LinearLayout>
// try this way,hope this will help you...
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/camera"
android:onClick="camera" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:background="#drawable/gallery"
android:onClick="gallery" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bank_bbva"/>
</TableRow>
</TableLayout>
i want to divide layout activity to 8 ImageButton equivalent , when orientation changes background image stretch automatically , How can i do some thing like uploaded image
Thank in advance
this is my failed trial
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
>
<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onFerakClick"
android:src="#drawable/ic_ferak" />
<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onHolyBookClick"
android:src="#drawable/ic_holybook" />
<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onMzahebClick"
android:src="#drawable/ic_mzaheb" />
<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onShbhatListClick"
android:src="#drawable/ic_shbhat" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onFactsImagePagerClick"
android:src="#drawable/ic_facts" />
<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onMapsGridClick"
android:src="#drawable/ic_maps" />
<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onSearchClick"
android:src="#drawable/ic_search" />
<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onProductsGalleryClick"
android:src="#drawable/ic_product" />
</TableRow>
</TableLayout>
For all your image buttons set android:layout_width="0dp"
Main changes:
set width to 0dp and weight of all cells equally
set height to match_parent, not to wrap_content
set weight of table rows equally
Working xml:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onFerakClick"
android:src="#drawable/ic_ferak" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onHolyBookClick"
android:src="#drawable/ic_action_holybook" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onMzahebClick"
android:src="#drawable/ic_mzaheb" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onShbhatListClick"
android:src="#drawable/ic_shbat" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onFactsImagePagerClick"
android:src="#drawable/ic_facts" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onMapsGridClick"
android:src="#drawable/ic_map" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onSearchClick"
android:src="#drawable/ic_search" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="onProductsGalleryClick"
android:src="#drawable/ic_product" />
</TableRow>
</TableLayout>
set the android:layout_weight="0.125"
and I suggest converting all the widths like below:
android:layout_width="0dp"
and try adding android:layout_weight to table rows also so that they can split the screen in half. android:layout_weight="0.5"
Edit:
how about you try this all with LinearLayout? Create two LinearLayouts (like rows) inside a LinearLayout(like your TableLayout) this way it will be guaranteed that android:layout_weight will work? Don't forget to set the android:orientation value of the LinearLayouts and according to that value set the widths or heights 0dp and give android:layout_weight values instead.