Develop Reference

Android - How to align a TextView text

I have the following layout for a ListView item:
<?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="match_parent"
android:padding="5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/item_icon_image"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:src="#drawable/m" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Business Name"
android:id="#+id/item_title_text"
android:layout_toRightOf="#+id/item_icon_image"
android:layout_marginLeft="3dp"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_alignTop="#+id/item_icon_image" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Distance"
android:id="#+id/item_distance_text"
android:layout_alignLeft="#+id/item_title_text"
android:layout_alignBottom="#+id/item_icon_image" />
</RelativeLayout>
And this is the rendered result:
As you can see there is a gap between the real text and the bottom of the image... I was expecting to have the bottom of the text matching exactly with the bottom of the image...so question is: How can I align the text to the bottom of the image?
(this also happens for the top text, but in the top instead)
EDIT:
For now I am using:
android:layout_marginBottom="-10dp"
But I wanted something more automatic, some solution that won't depend on dp or screen....but as commented, this might be impossible, because the View needs to make space for letter such as 'y', 'g' and 'j'....but I wish there could be something that will align it based on it's contents, so if there wasn't a 'g', it won't be saving this space.

You should add android:gravity="top" to your top text view and android:gravity="bottom" to your bottom text view to get the desired result.

Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<ImageView
android:id="#+id/item_icon_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/item_title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Business Name"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textStyle="bold" />
<View
android:layout_width="1dp"
android:layout_height="odp"
android:layout_weight="1"/>
<TextView
android:id="#+id/item_distance_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
</LinearLayout>

Do it like this to acheive the desired result:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Distance"
android:id="#+id/item_distance_text"
android:layout_alignLeft="#+id/item_title_text"
android:layout_alignBottom="#+id/item_icon_image"
android:gravity="bottom" />

Prevent views from overlapping in RelativeLayout

I'm trying to develop an android application, but I'm having some problems with the GUI design. The following part of screenshot is my problem (red and blue lines were generated by Android debug options).
This is the code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/caption"
android:layout_below="#+id/caption" >
<ImageButton
android:id="#+id/button_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/content_edit"
style="?android:attr/borderlessButtonStyle" />
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/num_placeholder"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
As you can see, the TextView myText overlaps the ImageButton button_edit.
A simple solution would be to use a LinearLayout instead of a RelativeLayout. The problem is that:
I need the edit button on the right
I need the text to fill the rest of the layout (at the left of edit button obviously)
I also tried to set myText's layout_width to 'fill_parent', but it fill the entire rest of the screen at the left of the edit button.
The expected behavior would be myText to increase its height (becoming a two-lines TextView) instead of overlapping 'button_edit'
Can anyone help me? Thanks

use layout_toLeftOf in TextView layout
like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/caption"
android:layout_below="#+id/caption" >
<ImageButton
android:id="#+id/button_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/content_edit"
style="?android:attr/borderlessButtonStyle" />
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/num_placeholder"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_toLeftOf="#+id/button_edit" />

Another way of doing is to use android:layout_toEndOf attribute
<ImageButton
android:id="#+id/button_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/content_edit"
style="?android:attr/borderlessButtonStyle"
android:layout_toEndOf="#+id/myText" />
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/num_placeholder"
android:textAppearance="?android:attr/textAppearanceLarge" />

Android RelativeLayout with wrap_content truncates some children

I have a RelativeLayout whose width/height is set to wrap_content. However, the button in the bottom right is truncated on its lower side.
Changing the RelativeLayout's paddingBottom doesn't help, neither does adding a marginBottom to the button.
Any ideas?
Here's my code:
<RelativeLayout
android:id="#+id/sign_up_phase_enteraddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:background="#ff6aa639"
>
<TextView
android:id="#+id/sign_up_signuphere"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="29dp"
android:text="#string/sign_up_signuphere"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/sign_up_emaillabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/sign_up_signuphere"
android:layout_alignLeft="#id/sign_up_signuphere"
android:layout_alignBaseline="#+id/sign_up_email"
android:text="#string/sign_up_emailaddress"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/sign_up_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="46dp"
android:layout_below="#id/sign_up_signuphere"
android:layout_toRightOf="#id/sign_up_emaillabel"
android:ems="10"
android:inputType="textEmailAddress" >
<requestFocus />
</EditText>
<Button
android:id="#+id/sign_up_signup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sign_up_haveaccount"
android:layout_alignRight="#id/sign_up_email"
android:layout_below="#id/sign_up_email"
android:text="#string/sign_up_signup" />
<TextView
android:id="#+id/sign_up_haveaccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/sign_up_emaillabel"
android:layout_marginTop="27dp"
android:layout_below="#id/sign_up_email"
android:text="#string/sign_up_haveaccount"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
...and this is what it looks like in the emulator:
Any thoughts on how I can get the bottom of my button to show?
TIA!

