How to fade edge of TextView in Android? - android

I am working on Android 3.0.
I have a TextView on my layout and I want it to be faded after 8 characters like in the main menu. This Text is located in RelativeLayout.
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/item_name"
android:textStyle="bold"
android:textColor="#color/white"
android:maxWidth="50dp"
android:maxLength="8"
android:layout_below="#+id/item_frame"
android:layout_alignBottom="#+id/item_view"
android:layout_centerHorizontal="true"
android:fadingEdge="horizontal">
</TextView>
Does anyone has an idea how to fade the text after few characters?

I think you need to combine fadingEdge with ellipsize and singleLine, and even then it will only happen if the text is longer than the control's width.

Related

How to make a TextView that starts with the beginning of the first pixel of text in it?

Here is my problem - I want TextView to fit | exactly from the left at least but even though I've set gravity to left, there are still some "empty pixels" to the left of | sign in the TextView and I want to prevent it from happening. How should I approach this problem?
Here are properties of a TextView I want to achieve the effect on:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="|"
android:typeface="monospace"
android:textColor="#ff16de2e"
android:id="#+id/cursor"
android:gravity="center_vertical|center_horizontal|left"
android:textSize="60sp"
android:clickable="false"
android:textStyle="bold"
android:layout_toEndOf="#+id/startButton"
android:layout_alignBottom="#+id/startButton"
android:background="#ff000000"
android:layout_alignRight="#+id/startButton"
android:layout_alignEnd="#+id/startButton"
android:layout_alignLeft="#+id/startButton"
android:layout_alignStart="#+id/startButton" />
Try setting this for your TextView.
android:includeFontPadding="false"
and to make sure the View does not extend beyond it's content use
android:layout_width="wrap_content"
If this still doesn't look like what you want, you can manually play with TextView's padding and do something like this:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="\u007C"
android:includeFontPadding="false"
android:padding="-1.5dp"
android:layout_margin="0dp"/>

Android TextView SingleLine field hides long text

