dynamic cross button on top-right of image to delete it

Question

I want to place a cross button which will help the user to remove the picture which is there in the imageView just like it is in the attachments to delete the attachment

I have an idea to implement two imageview but how to add the button?

 <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.harit.visitor.Add_Visitor">

        <EditText
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:ems="10"
            android:id="@+id/fNameEditText"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:hint="First Name"
            android:layout_marginLeft="05sp"
            android:layout_marginRight="05sp"
            android:layout_marginTop="20sp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:ems="10"
            android:id="@+id/lNameEditText"
            android:layout_below="@+id/fNameEditText"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:hint="Last Name"
            android:layout_marginLeft="05sp"
            android:layout_marginRight="05sp"
            android:layout_marginTop="10sp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"
            android:ems="10"
            android:id="@+id/emailEditText"
            android:layout_below="@+id/lNameEditText"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="05dp"
            android:layout_marginTop="10dp"
            android:layout_marginRight="05dp"
            android:hint="E-Mail" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="phone"
            android:ems="10"
            android:id="@+id/phoneEditText"
            android:layout_below="@+id/emailEditText"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="05sp"
            android:layout_marginTop="10sp"
            android:layout_marginRight="05sp"
            android:hint="Phone Number" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/sponsorEditText"
            android:layout_below="@+id/phoneEditText"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginTop="10sp"
            android:layout_marginLeft="05sp"
            android:layout_marginRight="05sp"
            android:hint="Sponsor" />

        <EditText
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/categoryEditText"
            android:layout_below="@+id/sponsorEditText"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="05sp"
            android:layout_marginTop="10sp"
            android:layout_marginRight="05sp"
            android:hint="Category" />

        <ImageView
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:id="@+id/imageView"

            android:layout_marginTop="335sp"
            android:layout_marginLeft="05sp" />

        <Button
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="take Picture"
            android:id="@+id/takePictureButton"
            android:layout_below="@+id/categoryEditText"
            android:layout_toRightOf="@+id/imageView"
            android:layout_toEndOf="@+id/imageView"
            android:layout_marginLeft="25sp"
            android:layout_marginTop="10sp" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="sumbit"
            android:id="@+id/submitButton"
            android:layout_below="@+id/takePictureButton"
            android:layout_alignRight="@+id/takePictureButton"
            android:layout_alignEnd="@+id/takePictureButton"
            android:layout_alignLeft="@+id/takePictureButton"
            android:layout_alignStart="@+id/takePictureButton" />

    </RelativeLayout>

Mr. Roshan · Accepted Answer · 2018-06-02T11:22:56.830

0

Try this:-

You will put x like image at the right top of corner.

    <ImageView
      android:id="@+id/imageView1"
      android:layout_width="100sp"
      android:layout_height="100sp"
      android:layout_marginTop="335sp"
      android:layout_marginLeft="05sp"
      android:src="@drawable/crossImage"
      />

You will remove src image onclick of cross image as follow:-

ImageView imageView=(ImageView)findViewById(R.id.imageView);
       view.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {
             imageView.setImageDrawable(null);
            //or use this imageView.setImageResource(0);

        }
    });

edited Jun 02 '18 at 11:22

answered Jun 02 '18 at 11:11

Mr. Roshan

1,777
13
33

it works like a gem... i have another problem, when i capture the image it is shown in landscape mode. How to i set it to potrait? – Harit Kapoor Jun 02 '18 at 12:25
refer this one for potrait mode image:-https://stackoverflow.com/questions/16128608/camera-preview-is-in-portrait-mode-but-image-captured-is-rotated?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa – Mr. Roshan Jun 04 '18 at 04:07

score -1 · Answer 2 · answered Jun 02 '18 at 11:00

User this layout and add an svg for cross button

<?xml version="1.0" encoding="utf-8"?>

<EditText
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:inputType="textPersonName"
    android:ems="10"
    android:id="@+id/fNameEditText"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:hint="First Name"
    android:layout_marginLeft="05sp"
    android:layout_marginRight="05sp"
    android:layout_marginTop="20sp" />

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="textPersonName"
    android:ems="10"
    android:id="@+id/lNameEditText"
    android:layout_below="@+id/fNameEditText"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:hint="Last Name"
    android:layout_marginLeft="05sp"
    android:layout_marginRight="05sp"
    android:layout_marginTop="10sp" />

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="textEmailAddress"
    android:ems="10"
    android:id="@+id/emailEditText"
    android:layout_below="@+id/lNameEditText"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginLeft="05dp"
    android:layout_marginTop="10dp"
    android:layout_marginRight="05dp"
    android:hint="E-Mail" />

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="phone"
    android:ems="10"
    android:id="@+id/phoneEditText"
    android:layout_below="@+id/emailEditText"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginLeft="05sp"
    android:layout_marginTop="10sp"
    android:layout_marginRight="05sp"
    android:hint="Phone Number" />

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/sponsorEditText"
    android:layout_below="@+id/phoneEditText"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginTop="10sp"
    android:layout_marginLeft="05sp"
    android:layout_marginRight="05sp"
    android:hint="Sponsor" />

<EditText
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/categoryEditText"
    android:layout_below="@+id/sponsorEditText"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginLeft="05sp"
    android:layout_marginTop="10sp"
    android:layout_marginRight="05sp"
    android:hint="Category" />

<ImageView
    android:layout_width="100sp"
    android:layout_height="100sp"
    android:id="@+id/imageView"
    android:layout_marginTop="335sp"
    android:layout_marginLeft="05sp" />

<ImageView
    android:id="@+id/close_button"
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:layout_marginTop="4dp"
    android:layout_marginRight="4dp"
    android:layout_alignTop="@+id/imageView"
    android:layout_alignRight="@+id/imageView"/>

<Button
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="take Picture"
    android:id="@+id/takePictureButton"
    android:layout_below="@+id/categoryEditText"
    android:layout_toRightOf="@+id/imageView"
    android:layout_toEndOf="@+id/imageView"
    android:layout_marginLeft="25sp"
    android:layout_marginTop="10sp" />

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="sumbit"
    android:id="@+id/submitButton"
    android:layout_below="@+id/takePictureButton"
    android:layout_alignRight="@+id/takePictureButton"
    android:layout_alignEnd="@+id/takePictureButton"
    android:layout_alignLeft="@+id/takePictureButton"
    android:layout_alignStart="@+id/takePictureButton" />

how do i set the src as null for the imageView which has the image when the cross button is clicked? — Harit Kapoor, Jun 02 '18 at 11:05
or if you want in java you can user imageview.setImageBitmap(null); — Suhaib Roomy, Jun 02 '18 at 11:40
kindly post a comment if you are downvoting so i can correct myslef — Suhaib Roomy, Jun 03 '18 at 02:02

dynamic cross button on top-right of image to delete it

2 Answers2