Develop Reference

RecyclerView optimization issues

I've noticed some RV performance issues.
I have a RecyclerView with some amount of items. When I launch my Fragment with RV and trying to scroll it for the first time I see some lags. I'll attach a GIF with active GPU profiling at the end of this question.
As you can see, I have a huge FPS drop when I start scrolling then it becomes smooth. So my question is -
Is it possible to optimise this process? I tried the following:
1. To create View for all my ViewHolders once:
private var itemView: View? = null
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
if (itemView == null) {
itemView = LayoutInflater.from(parent.context).inflate(R.layout.rv_contact_item, parent, false)
}
return ContactViewHolder(itemView)
}
But it's not possible, cuz this view will be attached to it's parent with first onCreateViewHolder call and I'm getting crash "Detach your view from parent first".
2. Create ViewHolders in background thread.
Doesn't do anything too.
I know there's a possibility to create View programmatically, but will it work as intended? I have a pretty difficult View, so it would take some time to try it.
UPD:
My XML for single item:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:id="#+id/btn_contact"
android:orientation="horizontal"
android:padding="16dp"
android:background="?attr/selectableItemBackground">
<com.myapp.custom.AvatarView
android:id="#+id/v_avatar"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_marginEnd="16dp"
android:layout_gravity="center"
android:transitionName="chat_avatar_transition"
tools:background="#color/pale_red">
<com.myapp.custom.UserStatusView
android:id="#+id/v_user_status"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_gravity="bottom|end"/>
</com.myapp.custom.AvatarView>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_marginEnd="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_conference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:baselineAlignBottom="true"
android:layout_marginEnd="2dp"
app:srcCompat="#drawable/ic_vector_conference"/>
<TextView
android:id="#+id/tv_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="16sp"
android:ellipsize="end"
android:lines="1"
android:transitionName="chat_name_transition"
tools:text="Title" />
</LinearLayout>
<TextView
android:id="#+id/tv_contact_subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/text_light"
android:textSize="14sp"
android:ellipsize="end"
android:lines="1"
tools:text="Subtitle" />
<LinearLayout
android:id="#+id/ll_last_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_message_direction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="3dp"
app:srcCompat="#drawable/ic_vector_arrow_right" />
<TextView
android:id="#+id/tv_last_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textColor="#color/text_light"
android:textSize="14sp"
android:ellipsize="end"
android:lines="1"
tools:text="Hello!" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_birthday"
android:layout_width="24dp"
android:layout_height="24dp"
app:srcCompat="#drawable/ic_vector_birthday" />
<ImageView
android:id="#+id/iv_app_type"
android:layout_width="24dp"
android:layout_height="24dp"
app:srcCompat="#drawable/ic_vector_mobile" />
<ImageView
android:id="#+id/iv_important_messages"
android:layout_width="24dp"
android:layout_height="24dp"
app:srcCompat="#drawable/ic_vector_flag" />
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/iv_message_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_gravity="bottom|end"
app:srcCompat="#drawable/ic_vector_checked" />
<TextView
android:id="#+id/tv_unread_counter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="24dp"
android:minWidth="24dp"
android:padding="3dp"
android:background="#drawable/shape_rect_rounded_12dp_blue_regular"
android:gravity="center"
android:textColor="#android:color/white"
android:layout_gravity="bottom|end"
tools:text="10" />
</FrameLayout>
</LinearLayout>
</LinearLayout>
UPD2:
My bind() method:
fun bind(contact: ContactModel) {
avatarView.apply {
initialize(
contact.id,
contact.avatar,
contact.fullName)
}
ivConference.visibility = if (ContactType.CONFERENCE == contact.type)
View.VISIBLE
else
View.GONE
tvName.text = contact.fullName
tvContactSubtitle.text = contact.subtitle
contact.lastMessageDirection?.let { direction ->
llLastMessage.visible
ivLastMessageDirection.setImageDrawable(
VectorDrawableCompat.create(
itemView.context.resources,
direction.icon,
null)
)
tvLastMessage.text = contact.lastMessage
} ?: llLastMessage.invisible
ivBirthday.visibility = if (contact.isBirthdayInc) {
View.VISIBLE
} else
View.GONE
ivImportantMessages.visibility = if (contact.hasImportantMessages)
View.VISIBLE
else
View.GONE
if (contact.unreadCounter == 0) {
tvUnreadCounter.gone
} else {
tvUnreadCounter.visible
tvUnreadCounter.text = contact.unreadCounter.toString()
}
}

