具有可调整包装的TextView的LinearLayout

Question

I'm struggling to refine a ListView row item which has three specific width columns.

Column A has a Button and vertical divider View

Column B has a TextView and may or may not have an ImageView showing next to it depending on circumstances

Column C has RelativeLayout that can show nothing, or a TextView , CheckBox or ImageView depending on circumstances

See example image. The Herring Gull row doesn't need an icon. The Herring x Lesser Black-backed Gull (hybrid) needs a red icon, similar to the other species above and below it. However, the longer species name is pushing the icon out of view when it wraps onto two lines.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/species_row_container"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:descendantFocusability="blocksDescendants"
          android:orientation="horizontal">


<Button
    android:id="@+id/button_count"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="0.15"
    android:background="@null"
    android:paddingBottom="3dp"
    android:paddingTop="3dp"
    android:text="+"
    android:textColor="@color/light_gray"/>

<View
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:layout_marginEnd="5dp"
    android:layout_marginRight="5dp"
    android:background="@color/bpWhite"/>

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="3dp"
    android:layout_marginRight="3dp"
    android:layout_weight="0.70">

    <TextView
        android:id="@+id/textview_species_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:minHeight="44dp"
        android:paddingBottom="3dp"
        android:paddingTop="3dp"
        android:text="Species name"
        android:textColor="#000"
        android:textSize="15sp"/>

    <ImageView
        android:id="@+id/speciesBinIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:paddingLeft="5dp"
        android:paddingStart="5dp"
        android:scaleType="fitXY"
        android:src="@drawable/ic_uncommon"
        android:visibility="gone"/>

</LinearLayout>

<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="0.10"
    android:gravity="center_vertical">

    <TextView
        android:id="@+id/textview_rare"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginTop="4dp"
        android:background="@drawable/rare_border"
        android:gravity="center"
        android:text="@string/single_character_for_rare"
        android:textColor="@color/rareBackground"
        android:textStyle="bold"
        android:visibility="gone"/>

    <CheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:buttonTint="@color/rareBackground"
        android:gravity="center"
        android:visibility="gone"/>

    <ImageView
        android:id="@+id/high_count_warning"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="6dp"
        android:layout_marginStart="6dp"
        android:layout_marginTop="4dp"
        android:gravity="center"
        android:scaleType="fitXY"
        android:src="@drawable/ic_high_count"
        android:visibility="gone"/>

</RelativeLayout>

I have tried replacing the TextView & ImageView combination with a single TextView populated with a SpannableStringBuilder , but that positioned the icon at the end of the wrapped text (see example with Green Woodpecker), when I'd like it positioned to the right of the text.

My desired behaviour is for the ImageView icon to always be right next to the TextView , and when the TextView is long, the ImageView becomes dominant within Column B and the TextView wraps it's text into a slightly smaller space.

Is this possible please?

Answer 1

Try removing the ImageView with the icon and add an icon directly to the TextView if you want to show it with the following line of code:

textView.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.your_id, 0);

Hope this helps

Answer 2

it is hard to understand from your question completely , but what i've decoded is you require to place textview and imageview side by side that can only be possible if you hardcode textview width and give textview height as match_paren t , something like below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/species_row_container"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:descendantFocusability="blocksDescendants"
          android:orientation="horizontal">


<Button
    android:id="@+id/button_count"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="0.15"
    android:background="@null"
    android:paddingBottom="3dp"
    android:paddingTop="3dp"
    android:text="+"
    android:textColor="@color/light_gray"/>

<View
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:layout_marginEnd="5dp"
    android:layout_marginRight="5dp"
    android:background="@color/bpWhite"/>

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="1"
    android:orientation="vertical"/>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginEnd="3dp"
            android:layout_marginRight="3dp"
            android:layout_weight="0.90">

            <TextView
                android:id="@+id/textview_species_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:toStartOf="@+id/speciesBinIcon"
                android:layout_gravity="center_vertical"
                android:minHeight="44dp"
                android:paddingBottom="3dp"
                android:paddingTop="3dp"
                android:text="Species name"
                android:textColor="#000"
                android:textSize="15sp"/>

            <ImageView
                android:id="@+id/speciesBinIcon"
                android:alignParentEnd="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_vertical"
                android:paddingLeft="5dp"
                android:paddingStart="5dp"
                android:scaleType="fitXY"
                android:src="@drawable/ic_uncommon"
                android:visibility="gone"/>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.10"
            android:gravity="center_vertical">

            <TextView
                android:id="@+id/textview_rare"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginStart="5dp"
                android:layout_marginTop="4dp"
                android:background="@drawable/rare_border"
                android:gravity="center"
                android:text="@string/single_character_for_rare"
                android:textColor="@color/rareBackground"
                android:textStyle="bold"
                android:visibility="gone"/>

            <CheckBox
                android:id="@+id/checkbox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:buttonTint="@color/rareBackground"
                android:gravity="center"
                android:visibility="gone"/>

            <ImageView
                android:id="@+id/high_count_warning"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="6dp"
                android:layout_marginStart="6dp"
                android:layout_marginTop="4dp"
                android:gravity="center"
                android:scaleType="fitXY"
                android:src="@drawable/ic_high_count"
                android:visibility="gone"/>

        </RelativeLayout>

</LinearLayout>

</LinearLayout>

PS: code is not tested it is just a general idea

Answer 3

You have to declare a maxWidth for your textView android:id="@+id/textview_species_name" in order to make it work properly. Keep in mind that it has to be dynamic based on device's screen width