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.
Related
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" />
In my screen I am having 3 buttons and in next row below those buttons I am having 3 names (name corresponding to those buttons) but my problem is that when ever name changes then size of buttons also changes but I do want to fix the size of buttons here is my code please help me
<TableLayout android:background="#drawable/toptab"
android:layout_width="fill_parent" android:id="#+id/tableLayout"
android:layout_height="wrap_content"
android:stretchColumns="1" android:gravity="center_vertical"
android:layout_alignParentBottom="true">
<TableRow>
<ImageButton android:id="#+id/btnPrev" android:background="#drawable/imgPrev"
android:layout_marginLeft="5dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<ImageButton android:id="#+id/btnRefresh"
android:layout_gravity="center" android:background="#drawable/refreshbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageButton android:id="#+id/btnNext"
android:background="#drawable/imgNext"
android:layout_width="5dp"
android:layout_height="20dp"
android:layout_marginRight="5dp" />
</TableRow>
<TableRow >
<TextView android:id="#+id/prev" android:text="Hk" android:layout_marginLeft="5dp" />
<TextView android:id="#+id/refresh" android:text="Refresh" android:layout_gravity="center" />
<TextView android:id="#+id/next" android:text="RS" android:layout_marginRight="5dp" />
</TableRow>
</TableLayout>
If you want to avoid fixing button size, then I would recommend using different layout than TableLayout, maybe RelativeLayout and TextViews with property alignBaseline or LinearLayout with weight properties could do the trick.
You should use linearlayout instead of table layout and use Weight property for aligning buttons and text view in equal dimensions, so here if you write more text in text view , button size will not increase. Also you can add more buttons in same manner. Below is the XML file and screen shot.
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextViewTextTextViewTextTextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
How to tell Android relative layout to take all space left between two elements. Does not matter how much is that space.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TableLayout android:layout_below="#id/title_container"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id = "#+id/usb_config_title">
<TableRow android:layout_gravity="center_horizontal">
<TextView android:layout_width="398dp"
android:layout_height="4px"
android:text=" "/>
<TextView android:layout_width="4px"
android:layout_height="4px"
android:text=" "
android:background="#color/title_background"/>
<TextView android:layout_width="398dp"
android:layout_height="4px"
android:text=" "/>
</TableRow>
<TableRow android:layout_gravity="center_horizontal">
<TextView android:text="#string/usb_stick"
android:layout_width="398dp"
android:gravity="center"
android:layout_height="wrap_content"
android:textSize="22dp"/>
<TextView android:layout_width="4px"
android:layout_height="fill_parent"
android:text=" "
android:background="#color/title_background"/>
<TextView android:text = "#string/usb_internal_memory"
android:layout_width="398dp"
android:gravity="center"
android:layout_height="wrap_content"
android:textSize="22dp"/>
</TableRow>
<TableRow android:layout_gravity="center_horizontal">
<TextView android:layout_width="398dp"
android:layout_height="5px"
android:text=" "/>
<TextView android:layout_width="4px"
android:layout_height="5px"
android:text=" "
android:background="#color/title_background"/>
<TextView android:layout_width="398dp"
android:layout_height="5px"
android:text=" "/>
</TableRow>
</TableLayout>
<LinearLayout android:orientation="horizontal"
android:layout_below="#id/usb_config_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ListView
android:id="#+id/list3"
android:layout_width="398px"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
android:scrollbarAlwaysDrawVerticalTrack="true"
/>
<TextView android:layout_width="4px"
android:layout_height="fill_parent"
android:text=" "
android:background="#color/title_background"/>
<ListView
android:id="#+id/list4"
android:layout_width="398px"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
android:scrollbarAlwaysDrawVerticalTrack="true"
/>
</LinearLayout>
<include layout="#layout/buttons_bottom_with_relative"/>
</RelativeLayout>
So i need id/list3 to last till button bar which is. At the moment id/list3 is covered by button bar.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="bottom"
android:layout_weight="1"
android:id="#+id/controls"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="false"
style="#android:style/ButtonBar"
android:background="#drawable/bottom_layout_selector"
>
<Button
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/startButton"
android:text="#string/start"
android:visibility="invisible"
/>
<Button
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/stopButton"
android:text="#string/stop"
android:visibility="invisible"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/nextButton"
android:text="#string/next"
android:visibility="invisible"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/resetStatistics"
android:text="#string/reset_statistics"
android:visibility="invisible"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/histogramSettings"
android:text="#string/histogram_settings"
android:visibility="invisible"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/saveButton"
android:text="#string/save"
android:visibility="invisible"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/loadConfig"
android:text="#string/load_config"
android:visibility="invisible"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/saveConfig"
android:text="#string/save_config"
android:visibility="invisible"
/>
</LinearLayout>
Have you tried adding this to the linear layout that includes list3
android:layout_below="#id/usb_config_title"
android:layout_above="#id/controls"
So the linear layout positions itself between those two.
I don't think you can use the weight attribute for Relative layouts. If you align one layout to the top of the screen and one to the bottom then tell the one in the middle to above and below the other two it should fill in the space
What you probably need is to set the layout_weight property of the Relative Layout, and the whole thing to be within a LinearLayout. If you could show us the XML you have so far we can see for sure!
I want to do something like this:
Button 1 centered in the top left part of the screen
Button 2 in the top right
Button 3 in the bottom left
and three or four buttons in the bottom right.
I'm new so I can't post a picture.
I tried different layouts but zero results.
Thanks for the help.
What you want is a RelativeLayout: http://developer.android.com/reference/android/widget/RelativeLayout.html
Something along the lines of:
<RelativeLayout>
<Button android:layout_alignParentTop="true" android:layout_alignParentLeft="true" />
<Button android:layout_alignParentTop="true" android:layout_alignParentRight="true" />
<Button android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" />
</RelativeLayout>
From that you should be able to figure out the rest. I suggest reading up on RelativeLayout and its alignment parameters
EDIT- After you explained in the comments, try something like:
<LinearLayout android:orientation="vertical">
<LinearLayout android:orientation="horizontal" android:layout_weight=".5">
<LinearLayout android:layout_weight=".5">
<Button android:layout_gravity="center" />
</LinearLayout>
<LinearLayout android:layout_weight=".5">
<Button android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
<LinearLayout android:orientation="horizontal" android:layout_weight=".5">
<LinearLayout android:layout_weight=".5">
<Button android:layout_gravity="center" />
</LinearLayout>
<LinearLayout android:layout_weight=".5">
<Button android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
That will fill your screen with 4 equally-sized 'blocks' and have a button positioned directly in the center of each one.
After some work I made it with a TableLayout and some LinearLayouts.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/TableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="4" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center" >
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center" >
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 4" />
</LinearLayout>
</TableRow>
There was a question posted like 5 min ago about this.
How to properly distribute 4 buttons on an android layout
I don't want to be rude, but you should try harder.
I'm having some trouble getting pictures inside a tablelayout...actually, each I have 2 columns and when i put a picture in a cell of the table, it's completely stretched and disproportionnated...I can't find how to make it stay it's original inside the cell and let the rest of the space filled by white background for instance....
XML is like that:
<TableLayout android:layout_width="fill_parent" android:stretchColumns="*"
android:layout_marginLeft="3dip" android:layout_marginRight="10dip"
android:layout_height="wrap_content">
<TableRow android:layout_marginBottom="10dip">
<TextView android:id="#+id/tv01" android:text="text1"
android:textSize="14sp" android:layout_margin="1dip"
android:layout_height="wrap_content" android:textColor="#color/bleuLink"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#color/background"></TextView>
<Button android:id="#+id/add" android:background="#drawable/addressbook"
android:layout_height="wrap_content" android:layout_width="wrap_content"></Button>
<Button android:id="#+id/call" android:background="#drawable/greenphone"
android:layout_height="wrap_content" android:layout_width="wrap_content"></Button>
Your images are stretching because of this line of code.
<TableLayout android:layout_width="fill_parent" android:stretchColumns="*" />
Because you tell your table to fill its parent and then set stretchable columns to all, your layout forces its children to fill the required space. Remove the stretchable columns attribute or set it to a comma delineated list of indexes for the columns you want to stretch.
<TableLayout android:layout_width="fill_parent"
android:stretchColumns="0, 2" android:layout_marginLeft="3dip"
android:layout_marginRight="10dip" android:layout_height="wrap_content">
<TableRow android:layout_marginBottom="10dip">
<TextView android:id="#+id/tv01" android:text="text1"
android:textSize="14sp" android:layout_margin="1dip"
android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"></TextView>
<Button android:id="#+id/add" android:background="#drawable/icon"
android:layout_height="wrap_content" android:layout_width="wrap_content"></Button>
<Button android:id="#+id/call" android:background="#drawable/icon"
android:layout_height="wrap_content" android:layout_width="wrap_content"></Button>
</TableRow>
</TableLayout>
Try the code above as an example.
An alternative solution is to add the Button into a Layout and set the layout attribute android:layout_height="wrap_content".
<TableLayout android:layout_width="fill_parent"
android:stretchColumns="*" android:layout_height="wrap_content">
<TableRow>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:gravity="center">
<TextView android:id="#+id/tv01" android:text="text1"
android:textSize="14sp" android:layout_margin="1dip"
android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1">
</TextView>
</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:gravity="center">
<Button android:id="#+id/add" android:background="#drawable/icon"
android:layout_height="wrap_content" android:layout_width="wrap_content">
</Button>
</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:gravity="center">
<Button android:id="#+id/call" android:background="#drawable/icon"
android:layout_height="wrap_content" android:layout_width="wrap_content">
</Button>
</LinearLayout>
</TableRow>
</TableLayout>