Android：通过 ImageSpan 在文本视图的末尾添加一个图像视图并使图像可点击

Question

. Answers to this question are eligible for a +50 reputation bounty. viper wants to to this question.

I want to achieve a design as shown above in the screenshot. The image is fetched from a URL and I want to add a click listener in the image only. Tried using Image span but with no success. Could somebody help me through this?

Thank you

Answer 1

You can set another span call ClickableSpan at the same place of the ImageSpan . Here an example code:

builder.setSpan(new ClickableSpan() {
                            @Override
                            public void onClick(@NonNull View widget) {
                                Toast.makeText(context, "icon clicked", Toast.LENGTH_SHORT).show();
                            }
                        },
                builder.length() - 1,
                builder.length(),
                Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        holder.tvTitle.setText(builder);
        holder.tvTitle.setMovementMethod(LinkMovementMethod.getInstance());

It is important to setMovementMethod for the click to work.

Answer 2

I don't know your limitation, but you can using a layout like bellow:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="5dp">

<TextView
    android:id="@+id/top_tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Papaya (Around)"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    />

<TextView
    android:id="@+id/bottom_tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text=",(2kg)"
    app:layout_constraintTop_toBottomOf="@id/top_tv"
    app:layout_constraintStart_toStartOf="@id/top_tv"/>

<ImageView
    android:id="@+id/iv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher_help"
    app:layout_constraintTop_toTopOf="@id/bottom_tv"
    app:layout_constraintBottom_toBottomOf="@id/bottom_tv"
    app:layout_constraintStart_toEndOf="@id/bottom_tv"/>

</androidx.constraintlayout.widget.ConstraintLayout>

and using setOnClickListener for ImageView. The result:

Answer 3

Here is a more complete answer to your question. I use a drawable resource, but you can create a drawable from your bitmap. See the following code for a description. This code can be placed into the onCreate() of your main activity (or elsewhere.)

// Get a string that can be spanned with an ImageSpan and a ClickableSpan.
SpannableString ss = new SpannableString("Some text ");
// This will be the image. I use a resource here, but there are constructors that can
// accept a Drawable. See BitmapDrawable at https://developer.android.com/reference/android/graphics/drawable/BitmapDrawable#BitmapDrawable(android.content.res.Resources,%20android.graphics.Bitmap)

ImageSpan imgSpan = new ImageSpan(this, R.drawable.ic_baseline_airplanemode_active_24, ImageSpan.ALIGN_CENTER);
ClickableSpan cs = new ClickableSpan() {
    @Override
    public void onClick(@NonNull View widget) {
        Toast.makeText(MainActivity.this, "Clicked!", Toast.LENGTH_SHORT).show();
    }
};

// The image will overlay the last blank in the text.
ss.setSpan(imgSpan, ss.length() - 1, ss.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
// The clickable span will overlay the image from the ImageSpan.
ss.setSpan(cs, ss.length() - 1, ss.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
// Just a TextView.
TextView myView = findViewById(R.id.myView);
myView.setText(ss);
// Prevent the ImageSpan from showing a highlight on click.
myView.setHighlightColor(getResources().getColor(android.R.color.transparent));
// Make sure the TextView can be clicked.
myView.setMovementMethod(LinkMovementMethod.getInstance());