Develop Reference

How can I horizontally align two Textviews without overlapping?

I'm trying to put an N (new) badge at the end of the Textview. But Android Studio gives me that two Textviews, hashtag_list_row_title and hashtag_list_row_new can overlap if one Textview contains some lengthy string.
In production environment, it's not likely that hashtag_list_row_title is long, but I want to prevent two Textviews from being overlapped. How can I achieve this?
I prefer the way hashtag_list_row_new has priority over hashtag_list_row_title because that's more natural way to display an N badge.
So far my code is as follows.
list_row.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/hashtag_list_row_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_list_row_selector" >
<RelativeLayout
android:id="#+id/hashtag_list_row_title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="24dp"
android:layout_toLeftOf="#+id/hashtag_list_row_post_count"
android:layout_toStartOf="#+id/hashtag_list_row_post_count">
<TextView
android:id="#+id/hashtag_list_row_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:ellipsize="end"
android:gravity="center_vertical"
android:textColor="#color/hotspot_list_row_title"
android:textSize="16sp"
android:textStyle="bold"
android:text="asdfasdfsadfsadfsfsfsafasdfsafsfasfasfasf" />
<TextView
android:id="#+id/hashtag_list_row_new"
android:layout_toRightOf="#+id/hashtag_list_row_title"
android:layout_toEndOf="#+id/hashtag_list_row_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/red"
android:textStyle="bold"
android:layout_marginTop="2dp"
android:layout_marginLeft="11dp"
android:layout_marginStart="11dp"
android:text="#string/N" />
</RelativeLayout>
<TextView
android:id="#+id/hashtag_list_row_post_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#drawable/btn_post_normal"
android:gravity="center"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="#787878"
android:textSize="12sp"
android:textStyle="bold" />
<View
android:id="#+id/hashtag_list_row_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#+id/hashtag_list_row_title_layout"
android:layout_marginTop="24dp"
android:background="#color/bg_horizontal_divider" />
</RelativeLayout>
Edit
Textview on the right side should place right next to the left one, which has varying length. And I want to prevent the situation where the left one gets longer beyond certain length so that the right one is hidden, or overlapped, or whatever.
It should look as below.
| (text) N (empty space empty)|
| (more text) N (empty space) |
| (more text more more...) N |
Edit 2
I want the left TextView to be ellipsized when it's beyond the width of the row except for N badge. I want this.
I don't want this.
Edit 3
N badge should not be placed on the right side all the time. I want the badge to be placed right next to the left TextView when the length is shorter than horizontal width.
It's good.
It's no go.

Ran into the same problem.
What you want is the right side TextView to have:
android:layout_toEndOf="#+id/member_count"
The ID being the ID of the left side TextView.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:id="#+id/member_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textStyle="bold"
android:text="10"
android:textSize="16sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:layout_toEndOf="#+id/member_count"
android:text="Members"
android:textSize="16sp"/>
</RelativeLayout>

Try something like below.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/hashtag_list_row_root"
android:background="#drawable/bg_list_row_selector"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/hashtag_list_row_title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="24dp"
android:layout_toLeftOf="#+id/hashtag_list_row_post_count"
android:layout_toStartOf="#+id/hashtag_list_row_post_count">
<TextView
android:singleLine="true"
android:id="#+id/hashtag_list_row_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:ellipsize="end"
android:gravity="center_vertical"
android:textColor="#color/hotspot_list_row_title"
android:textSize="16sp"
android:textStyle="bold"
android:text="asdfasdfsadfsadfsfsfsafasdfsafsfasfasfasf" />
</RelativeLayout>
<TextView
android:id="#+id/hashtag_list_row_post_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#drawable/btn_post_normal"
android:gravity="center"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="#787878"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:layout_centerVertical="true"
android:id="#+id/hashtag_list_row_new"
android:layout_toLeftOf="#+id/hashtag_list_row_post_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/red"
android:textStyle="bold"
android:layout_marginTop="2dp"
android:layout_marginLeft="11dp"
android:layout_marginStart="11dp"
android:text="#string/N" />
<View
android:id="#+id/hashtag_list_row_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#+id/hashtag_list_row_title_layout"
android:layout_marginTop="24dp"
android:background="#color/bg_horizontal_divider" />
</RelativeLayout>
Result will be something similar like below. I had to remove some attributes that was pointing to resources that my project didn't have, so below figure is just a mock up. The code is updated to fit you.

