Text View surrounded by Rectangular Shape has extra space in layout

Question

This is the question I asked earlier today: Recreate shape as in xml file by using code and set width programmatically

Using the above solution provided, I was able to get the desired result but there is a small issue which I can't figure out. Please help me.

The rectangle box should wrap the text view whatever its text length may be. But when the content is long than other text in the same view, gaps are shown.

Here is the layout code which is loaded in the recycler view:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:id="@+id/lin1"
    android:weightSum="2">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/rel1"
        android:layout_marginLeft="5dp"
        android:layout_weight="1.50">
        <TextView
            android:id="@+id/list"
            android:textSize="@dimen/grid_row_text_size"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minWidth="100dp"
            android:textColor="@color/orange"
            android:textAlignment="center"
            android:singleLine="true"
            android:layout_marginRight="3dp"
            android:gravity="center">

        </TextView>

    </RelativeLayout>

    <ImageView
        android:id="@+id/info_icn"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentBottom="true"
        android:src="@drawable/eye"
        android:visibility="gone"
        android:layout_weight="0.50"
        android:layout_gravity="bottom"

        />

</LinearLayout>

This is the result which I am getting now

For more clearance on the issue, another pic of the above

This is the result I get after changing the top Linear Layout (android:layout_width="match_parent")

If more code needed, I can post here. Please help me on this issue. Thanks a lot!

Answer 1

The rectangle box should wrap the text view whatever its text length may be. But when the content is long than other text in the same view, gaps are shown.

To make TextView wraps to its content you have to make some changes on your RecyclerView Item layout:

1. The RelativeLayout (@+id/rel1) has android:layout_width="match_parent" and must be wrap_content.
2. The TextView (@+id/list) has android:layout_width="match_parent" and must be wrap_content.
3. The TextView (@+id/list) has android:minWidth="100dp" which affects the TextView to wrap to its content when the content is too small.

I have modified your xml layout to Wrap to its content like in the below sample:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/lin1"
    android:layout_width="wrap_content"
    android:layout_height="100dp"
    android:background="@android:color/transparent"
    android:orientation="horizontal">

    <RelativeLayout
        android:id="@+id/rel1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:layout_gravity="center"
        android:layout_marginStart="5dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp">

        <TextView
            android:id="@+id/list"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="@dimen/grid_row_text_size"
            android:text="Test text"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:textColor="@android:color/holo_orange_dark"
            android:background="@android:color/transparent"
            android:textAlignment="center"
            android:singleLine="true"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:paddingStart="5dp"
            android:paddingEnd="5dp"/>

    </RelativeLayout>

    <ImageView
        android:id="@+id/info_icn"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:src="@drawable/eye"
        android:visibility="gone"
        android:layout_gravity="bottom" />

</LinearLayout>

According to your question the TextView has a Rectangular Shape as a background with a Cut TopRightCorner. After adding programmatically the TextView Background using a ShapeAppearanceModel you should get the result you want like below: