How to design Chips layout for long text

Question

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.

score 2 · Answer 1 · answered Apr 29 '17 at 04:33

2

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

answered Apr 29 '17 at 04:33

Gabe Sechan

90,003
9
87
127

I tried to get text container layout width using .getWidth() function but it returning same what for each one even when I make the text length bigger by changing return result. since this value sets in onActivityResult() method If i can calculate accurate result i won't have i write a custom view. – Chathuranga Shan Jayarathna Apr 29 '17 at 06:22

score 2 · Answer 2 · answered Dec 07 '20 at 14:26

2

Just add ellipsize="end" to your chip

Just add **ellipsize="end"** to your chip   

<com.google.android.material.chip.Chip 

    <-- android:ellipsize="end" -->

/>

answered Dec 07 '20 at 14:26

Yekutiel Weiss

21
2

How to design Chips layout for long text

2 Answers2