Need help with Android TableLayout alignment - android

I'm trying to build a calculator layout using TableLayout, but the last two rows aren't aligning with the rest of the layout. Is there something wrong with my layout XML?
What I'm trying to do would be easier to accomplish in HTML (<td> with colspan or rowspan), so should I try converting this into a WebView?
Code is as follows: (Screenshot)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText
android:id="#+id/EditText01"
android:layout_height="wrap_content"
android:layout_width="fill_parent" />
<TableLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:stretchColumns="*">
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<Button
android:id="#+id/Button08"
android:textSize="16pt"
android:text="^"
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="wrap_content" />
<Button
android:id="#+id/Button09"
android:text="÷"
android:textSize="16pt"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_width="wrap_content" />
<Button
android:id="#+id/Button10"
android:text="×"
android:textSize="16pt"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_width="wrap_content" />
<Button
android:id="#+id/Button11"
android:textSize="16pt"
android:text="-"
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="wrap_content" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1">
<Button
android:id="#+id/Button01"
android:text="7"
android:textSize="16pt"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="fill_parent" />
<Button
android:layout_height="wrap_content"
android:textSize="16pt"
android:text="4"
android:id="#+id/Button05"
android:layout_weight="1"
android:layout_width="fill_parent" />
</LinearLayout>
<LinearLayout
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="fill_parent">
<Button
android:id="#+id/Button02"
android:layout_height="wrap_content"
android:text="8"
android:textSize="16pt"
android:layout_weight="1"
android:layout_width="fill_parent" />
<Button
android:layout_height="wrap_content"
android:textSize="16pt"
android:text="5"
android:id="#+id/Button06"
android:layout_weight="1"
android:layout_width="fill_parent" />
</LinearLayout>
<LinearLayout
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="fill_parent">
<Button
android:id="#+id/Button03"
android:text="9"
android:textSize="16pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:textSize="16pt"
android:text="6"
android:id="#+id/Button07"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<Button
android:id="#+id/Button04"
android:text="+"
android:textSize="16pt"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_weight="1" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2">
<LinearLayout
android:layout_weight="1"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/Button02"
android:textSize="16pt"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="1" />
<Button
android:textSize="16pt"
android:id="#+id/Button06"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="2" />
</LinearLayout>
<Button
android:id="#+id/Button01"
android:layout_height="wrap_content"
android:textSize="16pt"
android:layout_weight="1"
android:layout_width="fill_parent"
android:text="0" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1">
<Button
android:id="#+id/Button03"
android:textSize="16pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3" />
<Button
android:textSize="16pt"
android:id="#+id/Button07"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="." />
</LinearLayout>
<Button
android:id="#+id/Button04"
android:textSize="16pt"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_weight="1"
android:text="=" />
</TableRow>
</TableLayout>
</LinearLayout>

Your final TableRow has three cells (i.e., immediate children). The rest have four. Hence, they're not going to align unless you put an android:layout_span attribute in there somewhere to indicate which cell is absorbing the fourth.

Related

Position of the elements in Android XML file

I have a question regarding how to position elements in a XML file for an android activity.
What i need to achieve is the following:
Basically i need:
a set of 9 squares (3x3 table) covering 50% of the screen height
on the second part of the screen, 3 equally distributed zones with a single textview / button for each.
i created the set of 9 squares using a tableview with this code:
<TableLayout
android:layout_width="match_parent"
android:layout_height="386dp"
android:stretchColumns="*" >
<TableRow
android:id="#+id/Row1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/square1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
<Button
android:id="#+id/square2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="3"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
<Button
android:id="#+id/square3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="3"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
</TableRow>
<TableRow
android:id="#+id/Row2"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/square4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
<Button
android:id="#+id/square5"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
<Button
android:id="#+id/square6"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
</TableRow>
<TableRow
android:id="#+id/Row3"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/square7"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
<Button
android:id="#+id/square8"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="2"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
<Button
android:id="#+id/square9"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:text="3"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="60sp" />
</TableRow>
</TableLayout>
This part is included in a relative layout.
Now i can't get in any way to set this part to be 50% of the screen, and add a second 50% with the 3 buttons.
Hope you can help me. I searched here for answers but didn't find any relevant topic
Here you go:
<TableLayout 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" >
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:text="1"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
<Button
android:text="2"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
<Button
android:text="3"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:text="4"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
<Button
android:text="5"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
<Button
android:text="6"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:text="7"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
<Button
android:text="8"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
<Button
android:text="9"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:text="10"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:text="11"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:text="12"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
</TableRow>
Use LinearLayout instead of RelativeLayout and use android:weight attribute to achieve 50% screen height as follows...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_wieght="1" >
..............
..............
</TableLayout>
<!-- Other other layout which will take android:layout_wieght="1" -->
</LinearLayout>
This will be a very simple answer to this question only using LinearLayout :
<?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:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="one part"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="one part"/>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="one part"/>
</LinearLayout>
</LinearLayout>

