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.
Related
So, the title may be confusing, but to put it in context:
I have an ImageButton component in my app display that should be on the opposite side of my ImageView, lined up perfectly, and to repeat this for any other item on the same list.
My question and doubt itself is how to do this when the ImageButton in this case is inside a LinearLayout while the ImageView is outside of it. Is there like a code line that can connect an outside element to a LinearLayout inside element.
Here's how my display looks:
item_contact.xml
The blue rectangle, being the LinearLayout, means everything inside belongs to it, but the call button looks to be the on the other side of the user pic, which is not inside the LinearLayout, which is what I wanted, the problem is this:
activity_main.xml
Each of the TextViews are above and below both the user picture and the call button, but because they both also belong to the LinearLayout, it's obvious it's because of the latter.
Now I tried fixing the problem by simply adding the user picture to the LinearLayout, which seems like the obvious answer, but I needed to be sure, because my call button isn't correctly aligned to the right:
<ImageView
android:id="#+id/iv_image"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginStart="16dp"
android:contentDescription="#string/todo"
android:src="#drawable/ic_baseline_person_24"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="ImageContrastCheck" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#id/iv_image"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<TextView
android:id="#+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:textColor="#color/purple_700"
android:textSize="18sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/call_button"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginStart="248dp"
android:background="#1072E1"
android:contentDescription="#string/call"
android:minWidth="48dp"
android:src="#android:drawable/stat_sys_phone_call" />
<TextView
android:id="#+id/tv_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textSize="14sp" />
</LinearLayout>
My ImageButton's "right alignment" was only done with the manual positioning of the android:layout_marginStart which I set to 248dp by attempts. Surely there's a better way to do this, but I've yet to find a solution that works.
Lastly, there's also the aforementioned problem: I can't seem to fix the LinearLayout issue without having to backtrack the progress I've done and use new code lines or already existing ones to resolve the issue.
So:
How can I "connect" two components, one inside a LinearLayout and another not, with or without the use of constraints and/or RelativeLayouts, and do I really have to insert the outside component to the LinearLayout;
How can I forcefully align a component to the right without having to manually push it with margin inputs (attempts);
Is there a way to know exactly how to connect a component to another by using constraints accurately, so it repeats that process through the entire contact list?.
I would really like if someone could answer at least one of the listed questions or, even better, resolve one of the most developed questions, where I show some images of reference.
Maybe even a suited tutorial for my case in specific that explains the ways of designing the layout of an app.
If more information is needed, I will gladly help, and I'll also try to answer to every response I can get.
Also, in case you're curious, here's my last question about the same app (already resolved):
"[AppName] stopped working" when I try to run my app on an AVD emulator
(Keep in mind that the problem at hand in this question has barely anything to do with this one.)
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
I'm working on a TextView which is contained in a ConstraintLayout.
I want ellipsize to add three dots at the end of text(in the TextView) if its length exceeds maxLength.
maxLines="1" and ellipsize="end" seemed to the best answer after a thorough research about my question. Unfortunately, it didn't work for my case. The three dots did't show at all.
Here's the snapshot :
The original string was "Test for long description"(The n was dropped). It's supposed to show "Test for long descrip...".
Here's my xml :
<TextView
android:id="#+id/txtDescription"
android:maxLength="24"
android:maxLines="1"
android:ellipsize="end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="120dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:text="DescriptionView"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.72" />
I feel like there's something override ellipsize in the XML, or did I miss something crucial in the XML file?
The problem is:
android:maxLength="24"
remove it since you want the TextView to be ellipsized.
A TextView gets ellipsized when it is not wide enough to show the whole text. I think you do not understand what this attribute android:ellipsize="end" is all about. If it is wide enough then you will not see any dots at the end because they are not needed.
If you set android:layout_width="40dp" then you will see the dots.
With android:layout_width="wrap_content" the TextView is wide enough and it is not ellipsized.
1) Add one more property android:singleLine="true" in your Textview
(But its Deprecated so use second option)
2) Use this three together
android:maxLines="1"
android:scrollHorizontally="true"
android:ellipsize="end"
Ellipsize is quite a pain in android, apply below on your textView :
txtDescription.setSingleLine(true);
Hope it helps.
The key for making three dots shows is constrain the width of the text view.
Suppose the name of image in your posted figure is left_image,
change the xml attributes of TextView as below:
....
android:layout_width="0dp"
app:layout_constraintStart_toEndOf="#+id/left_image"
....
above two lines make the width of TextView is constrainted(between left img and right border of parent).
In my case following line was the problem. I commented it out and it worked.
<item name="android:inputType">text|textNoSuggestions</item>
To fix this, you need to use a fixed width for the textview instead of maxLength attribute in your xml
In xml :
android:maxLines="1"
android:ellipsize="end"
And in java/kotlin program :[Important]
textDescription.setSelected(true) -> Java
or
textDescription.isSelected=true -> Kotlin
I am trying to create a listview with switches. It is working; but not as how i expected it to be. The text ON/OFF is written inside the circle(slider) and not behind it which looks awkward. I cannot find a way on how to put the text behind the slider and i tried searching but it seems that no one is experiencing this problem aside from me.
Also, is there a way where i can edit the custom switch or am i obliged to use android:background like what others are doing base on my research. (I am avoiding to use background because i am not good at Photoshop).
Thank you in advance!
You can have 9 patch images for switch
<Switch
android:id="#+id/switch_bg2"
android:layout_width="92dp"
android:layout_height="24dp"
android:checked="true"
android:focusable="false"
android:textOff="O"
android:textOn="I"
android:thumb="#drawable/switch_thumb"
android:track="#drawable/switch_bg"
android:typeface="sans" />
I have a button. It seems to have bottom padding I cannot get rid of:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Foo"/>
In the resource editor, I can click the button, and you see the padding below the bottom edge of the button there. This seems to block me from properly centering the button vertically in a parent RelativeLayout.
I tried setting padding=0dip and layout_margin=0dip, no effect. That bottom padding persists.
Thanks
The padding is in the 9-patch of the buttons themselves.
I'd advise against trying to compensate because these graphics resources can change without notice. You'd be better off building your own 9-patch or editing the existing one to remove the padding.
setting android:layout_marginBottom="-5dp" for the button worked nicely for me.
I am late to answer this but thought to share if someone come across similar use case( Removing all the inner and outer padding in Button )
<Button
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="-5dp"
android:layout_marginLeft="-5dp"
android:layout_marginRight="-5dp"
android:layout_marginTop="-5dp"
android:minHeight="-2dp"
android:minWidth="-2dp"
android:text="TextView"
android:textSize="12sp" />
Hmn really strange. Never noticed that. Probably because u usally want a little space around your buttons.
Also tried margin/padding=0dp and did in fact not work.
You could set android:layout_marginBottom="-10dp" however :).