Develop Reference

Android layout or button

I'm having a problem with an Android APP that seems related to layout. Attached image you'll see that the "Alerts" button sticks out and doesn't seem the same as the other buttons. I've replaced the image with a known good one, but the problem remains.
It was suggested it was because it is tabhost layout, but all the changes that have been recommended have not worked. So far I've tried changing the attributes from android:height and width to "wrap_content", "fill_parent", and "match_parent". Match caused another strange white space to be corrected, but this button is my last apparent challenge.
Here's the layout code, can you tell me what the problem is?
<?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="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btnSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_search"
android:focusable="false"
android:freezesText="false"
android:imeOptions="actionNext"
android:longClickable="false"
android:paddingLeft="17dp"
android:text="Search"
android:textColor="#color/color_text_default"
android:textSize="12dp"
android:visibility="visible" />
<Button
android:id="#+id/btnHistory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_history"
android:paddingLeft="25dp"
android:text="History"
android:textColor="#color/color_text_default"
android:textSize="12dp" />
<Button
android:id="#+id/btnFavorites"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_favorites"
android:paddingLeft="30dp"
android:text="Favorites"
android:textColor="#color/color_text_default"
android:textSize="12dp" />
<Button
android:id="#+id/btnAlerts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_alerts"
android:paddingLeft="12dp"
android:text="Alerts"
android:textColor="#color/color_text_default"
android:textSize="12dp" />
</LinearLayout>
<?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">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.32" >
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</TabWidget>
</LinearLayout>
</TabHost>

You'd think someone would have replied, in the end it was stupid simple.
The answers is:
Tabhost using tabactivity will display the background through menu items if they are re-sized. Add a color coded (html notation) color to the schema, then call that with the android:border-background construct.

Android button text moves

Ive got the problem that, when i click one of the buttons shown in xml below, the text on the button jumps down one line. So if the button is 1 line, no text is shown. If the button is 2 lines, only the first line is shown, in the buttom of the button.
Nothing in the onClick method changes the layout.
Heres the XML
<?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"
android:id="#+id/layout_main">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
.. a few other layouts and controls that works fine
<TableLayout
android:id="#+id/tableLayout276"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/TableRow10"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/BtnRet"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="Ret"
android:gravity="center"
android:textSize="18dp" />
<Button
android:id="#+id/BtnVisningsType"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="Decimaltal"
android:gravity="center"
android:textSize="18dp" />
<Button
android:id="#+id/BtnFunktioner"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="Funktioner"
android:gravity="center"
android:textSize="18dp" />
</TableRow>
</TableLayout>
.. a few other layouts and controls that works fine
</LinearLayout>
</ScrollView>
</LinearLayout>
Now, if i change the layout_width on the buttons to wrap_content, it all works fine (got the idea from When changing textview, the text on a button below the textview moves down. Help! ) - except the buttons now obviusly dont have the same width, and it looks messy.
Does anyone have any idea why this happens, and how i can both keep the text, and decide the size of the buttons?

This adds complexity to the layout but might be a solution.
Add a LinearLayout to your table row and use weights to control precise layout of your buttons. Something like this:
<TableRow
android:id="#+id/TableRow10"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
android:weightSum="3"
android:orientation="horizantal"/>
<Button
android:id="#+id/BtnRet"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Ret"
android:gravity="center"
android:textSize="18dp" />
<Button
android:id="#+id/BtnVisningsType"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Decimaltal"
android:gravity="center"
android:textSize="18dp" />
<Button
android:id="#+id/BtnFunktioner"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Funktioner"
android:gravity="center"
android:textSize="18dp" />
</LinearLayout>
</TableRow>
Caveats:
Might give a performance hit
Typed from memory, please excuse any typos
Not tested
use padding/margin to adjust precise sizing
A RelativeLayout might also work.

Wrapping a ListView inside a LinearLayout

I'm trying to make a screen with a TextView at the top, the ListView in the middle and a Button at the bottom. I'd like it to be so that the TextView always is the top at the screen and the button always is the bottom, and then the ListView is in between. When the ListView exceeds the "space in the middle" I'd like the scroll-function to be only between the TextView and Button. With my attempt it just expands beyond the TextView and Button.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/paper" >
<TextView
android:id="#+id/tvLOL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Standardvarer"
android:textSize="40dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tvLOL"
android:layout_alignBottom="#+id/bNyVare"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
<Button
android:id="#+id/bNyVare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Tilføj ny vare"
android:textSize="30dp" />
</RelativeLayout>

See if this helps(the LinearLayout wrapping the ListView should be removed(and move the layout_above/below to the ListView) if you only use it to wrap the ListView and nothing else):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/paper" >
<TextView
android:id="#+id/tvLOL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Standardvarer"
android:textSize="40dp" />
<Button
android:id="#+id/bNyVare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Tilføj ny vare"
android:textSize="30dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tvLOL"
android:layout_above="#id/bNyVare"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>