I have a TextView which sits on the left side of the screen and is set with gravity="right" and it is set with SingleLine = "true."
If by some chance the text in this view gets too long I want it to simply disappear off the left hand side of the view. I thought the configuration below would do that but what actually happens is the the long string disappears completely, presumably down and outside of the view somewhere.
How can I create a simple text view that contains a single line of text and keeps its layout even when something unexpected happens? ... or even something predictable.
<TextView
android:id="#+id/tempF"
android:text="#string/tempF"
android:layout_width="146dp"
android:layout_height="wrap_content"
android:textColor="#cccccc"
android:textStyle="bold"
android:textSize="92dp"
android:fontFamily="serif"
android:gravity="right"
android:layout_marginTop="60dp"
android:layout_gravity="top|left"
android:singleLine="true"
/>
This is the purpose of "ellipsize" - truncating a portion of text to indicate additional text.
In you case, you may simply need to add something like:
android:ellipsize="end"
or you might need to go deeper:
Automatically ellipsize a string in Java
Or look at this:
android ellipsize multiline textview
The idea behind extending the class is that you can customize the behavior of the TextView when the text content exceeds the space provided. For example, you can give it the appearance the it "bleeds over" by removing padding, etc. An ellipsis is an indicator that is commonly used to explain "there's more text that you can't see" - this is how it would look:
This is really a really long...
(the 3 periods are the ellipsis - your text goes the opposite direction, but it should still work)
With a custom TextView, you could change the "..." to nothing or anything else you want (even an image, which I've done).
You could also marquee the text:
TextView Marquee not working
Add 2 properties in xml
android:singleLine="true"
android:ellipsize="end"
You should play with ellipsize attribute of the TextView.Check below:
<TextView
android:id="#+id/tempF"
android:text="#string/tempF"
android:layout_width="146dp"
android:layout_height="wrap_content"
android:textColor="#cccccc"
android:textStyle="bold"
android:textSize="92dp"
android:fontFamily="serif"
android:gravity="right"
android:layout_marginTop="60dp"
android:layout_gravity="top|left"
android:singleLine="true"
android:ellipsize="end"
/>
<TextView
android:id="#+id/tv_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorGray"
android:textSize="#dimen/_18dp"
android:padding="#dimen/_2dp"
android:singleLine="true"
android:ellipsize="end"
android:text="#string/desc" />
Since android:singleLine is deprecated. We can use this line android:maxLines
Can do like this.
android:ellipsize="end"
android:maxLines="1"
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000000" />
It works.

Multiline TextView with width "wrap_content"

I am wondering how to have a TextView display its content on several lines without hardcoding the width in the XML.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="false"
android:text="Long multiline text"/>
<TextView
android:textColor="#color/text_color"
android:layout_width="130dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
Any thought welcome.
EDIT: my problem is that when the text exceeds the width set (because it reaches the end of the screen) a portion of the text is just not displayed. I would expect the text to be split on two lines
Though I cannot reproduce the not wrapping problem, you can fix the positioning problem by using a weight on the first TextView. Using the following XML gives the expected output in the graphical layout view in Eclipse:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:singleLine="false"
android:text="Long multiline text"/>
<TextView
android:textColor="#color/text_color"
android:layout_width="130dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
Also add
android:minLines="2"
android:scrollHorizontally="false"
You could try
android:inputType="textMultiLine"
in your TextView XML. This worked for me.
I think I had very similar problem. I had a TextView with a text, where I was not sure how much lines will it take. It was encapsulated by a LinearLayout having android:layout_width="match_parent" to ensure my text will fill out all the space horizontally. However, the problem was that my text did not fit into 1 line and when it did break into a new line, the next view component below it did not move downwards to give enough space for the second line to be viewable fully.
I could achieve the solution by changing the LinearLayout that was containing my TextView into a RelativeLayout. By this way, the element below the text (actually below the Layout itself) was moved automatically to give enough space for the multi-line text.

Scrollable textview text turns black

I am currently developing an electronic guide for Latvian traveler. I have a scrollable 'textview' which is going to show information about object which is selected. So the problem is when i touch the text and start to scroll it is looking like this good
but when i touch it a little longer it turns black and after i scroll it for three lines text color is white again.bad
So the question is how to make it stay white on longpress or where the problem could be?
My textviews code:
<TextView
android:id="#+id/textView2"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:maxLines="5"
android:scrollbars = "vertical"
android:background="#drawable/rect"
android:text="Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
I just came across this issue, so maybe someone will make use of this answer:
Define the TextView color attribute explicitly to white and it won't change in touch events.

TextView text aligment is horrible! How to work around it?

I always seem to have the biggest issues with aligning a text on a layout. Seems like the TextView doesn't measure its text properly. The reported TextView width and height are a lot bigger than the actual text. One would expect the TextView width and height to be tightly wrapped around the text.
The image below shows how the number 18 and the text "SEC" are not aligning on the same bottom baseline. This is due to the larger text height being a lot bigger than the text is. My xml layout can be seen below.
How to achieve better text alignment accuracy?
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/scan_block_1_bg" >
<LinearLayout
android:id="#+id/staticCountDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/tvStaticScanning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shadowColor="#ffffff"
android:shadowDy="1.0"
android:shadowRadius="0.01"
android:text="SCANNING"
android:textColor="#878787"
android:textSize="20sp" />
<TextView
android:id="#+id/tvCountDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shadowColor="#66000000"
android:shadowDy="-1.0"
android:shadowRadius="0.01"
android:text="03"
android:textColor="#b6b6b6"
android:textSize="81sp" />
</LinearLayout>
<TextView
android:id="#+id/tvStaticSeconds"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/staticCountDown"
android:layout_toRightOf="#id/staticCountDown"
android:gravity="left"
android:shadowColor="#ffffff"
android:shadowDy="1.0"
android:shadowRadius="0.01"
android:text="SEC"
android:textColor="#878787"
android:textSize="12sp" />
</RelativeLayout>
//use this attribute in your TextView
android:layout_alignBaseline="#id/staticCountDown"
and android:layout_marginBottom="-10dp"
As strange as it may sound if you look at the screen shot provided Both the textviews have the same bottom base alignment. Try putting letters "gj" in tv countdown. You can actually see both will come to have same bottom base alignment. Its better go with padma Kumar's answer.

Categories

Resources