How can I anchor 4 linear layouts to the bottom of a linear layout?

As you can see here, I have created 4 linear layouts circled with yellow, green, blue, and purple to distinguish between the different horizontals. I would like to anchor all 4 of these layouts to the bottom of the main linear layout as shown in red. I was looking for the easiest solution to my problem. Perhaps a RelativeLayout for the main layout, but then how would I get all 4 linear layouts to anchor to the bottom and stacked on top of each other in this order? Sorry for not posting code, but the code for all the buttons would probably be too long.
<?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:background="#drawable/po"
android:orientation="vertical" >
<EditText
android:id="#+id/txtQuestion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
/>
<Button
android:id="#+id/btnClear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="Clear"
android:textSize="20sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="fill_vertical"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:weightSum="10" >
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Q" />
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="W"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="E"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="R"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="T"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Y"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="U"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="I"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="O"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="P"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="9" >
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="A" />
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="S"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="D"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="F"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="G"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="H"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="J"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="K"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="L"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="10" >
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Z" />
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="X"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="C"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="V"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="B"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="N"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="M"
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text=","
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="."
/>
<Button
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="\?"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:gravity="bottom|center"
android:orientation="horizontal"
android:weightSum="100" >
<Button
android:layout_weight="25"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Space"
/>
<Button
android:layout_weight="75"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Bkspc"
/>
</LinearLayout>
</LinearLayout>
You need to create your xml in following way.
<?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:background="#drawable/ic_launcher"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<EditText
android:id="#+id/txtQuestion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp" />
<Button
android:id="#+id/btnClear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="Clear"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout android:gravity="bottom"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_below="#+id/linear"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="fill_vertical"
android:orientation="horizontal"
android:weightSum="10" >
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Q" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="W" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="E" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="R" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="T" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Y" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="U" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="I" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="O" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="P" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="9" >
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="A" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="S" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="D" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="F" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="G" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="H" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="J" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="K" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="L" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="10" >
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Z" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="X" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="C" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="V" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="B" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="N" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="M" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="," />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="." />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="\?" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:gravity="bottom|center"
android:orientation="horizontal"
android:weightSum="100" >
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="25"
android:text="Space" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="75"
android:text="Bkspc" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
OUTOUT :
Use RelativeLayout as the parent Layout.Then Use alignParentBottom property to set All the layouts at the bottom.

How to fill remaining space in layout?

I have these button like shown on the picture below, and I want them to arrange themselve so they begin at the top of the layout and end at the bottom, and also auto arrange space in between. How to do that?
My xml 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="match_parent"
android:orientation="vertical"
android:background="#drawable/background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="360dp"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="50"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="5dp" >
<Button
android:id="#+id/bA1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A1"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bA2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A2"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bA3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A3"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bA4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A4"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bA5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A5"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bA6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A6"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bA7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A7"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bA8"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A8"
android:background="#drawable/buttons" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="50"
android:gravity="top"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="10dp" >
<Button
android:id="#+id/bB1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/buttons"
android:text="B1" />
<Button
android:id="#+id/bB2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="B2"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bB3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="B3"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bB4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="B4"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bB5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="B5"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bB6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="B6"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bB7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="B7"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bB8"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="B8"
android:background="#drawable/buttons" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
Use weight. Some sample code follows.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:padding="48dp"
android:weightSum="4" >
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="button 1" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="button 2" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="button 3" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="button 4" />
</LinearLayout>
The code android:weightSum="4"will say to use a "weight" of 4, and each child here use 1 of that weight, a procentual value (25%). You could alter the weightSum and the weight of each child and thus giving each child a percentage width or height. Use 0dp to manipulate the dimension.
Try this.. its working for me.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:baselineAligned="false"
android:orientation="horizontal"
android:layout_weight="8" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="5dp"
android:weightSum="8" >
<Button
android:id="#+id/bA1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A1" />
<Button
android:id="#+id/bA2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A2" />
<Button
android:id="#+id/bA3"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A3" />
<Button
android:id="#+id/bA4"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A4" />
<Button
android:id="#+id/bA5"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A5" />
<Button
android:id="#+id/bA6"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A6" />
<Button
android:id="#+id/bA7"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A7" />
<Button
android:id="#+id/bA8"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A8" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="10dp"
android:weightSum="8" >
<Button
android:id="#+id/bB1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B1" />
<Button
android:id="#+id/bB2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B2" />
<Button
android:id="#+id/bB3"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B3" />
<Button
android:id="#+id/bB4"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B4" />
<Button
android:id="#+id/bB5"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B5" />
<Button
android:id="#+id/bB6"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B6" />
<Button
android:id="#+id/bB7"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B7" />
<Button
android:id="#+id/bB8"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B8" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:background="#android:drawable/dark_header"
android:layout_weight="1" />
Now it will look like
As i added Header and Footer also.

