Table Layout spacing issues - android

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>

Related

Android:Have an issue with TableLayout in landscape mode

I have wrote the following xml code to arrange buttons in tabular format but it is not working with me when run in the emulator or in my phone device where buttons shown one after the other (in vertical) and the last button is not showing at all.
The code is:
<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:background="#color/background"
android:orientation="horizontal"
android:padding="15dip"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:orientation="vertical" >
<TextView
android:text="#string/main_title"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="20dip"
android:textSize="24.5sp"/>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:stretchColumns="*">
<TableRow >
<Button
android:id="#+id/continue_button"
android:text="#string/continue_label" />
<Button
android:id="#+id/game_button"
android:text="#string/new_game_label" />
</TableRow>
<TableRow>
<Button
android:id="#+id/about_button"
android:text="#string/about_label" />
<Button
android:id="#+id/exit_button"
android:text="#string/exit_label" />
</TableRow>
</TableLayout>
</LinearLayout>
</LinearLayout>
this the example for creating the table layout please verify yours with this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<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/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<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" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
</LinearLayout>
try doing this and for clarifications

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>

Layout implementation

I wanted to design a UI like this,
But i am unable to add those buttons at the bottom and i am not getting how to bring textview in centre.
Here is my code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/poster"
android:layout_width="130dp"
android:layout_height="158dp"
android:scaleType="center"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="158dp"
android:orientation="vertical" >
<TextView
android:layout_height="wrap_content"
android:id="#+id/titleTextView"
android:text="TextView"
android:layout_width="fill_parent"
android:gravity="center"
android:layout_gravity="center"
android:layout_centerInParent="true"
></TextView>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button1"
android:id="#+id/button1button"></Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button2"
android:id="#+id/button1button2"></Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button3"
android:id="#+id/button1button3"></Button>
</LinearLayout>
Here how the output looks.please help me what is the changes to be done in my code
Convert your parent layout to RelativeLayout and start alligning other views relative to each other inside. It will help you to assign views wherever you want on screen regardless of its size.
may be this will help you, try it
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TableLayout
android:id="#+id/tblLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tblLayout_tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<TableLayout
android:id="#+id/tblLayout_tableRow1_tbllayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tblLayout_tableRow1_tbllayout1_tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:id="#+id/tblLayout_tableRow1_tbllayout1_tableRow1_txtviewspace"
android:layout_width="150px"
android:layout_height="20px" />
</TableRow>
<TableRow
android:id="#+id/tblLayout_tableRow1_tbllayout1_tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/tblLayout_tableRow1_tbllayout1_tableRow2_tbltxtviewspace"
android:layout_width="30px"
android:layout_height="40px" />
</TableRow>
</TableLayout>
</TableRow>
<TableRow
android:id="#+id/tblLayout_tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TableLayout
android:id="#+id/tblLayout_tableRow2_tblLayout1_tableRow2_tblLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tblLayout_tableRow2_tblLayout1_tableRow2_tblLayout1_tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/poster"
android:layout_width="130dp"
android:layout_height="158dp"
android:scaleType="center"
android:src="#drawable/ic_launcher" />
</TableRow>
</TableLayout>
</TableRow>
<TableRow
android:id="#+id/tblLayout_tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button1"
android:id="#+id/button1button"></Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button2"
android:id="#+id/button1button2"></Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button3"
android:id="#+id/button1button3"></Button>
</TableRow>
</TableLayout>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"
android:text="Dummy text" />
<ImageView android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1"
android:layout_marginTop="36dp"
android:src="#drawable/chilly" />
<TextView android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="76dp"
android:text="Dummy Text" />
<Button android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="202dp"
android:text="Button3" />
<Button android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="88dp"
android:text="Button2" />
<Button android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/button1"
android:text="Button1" />

How to make custom "button" like Facebook for Android

I want to make my home screen for my android application like Facebook for Android. Is there anyone know how to make this layout? I am still newbie for Android Development.
You can make a 3x3 table, put 3 buttons per row, and a background image as the button:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_height="match_parent"
android:layout_width="wrap_content">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="Button"
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon1"></Button>
<Button
android:text="Button"
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon2"></Button>
<Button
android:text="Button"
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon3"></Button>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="Button"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon4"></Button>
<Button
android:text="Button"
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon5"></Button>
<Button
android:text="Button"
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon6"></Button>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="Button"
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon7"></Button>
<Button
android:text="Button"
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon8"></Button>
<Button
android:text="Button"
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon9"></Button>
</TableRow>
Change the #drawable/iconX to whatever background image you want/need.
Use three linear layout with horizontal orientation and make their parent layout with vertical orientation, like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" android:baselineAligned="false" android:orientation="horizontal">
<LinearLayout android:gravity="center" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center_vertical" android:layout_weight="1">
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" >
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
</LinearLayout>
<LinearLayout android:baselineAligned="false" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" >
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
</LinearLayout>
<LinearLayout android:baselineAligned="false" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" >
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Looks like this:
Here is the code:
home_icon_view.xml
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout android:orientation="vertical" android:focusable="true" android:layout_width="90.0dip" android:layout_height="70.0dip" android:layout_margin="5.0dip" xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:gravity="center" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="center" />
</LinearLayout>
<TextView android:textSize="14.0sp" android:textColor="#color/home_text_color" android:gravity="center_horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" />
</LinearLayout>
And home.xml
<LinearLayout android:orientation="vertical" android:id="#id/home_icons" android:paddingTop="5.0dip" android:paddingBottom="24.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0">
<LinearLayout android:gravity="bottom|center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">
<include android:id="#id/home_news_feed_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_profile_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_friends_icon" layout="#layout/home_icon_view" />
</LinearLayout>
<LinearLayout android:gravity="bottom|center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">
<include android:id="#id/home_messages_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_places_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_groups_icon" layout="#layout/home_icon_view" />
</LinearLayout>
<LinearLayout android:gravity="bottom|center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">
<include android:id="#id/home_events_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_photos_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_chat_icon" layout="#layout/home_icon_view" />
</LinearLayout>
</LinearLayout>

Need help with Android TableLayout alignment

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.

Categories

Resources