Increasing text size adds extra padding to text in android - android

I am facing a simple problem. I am increasing textSize in xml. As I increase textSize there is some extra padding coming all around the text. I don't want that.
Here is my code:
<TextView
android:id="#+id/number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="70sp"
android:gravity="bottom"
android:includeFontPadding="false"
android:lineSpacingExtra="0dp"
android:text="1"/>
How to remove that space inside the box?

try this it works quite fine in xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rizwan"
android:padding="#null"
android:includeFontPadding="false"
/>
if you want it in java it will be like this
youtextView.setIncludeFontPadding (false)
NOTE!: you can use negative padding or in points but its not recommended as this is the builtin boxModel padding of android
IF THAT DOES NOT WORK THEN as its stated in OFFICIAL DOC Each Font comes with own white spacing around
try using a custom font in the asset folder instead of default ROBOTO like its done in this awesome project here
Credit goes to #Sunilkushwah. he uses "HVD Fonts - BrandonText-Light.otf" and it do solves the problem

Related

How do I scale my text size for multi-device compatibility on Android Studio?

I am having trouble scaling my text size based on the user's device. I use constraint layout to constrain the TextViews. I found that autoTextSize could be used to automatically fit my text in the TextViews. However, when I run my code on an Emulator like BlueStacks, some texts are not scaled properly. Weirdly, some work but some do not, even though I am implementing it the same way.
This is an example of what it looks like: The register button is in a big font but other texts aren't
This is what it looks like on my layout Editor:
My code for the register button:
<TextView
android:id="#+id/register"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="REGISTER"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="5:1"
app:layout_constraintEnd_toEndOf="#id/guideline3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#id/guideline2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.541" />
my code for the "up to 8 characters" text.
<TextView
android:id="#+id/req"
android:layout_width="0dp"
android:layout_height="0dp"
android:autoSizeTextType="uniform"
android:text="*up to 8 characters"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="7:1"
app:layout_constraintEnd_toEndOf="#+id/guideline5"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.538" />
Am I misusing autoSizeTextType somehow?
Also, my "Enter Username" text is very small. I use EditText and implement it the same way I did for the other two texts. If there is anyway I can make the font size bigger to fit the layout size, please let me know.
your <TextView android:id="#+id/register" is using app:autoSizeTextType="uniform" attr, <TextView android:id="#+id/req" have android:autoSizeTextType="uniform" - note the difference app/android. try to consolidate this param, you should probably use app in both/all TextViews
note that setAutoSizeTextTypeWithDefaults was introduced in API 26, so when you use android: prefix then this attr will be respected only on 26+. using custom app: makes this attr usable for TextView (in fact TextViewCompat) on any OS version
in Android Studio above layout preview you have an option to switch "Device to preview" and also API version - try to change to some older (in this sample 25 at most, preferably lowest supported minSdkVersion) or newest OS version, IDE should catch and show differences in look
Use TextView params like this
android:autoSizeTextType="uniform"
android:autoSizeMinTextSize="12sp"
android:autoSizeMaxTextSize="100sp"
android:autoSizeStepGranularity="2sp"
You can check the official documentation for more info.

Android: Cut off to long multiline text in TextView

I have a TextView with a height depending on previous content, but there might be a long Text in it. How can I cut it off at the right point and concatenate three dots or something similar to the new end?
Currently it looks like this:
I found some solutions for Single Line Text, but how does it work with more than one line? I also do not know the number of lines, because this depends on the screen size.
Are there other typical ways on Android to show that the text can be extended? E.g. a colour gradient in the last line?
Edit:
When I do it without a fixed heigth, I have to make the height depend on the element above and my XML will look like this:
<TextView
android:id="#+id/podcastShortDesc"
android:text="Long text"
android:layout_below="#+id/podcastTitle"
android:layout_toRightOf="#+id/podcastLogo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="3"
android:ellipsize="end"
android:layout_above="#+id/podcastMoreAction" />
When I do specify maxLines I can have luck an it will work:
But if the title is too big, it does not work:
You should add following code for "3 dots" at the end.
android:ellipsize="end"
You should remove fixed height property
android:layout_height="50dip"
instead you should add number of lines
android:maxLines="4"
android:layout_height="wrap_content"
Android will take care everything else. In this way, even if text is smaller than 4 lines, android will take care size. If it is more than 4 lines, it will add "3 dots" :) Specify fixed height may cut your text.
Try this. Hope it will work.
<TextView
android:id="#+id/podcastShortDesc"
android:text="LONG LONG LONG TEXT"
android:layout_width="match_parent"
android:layout_height="50dip"
android:maxHeight="50dp"
android:ellipsize="end"/>
I have tested 50dp can show two line in normal font size. So in 50dp height you should add maxLines 2.
Try this fix layout_height and add scroll in your textview
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="50dip"
android:text="Hello......"
android:scrollbars="vertical"/>