Just an alternative solution to that of #Luksprog, although that's definitely the way to go for more complex layouts. I would ditch the LinearLayout that surrounds the ListView though, as it doesn't add anything, except for unnecessary complexity in the view hierarchy.
A relatively simple layout as described in your question can also be written using a LinearLayout as root and a weight on the ListView to dynamically fill up all space inbetween the TextView and Button. This weight also pushes the Button all the way to the bottom, without pushing it off.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/paper" android:orientation="vertical">
<TextView android:id="#+id/tvLOL" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center_horizontal"
android:text="Standardvarer" android:textSize="40dp" />
<ListView android:id="#android:id/list" android:layout_width="fill_parent"
android:layout_height="0dp" android:layout_weight="1" />
<Button android:id="#+id/bNyVare" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Tilføj ny vare"
android:textSize="30dp" />
</LinearLayout>

relative layout issues/android

I am having issues with creating a menu (not menu when you click menu button -- but menu as in the welcome screen to select items). I went to ImageView and TextView float (left/right) Android and I did not solve my issue. I would like to create at least five or six options to select from on this menu class. This is my menu.xml file. Please let me know what I need to do.
The issue is that the first item appears, but the second item overlaps the first item. I been picking away with this for the last hour and cannot solve this issue.
<?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="wrap_content"
android:padding="5dp">
<TextView
android:textSize="18dp"
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" Check Your Account" />
<ImageView
android:src="#drawable/ic_menu_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/icon" />
<TextView
android:textSize="18dp"
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" View our Site" />
<ImageView
android:src="#drawable/ic_menu_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
thannk you.

Why don't you use a LinearLayout (like a vertical one with severals little horizontal ones inside, each with a TextView and an ImageView) ?
Anyway, if you want to use RelativeLayout you should use something like android:layout_toRightOf, android:layout_toLeftOf, android:layout_above or android:layout_below in your xml to place your elements.
I advise you to take a look at http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html if you don't know those parameters.

You use a RelativeLayout but you don't place elements with reference to each other.
Example :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button android:id="#+id/topBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top"
android:layout_centerHorizontal="true">
</Button>
<Button android:id="#+id/leftBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:layout_below="#+id/topBtn"
android:layout_toLeftOf="#+id/topBtn">
</Button>
</RelativeLayout>
http://developer.android.com/reference/android/widget/RelativeLayout.html

A Linear Layout would be better.
Try this and tell me if this is what you needed:
<?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:padding="5dp"
android:orientation="vertical"
>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" Check Your Account"
android:textSize="18dp" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_add" android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" View our Site"
android:textSize="18dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_add" android:layout_gravity="center_horizontal"/>
</LinearLayout>
</LinearLayout>

Android - editText and send/exit buttons

I am finishing implementing an application, which has inside activity for sending a message (just editText and two buttons - send and cancel, message is then send to the fixed address). When i start this activity, on a screen I see textBox and keyboard, which is immediately shown. But disadvantage of this is that theese buttons are covered or half-covered by the keyboard and all I want is to have is similar as in the messages. When keyboard is visible, shrink the text field and show in addtion buttons above the keyboard, if I hit back arrow on under the screen, keyboard dissapears, nearly whole screen would be taken by this editText and on the bottom there will be those two buttons... can it be real?
Edit: How to make it happen, that this screen will have with active keyboard visible all buttons?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="vertical"
android:layout_height="fill_parent"
android:background="#drawable/poz3"
android:padding="10dip">
<TextView
android:text="Message:"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="25dip"
android:textColor="#color/black"
/>
<EditText
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Write message here"
android:gravity="top"
android:lines="7"
android:inputType="textShortMessage|textAutoCorrect|textCapSentences|textMultiLine"
android:imeOptions="actionSend|flagNoEnterAction"
/>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_height="fill_parent"
>
<Button
android:id="#+id/enquirySendButton"
android:layout_width="fill_parent"
android:layout_height="60dip"
android:text="Send"
android:layout_weight="1.0"
android:background="#drawable/custom_button"
/>
<Button
android:id="#+id/enquiryExitButton"
android:layout_width="fill_parent"
android:layout_height="60dip"
android:text="Cancel"
android:layout_weight="1.0"
android:background="#drawable/custom_button"
/>
</LinearLayout>
</LinearLayout>

have got it working.
In your XML layout, in the main layout (RelativeLayout) have a LinearLayout with the buttons and android:layout_alignParentBottom="true". Add your other layout below, with clause android:layout_above="#id/yourButtonLayout"
My real life code goes like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textSize="14dip"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/taskEditFormBottomButtons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="true"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
>
<Button
android:id="#+id/taskEditFormBTSave"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="#string/save"
android:layout_weight="0.5"
/>
<Button
android:id="#+id/taskEditFormBTCancel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="#string/cancel"
android:layout_weight="0.5"
/>
</LinearLayout>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/taskEditFormBottomButtons"
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
....
>
....
</RelativeLayout>
</ScrollView>
</RelativeLayout>

This might be of some help,if not already tried..
http://developer.android.com/resources/articles/on-screen-inputs.html