Android Grid with LinearLayout

I'm trying to build a grid with some linear layouts.
Unfortunately the buttons inside the "grid" fill all the space and the "grid" isn't always the same size.
<ScrollView
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/banner"
android:background="#80000000"
android:contentDescription="#string/about"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="15dp"
android:gravity="center_horizontal"
android:text="#string/modi1"
tools:context=".MenuActivity" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="15dp"
android:gravity="center_horizontal"
android:text="#string/modi2"
tools:context=".MenuActivity" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_marginTop="10dp"
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/szen_diagramm" />
<Button
android:layout_marginTop="10dp"
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/szen_countdown" />
</LinearLayout>
<Button
android:layout_marginTop="10dp"
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/szen_diagramm" />
<Button
android:layout_marginTop="10dp"
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/szen_countdown" />
</LinearLayout>
<Button
android:layout_marginTop="10dp"
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/szen_diagramm" />
<Button
android:layout_marginTop="10dp"
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/szen_countdown" />
</LinearLayout>
</LinearLayout>
</ScrollView>
It should look something like
this
with the buttons centered and at the size they need with the text inside.
Could anyone help me?
Try this.
<ScrollView xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TableRow>
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#80000000"
android:contentDescription="ImageView"
android:layout_span="2"
android:src="#drawable/banner" />
</TableRow>
<TableRow>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_weight="2"
android:gravity="center_horizontal"
android:text="modi1" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_weight="2"
android:gravity="center_horizontal"
android:text="modi2" />
</TableRow>
<TableRow>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="2"
android:gravity="center"
android:text="szen_diagramm" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="2"
android:gravity="center"
android:text="szen_countdown" />
</TableRow>
<TableRow>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="2"
android:gravity="center"
android:text="szen_diagramm" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="2"
android:gravity="center"
android:text="szen_countdown" />
</TableRow>
<TableRow>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="2"
android:gravity="center"
android:text="szen_diagramm" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="2"
android:gravity="center"
android:text="szen_countdown" />
</TableRow>
</TableLayout>
this is how it shows to me
Remove the android:layout_weight="1" to avoid the button filling all the space.
You should try using a TableLayout and several TableRow to replace your LinearLayouts containing the buttons, thus creating a well formated grid
I had a similar problem, solved inserting a LinearLayout in TableRow. Have a look to the posted xml code and verify if it fits your requirements.
<TableRow
android:layout_gravity="fill_horizontal"
android:paddingTop="#dimen/table_row_padding_top" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageButton
android:contentDescription="#string/str_phone"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/icon_phone" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:text="#string/str_phone"
android:textColor="#000000"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/icon_car"
android:contentDescription="#string/str_car" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:text="#string/str_car"
android:textColor="#000000"
android:textSize="12sp" />
</LinearLayout>
</TableRow>

Table Layout spacing issues

I am using a table layout. What i would want is to equally space the icons seen in the vertical layout(table layout) present on the left side of the screen, so as to cover the height of the whole screen. I tried out different methods like layout_weight="1", set the image width to 0dp and then set the weight...but none among them has helped.....
Here is the xml...
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="50dp" >
<TableRow
android:layout_weight="1"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/XXX" />
</TableRow>
<TableRow
android:layout_weight="1"
>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Desserts"
/>
</TableRow>
<TableRow
android:layout_weight="1"
>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/sraberrydrink" />
</TableRow>
<TableRow
android:layout_weight="1"
>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Drinks"
android:textColor="#000000"
android:textSize="10dp" />
</TableRow>
<TableRow
android:layout_weight="1"
>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/newsoups" />
</TableRow>
<TableRow
android:layout_weight="1"
>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="45dp"
android:text="Starters"
android:textColor="#000000"
android:textSize="10dp" />
</TableRow>
<TableRow
android:layout_weight="1" >
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginTop="3dp"
android:background="#drawable/chipa" />
</TableRow>
<TableRow
android:layout_weight="1"
>
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Snacks"
android:layout_marginLeft="45dp"
android:textColor="#000000"
android:textSize="10dp"/>
</TableRow>
</TableLayout>
If someone could point to a solution....Thanks.
What you can do is can use a linear layout like this
!<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/layout_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" android:background="#2e8b57" android:layout_weight=".8" android:gravity="center">
<LinearLayout
android:id="#+id/layout_main"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical" android:layout_weight=".5">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_main"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical" android:layout_weight=".5">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_main"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical" android:layout_weight=".5">
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_main"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical" android:layout_weight=".5">
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layout_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#8fbc8f" android:layout_weight=".2">
<LinearLayout
android:id="#+id/layout_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" android:layout_weight=".8" android:gravity="center">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" android:layout_weight=".8" android:gravity="top|center">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Categories

Resources