Question

I have to build a more complex custom view in Android. The final layout should look like this:

<RelativeLayout>
  <SomeView />
  <SomeOtherView />
  <!-- maybe more layout stuff here later -->
  <LinearLayout>
    <!-- the children -->
  </LinearLayout>
</RelativeLayout>

However, in the XML files I just want do define this (without defining SomeView, SomeOtherView etc.):

<MyCustomView>
  <!-- the children -->
</MyCustomView>

Is this possible in Android, and if yes: What would be the cleanest way to do it?
The possible solutions that came to my mind were ‘override the addView() methods’ and ‘remove all views and add them again later’, but I am unsure which way to go…

Thanks a lot in advance for your help! 🙂

Answer 1

It’s absolutely possible, and encouraged, to create custom container views. This is what Android would call a compound control. So:

public class MyCustomView extends RelativeLayout {
    private LinearLayout mContentView;

    public MyCustomView(Context context) {
        this(context, null);
    }

    public MyCustomView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyCustomView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        //Inflate and attach your child XML
        LayoutInflater.from(context).inflate(R.layout.custom_layout, this);
        //Get a reference to the layout where you want children to be placed
        mContentView = (LinearLayout) findViewById(R.id.content);

        //Do any more custom init you would like to access children and do setup
    }

    @Override
    public void addView(View child, int index, ViewGroup.LayoutParams params) {
        if(mContentView == null){
            super.addView(child, index, params);
        } else {
            //Forward these calls to the content view
            mContentView.addView(child, index, params);
        }
    }
}

You can override as many versions of addView() as you feel are necessary, but in the end they all call back to the version I placed in the sample. Overriding just this method will have the framework pass all children found inside its XML tag to a specific child container.

And then modify the XML as such:

res/layout/custom_layout.xml

<merge>
  <SomeView />
  <SomeOtherView />
  <!-- maybe more layout stuff here later -->
  <LinearLayout
      android:id="@+id/content" />
</merge>

The reason for using <merge> is to simplify the hierarchy. All the child views will get attached to your custom class, which is a RelativeLayout. If you don’t use <merge>, you end up with a RelativeLayout attached to another RelativeLayout attached to all the children, which can cause issues.

---

Kotlin version:

    private fun expand(view: View) {
        val parentWidth = (view.parent as View).width
        val matchParentMeasureSpec = MeasureSpec.makeMeasureSpec(parentWidth, MeasureSpec.EXACTLY)
        val wrapContentMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)

        view.measure(matchParentMeasureSpec, wrapContentMeasureSpec)
        val targetHeight = view.measuredHeight
        view.isVisible = true
        val animation: Animation = getExpandAnimation(view, targetHeight)

        view.startAnimation(animation)
    }

    private fun getExpandAnimation(
        view: View,
        targetHeight: Int
    ): Animation = object : Animation() {
        override fun applyTransformation(
            interpolatedTime: Float,
            transformation: Transformation
        ) {
            view.layoutParams.height =
                if (interpolatedTime == 1f) {
                    LayoutParams.WRAP_CONTENT
                } else {
                    (targetHeight * interpolatedTime).toInt()
                }

            view.requestLayout()
        }

        override fun willChangeBounds(): Boolean {
            return true
        }
    }.apply {
        duration = getDuration(targetHeight, view)
    }

    private fun collapse(view: View) {
        val initialHeight = view.measuredHeight
        val animation: Animation = getCollapseAnimation(view, initialHeight)

        view.startAnimation(animation)
    }

    private fun getCollapseAnimation(
        view: View,
        initialHeight: Int
    ): Animation = object : Animation() {
        override fun applyTransformation(
            interpolatedTime: Float,
            transformation: Transformation
        ) {
            if (interpolatedTime == 1f) {
                view.isVisible = false
            } else {
                view.layoutParams.height =
                    initialHeight - (initialHeight * interpolatedTime).toInt()
                view.requestLayout()
            }
        }

        override fun willChangeBounds(): Boolean = true

    }.apply {
        duration = getDuration(initialHeight, view)
    }

    /**
     * Speed = 1dp/ms
     */
    private fun getDuration(initialHeight: Int, view: View) =
        (initialHeight / view.context.resources.displayMetrics.density).toLong()