Android align close button to top right corner of the dialog box?

Question

i am working on a custom dialog box and i want to place my close button to the top right corner of the dialog so that the close image would be partially in the dialog box and partially outside.... (https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSSfhWv1zPYhmCFVsO70qLY-CqGIKplU3TAVL6zdHaxvLZMsqYnwg)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" 
android:background="@drawable/someborder"
android:orientation="horizontal"
android:baselineAligned="false">

 <LinearLayout
         android:layout_width="0dp"
         android:layout_height="fill_parent"
         android:gravity="top|left"
         android:orientation="vertical" 
         android:layout_weight="0.65">

    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"> 
      <LinearLayout   
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_weight="0.82" >  
         <ScrollView 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:scrollbars="vertical" 
    android:paddingBottom="10dp"
            android:paddingLeft="8dp"
            android:paddingRight="5dp"
            android:paddingTop="10dp">

         <TableLayout
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_gravity="left" >

         <TableRow
             android:layout_width="fill_parent"
             android:layout_height="wrap_content" >

             <TextView
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_weight="0.30"
                 android:gravity="center"
                 android:shadowColor="@color/color"
                 android:shadowDx="1"
                 android:shadowDy="1"
                 android:shadowRadius="1"
                 android:paddingLeft="1.2dp" />

             <TextView
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_weight="0.20"
                 android:gravity="center|center_vertical"
                 android:shadowColor="@color/color"
                 android:shadowDx="1"
                 android:shadowDy="1"
                 android:shadowRadius="1"/>

             <TextView
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_weight="0.25"
                 android:gravity="center_vertical|center"
                 android:shadowColor="@color/color"
                 android:shadowDx="1"
                 android:shadowDy="1"
                 android:shadowRadius="1" />

             <TextView
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_weight="0.25"
                 android:gravity="center_vertical|center"
                 android:shadowColor="@color/color"
                 android:shadowDx="1"
                 android:shadowDy="1"
                 android:shadowRadius="1" />
         </TableRow> 
    </TableLayout>  
  </ScrollView> 
 </LinearLayout> 
 <ImageView
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:src="@drawable/horizontal_line" />
 <LinearLayout 
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:orientation="vertical"
       android:gravity="top|left"
       android:layout_weight=".15">

     <LinearLayout 
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
         android:gravity="center"
         android:paddingLeft="12dp"
         android:paddingBottom="5dp">

         <CheckBox
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:gravity="center"
             android:paddingLeft="10dp"
             android:textSize="12sp"/>

    </LinearLayout>  
   </LinearLayout> 
   </LinearLayout>         
   </LinearLayout>

 <ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:paddingBottom="2dp"
     android:paddingTop="1.75dp"
     android:src="@drawable/vertical_line" />

 <LinearLayout 
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="top|right"
    android:layout_weight=".38">

 <LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="0dp"
        android:layout_weight=".60"
        android:orientation="horizontal"
        android:gravity="top|right">

     <ImageView
         android:id="@+id/id"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:gravity="center"/>

     // Close button         
      <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|right"/>
// Close Button

     </LinearLayout>

<LinearLayout
         android:id="@+id/linear_layout"
         android:layout_width="fill_parent"
         android:layout_height="0dp"
         android:layout_weight=".40"
         android:orientation="vertical"
         android:paddingBottom="8dp" >

       <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="0dp"
         android:layout_weight=".40"
         android:layout_gravity="center"
         android:orientation="vertical" >

         <RadioButton
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:gravity="center"
             android:layout_weight="0.33" 
             android:textAlignment="center"/>

         <RadioButton
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:gravity="center"
             android:layout_weight="0.33" 
             android:textAlignment="center"/>

         <RadioButton
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:gravity="center"
             android:layout_weight="0.33" 
             android:textAlignment="center"/>

         </LinearLayout>

     </LinearLayout>
  </LinearLayout>
  </LinearLayout>

Like this image and its red close button. Thanx everybody in advance..

Answer 1

I have one solution for that,

<FrameLayout 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" >

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" >

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="15dp" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/img_popup_one"
            android:orientation="vertical"
            android:padding="10dp" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Sign In"
                android:textColor="@color/clr_gray"
                android:textSize="16dp" />

            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/img_edittext_bg"
                android:hint="Username"
                android:padding="5dp"
                android:singleLine="true"
                android:textColorHint="@color/clr_gray" />

            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/img_edittext_bg"
                android:hint="Password"
                android:inputType="textPassword"
                android:padding="5dp"
                android:singleLine="true"
                android:textColorHint="@color/clr_gray" />
        </LinearLayout>
    </FrameLayout>

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="right|top"
        android:contentDescription="@string/contentDescription"
        android:src="@drawable/img_popup_close" />
</FrameLayout>
</FrameLayout>

Answer 2

Here is a way to do it. Place your content layout/view in the same FrameLayout as the close button.

<?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"
          >

    <!-- The following View represent the content. Note the margin -->
    <View
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:background="#44aa00"
        android:layout_margin="18dp"
        />
    <ImageButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_gravity="top|right"
        android:src="@android:drawable/ic_menu_close_clear_cancel"
        android:background="#ff0000"
        />
</FrameLayout>

Notes:

• Content must be listed before the close button. Button drawn on top of content.

• The button is placed in the top right corner by setting the 3 layout parameters:

      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:layout_gravity="top|right"
  

• Set a margin on the content to get the "partially outside" effect.