How to put close imageview at top right corner with margin in a dialog?

Question

enter image description here

I am trying to put an imageview having close image at top right corner with slightly outside margin. This is my layout for dialog:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/acl_data_info_bg_round"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/close_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|right"
        android:adjustViewBounds="true"
        android:paddingTop="-50dp"
        android:scaleType="fitStart"
        android:background="@drawable/freeg_logo"
        android:description="@null" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingLeft="7.0dip"
        android:paddingRight="7.0dip"
        android:paddingTop="7.0dip"
        android:text="Free internet Consumed: 0.5 MB"
        android:textColor="#6d7780"
        android:textSize="18.0dip" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingLeft="7.0dip"
        android:paddingTop="7.0dip"
        android:text="Free internet Limit: 10 MB"
        android:textColor="#6d7780"
        android:textSize="18.0dip" />

    <Button
        android:id="@+id/button_hide_alertDialog"
        android:layout_width="60.0dip"
        android:layout_height="35.0dip"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="35.0dip"
        android:text="OK"
        android:textSize="15.0dip"
        android:textStyle="bold" />

    <Button
        android:id="@+id/textview_powered_by"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="25.0dip"
        android:background="@android:color/transparent"
        android:drawablePadding="5.0dip"
        android:drawableRight="@drawable/freeg_logo_acl_data_info"
        android:text="Powered by"
        android:textColor="#6d7780"
        android:textSize="10.0dip" />

</LinearLayout>

This is the code where i am inflating it:

alertDialog = new Dialog(context);

        alertDialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
        alertDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);

        LayoutInflater inflater;

            inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);


        View convertView = inflater.inflate(R.layout.acl_data_info_screen, null, false);

        Button button_hide_alertDialog = (Button) convertView
                .findViewById(R.id.button_hide_alertDialog);

        button_hide_alertDialog.setOnClickListener(new OnClickListener() 
        {

            @Override
            public void onClick(View v)
            {
                if(alertDialog != null && alertDialog.isShowing())
                    alertDialog.dismiss();
            }
        });

        alertDialog.setContentView(convertView);

        // show it
        alertDialog.show();

I have gone through all the available posts on stackoverflow but none of them is able to solve my problem. Please help me. Thanks in advance.

By using android:layout_marginTop="-15dp", i am getting this output: enter image description here

Could you make a screenshot with the current output? Might help me with understanding whats going wrong. And instead of using fill_parent, try using match_parent. fill_parent is a deprecated method but they both do the same thing. http://stackoverflow.com/questions/5761960/what-is-the-difference-between-match-parent-and-fill-parent — Jordi Sipkens, Jan 21 '15 at 08:22
You need to make one custom layout with parent `FrameLayout` with two images in which one image will be on top of first image with cancel image. — Piyush, Jan 21 '15 at 08:47
@user1726619 Someone posted a answer. So i don't need to post same. So check that answer will work. — Piyush, Jan 21 '15 at 08:54

score 2 · Answer 1 · answered Jan 21 '15 at 08:52

You can use FrameLayout.

Try this xml :

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

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:color/background_dark"
        android:orientation="vertical" >

        <!-- You Linear layout will go hewre without the close button -->

    </LinearLayout>

    <ImageView
        android:id="@+id/close_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:background="@drawable/ic_launcher"
        android:description="@null"
        android:layout_gravity="top|right"
        android:layout_marginTop="-20dp"
        android:scaleType="fitStart" />

</FrameLayout>

Hope it helps ツ

try with different values here `android:layout_marginTop="-20dp"` — SweetWisher ツ, Jan 21 '15 at 09:05

score 2 · Answer 2 · answered Jan 21 '15 at 09:04

2

This won't work.. The view within the dialog will stay's within the dialog, If you try to pull the logo up with a negative value, out of the view, it will disappear out of the view.

answered Jan 21 '15 at 09:04

1

What is the solution then? – user1726619 Jan 21 '15 at 09:05
People are claiming to solve this problem. Have a look – user1726619 Jan 21 '15 at 09:07
http://stackoverflow.com/questions/24119039/android-align-image-on-top-right-hand-corner-of-button – user1726619 Jan 21 '15 at 09:07
Then you should try adding a LinearLayout on the top side. Make it transparent. I'll edit my answer to give you an example. – Jordi Sipkens Jan 21 '15 at 09:09
The link you provided up here isn't something about pulling an item out of the main view section. To accomplish this you should use dirty tricks.. – Jan 21 '15 at 09:14
1

I've tested the given code's, which all results in this similar result: http://i.imgur.com/12GH8qw.png . – Jan 21 '15 at 09:55

