How to add plural imageview in edittext

Question

I want to make one Activity like Facebook or twitter when you post

You can type a word or add a photo. Now I can add a photo too MySQL and return URL and edit text like this Example output

My question is how to show the photo in edit view and when I use Backspace key the photo will be deleted.

My XML-

        <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".pagePost">
    
        <ScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent" tools:layout_editor_absoluteY="120dp"
                tools:layout_editor_absoluteX="178dp">
            <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
                          android:orientation="vertical">
                <EditText
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:inputType="textPersonName"
                        android:ems="10"
                        android:id="@+id/etPTitle" android:hint="title" android:textSize="24sp"
                        style="@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox.Dense"
                        android:textStyle="bold"/>
                <LinearLayout
                        android:orientation="horizontal"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">
                    <ImageButton
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent" app:srcCompat="@android:drawable/ic_menu_gallery"
                            android:id="@+id/imageButton" android:layout_weight="1"/>
                    <ImageButton
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent" app:srcCompat="@android:drawable/checkbox_on_background"
                            android:id="@+id/imageButton3" android:layout_weight="1"/>
                </LinearLayout>
                <EditText
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:inputType="textMultiLine"
                        android:imeOptions="actionDone"
                        android:singleLine="false"
                        android:ems="10"
                        android:id="@+id/etPText"
                        android:hint="text"
                        style="@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox.Dense"
                        android:textSize="14sp"/>
            </LinearLayout>
        </ScrollView>
    </androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

To dynamically show photos in edit view I think you might have to code it out in java. Here is a link for a question that is similar to yours and as for deleting the image on backspace, you just need to search the whole string for the character ']' or whatever you are going to use to enclose the link with. Detect the ']' character and then go for detecting the whole string "[1]" when the user is typing in the edit text. As soon as The given string is detected just insert a bitmap at the required position.

You can use addTextChangeListener to look for changes in the string while the user is typing, its similar to searching for a substring.

And as for that 'backspace' you can use a KeyEventListener to check which key is pressed. Hope this helps :)