Text clipped by padding in big outlined TextInputLayout - android

One of my apps contains some kind of "notes field", which is a big textinputlayout containing a potentially big text. I'm using this piece of layout (i removed some less relevant attributes):
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginVertical="#dimen/activity_vertical_margin"
android:clipChildren="false">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top|start"
android:maxHeight="#dimen/notes_maximum_height"
android:minHeight="#dimen/notes_minimum_height"
android:inputType="textMultiLine|textCapSentences"
android:paddingHorizontal="0dp"
android:paddingVertical="8dp" />
</com.google.android.material.textfield.TextInputLayout>
I would like a vertical padding, so that the cursor and the first line don't "touch" the outline, and that's ok. The problem is, when the content reaches its maximum height and starts scrolling, i can see the text clipped by the padding and not touching the upper and lower part of the outline. So i tried with clipChildren set to false as i often do, but i had no luck. Same behavior. After a lot of failed attempts, i'm really wondering if this is even possible!

I wasn't able to find a real answer to this question. It seems i'm the only one with this problem, for some reason. The workaround i used is a combination of a smaller padding and a fade out effect on the edittext. So i simply added the following to the edittext:
android:paddingVertical="4dp"
android:requiresFadingEdge="vertical"
This is not what i wanted, but i tried solving this apparently simple problem for months and it's time to move on :D

Related

Multiline TextView Edge Clipped But Not During SharedElementTransition

I have an issue where my TextView has characters clipped on its right side only for certain pieces of text. To specify: I don't have a custom font or italic text; it's standard text. Here's an image, there should be an "i" where I have the circle, it's "nitrosoethane" not "ntrosoethane":
I have found multiple workarounds to fix the clipping, such as setting a text shadow or sub-classing TextView. They work, but they don't fix one particular issue. I have a SharedElementTransition with this TextView, and only when returning to the calling Activity, as part of the SharedElementReturnTransition animation, the TextView decides to wrap on a different character. Interestingly, this wrap is in the correct place to avoid any clipped text. Unfortunately, it ruins the animation effect, because the text jumps to its bugged-out position at the end. Here's a video, as you can see, the text above the line reads "nitrosoethane" for a split second before it switches to "trosoethane":
I have done a lot of investigation, but I'm really scratching my head on this one. I can neither fix the TextView so it wraps on the correct character or make the TextView in the animation portray the bug for animation continuity. I've measured the TextView before, during, and after the animation, and it's always the same width with the same text and the same font and the same size — same everything (except measuredWidth is larger on the SharedElementEnterTransition, but that shouldn't effect this, and regular width is the same anyway). I don't see why the word wrapping would change only on the return transition. Please help.
Here's the XML for the calling Activity's TextView:
<com.google.android.material.textview.MaterialTextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginEnd="8dp"
android:elevation="4dp"
android:ellipsize="end"
android:textColor="#color/text_primary"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/image"
app:layout_constraintStart_toStartOf="#+id/card"
app:layout_constraintTop_toBottomOf="#+id/formula"
tools:text="Magnesium Chloride" />
And here's the opening Activity:
<com.google.android.material.textview.MaterialTextView
android:id="#+id/anim_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginEnd="8dp"
android:elevation="4dp"
android:ellipsize="end"
android:textColor="#color/text_primary"
android:textSize="18sp"
android:transitionName="#string/history_anim_name_tran"
app:layout_constraintEnd_toStartOf="#+id/dummy_thumb"
app:layout_constraintStart_toStartOf="#id/background"
app:layout_constraintTop_toTopOf="#+id/name"
tools:text="Magnesium Chloride" />
This issue doesn't happen for most text, just text like the one I've shown. Also, if you're wondering, I set the transitionName programmatically for the first TextView. In addition, these two TextViews are in RecyclerViews.
I believe I found the issue. It has to do with my TextView's width being dependent on the ImageView's width (which is not know on the first layout pass). For some reason, the TextView correctly changes its bounds after the ImageView width is updated when the image loads, but the TextView still sometimes incorrectly draws some text outside its bounds (which is usually clipped, but can be seen in my question due to a workaround). Calling invalidate() or requestLayout() doesn't do anything to fix it. But I found a workaround:
If I set the TextView to fixed width, the text fits correctly. So as a workaround, I allow the ConstraintLayout to layout the TextView first, then I manually set the TextView width to itself.
// Set "match constraints" to determine width
textView.layoutParams.width = 0
textView.text = "Some text"
// Make the width a fixed number after OnLayout()
textView.doOnLayout {
textView.layoutParams.width = textView.width
}
This seems like a bug in ConstraintLayout, TextView, or their interaction. This fix works in most all cases, except mine, because the card itself is an itemView in my RecyclerView. I'm not sure why, but the solution doesn't work in my onBindViewHolder(). Instead, I simply set the ImageView to a fixed width and call it a day.

