java Example
import android.content.Context; import android.content.res.TypedArray; import android.util.AttributeSet; import android.view.Gravity; import android.view.View; import android.view.ViewGroup; import android.widget.RemoteViews; /** * Example of writing a custom layout manager. This is a fairly full-featured * layout manager that is relatively general, handling all layout cases. You * can simplify it for more specific cases. */ @RemoteViews.RemoteView public class CustomLayout extends ViewGroup { /** The amount of space used by children in the left gutter. */ private int mLeftWidth; /** The amount of space used by children in the right gutter. */ private int mRightWidth; /** These are used for computing child frames based on their gravity. */ private final Rect mTmpContainerRect = new Rect(); private final Rect mTmpChildRect = new Rect(); public CustomLayout(Context context) { super(context); } public CustomLayout(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CustomLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } /** * Any layout manager that doesn't scroll will want this. */ @Override public boolean shouldDelayChildPressedState() { return false; } /** * Ask all children to measure themselves and compute the measurement of this * layout based on the children. */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int count = getChildCount(); // These keep track of the space we are using on the left and right for // views positioned there; we need member variables so we can also use // these for layout later. mLeftWidth = 0; mRightWidth = 0; // Measurement will ultimately be computing these values. int maxHeight = 0; int maxWidth = 0; int childState = 0; // Iterate through all children, measuring them and computing our dimensions // from their size. for (int i = 0; i < count; i++) { final View child = getChildAt(i); if (child.getVisibility() != GONE) { // Measure the child. measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, 0); // Update our size information based on the layout params. Children // that asked to be positioned on the left or right go in those gutters. final LayoutParams lp = (LayoutParams) child.getLayoutParams(); if (lp.position == LayoutParams.POSITION_LEFT) { mLeftWidth += Math.max(maxWidth, child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin); } else if (lp.position == LayoutParams.POSITION_RIGHT) { mRightWidth += Math.max(maxWidth, child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin); } else { maxWidth = Math.max(maxWidth, child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin); } maxHeight = Math.max(maxHeight, child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin); childState = combineMeasuredStates(childState, child.getMeasuredState()); } } // Total width is the maximum width of all inner children plus the gutters. maxWidth += mLeftWidth + mRightWidth; // Check against our minimum height and width maxHeight = Math.max(maxHeight, getSuggestedMinimumHeight()); maxWidth = Math.max(maxWidth, getSuggestedMinimumWidth()); // Report our final dimensions. setMeasuredDimension(resolveSizeAndState(maxWidth, widthMeasureSpec, childState), resolveSizeAndState(maxHeight, heightMeasureSpec, childState << MEASURED_HEIGHT_STATE_SHIFT)); } /** * Position all children within this layout. */ @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { final int count = getChildCount(); // These are the far left and right edges in which we are performing layout. int leftPos = getPaddingLeft(); int rightPos = right - left - getPaddingRight(); // This is the middle region inside of the gutter. final int middleLeft = leftPos + mLeftWidth; final int middleRight = rightPos - mRightWidth; // These are the top and bottom edges in which we are performing layout. final int parentTop = getPaddingTop(); final int parentBottom = bottom - top - getPaddingBottom(); for (int i = 0; i < count; i++) { final View child = getChildAt(i); if (child.getVisibility() != GONE) { final LayoutParams lp = (LayoutParams) child.getLayoutParams(); final int width = child.getMeasuredWidth(); final int height = child.getMeasuredHeight(); // Compute the frame in which we are placing this child. if (lp.position == LayoutParams.POSITION_LEFT) { mTmpContainerRect.left = leftPos + lp.leftMargin; mTmpContainerRect.right = leftPos + width + lp.rightMargin; leftPos = mTmpContainerRect.right; } else if (lp.position == LayoutParams.POSITION_RIGHT) { mTmpContainerRect.right = rightPos - lp.rightMargin; mTmpContainerRect.left = rightPos - width - lp.leftMargin; rightPos = mTmpContainerRect.left; } else { mTmpContainerRect.left = middleLeft + lp.leftMargin; mTmpContainerRect.right = middleRight - lp.rightMargin; } mTmpContainerRect.top = parentTop + lp.topMargin; mTmpContainerRect.bottom = parentBottom - lp.bottomMargin; // Use the child's gravity and size to determine its final // frame within its container. Gravity.apply(lp.gravity, width, height, mTmpContainerRect, mTmpChildRect); // Place the child. child.layout(mTmpChildRect.left, mTmpChildRect.top, mTmpChildRect.right, mTmpChildRect.bottom); } } } // ---------------------------------------------------------------------- // The rest of the implementation is for custom per-child layout parameters. // If you do not need these (for example you are writing a layout manager // that does fixed positioning of its children), you can drop all of this. @Override public LayoutParams generateLayoutParams(AttributeSet attrs) { return new CustomLayout.LayoutParams(getContext(), attrs); } @Override protected LayoutParams generateDefaultLayoutParams() { return new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); } @Override protected ViewGroup.LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) { return new LayoutParams(p); } @Override protected boolean checkLayoutParams(ViewGroup.LayoutParams p) { return p instanceof LayoutParams; } /** * Custom per-child layout information. */ public static class LayoutParams extends MarginLayoutParams { /** * The gravity to apply with the View to which these layout parameters * are associated. */ public int gravity = Gravity.TOP | Gravity.START; public static int POSITION_MIDDLE = 0; public static int POSITION_LEFT = 1; public static int POSITION_RIGHT = 2; public int position = POSITION_MIDDLE; public LayoutParams(Context c, AttributeSet attrs) { super(c, attrs); // Pull the layout param values from the layout XML during // inflation. This is not needed if you don't care about // changing the layout behavior in XML. TypedArray a = c.obtainStyledAttributes(attrs, R.styleable.CustomLayoutLP); gravity = a.getInt(R.styleable.CustomLayoutLP_android_layout_gravity, gravity); position = a.getInt(R.styleable.CustomLayoutLP_layout_position, position); a.recycle(); } public LayoutParams(int width, int height) { super(width, height); } public LayoutParams(ViewGroup.LayoutParams source) { super(source); } } }
xml Example
<declare-styleable name="CustomLayoutLP"> <attr name="android:layout_gravity" /> <attr name="layout_position"> <enum name="middle" value="0" /> <enum name="left" value="1" /> <enum name="right" value="2" /> </attr> </declare-styleable>
xml Example
<com.example.android.apis.view.CustomLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res/com.example.android.apis" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- put first view to left. --> <TextView android:background="@drawable/filled_box" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_position="left" android:layout_gravity="fill_vertical|center_horizontal" android:text="l1"/> <!-- stack second view to left. --> <TextView android:background="@drawable/filled_box" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_position="left" android:layout_gravity="fill_vertical|center_horizontal" android:text="l2"/> <!-- also put a view on the right. --> <TextView android:background="@drawable/filled_box" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_position="right" android:layout_gravity="fill_vertical|center_horizontal" android:text="r1"/> <!-- by default views go in the middle; use fill vertical gravity --> <TextView android:background="@drawable/green" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="fill_vertical|center_horizontal" android:text="fill-vert"/> <!-- by default views go in the middle; use fill horizontal gravity --> <TextView android:background="@drawable/green" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical|fill_horizontal" android:text="fill-horiz"/> <!-- by default views go in the middle; use top-left gravity --> <TextView android:background="@drawable/blue" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top|left" android:text="top-left"/> <!-- by default views go in the middle; use center gravity --> <TextView android:background="@drawable/blue" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="center"/> <!-- by default views go in the middle; use bottom-right --> <TextView android:background="@drawable/blue" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:text="bottom-right"/> </com.example.android.apis.view.CustomLayout>
See Also: ViewGroup Members
java Example
import android.content.Context; import android.content.res.TypedArray; import android.util.AttributeSet; import android.view.Gravity; import android.view.View; import android.view.ViewGroup; import android.widget.RemoteViews; /** * Example of writing a custom layout manager. This is a fairly full-featured * layout manager that is relatively general, handling all layout cases. You * can simplify it for more specific cases. */ @RemoteViews.RemoteView public class CustomLayout extends ViewGroup { /** The amount of space used by children in the left gutter. */ private int mLeftWidth; /** The amount of space used by children in the right gutter. */ private int mRightWidth; /** These are used for computing child frames based on their gravity. */ private final Rect mTmpContainerRect = new Rect(); private final Rect mTmpChildRect = new Rect(); public CustomLayout(Context context) { super(context); } public CustomLayout(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CustomLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } /** * Any layout manager that doesn't scroll will want this. */ @Override public boolean shouldDelayChildPressedState() { return false; } /** * Ask all children to measure themselves and compute the measurement of this * layout based on the children. */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int count = getChildCount(); // These keep track of the space we are using on the left and right for // views positioned there; we need member variables so we can also use // these for layout later. mLeftWidth = 0; mRightWidth = 0; // Measurement will ultimately be computing these values. int maxHeight = 0; int maxWidth = 0; int childState = 0; // Iterate through all children, measuring them and computing our dimensions // from their size. for (int i = 0; i < count; i++) { final View child = getChildAt(i); if (child.getVisibility() != GONE) { // Measure the child. measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, 0); // Update our size information based on the layout params. Children // that asked to be positioned on the left or right go in those gutters. final LayoutParams lp = (LayoutParams) child.getLayoutParams(); if (lp.position == LayoutParams.POSITION_LEFT) { mLeftWidth += Math.max(maxWidth, child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin); } else if (lp.position == LayoutParams.POSITION_RIGHT) { mRightWidth += Math.max(maxWidth, child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin); } else { maxWidth = Math.max(maxWidth, child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin); } maxHeight = Math.max(maxHeight, child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin); childState = combineMeasuredStates(childState, child.getMeasuredState()); } } // Total width is the maximum width of all inner children plus the gutters. maxWidth += mLeftWidth + mRightWidth; // Check against our minimum height and width maxHeight = Math.max(maxHeight, getSuggestedMinimumHeight()); maxWidth = Math.max(maxWidth, getSuggestedMinimumWidth()); // Report our final dimensions. setMeasuredDimension(resolveSizeAndState(maxWidth, widthMeasureSpec, childState), resolveSizeAndState(maxHeight, heightMeasureSpec, childState << MEASURED_HEIGHT_STATE_SHIFT)); } /** * Position all children within this layout. */ @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { final int count = getChildCount(); // These are the far left and right edges in which we are performing layout. int leftPos = getPaddingLeft(); int rightPos = right - left - getPaddingRight(); // This is the middle region inside of the gutter. final int middleLeft = leftPos + mLeftWidth; final int middleRight = rightPos - mRightWidth; // These are the top and bottom edges in which we are performing layout. final int parentTop = getPaddingTop(); final int parentBottom = bottom - top - getPaddingBottom(); for (int i = 0; i < count; i++) { final View child = getChildAt(i); if (child.getVisibility() != GONE) { final LayoutParams lp = (LayoutParams) child.getLayoutParams(); final int width = child.getMeasuredWidth(); final int height = child.getMeasuredHeight(); // Compute the frame in which we are placing this child. if (lp.position == LayoutParams.POSITION_LEFT) { mTmpContainerRect.left = leftPos + lp.leftMargin; mTmpContainerRect.right = leftPos + width + lp.rightMargin; leftPos = mTmpContainerRect.right; } else if (lp.position == LayoutParams.POSITION_RIGHT) { mTmpContainerRect.right = rightPos - lp.rightMargin; mTmpContainerRect.left = rightPos - width - lp.leftMargin; rightPos = mTmpContainerRect.left; } else { mTmpContainerRect.left = middleLeft + lp.leftMargin; mTmpContainerRect.right = middleRight - lp.rightMargin; } mTmpContainerRect.top = parentTop + lp.topMargin; mTmpContainerRect.bottom = parentBottom - lp.bottomMargin; // Use the child's gravity and size to determine its final // frame within its container. Gravity.apply(lp.gravity, width, height, mTmpContainerRect, mTmpChildRect); // Place the child. child.layout(mTmpChildRect.left, mTmpChildRect.top, mTmpChildRect.right, mTmpChildRect.bottom); } } } // ---------------------------------------------------------------------- // The rest of the implementation is for custom per-child layout parameters. // If you do not need these (for example you are writing a layout manager // that does fixed positioning of its children), you can drop all of this. @Override public LayoutParams generateLayoutParams(AttributeSet attrs) { return new CustomLayout.LayoutParams(getContext(), attrs); } @Override protected LayoutParams generateDefaultLayoutParams() { return new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); } @Override protected ViewGroup.LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) { return new LayoutParams(p); } @Override protected boolean checkLayoutParams(ViewGroup.LayoutParams p) { return p instanceof LayoutParams; } /** * Custom per-child layout information. */ public static class LayoutParams extends MarginLayoutParams { /** * The gravity to apply with the View to which these layout parameters * are associated. */ public int gravity = Gravity.TOP | Gravity.START; public static int POSITION_MIDDLE = 0; public static int POSITION_LEFT = 1; public static int POSITION_RIGHT = 2; public int position = POSITION_MIDDLE; public LayoutParams(Context c, AttributeSet attrs) { super(c, attrs); // Pull the layout param values from the layout XML during // inflation. This is not needed if you don't care about // changing the layout behavior in XML. TypedArray a = c.obtainStyledAttributes(attrs, R.styleable.CustomLayoutLP); gravity = a.getInt(R.styleable.CustomLayoutLP_android_layout_gravity, gravity); position = a.getInt(R.styleable.CustomLayoutLP_layout_position, position); a.recycle(); } public LayoutParams(int width, int height) { super(width, height); } public LayoutParams(ViewGroup.LayoutParams source) { super(source); } } }
xml Example
<declare-styleable name="CustomLayoutLP"> <attr name="android:layout_gravity" /> <attr name="layout_position"> <enum name="middle" value="0" /> <enum name="left" value="1" /> <enum name="right" value="2" /> </attr> </declare-styleable>
xml Example
<com.example.android.apis.view.CustomLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res/com.example.android.apis" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- put first view to left. --> <TextView android:background="@drawable/filled_box" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_position="left" android:layout_gravity="fill_vertical|center_horizontal" android:text="l1"/> <!-- stack second view to left. --> <TextView android:background="@drawable/filled_box" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_position="left" android:layout_gravity="fill_vertical|center_horizontal" android:text="l2"/> <!-- also put a view on the right. --> <TextView android:background="@drawable/filled_box" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_position="right" android:layout_gravity="fill_vertical|center_horizontal" android:text="r1"/> <!-- by default views go in the middle; use fill vertical gravity --> <TextView android:background="@drawable/green" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="fill_vertical|center_horizontal" android:text="fill-vert"/> <!-- by default views go in the middle; use fill horizontal gravity --> <TextView android:background="@drawable/green" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical|fill_horizontal" android:text="fill-horiz"/> <!-- by default views go in the middle; use top-left gravity --> <TextView android:background="@drawable/blue" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top|left" android:text="top-left"/> <!-- by default views go in the middle; use center gravity --> <TextView android:background="@drawable/blue" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="center"/> <!-- by default views go in the middle; use bottom-right --> <TextView android:background="@drawable/blue" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:text="bottom-right"/> </com.example.android.apis.view.CustomLayout>
A ViewGroup is a special view that can contain other views (called children.) The view group is the base class for layouts and views containers. This class also defines the NoType:android/view/ViewGroup$LayoutParams;Href=../../../reference/android/view/ViewGroup.LayoutParams.html class which serves as the base class for layouts parameters.
Also see NoType:android/view/ViewGroup$LayoutParams;Href=../../../reference/android/view/ViewGroup.LayoutParams.html for layout attributes.
For more information about creating user interface layouts, read the XML Layouts developer guide.
Here is a complete implementation of a custom ViewGroup that implements a simple Android.Widget.FrameLayout along with the ability to stack children in left and right gutters.
If you are implementing XML layout attributes as shown in the example, this is the corresponding definition for them that would go in res/values/attrs.xml:
Finally the layout manager can be used in an XML layout like so: