I struggle more with UI design in Android than actually making the application, so I was giving something a go:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/rowOne"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/BOne"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BTwo"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BThree"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BFour"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/rowTwo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/BFive"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BSix"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BSeven"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BEight"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/rowThree"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/BNine"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BTen"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BEleven"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BTwelve"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
</LinearLayout>
I have been trying to remove the spaces in between the rows and the columns, I tried giving a negative margin to the rows and the buttons like so:
android:layout_marginRight="-20sp"
But that is really "fiddly" not very accurate and I don't think it will scale the same for all screens (correct me if I am wrong). I also through giving the rows layout_weight attributes of one would make them cover the entire width of the screen (I know the weight is simply the importance given to the element). Perhaps I need to use stretchColumns? or perhaps there is another tag that might be useful here?
The reson that I have put it in a LinearLayout is because I plan to add other elements and experiment with those as well.
Replace your buttons :
<Button
android:id="#+id/BFour"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
with
<Button
android:id="#+id/BFour"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:text="Button" />
Related
I am trying to create a layout in XML something along of the lines of http://i.stack.imgur.com/aPoeU.png but I am little confused as to how to position the buttons in that format. I have created the buttons and tried different things like alignParentBottom, alignParentRight etc but I can't seem to get it the way I want it to be. Can someone please help me out?
<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=".MainActivity" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button1"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button2"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button3"
android:text="Button" />
We can manage it in all screen and in all resolution by weight_sum
Paste below code in your xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#000"
android:weightSum="1" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#bebebe"
android:layout_weight="0.30"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:layout_weight="0.20"
android:background="#bebebe"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:layout_weight="0.20"
android:background="#bebebe"
android:text="Button3" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:layout_weight="0.30"
android:background="#bebebe"
android:text="Button4" />
</LinearLayout>
Paste it in your XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2258A2"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
android:orientation="vertical"
android:weightSum="1" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.40"
android:background="#bebebe"
android:text="Button1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:layout_weight="0.20"
android:orientation="horizontal"
android:weightSum="1" >
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="1dp"
android:layout_weight="0.50"
android:background="#bebebe"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.50"
android:background="#bebebe"
android:text="Button3" />
</LinearLayout>
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:layout_weight="0.40"
android:background="#bebebe"
android:text="Button4" />
</LinearLayout>
Your code seems correct, but if you want to replicate the size of the buttons then you can't set the height as wrap_content. This will make it as tall as the text, change that to some given value:
android:layout_height="50dp"
Well, in RelativeLayout, as the name suggests, the elements are positioned relative to something else, like the parent view, or another widget in the layout. So you can align the widget in many many ways, like apending it to the right of a view, to the left, above, below, and so on.
Please refer to this link and this other link for more information.
So, if you want to make your buttons look exactly like your example image, try this:
<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=".MainActivity" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:text="Button 1" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button1"
android:text="Button 2" />
<Button
android:id="#+id/button3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button2"
android:text="Button 3" />
<Button
android:id="#+id/button4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button3"
android:text="Button 4" />
You can simply make the button width to fill_parent instead of align left and right. And the height, you can define the measures you'd like to use.
Btw, I used alignParentLeft and alignParentStart because I don't know which API level you're using, so I've used both parameters, old and new. But the effect is the same, your buttons will always start to the left of the parent view.
EDIT: As the user hasternet suggested, you could also use LinearLayout and get similar results.
EDIT 2: And if you like to change the look of your buttons, try to change the style (Take a look here to know what I mean).
Since you need to set the height of the buttons differently and also it depends on different screen size, you cannot achieve this with Relative Layout.
So go for LinearLayout and weightsum attribute. This way screen big or small, you can achieve your expected UI. Mentioned code below modified.
<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"
tools:context=".MainActivity"
android:Orientation="vertical"
android:weightsum="8" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button"
android:layout_weight="1"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button1"
android:text="Button"
android:layout_weight="3"
/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button2"
android:text="Button"
android:layout_weight="3"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button3"
android:text="Button"
android:layout_weight="1"/>
</LinearLayout>
I want to dive my layout in two parts that have common design.Layout orientation is horizontal and i want to have 2 layout of that layout how could i do that .Here is my XML please suggest me how could i do that.
Copy and paste below code in your xml file, and made changes as you like,
You can ask for any help if you want
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1" >
<Button
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/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" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="461dp"
android:layout_weight="1.00"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button4"
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" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Take the references of layout objects at runtime using their id and depending upon requirement write condition in your code to show hide layouts.
For instance I have just replicated the same views everywhere, don't mind it...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Make the root layout which is a <RelativeLayout> currently as <LinearLayout>.
Set the orientation of that linear layout to horizontal.
set android:weight of all the child layouts to '1'.
use yourChildLayout.setVisibility(View.VISIBLE) to show the two layouts which are needed and yourChildLayout.setVisibility(View.GONE) to hide the rest.
I need to line buttons up horizontally, however, my buttons are appearing vertically. They are all stacked up on top of each other.. do you know how I can do this horizontally?
<TableLayout
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="88dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
</TableLayout>
Using Linear layout you can easily represent your button in horizontally.
<LinearLayout
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
</LinearLayout>
You have not identified a TableRow for your TableLayout. Imagine how a table is created, row's go horizontally and columns go vertically.
Fixing your code would look something like this
<TableLayout
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="88dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" >
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
</TableRow>
</TableLayout>
Alternatively, to make things easier, I would recommend using a LinearLayout with the orientation set to horizontal.
Use a linearlayout as follows:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#646464"
android:gravity="center|center_vertical"
android:paddingBottom="5dp"
android:paddingTop="5dp" >
<Button
android:id="#+id/inner_artist_profile"
android:layout_width="60dp"
android:layout_height="25dp"
android:text="Profile"
android:textColor="#AEAEAE"
android:background="#drawable/sub_nav_left" />
<Button
android:id="#+id/inner_artist_news"
android:layout_width="60dp"
android:layout_height="25dp"
android:text="News"
android:textColor="#AEAEAE"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/inner_artist_profile"
android:background="#drawable/sub_nav_middle" />
<Button
android:id="#+id/inner_artist_events"
android:layout_width="60dp"
android:layout_height="25dp"
android:text="Events"
android:textColor="#AEAEAE"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/inner_artist_news"
android:background="#drawable/sub_nav_middle" />
<Button
android:id="#+id/inner_artist_videos"
android:layout_width="60dp"
android:layout_height="25dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/inner_artist_events"
android:background="#drawable/sub_nav_middle"
android:text="Videos"
android:textColor="#AEAEAE" />
<Button
android:id="#+id/inner_artist_albums"
android:layout_width="60dp"
android:layout_height="25dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/inner_artist_videos"
android:background="#drawable/sub_nav_right"
android:text="Albums"
android:textColor="#AEAEAE" />
</RelativeLayout>
this is from a working project modify id's according to need
Instead of a TableLayout, I think you should use a LinearLayout with a WeightSum. To distribute the widths of the 4 buttons evenly, set their widths to 0 and their weight to 1. Then set the weight sum of the LinearLayout to 4 (the number of buttons). Like this:
<LinearLayout
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="88dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal"
android:weightSum="4">
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
</LinearLayout>
There are many ways to do this.Please check following is one of the way
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="4" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
Add TableRow to TableLayout and here is the working code
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="88dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal" >
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
</TableRow>
</TableLayout>
Or encapsulate the Button objects within a TableRow tag e.g
<TableRow>
<Button></Button>
</TableRow>
I'm probably missing something obvious here but I can't seem to figure this out. I am looking for a result like 1, 5, or 6, a single row of 3 evenly distributed buttons that fill the width of the screen. Unfortunately however, each of these methods seem to have something wrong with them. 1 gives me a warning that "This TableRow layout or its TableLayout parent is possibly useless" and 5 and 6 give "Nested weights are bad for performance". So basically I'm wondering what the best way to do this is. Should I ignore the warning on no.1 or can I get them to display properly with just a TableRow or TableLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" >
<!-- No.1 -->
<TableLayout android:id="#+id/tableLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:stretchColumns="*" >
<TableRow android:id="#+id/tbRow0" android:layout_width="wrap_content" android:layout_height="wrap_content" >
<Button android:id="#+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num1" />
<Button android:id="#+id/btn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num2" />
<Button android:id="#+id/btn3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num3" />
</TableRow>
</TableLayout>
<!-- No.2 -->
<TableRow android:id="#+id/tbRow1" android:layout_width="fill_parent" android:layout_height="wrap_content" >
<Button android:id="#+id/btn4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num1" />
<Button android:id="#+id/btn5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num2" />
<Button android:id="#+id/btn6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num3" />
</TableRow>
<!-- No.3 -->
<TableRow android:id="#+id/tbRow2" android:layout_width="fill_parent" android:layout_height="wrap_content" >
<Button android:id="#+id/btn7" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="#string/num1" />
<Button android:id="#+id/btn8" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="#string/num2" />
<Button android:id="#+id/btn9" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="#string/num3" />
</TableRow>
<!-- No.4 -->
<TableRow android:id="#+id/tbRow3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:stretchColumns="*" >
<Button android:id="#+id/btn10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num1" />
<Button android:id="#+id/btn11" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num2" />
<Button android:id="#+id/btn12" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num3" />
</TableRow>
<!-- No.5 -->
<TableRow android:id="#+id/tbRow4" android:layout_width="fill_parent" android:layout_height="wrap_content" >
<Button android:id="#+id/btn13" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num1" />
<Button android:id="#+id/btn14" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num2" />
<Button android:id="#+id/btn15" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num3" />
</TableRow>
<!-- No.6 -->
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" >
<Button android:id="#+id/btn16" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num1" />
<Button android:id="#+id/btn17" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num2" />
<Button android:id="#+id/btn18" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num3" />
</LinearLayout>
<!-- No.7 -->
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" >
<Button android:id="#+id/btn19" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num1" />
<Button android:id="#+id/btn20" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num2" />
<Button android:id="#+id/btn21" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num3" />
</LinearLayout>
</LinearLayout>
I think 5 is the correct one, plus I'm not getting the nested weights warning.
Maybe it's related to what Agarwal pointed.
Edit: sorry I though 5 was using a LinearLayout. What I mean is:
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" >
<Button android:id="#+id/btn13" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num1" />
<Button android:id="#+id/btn14" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num2" />
<Button android:id="#+id/btn15" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num3" />
</LinearLayout>
In your xml file after first row you are closing tablelayout but even you are using table rows in 2 ,5 rows might be that a problem.
If you need it for only one then then better to have linearlayout because performance not to bad because you have a small xml file which is ok.
I am working on icon based main menu for my Android application (see attached image - Google+). The obvious layout for this is a TableLayout.
However, I have no idea and could not find information on how to center the table itself and the icons inside. The code I came up with is as follows (and resulting image is below the code):
<TableLayout android:layout_width="fill_parent" android:id="#+id/tableLayout1" android:layout_height="fill_parent" android:stretchColumns="1" android:padding="20dp">
<TableRow android:id="#+id/tableRow1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="20dp" >
<Button android:text="Button" android:id="#+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"></Button>
<Button android:text="Button" android:id="#+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"></Button>
</TableRow>
<TableRow android:id="#+id/tableRow2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="20dp" >
<Button android:text="Button" android:id="#+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" ></Button>
<Button android:text="Button" android:id="#+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"></Button>
</TableRow>
</TableLayout>
I will appreciate any tips and ideas.
i just made a program main menu like you need. It's density-independent, but i put it on a scrollview just to make sure it's usable everywhere.
You can change the buttons to imagebuttons if you like, so you get the menu you want.
A little explanation to the code:
every row has a textview on the left and on the right, as placeholders. The tablelayout'a android:stretchColumns="0,3" stretchs the textviews to fill the space next to the buttons.
you can change the margins so the buttons are nearer or further from each other.
And now here's the xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout android:layout_gravity="center"
android:layout_width="match_parent" android:layout_height="match_parent"
android:stretchColumns="0,3">
<TableRow android:layout_gravity="center">
<TextView />
<Button android:text="1" android:layout_margin="15dp"
android:layout_gravity="center_vertical"
android:width="100dip" android:height="100dip" />
<Button android:layout_gravity="center_vertical"
android:text="2" android:layout_margin="15dp"
android:width="100dip" android:height="100dip" />
<TextView />
</TableRow>
<TableRow android:layout_gravity="center">
<TextView />
<Button android:text="3" android:layout_margin="15dp"
android:layout_gravity="center_vertical"
android:width="100dip" android:height="100dip" />
<Button android:text="4" android:layout_margin="15dp"
android:layout_gravity="center_vertical"
android:width="100dip" android:height="100dip" />
<TextView />
</TableRow>
<TableRow android:layout_gravity="center">
<TextView />
<Button android:text="5" android:layout_margin="15dp"
android:layout_gravity="center_vertical"
android:width="100dip" android:height="100dip" />
<Button android:text="6" android:layout_margin="15dp"
android:layout_gravity="center_vertical"
android:width="100dip" android:height="100dip" />
<TextView />
</TableRow>
</TableLayout>
</ScrollView>
And this is how it looks like:
http://db.tt/yQ5NFhmk
try android:gravity="center" in the TableLayout spec. This will place the table rows in the center of the screen.
also try by adding android:gravity="center" in the TableRow for placing the buttons in the center of the table row.