Button not clickable in custom LinearLayout

Question

I have a custom view that contain a framelayout. This framelayout contain two views (LinearLayout) that can be swipe. If I swipe the first one, the second one appears and vice versa. One of those views has a button but I don't know why, this button is like disable. I cannot click on it and the onClick method has no effect.

Here the structure of the layout xml inflated in the custom view :

<FrameLayout>

  <LinearLayout
      android:id="@+id/frontview"
  /> 
  <LinearLayout
      android:id="@+id/backview">
    <Button
       android:layout_height="wrap_content"
       android:layout_width="wrap_content"
       android:id="@+id/ButtonUpdate"
       android:text="@string/bUpdate"
       android:padding="5dp"
       android:clickable="true"
       style="?android:attr/borderlessButtonStyle"
        />
  </LinearLayout>

</FrameLayout>

Here the code in my custom view :

public class mView extends LinearLayout {

ImageView icon;
TextView current_data;
TextView previous_data;
TextView time ;
Button bUpdate;
EditText TextUpdate;

public mView(Context context) {
    super(context);
    init(context);
}

public mView(Context context, AttributeSet attrs) {
    super(context,attrs);
    init(context);

}

public mView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init(context);
}

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    // nothing
    }
}

public void init(Context pContext) {
    LayoutInflater inflater = (LayoutInflater) pContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View ll = inflater.inflate(R.layout.list_item_data, this, true);

    /** We initialize the elements of our UI **/
    /**
     * First View
     */
    icon= (ImageView) ll.findViewById(R.id.ic_icon);
    current_data = ll.(TextView) findViewById(R.id.current_data);
    previous_data = ll.(TextView) findViewById(R.id.previous_data);
    time = (TextView) ll.findViewById(R.id.time);

    /**
     * Second View
     */
    bUpdate = (Button) ll.findViewById(R.id.ButtonUpdate);
    TextUpdate= (EditText) ll.findViewById(R.id.TextUpdate);
    bUpdate.setOnClickListener(new bUpdateClickListener());        
}

private class bUpdateClickListener implements OnClickListener {
    @Override
    public void onClick(View v) {
        // When the button is clicked, the front view re-appears and the backview disappears
        frontview
                .animate()
                .translationX(0);
        backview
                .animate()
                .translationX(-backview.getMeasuredWidth());

    }
}

The swipe is correctly handle with onInterceptTouchEvent(MotionEvent ev) and onTouchEvent(MotionEvent ev).

Here the main.xml used in MyActivity :

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

   <LinearLayout
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#f6f6f6">

      <TextView
         android:id="@+id/infoimc"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginLeft="18dp"
         android:layout_marginTop="8dp"
         android:text="@string/app_name"
         android:textColor="#000000"
         android:textSize="16dp"/>
      <View
         android:id="@+id/divider_infoimc"
         android:layout_width="match_parent"
            android:layout_height="1dip"
            android:layout_marginRight="18dp"
            android:layout_marginLeft="18dp"
            android:background="#99CC00"/>
      <com.example.essai.CustomGraph
         android:id="@+id/CustomGraph"
         android:layout_width="match_parent"
         android:layout_height="200dp"
         android:layout_gravity="center"
         android:visibility="visible"
         android:layout_marginTop="10dp"/>

   </LinearLayout>

   <FrameLayout
      android:layout_width="wrap_content"
      android:layout_height="80dp"
      android:layout_gravity="left|center_vertical">

   <com.example.essai.mView
      android:id="@+id/CustomView"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>

   </FrameLayout>

</LinearLayout>

And MyActivity.class :

public class MyActivity extends Activity {

   @Override
   public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);
   }

}

I don't know if the button must be handle also in the Activity ?

Thanks for your help !

Answer 1

The root cause

According to API:

FrameLayout is designed to block out an area on the screen to display a single item.

If there is more items, like in your case, then "unexpected" things will happen:

Child views are drawn in a stack, with the most recently added child on top.

This means, your frontview is on top of your backview and since the frontview doesn't have android:clickable="true" the click events (on button) are not delegated below.

Solution 1

Reorder the child-layout gravity programmatically.

You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.

Just switch the android:layout_gravity="top" and android:layout_gravity="bottom" whenever you are sliding them.

Solution 2

Control the visibility of the child-layouts programmatically.

When the backview should be displayed, set the visibility of the frontview to View.GONE. And set it to View.VISIBLE in the reversed case.

Solution 3

Change FrameLayout to a different layout type.

Could require more "fiddling" with layout xmls...

See what you're familliar with the most and choose the solution accordingly :)