We Keep Coding

Arrange Screen in 3x3 pattern

I like to arrange the screen in 3 colomns and 3 rows in my android application.
all nine squares should always be the same size. Each square should be able to contain a picture or video which should not get cut in size.
I already have a fully working solution, but this one just works on a specific screen size, because I hardcoded the layout_withd and layout_heigth attributes. I have worked with a Tablelayout containing three TableRows and each containing three LinearLayouts.
Can you please give me some advice how to start this in a proper way? It should work on all devices.
Thanks for help

Try this
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/linearLayout2" android:layout_weight="1">
<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1"/>
<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1"/>
<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1"/>
</LinearLayout>
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/linearLayout" android:layout_weight="1">
<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1"/>
<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1"/>
<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1"/>
</LinearLayout>
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/linearLayout2" android:layout_weight="1">
<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1"/>
<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1"/>
<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>

Putting a menu bar on the bottom of the screen while using ExpandableListView

I figured out how to get the menu bar on top of the screen. It stays in position while I move around the main menu I created using expandableListView. However, I would like the menu bar to be on the bottom of the screen instead of the top. I played around with relativeView and got the bar on the bottom, however, the main menu disappears.
Here is my main xml file
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonbefore"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="back" />
<Button
android:id="#+id/buttonnext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="Next" />
</LinearLayout>
<ExpandableListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<TextView
android:id="#+id/android:empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="#string/main_no_items" />
Then I used this for java to get it to appear in my program.
LinearLayout bottomMenu = (LinearLayout)findViewById(R.id.buttons);
I tried playing around with the gravity and it did nothing. I can add more code from my program if you think it will help.

I'm assuming your buttons LinearLayout is the 'menu bar' you're referring to?
You can actually accomplish what you're looking for using either a RelativeLayout or a LinearLayout.
LinearLayout:
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<ExpandableListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="#string/main_no_items" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonbefore"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="back" />
<Button
android:id="#+id/buttonnext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Next" />
</LinearLayout>
</LinearLayout>
The buttons are bottom-aligned by setting the gravity, while the list is told to take up all other available space by giving it a weight of '1' and setting a height of '0dp'. That will cause it to stretch as much as possible without pushing the buttons off-screen.
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" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/buttons"
android:orientation="vertical" >
<ExpandableListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="#string/main_no_items" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonbefore"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="back" />
<Button
android:id="#+id/buttonnext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Next" />
</LinearLayout>
</RelativeLayout>
The buttons are bottom-aligned by setting the alignment on the parent. The list is told to fill all height, but stay 'above' the buttons.
On a general note: in order for this to work, I'm pretty sure that the list and empty views need to be combined together in their own layout.

The way to align the buttons to the bottom is to change your top level LinearLayout into a RelativeLayout. Then you can add the attribute android:layout_alignParentBottom="true" to your LinearLayout #+id/buttons, which holds your two buttons.

How can I set width of element in percent?

My question is very easy. I have layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#drawable/mobile_background"
android:layout_width="fill_parent"
android:gravity="center"
android:layout_height="fill_parent"
>
<Button
android:text="GET MESSAGES"
android:
android:id="#+id/buttonMessages"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button
android:text="REGISTRATION"
android:id="#+id/buttonRegistration"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button
android:text="SETTINGS"
android:id="#+id/buttonSettings"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
But I need to set non-fixed size for button - I need to set size 30% of screen width. How can I do it?

Try nesting your buttons in horizontal LinearLayouts with another view to the side for padding. Assign both your button and view android:layout_width="0dp", then give your button android:layout_weight="3" and the view android:layout_weight="7". This will give your buttons 30% and the empty view 70%.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonMessages"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="GET MESSAGES" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="7" />
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonRegistration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="REGISTRATION" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="7" />
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonSettings"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="SETTINGS" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="7" />
</LinearLayout>
</LinearLayout>

With three buttons it's hard to set 30-70 :) I'll show you how to do it with two, you'll get it.
If you use fill_parent for width, then the space will be distributed in reciprocal proportions. So you should set a weight of 7 for the smaller button, and 3 for the larger one. With more buttons it's trickier, but you can do the math: 1/x + 1/y + 1/z = 1 and you'll have equations for the proportions, in a case of 30%, 20%, 50%:
1/x / 3 = 1/y / 2 = 1/z / 5 Or you can just try and set values that look good :)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#drawable/mobile_background"
android:layout_width="fill_parent"
android:gravity="center"/>
<Button
android:text="Narrow button"
android:
android:id="#+id/buttonMessages"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="7"/>
<Button
android:text="Wide button"
android:id="#+id/buttonRegistration"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3"/>
</LinearLayout>

This can't be done in the XML. You would have to specify the size in the code. I would do that in the onCreate() of the activity:
obj.setLayoutParams(new TableLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT,0.25));
This means "use 100% of the parent's height but 25% of the parent's width".
source

TabHost/TabWidget views not centering in parent

Have a TabHost that doesn't center the views even though I set the views layout_gravity to center_horizontal. Here is my XML, the button is all I've added to the tab1 layout so far.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TabHost android:id="#+id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent">
<LinearLayout android:layout_width="fill_parent" android:id="#+id/linearLayout1" android:layout_height="fill_parent" android:orientation="vertical">
<TabWidget android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="#android:id/tabs"></TabWidget>
<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="#android:id/tabcontent">
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="#+id/tab1">
<Button android:layout_width="wrap_content" android:id="#+id/button1" android:layout_gravity="center_horizontal" android:text="Button" android:layout_height="wrap_content"></Button>
</LinearLayout>
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="#+id/tab2"></LinearLayout>
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="#+id/tab3"></LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>

you have to set gravity at the parent!

Try setting the android:gravity attribute on the parent of the button instead.
Like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabHost android:id="#+id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent">
<LinearLayout android:layout_width="fill_parent" android:id="#+id/linearLayout1" android:layout_height="fill_parent" android:orientation="vertical">
<TabWidget android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="#android:id/tabs"></TabWidget>
<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="#android:id/tabcontent">
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="#+id/tab1" android:gravity="center_horizontal">
<Button android:layout_width="wrap_content" android:id="#+id/button1" android:text="Button" android:layout_height="wrap_content"></Button>
</LinearLayout>
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="#+id/tab2"></LinearLayout>
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="#+id/tab3"></LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost></LinearLayout>

Error during post inflation process for TabHost

I have a FrameLayout inside of a TabHost. I am getting the following error. How can I get it to render in Eclipse?
Error during post inflation process:
The FrameLayout for the TabHost has no content. Rendering failed.
Here is my XML
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!--
<RelativeLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:id="#+id/actionbarRelativeLayout">
<ImageButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="#drawable/icon" android:id="#+id/stocktwitsImageButton"></ImageButton>
<ImageButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="#drawable/icon" android:id="#+id/composeImageButton" android:layout_alignParentRight="true"></ImageButton>
</RelativeLayout>
-->
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>

This is extract from Android's source setupTabHost method:
final int count = content.getChildCount();
if (count == 0) {
throw new PostInflateException(
"The FrameLayout for the TabHost has no content. Rendering failed.\n");
}
As the exception says, you need to have content. Refactor the XML to:
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/tab1"></LinearLayout>
</FrameLayout>