How to manage to bring one child in front of other in custom viewgroup?

Question

I am creating my own custom viewgroup in android. I have two children. One is a linearLayout (it's the first child and covers half of the screen) with some background image and buttons over it and other is a extension of View (it's the second child and covers whole screen) where I draw something using my finger.

I want the (first child) Linear Layout to be hidden under the (second child) extension of view so that I can use some gesture to swipe the second child to the right hand side (kind of like slide of google,youtube) and see the first child (LinearLayout). The problem is inside onLayout I place the children in certain order but the first child (LinearLayout) always comes in front no matter what I do.

  secondchild.layout(0,0,top,bottom);
  firstchild.layout(0,0,top/2,bottom);

I also tried

  firstchild.layout(0,0,top/2,bottom);      
  secondchild.layout(0,0,top,bottom);

But the first child always comes on top.

Code for Costume ViewGroup:

public class RootViewLayout extends ViewGroup  {
      private View mDrawView;
      private View mSlideView;
      private int mTop;
      private int mDragRange;

      public RootViewLayout(Context context, AttributeSet attrs) {
          super(context, attrs);
      }
      @Override
      protected void onFinishInflate() {
          mDrawView  = findViewById(R.id.content_frame_white);
          mSlideView = findViewById(R.id.slide_frame);       
     }
     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
         int widthSize = MeasureSpec.getSize(widthMeasureSpec);
         int heightSize = MeasureSpec.getSize(heightMeasureSpec);
         setMeasuredDimension(widthSize, heightSize);   
     }
     @Override
     protected void onLayout(boolean changed, int left, int top, int right, int bottom){
            bringChildToFront(mDrawView);
            mDrawView.layout(0, 0, right, bottom);
            mSlideView.layout(0, 0, right/2, bottom);   
     }
}

XML Code :

<com.example.drawapp.RootViewLayout 
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/Root_View_layout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@color/white">
     <com.example.drawapp.DrawView
          android:id="@+id/content_frame_white"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@drawable/whitepaperwithcoffeestain">    
     </com.example.drawapp.DrawView>
     <LinearLayout 
          android:id="@+id/slide_frame"
          android:layout_width="wrap_content"
          android:layout_height="match_parent"
          android:background="@drawable/slidebackgrd"
          android:orientation="vertical">
          <Button 
            android:id="@+id/pen"
            android:layout_width="100dip"
            android:layout_height="wrap_content"
            android:background="@drawable/pic"/>
      </LinearLayout>
</com.example.drawapp.RootViewLayout>

When I don't put

   bringChildToFront(mDrawView);

the blank is placed with proper black background, but that's not what I actually want. I want whole screen to be covered with DrawView (whose background is white with coffee stain over it).

Is there any specific way to tell the children to be placed one on top of other?

Answer 1

You need to change the z-order of the child views. You should probably use bringChildToFront(), i.e.

parentLayout.bringChildToFront(secondChild);

However, the effect depends on the type of the parent layout (e.g. if it's a LinearLayout then the views would be swapped). Since you're overlaying I guess it means it's a RelativeLayout, and then it should work as you want.

I see that in your case you're using a custom ViewGroup. If it's only to achieve the "full width/half width" children, then I would suggest swapping it for a RelativeLayout. Add secondchild with match_parent and firstchild as right of a centered 0dp view as in Adjust width to half screen

Or another option, possibly simpler, is to just change the visibility on the child that goes on top (VISIBLE or GONE).