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.
Related
my code is displaying the two different texts one over the other while i want them to be one above the other. I am providing my code in relative layout.
<TextView
android:id="#+id/intro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="hello im Shailly"
android:textColor="#B82525"
android:textSize="44sp"
android:textStyle="bold"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/nexttext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:paddingTop="32dp"
android:layout_alignBottom="#id/intro"
android:layout_centerHorizontal="true"
android:minLines="5"
android:text="and i'll show you around this app"
tools:ignore="HardcodedText,MissingConstraints"
/>
This attribute:
android:layout_alignBottom="#id/intro"
aligns the bottom edge of nexttext with the bottom edge of intro.
You should use:
android:layout_below="#id/intro"
so that nexttext is placed below intro.
You need this line of code in your second TextView
android:layout_below="#+id/intro"
So your code looks like
<TextView
android:id="#+id/intro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="hello im Shailly"
android:textColor="#B82525"
android:textSize="44sp"
android:textStyle="bold"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/nexttext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:paddingTop="32dp"
android:layout_below="#+id/intro"
android:layout_centerHorizontal="true"
android:minLines="5"
android:text="and i'll show you around this app"
tools:ignore="HardcodedText,MissingConstraints"
/>
you may remove:
android:layout_alignBottom="#id/intro"
Here is my layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="65dp"
android:layout_marginStart="20dp"
android:gravity="center_vertical|start"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="18.9dp"
android:lineSpacingExtra="64sp"
android:textColor="#484848"
android:textSize="16sp"
tools:text="அனைத்து அனைத்துஅனைத்து" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:lineSpacingExtra="64sp"
android:text="0"
android:textAlignment="center"
android:textColor="#color/red_500"
android:textSize="14sp" />
</LinearLayout>
All other languages are working fine, except tamil language is very big.
I need an icon at beginning and sometimes it show number of notifications at end. So I need to set ellipsize to text on middle.
How to achieve this?
you can use android:ellipsize atrribute to do that.
like this :
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="18.9dp"
android:lineSpacingExtra="64sp"
android:textColor="#484848"
android:textSize="16sp"
android:ellipsize="end"
android:maxLines="1"
tools:text="அனைத்து அனைத்துஅனைத்து" />
note: don't forget to use android:maxLines attribute to set the line number of your text.
I have debugged and everything goes fine; moreover, in Graphical Layout everything is fine. here you can see the code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="10dp"
android:background="#color/white" >
<ImageView
android:id="#+id/image"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginStart="5dp"
android:src="#drawable/news_img1" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_alignParentTop="true"
android:layout_toEndOf="#id/image"
android:text="Pizza Rondon"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_toEndOf="#id/image"
android:text="Ingredients: meat, potato, tomato, salad included too. " />
<TextView
android:id="#+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginEnd="20dp"
android:text="60 Lei"
android:textColor="#color/dimmed_red"
android:textStyle="bold" />
</RelativeLayout>
and here is the result as this view is an item from ExpandableListView:
I dont set any data to TextViews inside my customAdapter. What could cause the TextViews to dissapear? I can't even see any difference between price and others two which are not shown, which do not differ much in layout.
Did you try changing text color - maybe it is set to white??? The price is showing because android:textColor="#color/dimmed_red"
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" />
I have this layout inside of a RelativeLayout:
<LinearLayout
android:id="#+id/llWatchItemCommentButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/myMasterCat_Item"
style="#style/DropShadowEffect"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="99"
android:shadowColor="#ffffff"
android:text="Item"
android:textColor="#515b61"
android:textSize="22sp" />
<ImageView
android:id="#+id/bFollowComment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/featured_button_selector"
android:padding="5dp"
android:src="#drawable/comment" />
</LinearLayout>
<TextView
android:id="#+id/myMastCat_Cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/llWatchItemCommentButton"
android:layout_alignLeft="#+id/llWatchItemCommentButton"
android:layout_marginLeft="10dp"
android:text="MasterCat"
android:textColor="#666"
android:textSize="16sp" />
Essentially, if that TextView in the Layout becomes two lines, it will overlap with the TextView positioned below theLinearLayout`.
Is there an attribute perhaps that could correct this? As in, I want the bottom TextView to be below the entire LinearLayout at all times, even if it begins to grow. Right now, the position appears fixed.
Have you tried the following:
<TextView
android:id="#+id/myMastCat_Cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/llWatchItemCommentButton" //add this line in
android:layout_alignBottom="#+id/llWatchItemCommentButton"
android:layout_alignLeft="#+id/llWatchItemCommentButton"
android:layout_marginLeft="10dp"
android:text="MasterCat"
android:textColor="#666"
android:textSize="16sp" />