My fast idea is to set button bottom border to height of text on the left by using xml code
android:layout_alignBottom="#+id/sign_up_haveaccount"
because you've setted layout_below option already. However your xml code is quite not proper :) I will try write here better xml code for you, later.
Well, I found your problem. And I was searching for solution.
I setted for textview new padding bottom because button was aligned to this textview basline. I know that it could be a nice hack but I coudln't find andy good way to handle it :)
According to your layout I changed behaviour for edittext to make it stretchable. Also I grouped all elements into 3 groups. Each one per row to make it more readable.
Also do not forget that first 2 lines about xmls.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/sign_up_phase_enteraddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#ff6aa639"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp" >
<!-- 1 row -->
<RelativeLayout
android:id="#+id/row1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="29dp" >
<TextView
android:id="#+id/sign_up_signuphere"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sign_up_signuphere"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
<!-- 2 row -->
<RelativeLayout
android:id="#+id/row2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/row1" >
<TextView
android:id="#+id/sign_up_emaillabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sign_up_email"
android:text="#string/sign_up_emailaddress"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/sign_up_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="20dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/sign_up_emaillabel"
android:inputType="textEmailAddress" >
<requestFocus />
</EditText>
</RelativeLayout>
<!-- 3 row -->
<RelativeLayout
android:id="#+id/row3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/row2" >
<TextView
android:id="#+id/sign_up_haveaccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="27dp"
android:paddingBottom="15dp"
android:text="#string/sign_up_haveaccount"
android:textAppearance="?android:attr/textAppearanceSmall" />
<Button
android:id="#+id/sign_up_signup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sign_up_haveaccount"
android:layout_alignParentRight="true"
android:text="#string/sign_up_signup" />
</RelativeLayout>
</RelativeLayout>

This is happening because of your padding , you have given 10 dp padding in bottom and your button view doesn't have enough space.Remove padding and check it .

android - align a textview to the center of another view

i have some imagebuttons and each one has a corresponding textview, i'd like to align those textview's to the center of their corresponding imageview, i mean, like is seen on the app drawer...
!-----!
!icon !
!_____!
app name
this is my code, i'm using a RelativeLayout
<ImageButton
android:id="#+id/blog_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/logo_img"
android:layout_marginLeft="50dp"
android:layout_marginTop="51dp"
android:background="#null"
android:contentDescription="#string/blog_desc"
android:src="#drawable/blog" />
<TextView
android:id="#+id/blog_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/blog_button"
android:layout_below="#+id/blog_button"
android:layout_marginTop="8dp"
android:text="#string/blog_desc" />

Wrap that in a LinearLayout and center the children, like so:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/logo_img"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageButton
android:id="#+id/blog_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:contentDescription="#string/blog_desc"
android:src="#drawable/blog" />
<TextView
android:id="#+id/blog_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/blog_desc" />
</LinearLayout>

Old post but if this can help I think it's not necessary to add an additional container.
<ImageButton
android:id="#+id/blog_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/logo_img"
android:layout_marginLeft="50dp"
android:layout_marginTop="51dp"
android:background="#null"
android:contentDescription="#string/blog_desc"
android:src="#drawable/blog" />
<TextView
android:id="#+id/blog_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/blog_button"
android:layout_alignRight="#+id/blog_button"
android:layout_below="#+id/blog_button"
android:gravity="center_horizontal"
android:layout_marginTop="8dp"
android:layout_marginLeft="-20dp"
android:layout_marginRight="-20dp"
android:text="#string/blog_desc" />
It's work for me.

If a the TextView can be transparent then this can be achieved with a single View
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test string"
android:drawableTop="#android:drawable/btn_star"
android:background="#android:color/transparent"
android:textSize="10sp"
/>

If your views in RelativeLayout follow these steps:
1- wrap your view that wants to be aligned in the center of target view in Framelayout.
2- move all layout attributes to FrameLayout.
3- set layout_align_top and layout_align_bottom (or start and end if horizontal) to target view.
4- set layout_gravity to center_vertical (or horizontal) to child of Frame layout
Result:
<RelativeLayout
android:id="#+id/yourView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0">
<RatingBar
android:id="#+id/masseur_rating_bar"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:isIndicator="true"
android:progressDrawable="#drawable/ic_selector_rating_bar"
android:rating="#{masseurItem.rate}"
android:scaleX="0.8"
android:scaleY="0.8"
tools:rating="4.5" />
<TextView
android:id="#+id/rate_text_view"
style="#style/BodyTextViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/masseur_rating_bar"
android:text="#{String.valueOf(masseurItem.rate)}"
android:textSize="12sp"
tools:text="4.5" />
</RelativeLayout>