That is because the quality of the image you've used is too high for so many item which takes time to optimize.
Please convert your images to WebP format for better performance.
Hope it helps.

ImageView inside ConstraintLayout does not work

I have a problem with correct display of ImageView. I want to display ImageView inside ConstraintLayout. On preview it looks exactly as i need, but when i'm starting it on device it looks completly dirrerent. This layout is places inside recycle view. What is wrong with this code?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/promotionRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="10dp"
android:background="#fff"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
<android.support.constraint.ConstraintLayout
android:id="#+id/promotionImageLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintHeight_default="spread"
android:background="#color/colorPrimary">
<ImageView
android:id="#+id/promotionImageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#mipmap/ic_start_promotion"
android:background="#mipmap/ic_start_promotion"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHeight_min="150dp" />
<ImageView
android:id="#+id/fadeGradientImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#drawable/fade_image_background" />
<TextView
android:text="Sample title"
android:textSize="16sp"
android:textStyle="bold"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="6dp"
android:textColor="#ffffff"
android:id="#+id/promotionNameTextView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:paddingBottom="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>
<TextView
android:id="#+id/promotionDescriptionTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:layout_marginTop="12dp"
android:layout_marginStart="12dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:text="Sampe description" />
</LinearLayout>
EDIT: Deep explanation:
I want to create row for RecycleView. Each row have to contains image, title and description. Title have to be in the left bottom corner of the image. Description have to be below the image. After that i have to put gradient (black in the bottom) into the image. Screen with "Preview" is exactly what i need.
EDIT2: Everything with this layout is ok. It is working as expected, i forget that i made some changes in kotlin code... Sory for problem.

First things first, every view should apply the attribute rules of its parent ViewGroup. ConstraintLayout doesn't support match_parent. It supports the 0dp value which means "match constraint". This way the view will expand to fill the constraint bounded space.
Next, ConstraintLayout was created to achieve a flat view hierarchy for better layout performance. So, never nest it inside a LinearLayout as it has the chains feature to get the same behavior in a more flexible way. Plus, you can achieve the structure with a ConstraintLayout at the top level .
Another thing, If you are going to define the same margin in all directions, you can just use layout_margin.
Finally, you have overdraw problems. ConstraintLayout is flexible enough to allow us to position views as backgrounds and help us avoid overlapped backgrounds.
Here's a solution:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/promotionRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="#+id/promotion_image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/promotion_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#mipmap/ic_start_promotion"
app:layout_constraintHeight_min="150dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/shadow"
android:layout_width="0dp"
android:layout_height="80dp"
android:adjustViewBounds="true"
android:background="#drawable/fade_image_background"
app:layout_constraintBottom_toBottomOf="#+id/promotion_image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/promotion_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="Sample title"
android:textColor="#android:color/white"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/promotion_image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:padding="12dp"
android:text="Sampe description"
android:textSize="13sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/promotion_image" />
</android.support.constraint.ConstraintLayout>
Try it. Hope this helps!

First of all, trying to write more presicely what do you want? Display image view inside layout it's somthing common words. As for your code, beside you don't have any constraints. You have strange view height, for second ImageView:
android:layout_height="match_parent"
It may overlay all other children view, it's very strange parameter.

ConstraintLayout, when constraint dependent view is gone, the layout view behave weirdly