3 dots in the end of TextView are vertically centered

When using android:ellipsize="end" property, 3 dots are vertically centered instead of appearing in the bottom of the view.
How should I make 3 dots appear in the bottom?
<TextView
android:id="#+id/widgetTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
tools:text="#string/lorem_ipsum_short"
android:maxLines="1"
android:ellipsize="end"
android:layout_marginStart="#dimen/spacing_4"
android:paddingEnd="#dimen/spacing_2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#id/widgetTimeArrived"
app:layout_constraintStart_toStartOf="parent"
/>
How it looks
It's hard to tell without access to your full layout, but that's not the standard behavior, so you may be using a custom Font/Theme.
This is how it looks in a blank layout with a ConstraintLayout:
Notice I pinned the "end" to the parent, since I don't know what your widgetTimeArrived is.
I am getting your expected results by implementing your code. I think #Martin Marconcini is right about some custom theme or it might be some views alignment or constraint issue.Your full xml might be helpful to understand that.
Here are the results:

Android: TextInputEditText showing text only after change focus

I have a big problem with a EditText that does not show any input until i change focus from element. When I click on the input, the keyboard appears and while i type, there is nothing displayed in the edit text view. The input is shown only when i close the keyboard
It is not a problem of colours. I mention that the view are contained in a constraint layout. I can enable hardware acceleration but this will slow down the application very much and it's not an option. I can however discard the constraint layout and change it to a linear layout but this will affect the rest of the code. I am sure that I am missing something, an easy fix, but i can't put my finger on it. Thanks a lot in advance
<android.support.design.widget.TextInputLayout
android:id="#+id/codeEditTextContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginBottom="20dp"
app:layout_constraintBottom_toTopOf="#id/verifyButton"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<android.support.design.widget.TextInputEditText
android:id="#+id/codeEditText"
android:layout_width="match_parent"
android:inputType="text"
android:layout_height="wrap_content"
android:hint="#string/sms_code"
android:padding="10dp"
android:textColor="#color/white" />
</android.support.design.widget.TextInputLayout>
!!UPDATE
Found the problem, but still i have no answer. This problem is present only on Android Pie and only when the edit text is in the lower part of the screen and has to be raised by the soft keyboard. I already tried to add softInputWindowMode to adjustResize or adjustPan but this is not doing anything.
The problem itself is a duplicate to this question Android Pie edittext does not adjustPan/resize while typing
which still doesn't have an answer
The problem man be about hardwareAccelerated. I was having the same problem and waste too much time to solve before saw this page.
Android Pie edittext does not adjustPan/resize while typing

How do I remove default padding on textView?

So, this question is a duplicate, but the answers I have read doesn't work for me. If fact, they don't seem to have worked for other people either, so I'll give it another shot and see if someone knows the answer.
When Adding a textView, it looks like
As you can see there is definitely a lot of space between the blue layout-marking and the actual text. When placing one textView on top of another the space becomes quite noticeable. Note that this is after I have added the XML code lines:
android:includeFontPadding="false"
(Which works to a small extent) and:
android:lineSpacingExtra="0dp"
(Which is said to solve the problem according to other threads, but does nothing for me for some reason).
The full XML for my textView is:
<TextView
android:id="#+id/healthTextId"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:includeFontPadding="false"
android:lineSpacingExtra="0dp"
android:text="Test"
android:textAlignment="center"
android:textColor="#color/colorHealth"
android:textSize="100dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
The problem persists on both default and custom fonts. Any ideas?
This is one of the threads I read that unfortunately didn't solve the issue for me: Android: TextView: Remove spacing and padding on top and bottom
This problem is very annoyying. Even if you remove all paddings, the padding of the font itself remains. Try this answer. This is a good approach.
Just android:padding="0dp" should work.

android button fine text alignment

I'm trying to create standard button in android with a background and some text in front but some fairly specific alignment. I want the text to be centered vertically and on the left with 20dp of padding. The alignment works but the padding doesn't. I know I could probably get the desired effect by putting a few spaces in the text but that seems like a hack and next I want to do a similar thing but with the text at the top so I would prefer a more elegant solution.
Here's what I have:
<Button
android:layout_width="312dp"
android:layout_height="95dp"
android:id="#+id/gv_music_button"
android:text="Music"
android:textSize="30sp"
android:paddingLeft="20dp"
android:gravity="left|center_vertical"
/>
My mistake, padding was working correctly. Just didn't appear to be.

Categories

Resources