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>
Related
How to achieve the following layout for a simple android application. I have images in drawable file with the size of 144 X 144 px.
To achieve the layout I tried using table layout but I am not particular about any layout but following is my code.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/table_view">
<TableRow
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal"
android:layout_span="3">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Heading"/>
</TableRow>
<TableRow>
<Button
android:id="#+id/compliment_button"
android:background="#drawable/imgOne"/>
<Button
android:id="#+id/feedback_button"
android:background="#drawable/imgTwo"/>
</TableRow>
<TableRow>
<Button
android:id="#+id/subscribe_button"
android:background="#drawable/imgThree"/>
</TableRow>
<TableRow
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal"
android:layout_span="3">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="New Layout"/>
</TableRow>
Using this code I got the following layout. I don't know what am I doing wrong. Also, image sizes are smaller than their normal sizes. I have ldpi, mdpi, xdpi and xhdp drawable folder, in all of them I have 144x144px images.
Thanks for your help in advance
Try this code. You have not mentioned any button in the third table row and forgot to apply the weight property. As in this code I am adding a button, weight property and some margin. You can give margin dp as per your requirements.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/table_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_span="3"
android:gravity="center" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Heading" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/compliment_button"
android:layout_marginRight="20dp"
android:layout_weight="1"
android:background="#drawable/imgOne" />
<Button
android:id="#+id/feedback_button"
android:layout_weight="1"
android:background="#drawable/imgTwo" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/imgOne"
android:layout_marginTop="10dp" >
<Button
android:id="#+id/subscribe_button"
android:layout_weight="1"
android:layout_marginRight="20dp"
android:background="#drawable/imgThree" />
<Button
android:id="#+id/yourButton4"
android:layout_weight="1"
android:background="#drawable/imgThree" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_span="3"
android:gravity="center_horizontal" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="New Layout" />
</TableRow>
</TableLayout>
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!
When creating a listview layout, is it advisable to keep the layouts as simple as possible with relative layouts and minimal images and text, or is it ok to make them a little fancier with a couple of buttons, possibly an image or two, and some text within tablelayouts?
I am trying to minimise the clicks/touches to get to the pertinent information, and giving the user a nicer UI to play with as opposed to a bog standard list.
I've tried to research it but cant find guidlines on design layout and limitations on listviews.
Something tells me the xml below is the cause of the choking the listview experiences if the resultset grows to more than say 20?
Thank you.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#color/White" android:gravity="center">
<TableLayout android:layout_height="wrap_content" android:id="#+id/tableLayout1" android:layout_width="fill_parent">
<TableRow android:id="#+id/tableRow1" android:layout_height="wrap_content" android:layout_width="fill_parent">
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/linearLayout2">
<ImageView android:layout_marginRight="10px" android:layout_width="60dip" android:layout_marginTop="4px" android:id="#+id/icon" android:layout_height="60dip" android:src="#drawable/indian" android:layout_marginLeft="4px"></ImageView>
<TableLayout android:layout_height="match_parent" android:id="#+id/tableLayout2" android:layout_width="fill_parent">
<TableRow android:id="#+id/tableRow5" android:layout_height="wrap_content" android:layout_width="fill_parent">
<TextView android:focusableInTouchMode="false" android:paddingTop="5dip" android:textColor="#color/Black" android:id="#+id/title" android:textSize="18dip" android:layout_height="wrap_content" android:maxLines="10" android:layout_gravity="left" android:focusable="false" android:layout_width="fill_parent" android:text="#+id/label"></TextView>
</TableRow>
<TableRow android:id="#+id/tableRow6" android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:textColor="#color/Black" android:layout_height="wrap_content" android:id="#+id/distanceText" android:textSize="12dip" android:layout_width="wrap_content" android:gravity="center" android:layout_gravity="left" android:text="TextView"></TextView>
</TableRow>
</TableLayout>
</LinearLayout>
</TableRow>
<TableRow android:id="#+id/tableRow2" android:layout_height="wrap_content" android:layout_width="wrap_content" android:paddingBottom="15dip">
<LinearLayout android:id="#+id/linearLayout3" android:layout_width="wrap_content" android:layout_height="wrap_content">
<TableLayout android:layout_height="match_parent" android:id="#+id/tableLayout3" android:layout_width="fill_parent">
<TableRow android:layout_height="match_parent" android:id="#+id/tableRow8" android:layout_width="fill_parent">
<ImageView android:id="#+id/introImage" android:layout_height="wrap_content" android:layout_width="fill_parent" android:scaleType="fitStart" android:paddingLeft="8dip"></ImageView>
</TableRow>
<TableRow android:id="#+id/tableRow4" android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:linksClickable="true" android:textColor="#color/Black" android:layout_height="wrap_content" android:focusable="false" android:text="more" android:autoLink="all" android:textColorLink="#color/Aqua" android:textSize="12dip" android:clickable="true" android:paddingRight="5dip" android:id="#+id/intro" android:paddingTop="5dip" android:focusableInTouchMode="false" android:paddingLeft="5dip" android:layout_width="wrap_content"></TextView>
</TableRow>
<TableRow android:id="#+id/tableRow7" android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/description" android:text="description" android:visibility="invisible" android:paddingLeft="5dip" android:paddingRight="5dip" android:textColor="#color/Black" android:textSize="12dip" android:autoLink="all" android:clickable="true" android:linksClickable="true" android:textColorLink="#color/DarkGray"></TextView>
</TableRow>
</TableLayout>
</LinearLayout>
</TableRow>
<TableRow android:id="#+id/tableRow3" android:layout_height="wrap_content" android:layout_width="fill_parent" android:background="#drawable/listviewmenu" android:layout_gravity="center_horizontal" android:gravity="center_horizontal">
<LinearLayout android:layout_height="wrap_content" android:id="#+id/linearLayout1" android:layout_width="fill_parent" android:layout_gravity="center" android:gravity="center">
<Button android:id="#+id/mapClick" android:layout_height="wrap_content" android:text="#string/map_info" android:layout_width="wrap_content" android:background="#drawable/actionbutton" android:textColor="#color/White" android:textColorHighlight="#color/AntiqueWhite" android:textStyle="bold" android:gravity="center"></Button>
<Button android:id="#+id/moreClick" android:layout_height="wrap_content" android:text="#string/more_info" android:layout_width="wrap_content" android:textColor="#color/White" android:textColorHighlight="#color/Aqua" android:textStyle="bold" android:gravity="center" android:background="#drawable/actionmore"></Button>
</LinearLayout>
</TableRow>
</TableLayout>
The following is the same layout but use only one RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/white" >
<ImageView
android:id="#+id/icon"
android:layout_width="60dip"
android:layout_height="60dip"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="4px"
android:layout_marginRight="10px"
android:layout_marginTop="4px"
android:src="#android:drawable/dialog_frame" >
</ImageView>
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/icon"
android:focusable="false"
android:focusableInTouchMode="false"
android:maxLines="10"
android:paddingTop="5dip"
android:text="#+id/label"
android:textColor="#android:color/black"
android:textSize="18dip" >
</TextView>
<TextView
android:id="#+id/distanceText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/title"
android:layout_gravity="left"
android:layout_toRightOf="#+id/icon"
android:gravity="center"
android:text="TextView"
android:textColor="#android:color/black"
android:textSize="12dip" >
</TextView>
<ImageView
android:id="#+id/introImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/icon"
android:paddingLeft="8dip"
android:scaleType="fitStart" >
</ImageView>
<TextView
android:id="#+id/intro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/introImage"
android:autoLink="all"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:linksClickable="true"
android:paddingLeft="5dip"
android:paddingRight="5dip"
android:paddingTop="5dip"
android:text="more"
android:textColor="#android:color/black"
android:textColorLink="#android:color/primary_text_light"
android:textSize="12dip" >
</TextView>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/intro"
android:autoLink="all"
android:clickable="true"
android:linksClickable="true"
android:paddingLeft="5dip"
android:paddingRight="5dip"
android:text="description"
android:textColor="#android:color/black"
android:textColorLink="#android:color/darker_gray"
android:textSize="12dip"
android:visibility="invisible" >
</TextView>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:background="#android:drawable/dialog_frame" >
<Button
android:id="#+id/mapClick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/dialog_frame"
android:text="map_info"
android:textColor="#android:color/white"
android:textColorHighlight="#android:color/secondary_text_light"
android:textStyle="bold" >
</Button>
<Button
android:id="#+id/moreClick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/dialog_frame"
android:gravity="center"
android:text="more_info"
android:textColor="#android:color/white"
android:textColorHighlight="#android:color/primary_text_light"
android:textStyle="bold" >
</Button>
</LinearLayout>
</RelativeLayout>
I just changed color, string and drawable references to see if it works!
RelativeLayout rulez!
It is suggested to keep the layouts of the ListView items simple - and by that I mean fast performing. Simple does not mean boring :)
RelativeLayouts are best for rows of a ListView since they require only one pass to render, as opposed to say, nested LinearLayouts (as mentioned here). However, if you must go beyond the simple and include a bit of fancy stuff in your rows, there are a couple of tricks provided by the platform to help you.
Use the convertView optimization - i.e, in the getView() method of your Adapter, check to see if the convertView parameter is null. If it isn't then just use that object, and modify it with new values instead of inflating a new one.
Even if you use option 1 above, use the ViewHolder pattern to not only avoid inflation; but also optimize the "modifying the row with new values" step. This is described in this talk.
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.