I'm using ConstraintLayout where I will show as below
I would like to hide First (using gone), and which the view I expect to be as below (where ElasticBody will stretch over to use up the original First view space as well.
However, when I actual set First to gone, my view turn out to be as below (all image as from Android Studio Design view). My Elastic Body is missing as well, and the height expanded weirdly.
My layout code as below
<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="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/txt_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0ff"
android:text="First"
android:visibility="gone"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/txt_body"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_body"
android:layout_width="0dp"
android:background="#f0f"
android:layout_height="wrap_content"
android:text="Elastic Body"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/txt_tail"
app:layout_constraintStart_toEndOf="#+id/txt_first"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_tail"
android:background="#ff0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tail"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/txt_body"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
(Note, if you remove the gone, you'll get the first image view).
Why is this so? How could I fix it where when my First is gone, I could the Elastic Body stretch out correctly?
p/s: I know how to do it in LinearLayout and RelativeLayout... but wonder if this is a limitation on ConstraintLayout?

Try following.
Set the first view's left and top constraints to "parent". After that:
set the txt_body textview width to "0dp"
set the left constraint to the first view's right side
set the right constraint to the tail view's left side.
So, whenever you set the first view's visibility to "gone", the body view will be stretched like how you want it.
<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="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/txt_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0ff"
android:text="First"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintEnd_toStartOf="#+id/txt_body"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="#+id/txt_body"
android:layout_width="0dp"
android:background="#f0f"
android:layout_height="wrap_content"
android:text="Elastic Body"
android:textSize="26sp"
app:layout_constraintRight_toLeftOf="#+id/txt_tail"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#+id/txt_first"
/>
<TextView
android:id="#+id/txt_tail"
android:background="#ff0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tail"
android:textSize="26sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
Update
If you want to do using barrier then also you can do it.
<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"
android:padding="16dp">
<TextView
android:id="#+id/txt_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0ff"
android:text="First"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintEnd_toStartOf="#+id/barrier"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_body"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#f0f"
android:text="Elastic Body"
android:textSize="26sp"
app:layout_constraintStart_toEndOf="#+id/barrier"
app:layout_constraintEnd_toStartOf="#+id/txt_tail"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_tail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff0"
android:text="Tail"
android:textSize="26sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="txt_body,txt_first" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="txt_body,txt_tail" />
</androidx.constraintlayout.widget.ConstraintLayout>

Say, you want to have a picture like this:
Here you have indents between the title and "Nice work", between "Nice work" and time, also horizontal indent to "Opinions". They are centered vertically.
"Opinions" is attached to the star, so that can be multilined and stay centered. I show results for 2 variants: in the first row opinions are multilined, while in the next row it is a single line. In columns you can see 4 variants of showing/hiding 2 labels.
A more simple and preferrable way is to wrap both labels into LinearLayout and insert it into parent ConstraintLayout. Then you can set vertical gravity, show or hide labels, hide the LinearLayout itself.
If you don't want to have nested layouts, use Barriers and Groups. It is a difficult task that can waste many hours. A key is having additional Views for aligning. Here I have 2 hiding labels ("Nice work" and "Opinions"), and I have to add 2 views (spaces).
The height of the right space is equal to the height of the star (14dp).
To simplify hiding several views, I joined them into groups.
You can see horizontal dotted lines - they are Barriers. I align them on tops and bottoms of the most big views (barrier_2 is similar):
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="left_text,opinion" />
Vertical aligning is based on these 2 additional Spaces (see marginTop="10dp"):
<Space
android:id="#+id/left_text_space"
android:layout_width="25dp"
android:layout_height="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toEndOf="#id/left_text"
app:layout_constraintTop_toBottomOf="#id/title" />
It is difficult to cover all situations, so see the following layout:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:paddingLeft="15dp"
android:paddingTop="5dp"
android:paddingRight="15dp"
android:paddingBottom="5dp">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lineSpacingExtra="4sp"
android:lines="1"
android:paddingBottom="5dp"
android:text="«Title text»"
android:textColor="#333333"
android:textSize="15sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="left_text,opinion" />
<TextView
android:id="#+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#112233"
android:paddingLeft="5dp"
android:paddingTop="4dp"
android:paddingRight="5dp"
android:paddingBottom="4dp"
android:text="Nice work"
android:textColor="#ffffff"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="#id/barrier_2"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toTopOf="#id/left_text_space" />
<Space
android:id="#+id/left_text_space"
android:layout_width="25dp"
android:layout_height="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toEndOf="#id/left_text"
app:layout_constraintTop_toBottomOf="#id/title" />
<androidx.constraintlayout.widget.Group
android:id="#+id/left_text_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="left_text,left_text_space" />
<Space
android:id="#+id/opinion_space"
android:layout_width="1dp"
android:layout_height="14dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="#id/left_text_space"
app:layout_constraintTop_toBottomOf="#id/title" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="left_text,opinion" />
<ImageView
android:id="#+id/opinion_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:contentDescription="#null"
app:layout_constraintBottom_toBottomOf="#id/barrier_2"
app:layout_constraintStart_toEndOf="#id/left_text_space"
app:layout_constraintTop_toTopOf="#id/opinion_space"
app:srcCompat="#drawable/ic_filled_rate_star" />
<TextView
android:id="#+id/opinion"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:lineSpacingExtra="1sp"
android:text="1. Opinion 1.\n2. Opinion 2.\n3. Opinion 3.\n4. Opinion 4."
android:textColor="#1122aa"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#id/opinion_icon"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#id/opinion_icon"
app:layout_constraintTop_toTopOf="#id/opinion_icon" />
<androidx.constraintlayout.widget.Group
android:id="#+id/opinion_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="opinion_icon,opinion,opinion_space" />
<ImageView
android:id="#+id/time_icon"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_gravity="center_vertical"
android:layout_marginTop="8dp"
android:contentDescription="#null"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/barrier_2"
app:srcCompat="#drawable/ic_time" />
<TextView
android:id="#+id/time"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginLeft="7dp"
android:ellipsize="end"
android:lineSpacingExtra="1sp"
android:lines="2"
android:paddingBottom="7dp"
android:text="17:00"
android:textColor="#9e9e9e"
android:textSize="11sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#id/time_icon"
app:layout_constraintTop_toTopOf="#id/time_icon" />
</androidx.constraintlayout.widget.ConstraintLayout>
Then in your activity you can show/hide labels. Hide Groups, not views inside, because strangely inside a Group views are always visible.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.main_activity)
left_text_group.visibility = View.GONE
opinion_group.visibility = View.VISIBLE
}