android listview apperence like whats app Listview for chat application

Hello all i need to develop layout like whats app in chatting screen like
in this i want to display time after chat textview complete.
For that i have done
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/blue" >
<TextView
android:id="#+id/tv_message_chat_item_f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginTop="2dp"
android:gravity="left|center"
android:paddingBottom="#dimen/one_dp"
android:paddingLeft="#dimen/fifteen_dp"
android:paddingRight="#dimen/five_dp"
android:paddingTop="#dimen/one_dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="fgfdgdf rete tretretret rtrtrwtw fgdfr grtwerwerewr ewrwerew" />
<TextView
android:id="#+id/tv_message_time_f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/tv_message_chat_item_f"
android:layout_marginBottom="2dp"
android:paddingRight="#dimen/five_dp"
android:gravity="right"
android:paddingBottom="#dimen/one_dp"
android:text="fgfdg"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
But not working with big message (the time texview not set properly)

<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:gravity="bottom"
android:background="#drawable/blue"
android:layout_alignParentStart="true" android:weightSum="10">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Hi"
android:layout_weight="1"
android:id="#+id/textView"
android:gravity="bottom"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="bottom"
android:layout_marginStart="10dp"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>

assuming your textView3 is the one with the "Big message" you should first take advantage of relative layout capabilities and use android:layout_below="#id/textview2" this will prevent overlapping with textView2 instead of just aligning everything from the bottom up.
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView2"
android:layout_centerHorizontal="true"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
then after you set your TextView that will hold your 'time' you can once agian use something like
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView2"
android:gravity="right"
android:layout_alignParentRight="true"
android:text="12:00 pm"
android:textAppearance="?android:attr/textAppearanceSmall" />
Gravity right will allow the text to be place from right to left, since displaying time usually does not take more than 6 or 7 characters it will help.
Hope it resolves your problem.

You will need to implement ImageViews using 9patches (here: link)
And a listview, which can handle CustomLayouts for ListItems (with the 9Patch ImageView).
I think you are able to implement a list view, therefore I don't go deeper here.
Greets.

Android layout_toLeftOf not working

I've searched quite a lot here and have tried to provide information about how to align the children objects inside my relative layout, however one of them doesn't display.
This is my code:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignLeft="#id/textView1"
android:layout_below="#id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="example"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/textView2"
android:layout_alignBottom="#id/textView2"
android:text="example" />
</RelativeLayout>
TextView3 doesn't appear at all. It looks like there is a missing or conflicting rule, but I can't figure out which one.

Go ahead and give this a try, works for me.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="example"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/textView2"
android:layout_alignBottom="#+id/textView2"
android:text="example"
/>
</RelativeLayout>

textView2 is aligned to the left. If you align textView3 to the left of a left object it's going to be off the screen

Your code does not provide the code for textView1, but if I were to assume that your textView1 were to be on the top left side of the screen, then if you have this line for your inner RelativeLayout:
android:layout_alignLeft="#id/textView1"
textView2 would be aligned to textView1, therefore if you added textView3 was added and you did:
android:layout_toLeftOf="#id/textView2"
then it would appear off the screen to the left.

What I watch here for example using Relative Layout ,you need to be specific, if you wish to locate to the right of editTextNumberPeriods in this case, also you need to instruct .xml where is textView2, in this case it is below btn18, I meant it is not enough to instruct .xml if it is right or left. I tested it, it works perfectly.
<TextView
**android:id="#+id/btn18"**
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:gravity="center"
android:textAllCaps="false"
android:layout_centerHorizontal="true"
android:layout_below="#id/btn19"
android:text="Please enter numbers of periods." />
<EditText
**`android:id="#+id/editTextNumberPeriods"`**
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/btn18"
android:cursorVisible="true"
android:focusable="true"
android:fontFamily="sans-serif"
android:layout_centerHorizontal="true"
android:ems="10"
android:gravity="center"
android:background="#68DBFA"
android:hint="numbers of periods"
android:textColorHint="#color/white"
android:inputType="number"
android:selectAllOnFocus="true"
android:textAllCaps="false"
android:textColor="#7C1616" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
**android:layout_below="#id/btn18"
android:layout_toRightOf="#id/editTextNumberPeriods"**
android:text="TextView" />

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" />

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>