Jordi Sipkens · Accepted Answer · 2015-01-21T09:19:37.260

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/transparent"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/close_dialog"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="top|right"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:adjustViewBounds="true"
        android:background="@android:color/white"
        android:description="@null"
        android:scaleType="fitStart" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@android:color/white">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingLeft="7.0dip"
        android:paddingRight="7.0dip"
        android:paddingTop="7.0dip"
        android:text="Free internet Consumed: 0.5 MB"
        android:textColor="#6d7780"
        android:textSize="18.0dip" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingLeft="7.0dip"
        android:paddingTop="7.0dip"
        android:text="Free internet Limit: 10 MB"
        android:textColor="#6d7780"
        android:textSize="18.0dip" />

    <Button
        android:id="@+id/button_hide_alertDialog"
        android:layout_width="60.0dip"
        android:layout_height="35.0dip"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="35.0dip"
        android:text="OK"
        android:textSize="15.0dip"
        android:textStyle="bold" />

    <Button
        android:id="@+id/textview_powered_by"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="25.0dip"
        android:background="@android:color/transparent"
        android:drawablePadding="5.0dip"
        android:text="Powered by"
        android:textColor="#6d7780"
        android:textSize="10.0dip" />

</LinearLayout>
</LinearLayout>

Just add this LinearLayout around your ImageView. So don't delete anything, just add the LinearLayout.

EDIT :

Make sure your top Layout also has background="#android:color/transparent". Then use another LinearLayout with a background for the rest of the content.

This should do the trick. Replace the backgrounds etc with your own @drawables. But I tested it with a white background, and it is the desired output.

Picture of my output :

enter image description here

I have already tried that option. This is the output i am getting by using android:layout_marginTop="-15dp" — user1726619, Jan 21 '15 at 08:42
May I ask why you are using a negative margin? You want the top Image to have a margin from the edges right? Try using the updated code then please. — Jordi Sipkens, Jan 21 '15 at 08:53
I would like to push the cross button in imageview slightly outside on top left corner. Even your updated code is not working. — user1726619, Jan 21 '15 at 09:04
Try this please. I made some layout in my own project to look at it. This should do your trick. — Jordi Sipkens, Jan 21 '15 at 09:20
This won't result in a Dialog with a transparent background :) — , Jan 21 '15 at 09:46

Narendra · Answer 4 · 2015-01-21T09:41:22.937

<?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"
     >
<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="25dp"
    android:layout_marginBottom="35dp"
        android:background="@drawable/acl_data_info_bg_round"
    android:orientation="vertical" >
     <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingLeft="7.0dip"
        android:paddingRight="7.0dip"
        android:paddingTop="7.0dip"
        android:text="Free internet Consumed: 0.5 MB"
        android:textColor="#6d7780"
        android:textSize="18.0dip" 
        android:visibility="invisible"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingLeft="7.0dip"
        android:paddingRight="7.0dip"
        android:paddingTop="7.0dip"
        android:text="Free internet Consumed: 0.5 MB"
        android:textColor="#6d7780"
        android:textSize="18.0dip" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingLeft="7.0dip"
        android:paddingTop="7.0dip"
        android:text="Free internet Limit: 10 MB"
        android:textColor="#6d7780"
        android:textSize="18.0dip" />

    <Button
        android:id="@+id/button_hide_alertDialog"
        android:layout_width="60.0dip"
        android:layout_height="35.0dip"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="35.0dip"
        android:text="OK"
        android:textSize="15.0dip"
        android:textStyle="bold" />

    <Button
        android:id="@+id/textview_powered_by"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="25.0dip"
        android:background="@android:color/transparent"
        android:drawablePadding="5.0dip"
        android:drawableRight="@drawable/freeg_logo_acl_data_info"
        android:text="Powered by"
        android:textColor="#6d7780"
        android:textSize="10.0dip" />

</LinearLayout>

<ImageView
    android:id="@+id/close_dialog"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_gravity="top|right"
    android:adjustViewBounds="true"
    android:background="@drawable/icon"
    android:description="@null"
    android:scaleType="fitStart" />

</RelativeLayout>

try this it work enter image description here

score 0 · Answer 5 · answered Jul 17 '19 at 19:11

Frist, define a style

`<style name="deleteIcon">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginStart">-40dp</item>
<item name="android:layout_marginTop">3dp</item>
<item name="srcCompat">@drawable/ic_delete_icon</item>
</style>`

Second, using this style in your LinearLayout

`<ImageView sytle="@style/deleteIcon" />`

Bala Chandra · Answer 6 · 2022-10-11T11:47:47.963

   ` <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
    <ImageView
        android:id="@+id/imageclose"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="end|top"
        android:src="@drawable/close"
        android:background="@drawable/close"
        app:layout_constraintBottom_toTopOf="@+id/cardview"
        app:layout_constraintEnd_toEndOf="parent">
    </ImageView>

<----Your Layout------->enter code here

</androidx.constraintlayout.widget.ConstraintLayout>`

score 0 · Answer 7 · answered Oct 11 '22 at 11:48

             `AlertDialog.Builder builder = new 
                      AlertDialog.Builder(MainActivity.this);
            builder.setCancelable(false);
            builder.setView(R.layout.custom);
            AlertDialog Dialog = builder.create();
            Dialog.show();

            imageview=Dialog.findViewById(R.id.imageclose);
            Dialog.getWindow().setBackgroundDrawable( new 
                 ColorDrawable(android.graphics.Color.TRANSPARENT));

            imageview.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Dialog.dismiss();
                }
            });

How to put close imageview at top right corner with margin in a dialog?

7 Answers7