Restrict the Width of an Android Horizontal ScrollView with nested TextView

Question

I've written the below code for a custom adapter of a list view. This is my row_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">


<HorizontalScrollView
    android:layout_width="300dp"
    android:layout_height="24dp"
    android:id="@+id/horizontalScrollView">

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="111111111111111111111111111111111111111111111111111111"
        android:textAppearance="@style/TextAppearance.AppCompat.Headline"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:scrollHorizontally="true"
        android:maxLines = "1"
        android:textSize="18sp" />

</HorizontalScrollView>



<TextView
    android:id="@+id/price"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/horizontalScrollView"
    android:layout_marginTop="5dp"
    android:text="$39.99"
    android:textColor="@android:color/black" />



<ImageView
    android:id="@+id/store"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_favorite_border_black_24dp"
    android:layout_centerVertical="true"
    android:layout_alignParentEnd="true"
    android:layout_marginEnd="16dp" />

</RelativeLayout>

I have put the text view in the horizontal scroll view because a lot of the text items are very long. The above code does make it scroll left to right and restrict it to one line, however I want the scrollView to end just before the imageView. Below is a picture of the desired functionality:

However when I run the app, the text bleeds over directly on top of the imageView.

Any ideas on how to correct this?

Update 1: Here's what I am currently getting:

Answer 1

That is because the RelativeLayout is putting it's view one on the top of another, when you are scrolling the HorizontalScrollView you are actually redrawing it and it's drawn at the top of the ImageView.

Try to replace the RelativeLayout with LinearLayout and see if it's fixed.

EDIT: I didn't see the image below. well it's becaues you are using relative layout and the width of the HorizontalScrollView is match_parent and the views are overdrawing at the top of each other. Try to use LinearLayout with width=0px and weight=1

EDIT 2: Okay so you want to have Price - HorizontalScreenView - ImageView? Here is the whole code just copy and paste it.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp">

<TextView
    android:id="@+id/price"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/horizontalScrollView"
    android:layout_marginTop="5dp"
    android:text="$39.99"
    android:textColor="@android:color/black" />

<HorizontalScrollView
    android:id="@+id/horizontalScrollView"
    android:layout_width="0px"
    android:layout_height="24dp"
    android:layout_weight="1">

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:maxLines="1"
        android:scrollHorizontally="true"

        android:text="111111111111111111111111111111111111111111111111111111"
        android:textAppearance="@style/TextAppearance.AppCompat.Headline"
        android:textSize="18sp" />

</HorizontalScrollView>


<ImageView
    android:id="@+id/store"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:src="@drawable/ic_favorite_border_black_24dp" />

</LinearLayout>