Android EditText vertical sizing: I want it to be small!

Here are sample pictures of two EditText fields I've added in an Action Bar:
[This is from the Graphical Layout tool in Eclipse]
[This is what it looks like in my emulator (2.1 WVGA854)
My question is, how can I make the EditText look a bit closer to the Graphical Layout? Or is this a function of the emulation? On my device, which has a custom rom, the EditText is square but looks similar to the Graphical Layout, which is what I want.
I've tried setting the textAppearance to "#android:attr/textAppearanceSmall". This does help in that it changes the size of the text within the EditText to be viewable, but it does not affect the size of the EditText itself.
Here's the XML for my EditText:
<EditText
android:maxLines="1"
android:scrollHorizontally="true"
android:textAppearance="#android:attr/textAppearanceSmall"
android:layout_marginTop="5dip"
android:layout_marginLeft="5dip"
android:layout_marginRight="5dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
I could post the full XML, but essentially this EditText is enclosed (along with the search icon ImageView) in a RelativeLayout that is within another RelativeLayout.
Thanks for any help!
EDIT
By request, here is the full XML for the top search bar:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/IBSearchOverlayMic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/aslctr_search_overlay_blackbutton"
android:src="#drawable/search_overlay_ic_microphone" />
<ImageView
android:id="#+id/IVSearchOverlayDivider1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/IBSearchOverlayMic"
android:src="#drawable/search_overlay_division" />
<ImageButton
android:id="#+id/IBSearchOverlaySearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/IVSearchOverlayDivider1"
android:background="#drawable/aslctr_search_overlay_blackbutton"
android:src="#drawable/search_overlay_ic_searchwhite" />
<RelativeLayout
android:id="#+id/RLSearchOverlaySearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/IBSearchOverlaySearch"
android:layout_alignBottom="#id/IBSearchOverlaySearch"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/IBSearchOverlaySearch"
android:layout_centerVertical="true"
android:background="#drawable/search_overlay_searchbg">
<EditText
android:id="#+id/ETSearchOverlaySearch"
android:maxLines="1"
android:scrollHorizontally="true"
android:textAppearance="#android:attr/textAppearanceSmall"
android:layout_marginTop="5dip"
android:layout_marginLeft="5dip"
android:layout_marginRight="5dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/ETSearchOverlaySearch"
android:layout_centerVertical="true"
android:layout_marginRight="10dip"
android:clickable="false"
android:focusable="false"
android:src="#drawable/search_actionbar_ic_searchcream" />
</RelativeLayout>
</RelativeLayout>

I determined the problem. The issue was that the EditText was inside the RelativeLayout...I think that messed with the padding, or perhaps the EditText's layout_height="wrap_content" meant that it extended vertically. Here's the reworked XML:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/IBSearchOverlayMic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/aslctr_search_overlay_blackbutton"
android:src="#drawable/search_overlay_ic_microphone" />
<ImageView
android:id="#+id/IVSearchOverlayDivider1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/IBSearchOverlayMic"
android:src="#drawable/search_overlay_division" />
<ImageButton
android:id="#+id/IBSearchOverlaySearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/IVSearchOverlayDivider1"
android:background="#drawable/aslctr_search_overlay_blackbutton"
android:src="#drawable/search_overlay_ic_searchwhite" />
<ImageView
android:id="#+id/IVSearchBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/IBSearchOverlaySearch"
android:layout_alignBottom="#id/IBSearchOverlaySearch"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/IBSearchOverlaySearch"
android:layout_centerVertical="true"
android:background="#drawable/search_overlay_searchbg" />
<EditText
android:id="#+id/ETSearchOverlaySearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/IBSearchOverlaySearch"
android:layout_alignBottom="#id/IBSearchOverlaySearch"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/IBSearchOverlaySearch"
android:layout_marginTop="5dip"
android:layout_marginLeft="5dip"
android:layout_marginRight="5dip"
android:layout_marginBottom="0dip"
android:paddingBottom="0dip"
android:maxLines="1"
android:scrollHorizontally="true" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/IBSearchOverlaySearch"
android:layout_alignTop="#id/IBSearchOverlaySearch"
android:layout_alignBottom="#id/IBSearchOverlaySearch"
android:layout_centerVertical="true"
android:layout_marginRight="15dip"
android:clickable="false"
android:focusable="false"
android:src="#drawable/search_actionbar_ic_searchcream" />
</RelativeLayout>