I know there are many similar questions, and I have read many answers, but none of them are what I want. I have tried almost all of them. The following are my attempts (I set ellipsize=end for each attempt):
singleLine=true (works)
lines=1 (not work)
maxLines=1 (not work)
set width of textView to specific value (not work)
ScrollHorizontally=true (not work)
Only the first one works, but I want multiple lines of text instead of one line
Is there any other way to achieve this
Any help will be appreciated
Edit:
And here is my xml layout(in attempt 2):
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="#dimen/x150"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:ellipsize="end"
android:lines="1"
android:text="hello hello hello hello hello hello hello hello hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image" />
</androidx.constraintlayout.widget.ConstraintLayout>
I used ellipsize=true in the project I developed before, and it worked well in that project, I compared the code of the current project with the previous one. There is no difference between each other, so I am confused with the current project, so I pulled the previous project from github and ran it, and found that it NOT WORK in my xml renderer, but it WORKS on my phone.
Eventually I found it is the problem of the renderer. I found the button to upgrade the renderer. Now I use the latest renderer, and it also works fine in the redener now.
This is working fine for me
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
app:layout_constraintEnd_toEndOf="parent"
android:ellipsize="end"
android:lines="3"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:text="TextVie mbdfdsvffmnsvfbnsddfdfvfndvfnbdvfbndsvfnsdvfnsdvfnsdvfnsbfjnbdsvjfvdsjhfvsdjhvsdsdvfjdvfjsdvfjhsdvfjsdvfjdhsvfhjdvfjdvfhjdvfjdsvfjsvfhjsdvfjsdvfjsdvfjsdvfjsdvfnsdfvbnsdvfbnsdvfnsdvfnsdbvfnbsdvnsdvsdvbfsdnbfw"
android:textSize="16dp" />
try adding maxLines with the lines count you want
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:ellipsize="end"
android:maxLines="4"
android:text="hello\n hello\n hello\n hello hello hello hello hello hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image" />
Please note that the ellipsis will only be shown if the text size exceeds the number of lines allowed or the text size width; otherwise, it will not be shown.
If what you want is that at the end of the text the ellipsis is always shown, you must create a method which concatenates the (text + "...").
something like this:
TextView textView = findViewById(R.id.textView);
String valueText = textView.getText().toString();
if (!valueText.isEmpty()) valueText = String.format("%s...", valueText);
textView.setText(valueText);
The following example shows the ellipsis mentioned above, the first text exceeds the size of the text view and the second does not.
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:text="hello hello hello hello hello hdsafsfdfdel sdsdasdsadasdsadsadasdasdsadsaadssadsadsadsadsasadsadsadsadsadsadsaadsalo hello hello hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh"
android:textColor="#android:color/black"
android:textSize="16sp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:ellipsize="end"
android:maxLines="2"
android:text="hello hello hello hello hello hel sfdsafsafsfasfsafsafsahhhhhhhhhhhhhh"
android:textColor="#android:color/black"
android:textSize="16sp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
Set property in java file
yourTextView.setEllipsize(TextUtils.TruncateAt.END);
yourTextView.setMaxLines(3);
yourTextView.setText("long text");
Related
I have this simple piece of code where I want the TextView Contents to be resized. On initial impression, the Text inside the TextView has the content shrunk, which is great, but upon enabling layout bounds I see that TextView with AutoSizing actually is taking more space on the screen than a TextView that does not for the same content.
Here is my code:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/tv_1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:maxLines="3"
android:text="Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello"
app:autoSizeMaxTextSize="12sp"
app:autoSizeMinTextSize="4sp"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/tv_2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:maxLines="3"
android:ellipsize="end"
android:text="Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tv_1"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Am I missing something? Any input will be greatly appreciated.
With Android 8.0 (API level 26) and higher, you can instruct a TextView to let the text size expand or contract automatically to fill its layout based on the TextView's characteristics and boundaries.
Default setting lets the autosizing of TextView scale uniformly on horizontal and vertical axes.
https://developer.android.com/guide/topics/ui/look-and-feel/autosizing-textview
I'm using Autosizing TextViews, but sometimes it has a space line in the bottom of text view. Anyone know this?
<TextView
android:background="#color/colorGrayAlto"
app:autoSizeMaxTextSize="27sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeStepGranularity="2sp"
app:autoSizeTextType="uniform"
android:id="#+id/tvVerse"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="130dp"
android:fontFamily="#font/azbuka_pro"
android:gravity="center|top"
android:lineSpacingExtra="3dp"
android:paddingHorizontal="40dp"
android:textSize="27sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="The follower of the law, even if he can recite only a small portion (of the law), but, having forsaken passion and hatred and foolishness, possesses true knowledge and serenity of mind, he, caring for nothing in this world or that to come, has indeed a share in the priesthood." />
This is because you have defined gravity with
android:gravity="center|top"
It sticks the text to top only.
Try to change it as following-
android:gravity="center"
Try this :-
<LinearLayout
android:background="#color/colorGrayAlto"
android:layout_width="match_parent"
android:layout_marginTop="130dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="wrap_content">
<TextView
app:autoSizeMaxTextSize="27sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeStepGranularity="2sp"
app:autoSizeTextType="uniform"
android:id="#+id/tvVerse"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/azbuka_pro"
android:gravity="center|top"
android:lineSpacingExtra="3dp"
android:paddingHorizontal="40dp"
android:textSize="27sp"
tools:text="The follower of the law, even if he can recite only a small portion (of the law), but, having forsaken passion and hatred and foolishness, possesses true knowledge and serenity of mind, he, caring for nothing in this world or that to come, has indeed a share in the priesthood." />
</LinearLayout>
My Problem: I am unable to get the last line to appear on some of my TextViews which expand to random sizes based upon content. One particular one which this always occurs is the Comment TextView.
What I have tried: I have read and tried a number of similar posts here and throughout the web but none seem to resolve the issue. A number of solutions include setting android:gravity="fill" and android:baselineAligned="false" which have not had an impact and have removed or changed back to a previous value (noted in code below).
Below I have provided the code specific to the comment TextView and an image to help understand the layout which it is apart. This is the only TextView not to the right of its label and baseline aligned. It seems to be a quite common setup, so I'm not sure why the issue exists.
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/colorWhite"
android:padding="5dp"
android:hint="#string/hint_comment"
android:textSize="12sp"
android:gravity="start|top"
android:ems="10"
android:id="#+id/viewComment"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lbl_View_Comment"
android:layout_marginTop="5dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"/>
Change android:layout_height="0dp" to android:layout_height="wrap_content".
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
android:padding="5dp"
android:hint="#string/hint_comment"
android:textSize="12sp"
android:gravity="start|top"
android:ems="10"
android:id="#+id/viewComment"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lbl_View_Comment"
android:layout_marginTop="5dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"/>
I am developing news app and I want to implement constrainlayout inside CardView and achieve ui the same as image below
but I could achieve what I want below my xml file
where I have implemented constrainlayout inside cardview
<TextView
android:id="#+id/articleTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/articleTitle"
tools:ignore="NotSibling" />
<TextView
android:id="#+id/articleAuthor"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="hhhhh"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView" />
<TextView
android:id="#+id/articleImageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/articleTitle" />
<TextView
android:id="#+id/articleDescription"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="hhhhh"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView" />
<ImageView
android:id="#+id/articleImageUrl"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#id/articleTitle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
below my xml ui output from layouteditor
What you need to achieve is not difficult at all (although, it's hard to tell because I don't know your project).
Based upon the image you provided, here's a rough approximation using basic Constraint Layout features (no Chains, or anything too fancy); again, I don't know the exact specs and requirements, but this should serve as a starting point.
Here's how the final product looks in the Android Studio Editor, I didn't run this, so there are some artifacts not 100% correctly rendered (like the borders of the CardView), because Android Studio does an "approximation" of how it looks:
Root Layout
You mentioned you wanted a CardView, so the root is naturally a MaterialDesign Card View:
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#android:color/darker_gray"
android:elevation="4dp">
Constraint Layout
Inside the card view, there's one single viewGroup: a Constraint Layout
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/innerRoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
This ConstraintLayout is going to contain all the Card's contents in a flat hierarchy. It matches its parent (the card) in width, but it wraps its height, just like the Card itself.
Top News Header, Icon, and subtext:
THere are various ways to achieve this, and depending upon your requirements, you may want to play with vertical chains, constraining the width, etc., to avoid text from overlapping each other, and/or to enable/disable multi-line support, or ellipsis, etc. None of this information can be inferred from your static image.
<ImageView
android:id="#+id/topFlameImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="Header title"
android:padding="8dp"
android:src="#drawable/ic_flash_on_black_24dp"
android:tint="#android:color/holo_red_light"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/topTitleTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Top News"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/topFlameImageView"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/bottomTitleTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Editor on duty: Dan"
android:textColor="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="#id/topFlameImageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/topFlameImageView"
app:layout_constraintTop_toBottomOf="#id/topTitleTextView" />
Notice it's just an ImageView, and two TextViews, one below the other, all constrained together.
Big Image
I didn't put an image, but did add a blue background representing the image. I gave it an arbitrary height of 250dp, but this is not mandatory, you may change this; it gives you an idea.
This image is constrained to be below the above header with "Top News", etc, and it spans the whole width of the card.
<ImageView
android:id="#+id/bigImage"
android:layout_width="0dp"
android:layout_height="250dp"
android:background="#android:color/holo_blue_dark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/topFlameImageView" />
Title + Icon
Below the big image, there's what appears to be a Title (and its icon). Nothing special, just like the "header" above, an image and a text.
Here is where there's something that I didn't do: In your image, the text in this, aligns to the left/start, even below the icon; in this example, the TextView is constrained to the end/right of the icon, and so if it's multi-line, it will not "properly" justify its text to fit below the icon. In other words, in the image above, the word "Update" should be below the red "lightning bolt" icon, but it's not. (I think it looks better this way anyway... but I haven't thought how to make it look like what you exactly want). Using drawableStart in the TextView, doesn't give the same effect, so that's why I used a separate imageVIew for these "icons", to better control the image's placement.
<ImageView
android:id="#+id/titleImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:contentDescription="Title"
android:padding="8dp"
android:src="#drawable/ic_flash_on_black_24dp"
android:tint="#android:color/holo_red_light"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/bigImage" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/titleTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Real Madrid provide Toni Kroos injury update"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/titleImageView"
app:layout_constraintTop_toTopOf="#id/titleImageView" />
User Avatar, Name, and Timestamp (?)
This is similar to the Title, and the Header at the beginning, except you want the timestamp (17 m) to be at the end/right of what appears to be the user name Onefootball.
<ImageView
android:id="#+id/userAvatarImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:contentDescription="Title"
android:padding="8dp"
android:src="#drawable/ic_account_circle_black_24dp"
android:tint="#android:color/holo_green_light"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/titleTextView" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/userNameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Onefootball"
android:textColor="#android:color/black"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#id/userAvatarImageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#id/titleImageView"
app:layout_constraintTop_toTopOf="#id/userAvatarImageView" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/timestampTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:text="- 17m"
android:textColor="#android:color/darker_gray"
android:textSize="14sp"
app:layout_constraintBaseline_toBaselineOf="#id/userNameTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#id/userNameTextView" />
One image, one Text, another text; nothing fancy.
Closing the tags
Last but not least, you have to close the ConstraintLayout and the CardView...
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
And that's all.
Final Comment | Conclusion
At the beginning of this combo, I told you StackOverflow is not a Free Coding Site; this is still true, and I've made this effort because it seems like you are learning Android and I love helping people, but keep in mind that in general, it's much much better if you try firsts and come up with 20 different small questions as you go through it.
I would have personally tried to solve this in small bits (like I presented it above) and when something didn't behave as expected, it would have been easier to ask here "Hey look at this small thing, why doesn't it do X Y Z????" than to try to post the whole thing, and hope someone comes around and fixes it for you so you can copy paste the solution and forget about it.
I really hope you learn from this and don't just copy/paste it.
Good luck with your project.
I have a TextView and I used to display correctly the three dots at the end of the text. Today I imported a library and changed TextView to a custom TextView. When I cleared all the changes and returned to my initial TextView code, for some reason the ellipsize doesn't work anymore.
I tried cleaning the project and rebuild but the problem remains. What am I doing wrong?
<TextView
android:id="#+id/customtextview_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center_horizontal|left"
android:maxLines="3"
android:padding="15dp"
android:textSize="15dp" />
When I use singleLine="true", only then I get the 3 dots at the end, but I need to have 3 lines.
Try this
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="#dimen/tile_height"
android:layout_margin="#dimen/tile_margin">
<TextView
android:id="#+id/my_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="3"
android:paddingBottom="#dimen/title_bottom_padding"
android:textColor="#android:color/black"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I found the problem. When I use
customtextview_description.setMovementMethod(LinkMovementMethod.getInstance());
the functionality of the elipsize stops.
elipsize is work when you have text that is longer then your TextView's width.
your code is right but if you use maxLines 3
try Following which work.
<TextView
android:id="#+id/customtextview_description"
android:layout_width="match_parent"
android:text="AAAAAAAAAAA\n aaaaaaa\n SSSSSSSSSSssssssssssssssssssss ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center_horizontal|left"
android:maxLines="3"
android:padding="15dp"
android:textSize="15dp" />