How to add a spacing between text and underline in android?

I have defined text of a textview as -
<string name="text"><u>this is my text</u></string>
I needed some space between the text and the underline, so I added lineSpacingExtra="2dp" to the textview, but it is not working.
Can anyone tell how to achieve this?
I need to support API 14 till 21. The above test was done on API 21.
I spent a great deal of my time on this question and here are my findings!
Firstly, To increase the spacing between the text and underline in css you need to use styles and unfortunately Android TextView does not support style tag when using Html.fromHtml(). Unfortunately even span tag is not supported (otherwise that could have been used). To see the entire list of tags supported check the HTML Tags Supported By TextView blog.
Now since we know the basic simple implementation wouldn't work, the only other way remaining is to fake it (fool the user!). In your xml layout where you have the TextView add a View below it with the following properties.
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text"
android:textSize="20sp"/>
<View
android:id="#+id/underlineView"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignEnd="#+id/textView"
android:layout_alignLeft="#+id/textView"
android:layout_alignRight="#+id/textView"
android:layout_alignStart="#+id/textView"
android:layout_below="#+id/textView"
android:layout_marginTop="10dp"
android:background="#android:color/holo_red_dark"/>
As you can see the underlineView is emulating the underline. It has its width fixed to the textview above it. You can set its color to whatever you need and importantly you can adjust the spacing using the android:layout_marginTop property. Hope this helps!
My suggestion is to remove the underline from the text string entirely because you can't customize the spacing from there. After that, you have a few options. One option is to use the #drawable feature as discussed in the following link: http://www.quora.com/How-do-I-design-edit-text-view-with-bottom-border-alone-in-Android-and-edit-text-view-with-some-special-symbol-like-below-image
If you want a quick and easy "hack" then go to the layout XML for your activity where your TextView is created. Wrap your TextView in a LinearLayout as follows:
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text"
android:layout_marginBottom="2dp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#color/underline" />
</LinearLayout>
The first TextView is where your text ("this is my text") is displayed so you can adjust the "layout_marginBottom" to whatever spacing you need between your text and the underline. The second TextView acts as your underline so to adjust its thickness you can change the "layout_height" value.
The final step to making this work is to go into your "values" folder in your project and create a new XML file named "colors.xml". The entire contents for this example are below:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="underline">#333333</color>
</resources>
Simply change the hex color value in this XML file to customize the underline color to your choice.

How to set line-height textView on Android

I give below attributes that I use textView in my application. ( Green text in middle )
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:gravity="center_horizontal"
android:text="10/9"
android:id="#+id/estimate_fertility_date"
/>
However, there are spaces like the example picture. I want to set these spaces because when App initialize, It seems awful.
I have researched about 1 hour and I found some answers but They are not which I want answers.
https://stackoverflow.com/a/6864017/2834196
It 's not easy to get absolutely no text padding in a normal TextView. One way is to can set a minus margin for the TextView, or just use textview.setIncludeFontPadding(false) to reduce padding to some degree.
Adding negative values to margin does it help you?
<TextView
android:layout_marginTop="-10dp" />

Why does TextView in single line elipsized with "end" show boxes?

