Develop Reference

Android Text View - Top and Bottom edges clipped off

Somebody can please explain this?
Why the third TextView is weird?
The definitions for the 2 lines before are the same, and I haven't touched the style with java...
Edit: I've added the XML Layout file.
The XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top" >
<TextView
android:id="#+id/quadEqu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="#string/quadequ"
android:textSize="27sp" />
<Button
android:id="#+id/closeBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"
android:text="#string/close"
android:onClick="close" />
<TextView
android:id="#+id/stepOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/quadEqu"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="#string/quadEquForm"
android:textSize="18sp" />
<TextView
android:id="#+id/stepTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/stepOne"
android:layout_below="#+id/stepOne"
android:text="#string/quadEquForm"
android:textSize="18sp" />
<TextView
android:id="#+id/stepThree"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/stepOne"
android:layout_below="#+id/stepTwo"
android:text="#string/quadEquForm"
android:textSize="18sp" />
</RelativeLayout>

It's a strange behaviour.
Try to set the content of the 'stepTwo' to the 'stepThree'.
If the same issue appeared, so the problem from the TextView.
You should check if you modify the padding of 'stepThree' textView programmatically.

In android Text View, when you try to render the subscript, the text gets clipped at the top and bottom. To avoid this, you can try to set the text from HTML.
Example.
stepThree.setText(Html.fromHtml("Some text<sup><small>1</small></sup>"));
stepThree.setText(Html.fromHtml(
"HCO<sub><small><small>3</small></small></sub>));
Refer this link for more details.
Android TextView's subscript being clipped off
Subscript and Superscript a String in Android

You need to change android:layout_height for the TextView (for all 3 is better).
<TextView
android:id="#+id/stepOne"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_below="#+id/quadEqu"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="#string/quadEquForm"
android:textSize="18sp" />
<TextView
android:id="#+id/stepTwo"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignLeft="#+id/stepOne"
android:layout_below="#+id/stepOne"
android:text="#string/quadEquForm"
android:textSize="18sp" />
<TextView
android:id="#+id/stepThree"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignLeft="#+id/stepOne"
android:layout_below="#+id/stepTwo"
android:text="#string/quadEquForm"
android:textSize="18sp" />

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 RelativeLayout make Edit Texts take all space

I have the following layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/aussie_bg_big" >
<ImageView
android:id="#+id/titleImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:contentDescription="#null"
android:src="#drawable/aussie_title_small" />
<ImageView
android:id="#+id/clearButtonOutput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/titleImage"
android:layout_alignParentRight="true"
android:contentDescription="#null"
android:src="#drawable/aussie_clear" />
<EditText
android:id="#+id/OutputText"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_above="#+id/clearButtonOutput"
android:layout_alignParentLeft="true"
android:background="#drawable/textbox"
android:ems="10"
android:gravity="top"
android:inputType="textMultiLine"
android:textColor="#ffffff" />
<ImageView
android:id="#+id/translateButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/OutputText"
android:layout_centerHorizontal="true"
android:clickable="true"
android:contentDescription="#null"
android:src="#drawable/translatebuttonselector" />
<ImageView
android:id="#+id/ClearButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/translateButton"
android:layout_alignParentRight="true"
android:contentDescription="#null"
android:src="#drawable/aussie_clear" />
<EditText
android:id="#+id/InputText"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_above="#+id/ClearButton"
android:layout_alignParentLeft="true"
android:background="#drawable/textbox"
android:ems="10"
android:gravity="top"
android:inputType="textMultiLine"
android:singleLine="false"
android:textColor="#ffffff" />
What I'd like to do is:
-> Keep the "imageBottom" imageview on the BOTTOM of the activity at all times, centered horizontally.
-> Keep the "imageCenter" imageview on the center of the activity at all times, centered horizontally.
-> Keep "imageBelowInputText" imageview below the InputText edittext which is located ABOVE imageCenter, aligned to the right.
-> Keep "imageBelowOutputText" imageview below the OutputText edittext which is located BETWEEN imageCenter and imageBottom, aligned to the right.
It works fine so far but I'd also like for the edittext views to occupy ALL of the remaining space EQUALLY. Providing different versions of the layout for small, normal, large, x-large screens worked fine, considering I hardcoded each edittext's size in dpi. However, on some layouts, it still looks a bit wrong and misplaced (misaligned). That's why I'm looking for a solution to place the ImageViews accordingly first, and then let the two EditTexts take all the remaining space EQUALLY (important).
So far, I couldn't think of a 100% correct solution. Can you help me out? Thanks!

Notice the two edittexts have their layout_height set to "0dp" and layout_weight set to "1"
XML
<?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:paddingTop="15dp"
android:orientation="vertical" >
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Clear" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_gravity="center"
android:text="Bear" />
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Clear" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_gravity="center"
android:text="Speaking Aussie" />
</LinearLayout>

Try giving each of the EditText views a height of 0dp, and a layout_weight value of 1. Give it a shot and let me know if that works.