Develop Reference

Why gravity doesn't center all of my views?

I was expecting all my TextView to be vertically centered in my RelativeLayout but this is only the case for the logo one. The others are anchored to the top of the latter.
Image
Here's my layout :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="72dp"
android:gravity="center_vertical">
<TextView
android:id="#+id/logo"
android:layout_width="40dp"
android:layout_height="40dp"
android:text="TextView" />
<TextView
android:id="#+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/logo"
android:layout_toRightOf="#+id/logo"
android:text="TextView" />
<TextView
android:id="#+id/eta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/stop"
android:layout_toRightOf="#+id/stop"
android:text="TextView" />
<TextView
android:id="#+id/direction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/stop"
android:layout_toEndOf="#+id/logo"
android:layout_toRightOf="#+id/logo"
android:text="TextView" />

The attribute layout_toEndOf performs layouting as follows:
Positions the start edge of this view to the end of the given anchor view ID. Link
Which means that all your TextViews start edges align with the logo's end.
As a starting point, just remove all layout_toEndOf attributes.
Then your layout should look something like this:
+--------------+
| | +-----------+
| | | stop |
| | +-----------+ +-----------+
| logo |/* no space */ | eta |
| | +-----------+ +-----------+
| | | direction |
| | +-----------+
+--------------+
More precisely, logo is vertically centered, same as eta. Since your layout code explictly places stop and direction directly to the right of logo, therefore direction is below stop.

Android: Placing button relative to ImageView

I want to make a part of a bitmap clickable and my layout looks like this:
________________________________
| ##### |
| ##### |
| ___________________ |
| | | |
| | | |
| | image | |
| | | |
| | | |
| ___________________ |
________________________________
I thought the easiest way to this would be to place a button over the image with a relative layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
But I haven't figured out how to get the button to align with the upper left corner of the image (instead of the upper left corner of the relative layout, as it does now). Is this possible with a relative layout?
Suggestions for other approaches are also welcome, I considered this:
http://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/
But it seems a bit of an overkill for my simple rectangle area.

Try this:
<ImageView
android:id="#+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_alignLeft="#id/ImageView"
android:layout_alignTop = "#id/ImageView"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>

You can also use
<Button
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/image1"
android:drawableLeft="#drawable/image2t"
android:drawableRight="#drawable/image3"
android:drawableTop="#drawable/image4"
android:drawableTop="#drawable/image4"
android:textColor="#ffffff"
/>

Okay, my google-fu improved and thanks to asenovm I figured it out! The imageview has a android:adjustViewBounds property, which is by default set to false. Setting it to true adjusts the imageviews bounds to the image, so that alignLeft and alignTop work correctly for the button.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/ImageView"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_alignLeft="#id/ImageView"
android:layout_alignTop = "#id/ImageView"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>

Positioning of textview for Android

Is there a way to position a textview to be slightly above a centerd android button? I don't want to hardcode values for a particular screen obviously, but something that will dynamically scale. The button will always be centered, however...
Thanks in advance!

Yes if your parent layout is a RelativeLayout you can position Views in relation to each other or to the parent here is a simple example (Warning didn't type this into IDE, may contain typo):
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/mBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am a Button!"
android:layout_centerInParent="true" />
<TextView
android:id="#+id/mTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text"Some Text"
android:layout_above="#+id/mBtn" />
</RelativeLayout>
That will make your layout look roughly like this:
________________________
| |
| |
| Some Text |
| [I am a Button!] |
| |
| |
|______________________|

how to put a view off-screen?

Is it able to put views to the left, but off-screen?
I want display three views(images) but only the second fit on the screen, something like:
+---------------------+
| Screen |
+-------+ +-------+ +-------+
| | | | | |
| image | | image | | image |
| | | | | |
+-------+ +-------+ +-------+
| |
+---------------------+
I would like to start be visible in this form.

You can use several approaches:
Gallery (http://developer.android.com/resources/tutorials/views/hello-gallery.html)
HorizontalScrollView (http://developer.android.com/reference/android/widget/HorizontalScrollView.html)
ViewPager (http://android-developers.blogspot.com/2011/08/horizontal-view-swiping-with-viewpager.html)
The choice now depends on what exactly you want to perform in your app.
Hope this helps!
In case you need something more specific, please shoot it!

In xml, try using:
android:paddingLeft

you can also do it with RelativeLayout. i think it is kind of like floating div in HTML, very funny.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout android:id="#+id/left_body"
android:gravity="center"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:background="#drawable/house"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
<RelativeLayout android:id="#+id/right_body"
android:gravity="center"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:background="#drawable/house"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
<RelativeLayout android:id="#+id/main_body"
android:layout_toRightOf="#id/left_body"
android:layout_toLeftOf="#id/right_body"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:background="#drawable/house"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</RelativeLayout>

Android AppWidget layout troubles with ellipsize

I'm writing an app-widget that displays some numbers, each with label in front of it.
The layout looks like this:
.-----------------------------.
| Label1 | AAAAAAAAAAA |
| LongerLabelLabel2 | BBBBBBB |
| LongLabel3 | CCCCCCCCCC |
'-----------------------------'
There is one outer (vertical) LinearLayout, and each row is a horizontal LinearLayout with two TextViews.
The problem is that the numbers get ellipsized if the width of the label and the number is too wide for the widget. I want the labels to get ellipsized.
The above situation for instance, would end up like this:
.-----------------------------.
| Label1 | AAAAAAAAAAA |
| LongerLabelLabel2 | BBBB... |
| LongLabel3 | CCCCCCCCCC |
'-----------------------------'
instead of the desired
.---------------------------.
| Label1 | AAAAAAAAAAA |
| LongerLabelL... | BBBBBBB |
| LongLabel3 | CCCCCCCCCC |
'---------------------------'
I can't for my life figure out how to solve this. Any help is appreciated.
My current layout is the following:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="0dip"
android:orientation="vertical"
style="#style/WidgetBackground">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ROW1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="7dip"
android:paddingBottom="0dip"
android:paddingRight="10dip"
android:paddingLeft="10dip"
android:orientation="horizontal">
<TextView android:id="#+id/NAME1" android:singleLine="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="end" style="#style/Text.account" />
<TextView android:id="#+id/BAL1" android:singleLine="true" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="right" style="#style/Text.balance" />
</LinearLayout>
... (more similar rows in the outer layout)
</LinearLayout>

I suspect your problem, in part, is that you have android:layout_width="wrap_content" for your label. I would not expect it to ellipsize at all, since there is enough room to show it.
I would switch away from LinearLayout to RelativeLayout. Define your number "column" as android:layout_alignParentRight="true" and android:layout_width="wrap_content". Define your label "column" as android:layout_alignParentLeft="true", android:layout_toLeftOf="..." (where ... is your number column), and android:ellpsize="end". That should give the number all the space it needs and constrain the label, forcing it to ellipsize.