An answer has already been given linking to Barriers. I will provide an example of how I've actually implemented it:
<TextView
android:id="#+id/textView1"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:text="Some text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textView2"
app:layout_constraintTop_toBottomOf="#id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
android:text="Some other text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView1,textView2" />
This example shows 2 TextViews either of which can be gone. The Views are on stacked from top to bottom, so barrierDirection is set to bottom. Should you need another direction, just change that line accordingly.
Setting any of the 2 TextViews to gone, will result in the Barrier shifting to the bottom of the other, and if we set both to gone, it'll just shift up to the element that textView1's top constraint was referencing, in this case, the parent.
Note: If your textView1's top constraint is something else, i.e. it's below another element, the barrier will end up there if both views are set to gone.

How to design Chips layout for long text

I want go design chip layout like below.
When Text is short enough to fit withing the layout I want to view like this.
When Text is too long to fit in I want it display like this and animate text horizontally.
Is it possible to design a layout that fulfill both about needs.
I have tried solution and i have filed because those layout designs only fulfill one condition.
Solution one
<RelativeLayout
android:id="#+id/relative_store_name_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="10dp"
android:layout_weight="9"
android:visibility="visible">
<FrameLayout
android:id="#+id/relative_shop_name_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/relative_shop_name_text"
android:layout_width="wrap_content"
android:layout_height="21dp"
android:background="#drawable/selected_store_name_text_background"
android:gravity="center_vertical"
android:maxLines="1"
android:paddingStart="10dp"
android:ellipsize="marquee"
android:text="" />
</FrameLayout>
<FrameLayout
android:id="#+id/relative_layout_delete_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_toEndOf="#id/relative_shop_name_container">
<ImageView
android:layout_width="wrap_content"
android:layout_height="21dp"
android:background="#drawable/selected_store_name_delete_background"
android:paddingEnd="5dp"
android:paddingStart="10dp"
android:src="#drawable/store_name_chip_delete" />
</FrameLayout>
</RelativeLayout>
Problem with this is when text is too long delete button disappears. this layout on work for short text.
Solution two
<LinearLayout
android:id="#+id/store_name_liner_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="10dp"
android:layout_weight="9"
android:orientation="horizontal"
android:visibility="visible"
>
<LinearLayout
android:id="#+id/liner_shop_name_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="9">
<TextView
android:id="#+id/liner_shop_name_text"
android:layout_width="wrap_content"
android:layout_height="21dp"
android:background="#drawable/selected_store_name_text_background"
android:gravity="center_vertical"
android:maxLines="1"
android:paddingStart="10dp"
android:text="short Text" />
</LinearLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="21dp"
android:background="#drawable/selected_store_name_delete_background"
android:paddingEnd="5dp"
android:paddingStart="10dp"
android:src="#drawable/store_name_chip_delete"
/>
</FrameLayout>
</LinearLayout>
Problem with this is when text is short delete button is not going to fit just after text. I can't make that happen by removing weight from both text view container and delete image view container but then I get the same problem in my solution one.
Please give solution to handle this.

