View Gone when clicked outside that view

Question

I wanted to hide the view when clicking outside that view, for example,

<Framelayout android:id="@+id/container"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >
  <fragment
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

  <ImageView
    android:id="@+id/imgButtonToOpenGrid"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right|bottom"
    android:src="@drawable/open_grid_img" 
    />

  <RelativeLayout 
    android:id="@+id/containerGrid"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right|bottom"
    >

    <Button 
        android:id="@+id/button1grid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/favourites"
        />

    <Button 
        android:id="@+id/button2grid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/recent"
        android:layout_toRightOf="@+id/button1grid"
        />

    <Button 
        android:id="@+id/button3grid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/gridview"
        android:layout_toRightOf="@+id/button2grid"
        />
  </RelativeLayout>
 </FrameLayout>

What I am doing in my app is oncreate i am hiding the RelativeLayout view with id="containerGrid" and making that relativeLayout view visible when I click on the imageview.

So my requirement is I wanted to hide the container RelativeLayout with id="containerGrid" when I click outside that container.

I tried to get the framelayout container and when clicked on that container checking if relativelayout container is shown or not , if shown then made its view gone. Here is the code i tried,

containerMap = (FrameLayout)findViewById(R.id.container);

containerMap.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View view) {
        // TODO Auto-generated method stub

        if(rltvContainer.isShown()){
            rltvContainer.setVisibility(View.GONE);

        }

    }
});

Is there anywhere i am going wrong in above thing.

Actually i have map too in that framelayout container so here i am expecting when i click on a map the relativelayout container should go.

Answer 1

Add another coverView which is transparent in front of the map fragment

<Framelayout android:id="@+id/container"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >
  <fragment
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

  <View
    android:id="@+id/coverView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:background="#00000000"
    android:visibility="gone"
    />

  <ImageView
    android:id="@+id/imgButtonToOpenGrid"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right|bottom"
    android:src="@drawable/open_grid_img" 
    />

  <RelativeLayout 
    android:id="@+id/containerGrid"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right|bottom"
    >

    <Button 
        android:id="@+id/button1grid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/favourites"
        />

    <Button 
        android:id="@+id/button2grid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/recent"
        android:layout_toRightOf="@+id/button1grid"
        />

    <Button 
        android:id="@+id/button3grid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/gridview"
        android:layout_toRightOf="@+id/button2grid"
        />
  </RelativeLayout>
 </FrameLayout>

When the containerGrid is opened(which means its' visibility is View.VISIBLE, set the coverView's visibility to View.VISIBLE.

If you want to close containerGrid, which is that you want to click outside containerGrid, you actually click on the coverView, set OnClickListener to the coverView:

coverView.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View view) {
        // TODO Auto-generated method stub

        if(rltvContainer.isShown()){
            rltvContainer.setVisibility(View.GONE);
        }
        coverView.setVisibility(View.Gone);
    }
});

set both coverView and containerGrid to View.GONE.