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.

Answer 2

Try setting dependent focusability false in framelayout and it will work

The problem is frame layout is not getting the click event

Descendent focus ability false give you ability disable click event in child views if a parent vieegroup