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
Related
I'm a bit confused on how to increase the overall width of my TableLayout in order to become closer to the sides of the screen.
I'm not sure if I adjust this in the actual TableLayout itself, or in the parent RelativeLayout...??
Image:
Any thoughts?
<RelativeLayout 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: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="com.example.funkycalc.MainActivtiy\" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="2"
android:text="CLR" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="2"
android:text="DEL" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button5"
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:id="#+id/button6"
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
<Button
android:id="#+id/button7"
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
<Button
android:id="#+id/button8"
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button9"
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:id="#+id/button10"
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5" />
<Button
android:id="#+id/button11"
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6" />
<Button
android:id="#+id/button12"
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button13"
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7" />
<Button
android:id="#+id/button14"
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8" />
<Button
android:id="#+id/button15"
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9" />
<Button
android:id="#+id/button16"
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="/" />
</TableRow>
<TableRow
android:id="#+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="2"
android:text="0" />
<Button
android:id="#+id/button18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="." />
<Button
android:id="#+id/button20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="x" />
</TableRow>
<TableRow
android:id="#+id/tableRow6"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="4"
android:text="=" />
</TableRow>
<TableRow
android:id="#+id/tableRow7"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
</TableLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:text="Result"
android:textSize="55dp" />
You can use match_parent in the table layout so it takes the full width of the parent then adjust left and right padding to generate the desired separation. Bear in mind that you already have a padding defined in your relative layout hence you you will need to play with both values.
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >
You set android:layout_width="wrap_content" to the TableLayout which causes it to be just wide enough to show all the content. Try using match_parent to make it take the entire parent width:
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >
Another thing that shrinks your TableLayout down is this:
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
in the parent RelativeLayout. If the first step does not suit your needs, you can try setting lower paddingLeft and paddingRight values.
try this edit
<RelativeLayout 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"
tools:context="com.example.funkycalc.MainActivtiy\" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >
the padding values was the problem...
I am trying to use the design tab in Android Studio to design my XML for my homescreen, however when i try and drag a button it realigned everything on the layout, eg like in the image below:
I want to arrange it so the buttons are a uniform size and aligned in a 2x3 table like the following
a b
c d
e f
I would like the image to remain in the same place as it is currently, with the text underneath also not to move.
Current XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/amityapplogo"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/welcomeadmin"
android:id="#+id/textView"
android:layout_gravity="center_horizontal"
android:layout_below="#+id/imageView"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/mydetails"
android:id="#+id/mydetailsbutton"
android:layout_gravity="center_horizontal"
android:clickable="false"
android:layout_toStartOf="#+id/myhealthbutton"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true"
android:layout_marginTop="42dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/policydetails"
android:id="#+id/policydetailsbutton"
android:layout_gravity="center_horizontal"
android:layout_alignTop="#+id/mydetailsbutton"
android:layout_toRightOf="#+id/findaproviderbutton"
android:layout_toEndOf="#+id/findaproviderbutton" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/myhealth"
android:id="#+id/myhealthbutton"
android:layout_gravity="center_horizontal"
android:layout_toStartOf="#+id/contactusbutton"
android:layout_centerVertical="true"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/findaprovider"
android:id="#+id/findaproviderbutton"
android:layout_gravity="center_horizontal"
android:layout_toStartOf="#+id/myhealthbutton"
android:layout_below="#+id/visitourwebsitebutton"
android:layout_alignLeft="#+id/imageView"
android:layout_alignStart="#+id/imageView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/contactus"
android:id="#+id/contactusbutton"
android:layout_gravity="center_horizontal"
android:layout_toEndOf="#+id/textView"
android:layout_below="#+id/visitourwebsitebutton"
android:layout_alignRight="#+id/imageView"
android:layout_alignEnd="#+id/imageView"
android:layout_marginTop="40dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/visitourwebsite"
android:id="#+id/visitourwebsitebutton"
android:layout_gravity="center_horizontal"
android:layout_toEndOf="#+id/myhealthbutton"
android:layout_alignBaseline="#+id/myhealthbutton"
android:layout_alignBottom="#+id/myhealthbutton"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
Cheers in advance!
Added tablerows, now all is aligned to the left hand side:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal"
android:id="#+id/">
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/amityapplogo" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/welcomeadmin"
android:id="#+id/textView"
android:layout_gravity="center_horizontal" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_column="1"
android:orientation="horizontal"
android:id="#+id/">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/mydetails"
android:id="#+id/mydetailsbutton"
android:layout_column="0" />
</TableRow>
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/policydetails"
android:id="#+id/policydetailsbutton" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/myhealth"
android:id="#+id/myhealthbutton" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/findaprovider"
android:id="#+id/findaproviderbutton" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/visitourwebsite"
android:id="#+id/visitourwebsitebutton" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/contactus"
android:id="#+id/contactusbutton"
android:layout_gravity="center_vertical" />
</TableRow>
</TableLayout>
Try this and let me know
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/amityapplogo"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/welcomeadmin"
android:id="#+id/textView"
android:layout_gravity="center_horizontal"
android:layout_below="#+id/imageView"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/mydetails"
android:id="#+id/mydetailsbutton"
android:clickable="false"
android:layout_marginTop="36dp"
android:layout_below="#+id/findaproviderbutton"
android:layout_alignRight="#+id/myhealthbutton"
android:layout_alignEnd="#+id/myhealthbutton" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/policydetails"
android:id="#+id/policydetailsbutton"
android:layout_toStartOf="#+id/mydetailsbutton"
android:layout_above="#+id/findaproviderbutton"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="36dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/myhealth"
android:id="#+id/myhealthbutton"
android:layout_toEndOf="#+id/imageView"
android:layout_below="#+id/policydetailsbutton"
android:layout_alignLeft="#+id/imageView"
android:layout_alignStart="#+id/imageView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/findaprovider"
android:id="#+id/findaproviderbutton"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="#+id/mydetailsbutton"
android:layout_toStartOf="#+id/mydetailsbutton" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/contactus"
android:id="#+id/contactusbutton"
android:layout_toEndOf="#+id/imageView"
android:layout_alignBottom="#+id/policydetailsbutton"
android:layout_alignLeft="#+id/myhealthbutton"
android:layout_alignStart="#+id/myhealthbutton" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/visitourwebsite"
android:id="#+id/visitourwebsitebutton"
android:layout_toEndOf="#+id/policydetailsbutton"
android:layout_alignBottom="#+id/mydetailsbutton"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="#+id/contactusbutton"
android:layout_toStartOf="#+id/contactusbutton" />
</RelativeLayout>
Here is what it look without assets
Comes to this(At Paul's , with assets):
This might work
<?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" >
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:text="ggggg"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/mydetailsbutton"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/textView"
android:layout_marginTop="42dp"
android:text="Details" />
<Button
android:id="#+id/policydetailsbutton"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/mydetailsbutton"
android:layout_alignTop="#id/mydetailsbutton"
android:layout_alignBottom="#id/mydetailsbutton"
android:text="eeeee" />
<Button
android:id="#+id/myhealthbutton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/mydetailsbutton"
android:layout_alignLeft="#id/mydetailsbutton"
android:layout_alignRight="#id/mydetailsbutton"
android:text="ddddd" />
<Button
android:id="#+id/findaproviderbutton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/mydetailsbutton"
android:layout_alignLeft="#id/policydetailsbutton"
android:layout_alignRight="#id/policydetailsbutton"
android:text="ccccc" />
<Button
android:id="#+id/contactusbutton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/myhealthbutton"
android:layout_alignLeft="#id/mydetailsbutton"
android:layout_alignRight="#id/mydetailsbutton"
android:text="bbbbb" />
<Button
android:id="#+id/visitourwebsitebutton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/myhealthbutton"
android:layout_alignLeft="#id/policydetailsbutton"
android:layout_alignRight="#id/policydetailsbutton"
android:text="aaaaa" />
</RelativeLayout>
You can use LinearLayouts inside another LinearLayout just 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:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="Button1" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="Button2" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="Button3" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="Button4" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="Button5" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="Button6" />
</LinearLayout>
</LinearLayout>
You can add the ImageView and TextView before the first LinearLayout that keeps the first two Buttons.
How to place TableLayout a grid of buttons 5 on 5 on the screen center?
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Table5"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="30dp"
android:weightSum="5"/>
<?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" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:background="#ffffff"
android:gravity="center" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b11" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b12" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b13" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b14" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b15" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b21" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b22" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b23" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b24" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b25" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b31" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="b32" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b33" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b34" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b35" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b41" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b42" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b43" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b44" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b45" />
</TableRow>
<TableRow
android:id="#+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b51" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b52" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b53" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b54" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b55" />
</TableRow>
</TableLayout>
</RelativeLayout>
Use the above code in an android layout XML file to create your 5x5 button matrix using a TableLayout
<GridView
android:id="#+id/myGrid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="#dimen/grid_width"
android:gravity="center"
android:numColumns="auto_fit"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:stretchMode="spacingWidth"
android:verticalSpacing="8dp" />
and into grid_width, you can set a dimension (for hdpi, 480/5).
I don't know if this work for your situation. But try it
Try adding android:layout_gravity="center" attribute to the TableLayout
(If that doesn't work, wrap the TableLayout with a LinearLayout or something like that.)
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" />
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>