I'm using a TextView in Android, what I want to show 1 line in TextView ending with ". " but this give [] type box at the end. I don't know why? I just want to remvoe this box and only to show text ending with "... "
Update code for the list_row.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="85dp"
android:orientation="horizontal"
android:gravity="center_vertical"
android:cacheColorHint="#4C7B8D"
android:background="#4C7B8D">
<ImageView
android:id="#+id/videoListImage"
android:src="#drawable/audio_thumbnail60x60"
android:layout_height="75dp"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:layout_width="75dp"
android:padding="4dp"
android:background="#color/light_gray" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginRight="5dp"
android:layout_toLeftOf="#+id/next_arrow"
android:orientation="vertical"
android:gravity="center_vertical"
android:paddingLeft = "5dp">
<TextView
android:id="#+id/row_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:textColor="#color/app_background_color"
android:textSize="18sp"
android:ellipsize="end"
android:maxLines="1" />
<TextView
android:id="#+id/row_dis"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:textColor="#color/color_black"
android:layout_marginRight="2dp"
android:textSize="15sp"
android:ellipsize="end"
android:maxLines="1" />
<TextView
android:text="$7.50"
android:id="#+id/audio_price_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp"
android:textColor="#color/color_white"
android:textStyle = "bold"
android:paddingLeft = "12dp"
android:paddingRight = "12dp"
android:background="#drawable/blue_round_cornor_background" />
</LinearLayout>
<ImageView
android:id="#+id/next_arrow"
android:src="#drawable/next_arrow"
android:layout_toLeftOf="#+id/saved_purchased"
android:scaleType="fitXY"
android:layout_height="25dp"
android:layout_width="18dp"
android:layout_centerVertical="true"
android:visibility = "gone"/>
<ImageView
android:id="#+id/saved_purchased"
android:layout_alignParentRight="true"
android:layout_alignParentTop ="true"
android:scaleType="fitXY"
android:layout_height="25dp"
android:layout_width="25dp"
android:layout_marginRight="2dp"/>
</RelativeLayout>
Here is the images of "next_arrow"
Here is the code I am using the getView() in adapter.
String discription = listData.getDescription();
if (discription != null && discription.length() > 0) {
if (textViewDis != null) {
textViewDis.setTypeface(titleFont);
Log.e("data", ""+discription);
discription.replaceAll("\r\n", "");
textViewDis.setText(discription);
}
}
Here is the actual String of description to be display.
Andrew and Stephanie Tidwell candidly share their success story in this business. This story will help everyone listening realize that no one is perfect, even in a second generation business. This is a streaming audio file.
Still have some issue? I can update question more.
Quoting myself from one of my books:
Android's TextView class has the built-in ability to "ellipsize" text,
truncating it and adding an ellipsis if the text is longer than the available
space. You can use this via the android:ellipsize attribute, for example.
This works fairly well, at least for single-line text.
The ellipsis that Android uses is not three periods. Rather it uses an actual
ellipsis character, where the three dots are contained in a single glyph.
Hence, any font that you use that you also use the "ellipsizing" feature will
need the ellipsis glyph.
Beyond that, though, Android pads out the string that gets rendered on-screen, such that the length (in characters) is the same before and after
"ellipsizing". To make this work, Android replaces one character with the
ellipsis, and replaces all other removed characters with the Unicode
character 'ZERO WIDTH NO-BREAK SPACE' (U+FEFF). This means the
"extra" characters after the ellipsis do not take up any visible space on
screen, yet they can be part of the string.
However, this means any custom fonts you use for TextView widgets that
you use with android:ellipsize must also support this special Unicode
character. Not all fonts do, and you will get artifacts in the on-screen
representation of your shortened strings if your font lacks this character
(e.g., rogue X's appear at the end of the line).
I have bumped into the same problem when was trying to use custom "MetaPro-Medium.otf" as font for TextView with a
android:singleLine="true".
The box at the end of the string was really annoying.
I found no way how to solve this problem in Android, but at the same time found following work around.
I have installed "FontLab Studio v5.04"
Opened my font
Selected one of symbols I was not going to use
Menu->Glyph->Rename Glyph
Changed the name and unicode index from it`s original value to "FEFF" (Thank CommonsWare)
Double click on selected symbol and then remove all lines this symbol was created from.
Menu->File->Generate Font->save as type otf
As a result I got updated font and problem gone away.
Arslan, your layout is working fine in my case, I have tested the same with:
<TextView
android:id="#+id/row_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:textSize="18sp"
android:ellipsize="end"
android:maxLines="1"
android:text="This is the demo testing demo testing This is the demo testing demo testing"/>
... and getting the exact output as you want "one line ended with ..." and box should be removed. So I think there may be a something wrong with any character or text you are setting.
I face the same issue (show boxes([])) for some special symbols when I try to show content which is coming from webservice url even, I don't use android:ellipsize. then I replace code from
textview.settext(content);
to
textview.settext(Html.fromHtml(content));
working fine.
Actually I was running into this issue and instead of changing the font or using setText I just added scrollHorizontally as false and it fixed the extra box character
android:singleLine="true"
android:scrollHorizontally="false"
android:ellipsize="end"
There was a similar problem which i was facing in my project where in i was using a font type for the text view. few font types have these problem of making the ... appear as [] at the last. The problem would be solved if u try changing the font.

Categories

Resources