You need to make a custom view. That way you can measure the text and resize to fit.

Just add ellipsize="end" to your chip
Just add **ellipsize="end"** to your chip
<com.google.android.material.chip.Chip
<-- android:ellipsize="end" -->
/>

Android Layout optimization for ListView of ArrayAdapter: is FrameLayout really useless?

I have created a color catalogue for my app and have decided to use an Array adapter to inflate this catalogue. My color layout is as follows:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginRight="40dp"
android:layout_marginEnd="40dp">
<ImageView
android:id="#+id/fav_swatch"
android:layout_width="80dp"
android:layout_height="match_parent"/>
<TextView
android:id="#+id/fav_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/fav_swatch"
android:layout_toEndOf="#+id/fav_swatch"
android:paddingLeft="30dp"
android:paddingStart="30dp"
android:paddingTop="10dp"
android:textSize="20sp"
/>
<TextView
android:id="#+id/fav_coord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/fav_swatch"
android:layout_toEndOf="#+id/fav_swatch"
android:layout_below="#+id/fav_name"
android:paddingLeft="30dp"
android:paddingStart="30dp"
android:paddingTop="10dp"
android:textSize="20sp"
/>
<ImageButton
android:id="#+id/btn_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginLeft="10dp"
android:background="#drawable/ic_clear"/>
<ImageButton
android:id="#+id/btn_modify"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/btn_delete"
android:layout_toStartOf="#+id/btn_delete"
android:background="#drawable/ic_edit"/>
</RelativeLayout>
</FrameLayout>
My activity layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fav_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin" />
<ListView
android:id="#+id/fav_lv"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ListView>
</FrameLayout>
So this code leads to the desired layout as this:
The problem is that Android warns me
This RelativeLayout or its parent FrameLayout is useless
It is not really useless because if I keep only the RelativeLayout as parent:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginRight="40dp"
android:layout_marginEnd="40dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="#+id/fav_swatch"
android:layout_width="80dp"
android:layout_height="match_parent"/>
<TextView
android:id="#+id/fav_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/fav_swatch"
android:layout_toEndOf="#+id/fav_swatch"
android:paddingLeft="30dp"
android:paddingStart="30dp"
android:paddingTop="10dp"
android:textSize="20sp"
/>
<TextView
android:id="#+id/fav_coord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/fav_swatch"
android:layout_toEndOf="#+id/fav_swatch"
android:layout_below="#+id/fav_name"
android:paddingLeft="30dp"
android:paddingStart="30dp"
android:paddingTop="10dp"
android:textSize="20sp"
/>
<ImageButton
android:id="#+id/btn_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginLeft="10dp"
android:background="#drawable/ic_clear"/>
<ImageButton
android:id="#+id/btn_modify"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/btn_delete"
android:layout_toStartOf="#+id/btn_delete"
android:background="#drawable/ic_edit"/>
</RelativeLayout>
the margins are simply ignored and I get this sort of ugly layout:
My question is: is there any way to get the right layout without having to put a 'useless' FrameLayout to get a cleaner and more optimized code?
EDIT: the interesting java code:
// Construct the data source
ArrayList<Colour> arrayOfColours = new ArrayList<>();
final ColourAdapter adapter = new ColourAdapter(this, arrayOfColours);
ListView lv = (ListView) findViewById(R.id.fav_lv);
lv.setAdapter(adapter);
final Colour[] colour = new Colour[ca.getMaxNumberOfFavColours()];
for (int i = 0; i < numberOfColours; i++) {
colour[i] = new Colour(colourPixel[i], colourName[i]);
adapter.add(colour[i]);
}

In your scenario FrameLayoutis containing one child element as RelativeLayout. Your all further elements are contained inside RelativeLayout. May be this is reason Android Studio is giving you a warning.
This RelativeLayout or its parent FrameLayout is useless.
I don't understand your point of having RelativeLayout inside FrameLayout. Instead i would also recommend to use either one of them.
Moreover, you can get the same result just by doing this in your second scenario...
removing margin from RelativeLayout.
instead of margin, add android:padding="20dp" in RelativLayout.
Let me know if you have any queries related to this.
I would recommend you to see the diff. in margin and padding and avoid giving margin to outer most container of your layout.
PS: Developers don't give much attention to warnings until they became errors. :p