CODEWITHSUNDEEP
androidandroid-layoutandroid-imageview
Patel Pinkal
Patel Pinkal

Reputation: 9522

Custom Image Dialog layout

Requirement

I want to show an image in custom dialog with border and close button, and ImageView is TouchImageView for zoom in/out feature. like this

https://i.sstatic.net/nN1jJ.jpg

I Tried

I have tried many ways for a border but didn't get the solution.

My code

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.android.example.view.TouchImageView
        android:id="@+id/imageSingleImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/ic_launcher" />
</RelativeLayout>

Using @user2025187 code i got this in output

https://i.sstatic.net/Cv6Ph.png

I am clicking on this image

https://i.sstatic.net/LA8Uc.png

Upvotes: 0

Views: 859

Answers (2)

Komal12
Komal12

Reputation: 3348

Try this,

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      android:layout_margin="10dp">

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:layout_margin="10dp"
    android:background="@color/colorWhite">

    <com.android.example.view.TouchImageView
        android:id="@+id/iv_imageSingleImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:contentDescription="@string/contentDescription"
        android:padding="5dp" />

</RelativeLayout>

<ImageView
    android:id="@+id/iv_close"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_alignParentEnd="true"
    android:layout_alignParentTop="true"
    android:src="@drawable/ic_cross" />
</RelativeLayout>

Upvotes: 1

anddevmanu
anddevmanu

Reputation: 1459

This is a simple thing you can search it on google also.

create a layout file in drawable folder and add below code as rectangle.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<stroke android:width="1dp" android:color="#000000" />
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />

create a layout file and add this xml. ex -dialog.xml 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

<com.android.example.view.TouchImageView
    android:id="@+id/imageDialog"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="6dp" 
    android:background="@drawable/rectangle"/>

<TextView
    android:id="@+id/textDialog"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#FFF"
    android:layout_toRightOf="@+id/imageDialog"/>

 <Button
    android:id="@+id/declineButton"
    android:layout_width="100px"
    android:layout_height="wrap_content"
    android:text=" Submit "
    android:layout_marginTop="5dp"
    android:layout_marginRight="5dp"
    android:layout_below="@+id/textDialog"
    android:layout_toRightOf="@+id/imageDialog"
    />

  </RelativeLayout>

add below code in your java file and your dialog is ready.

          final Dialog dialog = new Dialog(CustomDialog.this);
            // Include dialog.xml file
            dialog.setContentView(R.layout.dialog);
            // Set dialog title
            dialog.setTitle("Custom Dialog");

            // set values for custom dialog components - text, image and button
            TextView text = (TextView) dialog.findViewById(R.id.textDialog);
            text.setText("Custom dialog Android example.");
            ImageView image = (ImageView) dialog.findViewById(R.id.imageDialog);
            image.setImageResource(R.drawable.image0);

            dialog.show();

            Button declineButton = (Button) dialog.findViewById(R.id.declineButton);
            // if decline button is clicked, close the custom dialog
            declineButton.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    // Close dialog
                    dialog.dismiss();
                }
            });

Upvotes: 1

Related Questions