ConstraintLayout
class ConstraintLayout : ViewGroup
kotlin.Any | |||
↳ | android.view.View | ||
↳ | android.view.ViewGroup | ||
↳ | androidx.constraintlayout.widget.ConstraintLayout |
MotionLayout |
A subclass of ConstraintLayout that supports animating between various states Added in 2.0 |
A ConstraintLayout
is a android.view.ViewGroup
which allows you to position and size widgets in a flexible way.
Note:ConstraintLayout
is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread). As such, we are planning on enriching its API and capabilities over time. This documentation will reflect those changes.
There are currently various types of constraints that you can use:
- Relative positioning
- Margins
- Centering positioning
- Circular positioning
- Visibility behavior
- Dimension constraints
- Chains
- Virtual Helpers objects
- Optimizer
Note that you cannot have a circular dependency in constraints.
Also see ConstraintLayout.LayoutParams
for layout attributes
Developer Guide
Relative positioning
Relative positioning is one of the basic building blocks of creating layouts in ConstraintLayout. Those constraints allow you to position a given widget relative to another one. You can constrain a widget on the horizontal and vertical axis:
- Horizontal Axis: left, right, start and end sides
- Vertical Axis: top, bottom sides and text baseline
The general concept is to constrain a given side of a widget to another side of any other widget.
For example, in order to position button B to the right of button A:
you would need to do:
<Button android:id="@+id/buttonA" ... /> <Button android:id="@+id/buttonB" ... app:layout_constraintLeft_toRightOf="@+id/buttonA" />
Here is the list of available constraints:
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
They all take a reference id
to another widget, or the parent
(which will reference the parent container, i.e. the ConstraintLayout):
<Button android:id="@+id/buttonB" ... app:layout_constraintLeft_toLeftOf="parent" />
Margins
If side margins are set, they will be applied to the corresponding constraints (if they exist), enforcing the margin as a space between the target and the source side. The usual layout margin attributes can be used to this effect:
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
layout_marginBaseline
Note that a margin can only be positive or equal to zero, and takes a Dimension
.
Margins when connected to a GONE widget
When a position constraint target's visibility is View.GONE
, you can also indicate a different margin value to be used using the following attributes:
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
layout_goneMarginBaseline
Centering positioning and bias
A useful aspect of ConstraintLayout
is in how it deals with "impossible" constraints. For example, if we have something like:
<androidx.constraintlayout.widget.ConstraintLayout ...> <Button android:id="@+id/button" ... app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/> </>
Unless the ConstraintLayout
happens to have the exact same size as the Button
, both constraints cannot be satisfied at the same time (both sides cannot be where we want them to be).
What happens in this case is that the constraints act like opposite forces pulling the widget apart equally; such that the widget will end up being centered in the parent container. This will apply similarly for vertical constraints.
BiasThe default when encountering such opposite constraints is to center the widget; but you can tweak the positioning to favor one side over another using the bias attributes:
layout_constraintHorizontal_bias
layout_constraintVertical_bias
For example the following will make the left side with a 30% bias instead of the default 50%, such that the left side will be shorter, with the widget leaning more toward the left side:
<androidx.constraintlayout.widget.ConstraintLayout ...> <Button android:id="@+id/button" ... app:layout_constraintHorizontal_bias="0.3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/> </>
Circular positioning (Added in 1.1)
You can constrain a widget center relative to another widget center, at an angle and a distance. This allows you to position a widget on a circle. The following attributes can be used:
layout_constraintCircle
: references another widget idlayout_constraintCircleRadius
: the distance to the other widget centerlayout_constraintCircleAngle
: which angle the widget should be at (in degrees, from 0 to 360)
<Button android:id="@+id/buttonA" ... /> <Button android:id="@+id/buttonB" ... app:layout_constraintCircle="@+id/buttonA" app:layout_constraintCircleRadius="100dp" app:layout_constraintCircleAngle="45" />
Visibility behavior
ConstraintLayout
has a specific handling of widgets being marked as View.GONE
.
GONE
widgets, as usual, are not going to be displayed and are not part of the layout itself (i.e. their actual dimensions will not be changed if marked as GONE
).
But in terms of the layout computations, GONE
widgets are still part of it, with an important distinction:
- For the layout pass, their dimension will be considered as zero (basically, they will be resolved to a point)
- If they have constraints to other widgets they will still be respected, but any margins will be as if equals to zero
This specific behavior allows to build layouts where you can temporarily mark widgets as being GONE
, without breaking the layout, which can be particularly useful when doing simple layout animations.
Note: The margin used will be the margin that B had defined when connecting to A. In some cases, this might not be the margin you want (e.g. A had a 100dp margin to the side of its container, B only a 16dp to A, marking A as gone, B will have a margin of 16dp to the container). For this reason, you can specify an alternate margin value to be used when the connection is to a widget being marked as gone (see the section above about the gone margin attributes).
Dimensions constraints
Minimum dimensions on ConstraintLayout You can define minimum and maximum sizes for the ConstraintLayout
itself:
android:minWidth
set the minimum width for the layoutandroid:minHeight
set the minimum height for the layoutandroid:maxWidth
set the maximum width for the layoutandroid:maxHeight
set the maximum height for the layout
ConstraintLayout
when its dimensions are set to WRAP_CONTENT
. Widgets dimension constraints
The dimension of the widgets can be specified by setting the android:layout_width
and android:layout_height
attributes in 3 different ways:
- Using a specific dimension (either a literal value such as
123dp
or aDimension
reference) - Using
WRAP_CONTENT
, which will ask the widget to compute its own size - Using
0dp
, which is the equivalent of "MATCH_CONSTRAINT
"
The first two works in a similar fashion as other layouts. The last one will resize the widget in such a way as matching the constraints that are set. If margins are set, they will be taken in account in the computation.
Important: MATCH_PARENT
is not recommended for widgets contained in a ConstraintLayout
. Similar behavior can be defined by using MATCH_CONSTRAINT
with the corresponding left/right or top/bottom constraints being set to "parent"
.
If a dimension is set to WRAP_CONTENT
, in versions before 1.1 they will be treated as a literal dimension -- meaning, constraints will not limit the resulting dimension. While in general this is enough (and faster), in some situations, you might want to use WRAP_CONTENT
, yet keep enforcing constraints to limit the resulting dimension. In that case, you can add one of the corresponding attribute:
app:layout_constrainedWidth="true|false"
app:layout_constrainedHeight="true|false"
When a dimension is set to MATCH_CONSTRAINT
, the default behavior is to have the resulting size take all the available space. Several additional modifiers are available:
layout_constraintWidth_min
andlayout_constraintHeight_min
: will set the minimum size for this dimensionlayout_constraintWidth_max
andlayout_constraintHeight_max
: will set the maximum size for this dimensionlayout_constraintWidth_percent
andlayout_constraintHeight_percent
: will set the size of this dimension as a percentage of the parent
The value indicated for min and max can be either a dimension in Dp, or "wrap", which will use the same value as what WRAP_CONTENT
would do.
To use percent, you need to set the following
- The dimension should be set to
MATCH_CONSTRAINT
(0dp) - The default should be set to percent
app:layout_constraintWidth_default="percent"
orapp:layout_constraintHeight_default="percent"
- Then set the
layout_constraintWidth_percent
orlayout_constraintHeight_percent
attributes to a value between 0 and 1
You can also define one dimension of a widget as a ratio of the other one. In order to do that, you need to have at least one constrained dimension be set to 0dp
(i.e., MATCH_CONSTRAINT
), and set the attribute layout_constraintDimensionRatio
to a given ratio. For example:
<Button android:layout_width="wrap_content" android:layout_height="0dp" app:layout_constraintDimensionRatio="1:1" />
The ratio can be expressed either as:
- a float value, representing a ratio between width and height
- a ratio in the form "width:height"
You can also use ratio if both dimensions are set to MATCH_CONSTRAINT
(0dp). In this case the system sets the largest dimensions that satisfies all constraints and maintains the aspect ratio specified. To constrain one specific side based on the dimensions of another, you can pre append W,
" or H,
to constrain the width or height respectively. For example, If one dimension is constrained by two targets (e.g. width is 0dp and centered on parent) you can indicate which side should be constrained, by adding the letter W
(for constraining the width) or H
(for constraining the height) in front of the ratio, separated by a comma:
<Button android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintDimensionRatio="H,16:9" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent"/>
Chains
Chains provide group-like behavior in a single axis (horizontally or vertically). The other axis can be constrained independently.
Creating a chainA set of widgets are considered a chain if they are linked together via a bi-directional connection.
Chain headsChains are controlled by attributes set on the first element of the chain (the "head" of the chain):
The head is the left-most widget for horizontal chains, and the top-most widget for vertical chains.
Margins in chainsIf margins are specified on connections, they will be taken into account. In the case of spread chains, margins will be deducted from the allocated space.
Chain StyleWhen setting the attribute layout_constraintHorizontal_chainStyle
or layout_constraintVertical_chainStyle
on the first element of a chain, the behavior of the chain will change according to the specified style (default is CHAIN_SPREAD
).
CHAIN_SPREAD
-- the elements will be spread out (default style)- Weighted chain -- in
CHAIN_SPREAD
mode, if some widgets are set toMATCH_CONSTRAINT
, they will split the available space CHAIN_SPREAD_INSIDE
-- similar, but the endpoints of the chain will not be spread outCHAIN_PACKED
-- the elements of the chain will be packed together. The horizontal or vertical bias attribute of the child will then affect the positioning of the packed elements
The default behavior of a chain is to spread the elements equally in the available space. If one or more elements are using MATCH_CONSTRAINT
, they will use the available empty space (equally divided among themselves). The attribute layout_constraintHorizontal_weight
and layout_constraintVertical_weight
will control how the space will be distributed among the elements using MATCH_CONSTRAINT
. For example, on a chain containing two elements using MATCH_CONSTRAINT
, with the first element using a weight of 2 and the second a weight of 1, the space occupied by the first element will be twice that of the second element.
When using margins on elements in a chain, the margins are additive.
For example, on a horizontal chain, if one element defines a right margin of 10dp and the next element defines a left margin of 5dp, the resulting margin between those two elements is 15dp.
An item plus its margins are considered together when calculating leftover space used by chains to position items. The leftover space does not contain the margins.
Virtual Helper objects
In addition to the intrinsic capabilities detailed previously, you can also use special helper objects in ConstraintLayout
to help you with your layout. Currently, the Guideline
{@see Guideline} object allows you to create Horizontal and Vertical guidelines which are positioned relative to the ConstraintLayout
container. Widgets can then be positioned by constraining them to such guidelines. In 1.1, Barrier
and Group
were added too.
Optimizer (in 1.1)
In 1.1 we exposed the constraints optimizer. You can decide which optimizations are applied by adding the tag app:layout_optimizationLevel to the ConstraintLayout element.
- none : no optimizations are applied
- standard : Default. Optimize direct and barrier constraints only
- direct : optimize direct constraints
- barrier : optimize barrier constraints
- chain : optimize chain constraints (experimental)
- dimensions : optimize dimensions measures (experimental), reducing the number of measures of match constraints elements
This attribute is a mask, so you can decide to turn on or off specific optimizations by listing the ones you want. For example: app:layout_optimizationLevel="direct|barrier|chain"
Summary
Nested types |
---|
This class contains the different attributes specifying how a view want to be laid out inside a |
interface ConstraintLayout.ValueModifier This is the interface to a valued modifier. implement this and add it using addValueModifier |
Constants |
|
---|---|
const Int |
DESIGN_INFO_ID = 0 |
const String! |
VERSION = "ConstraintLayout-2.2.0-alpha04" |
Public constructors |
---|
ConstraintLayout(context: Context) |
ConstraintLayout(context: Context, attrs: AttributeSet?) |
ConstraintLayout(context: Context, attrs: AttributeSet?, defStyleAttr: Int) |
@TargetApi(value = Build.VERSION_CODES.LOLLIPOP) |
Public functions |
|
---|---|
Unit |
addValueModifier(modifier: ConstraintLayout.ValueModifier!) a ValueModify to the ConstraintLayout. |
Unit |
fillMetrics(metrics: Metrics!) |
Unit |
|
ConstraintLayout.LayoutParams! |
generateLayoutParams(attrs: AttributeSet!) |
Any! |
getDesignInformation(type: Int, value: Any!) |
Int |
The maximum height of this view. |
Int |
|
Int |
The minimum height of this view. |
Int |
The minimum width of this view. |
Int |
Return the current optimization level for the layout resolution |
String! |
Returns a JSON5 string useful for debugging the constraints actually applied. |
java-static SharedValues! |
Returns the SharedValues instance, creating it if it doesn't exist. |
View! |
getViewById(id: Int) |
ConstraintWidget! |
getViewWidget(view: View!) |
Unit |
loadLayoutDescription(layoutDescription: Int) Load a layout description file from the resources. |
Unit |
onViewAdded(view: View!) |
Unit |
onViewRemoved(view: View!) |
Unit |
|
Unit |
setConstraintSet(set: ConstraintSet!) Sets a ConstraintSet object to manage constraints. |
Unit |
setDesignInformation(type: Int, value1: Any!, value2: Any!) |
Unit |
|
Unit |
setMaxHeight(value: Int) Set the max height for this view |
Unit |
setMaxWidth(value: Int) Set the max width for this view |
Unit |
setMinHeight(value: Int) Set the min height for this view |
Unit |
setMinWidth(value: Int) Set the min width for this view |
Unit |
setOnConstraintsChanged( Notify of constraints changed |
Unit |
setOptimizationLevel(level: Int) Set the optimization for the layout resolution. |
Unit |
Set the State of the ConstraintLayout, causing it to load a particular ConstraintSet. |
Boolean |
Protected functions |
|
---|---|
Unit |
applyConstraintsFromLayoutParams( |
Boolean |
|
Unit |
dispatchDraw(canvas: Canvas!) |
Boolean |
dynamicUpdateConstraints(widthMeasureSpec: Int, heightMeasureSpec: Int) This can be overridden to change the way Modifiers are used. |
ConstraintLayout.LayoutParams! |
|
ViewGroup.LayoutParams! |
|
Boolean |
isRtl() |
Unit |
|
Unit |
|
Unit |
Subclasses can override the handling of layoutDescription |
Unit |
resolveMeasuredDimension( Handles calling setMeasuredDimension() |
Unit |
resolveSystem( Handles measuring a layout |
Unit |
setSelfDimensionBehaviour( |
Protected properties |
|
---|---|
ConstraintLayoutStates! |
|
Boolean |
|
ConstraintWidgetContainer! |
Inherited Constants |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Constants
Public constructors
ConstraintLayout
ConstraintLayout(context: Context, attrs: AttributeSet?, defStyleAttr: Int)
ConstraintLayout
@TargetApi(value = Build.VERSION_CODES.LOLLIPOP)
ConstraintLayout(
context: Context,
attrs: AttributeSet?,
defStyleAttr: Int,
defStyleRes: Int
)
Public functions
addValueModifier
fun addValueModifier(modifier: ConstraintLayout.ValueModifier!): Unit
a ValueModify to the ConstraintLayout. This can be useful to add custom behavour to the ConstraintLayout or address limitation of the capabilities of Constraint Layout
Parameters | |
---|---|
modifier: ConstraintLayout.ValueModifier! |
fillMetrics
fun fillMetrics(metrics: Metrics!): Unit
Parameters | |
---|---|
metrics: Metrics! |
Fills metrics object |
generateLayoutParams
fun generateLayoutParams(attrs: AttributeSet!): ConstraintLayout.LayoutParams!
getMaxHeight
fun getMaxHeight(): Int
The maximum height of this view.
Returns | |
---|---|
Int |
The maximum height of this view |
See also | |
---|---|
setMaxHeight |
getMinHeight
fun getMinHeight(): Int
The minimum height of this view.
Returns | |
---|---|
Int |
The minimum height of this view |
See also | |
---|---|
setMinHeight |
getMinWidth
fun getMinWidth(): Int
The minimum width of this view.
Returns | |
---|---|
Int |
The minimum width of this view |
See also | |
---|---|
setMinWidth |
getOptimizationLevel
fun getOptimizationLevel(): Int
Return the current optimization level for the layout resolution
Returns | |
---|---|
Int |
the current level |
getSceneString
fun getSceneString(): String!
Returns a JSON5 string useful for debugging the constraints actually applied. In situations where a complex set of code dynamically constructs constraints it is useful to be able to query the layout for what are the constraints.
Returns | |
---|---|
String! |
json5 string representing the constraint in effect now. |
getSharedValues
java-static fun getSharedValues(): SharedValues!
Returns the SharedValues instance, creating it if it doesn't exist.
Returns | |
---|---|
SharedValues! |
the SharedValues instance |
getViewById
fun getViewById(id: Int): View!
Parameters | |
---|---|
id: Int |
the view id |
Returns | |
---|---|
View! |
the child view, can return null Return a direct child view by its id if it exists |
getViewWidget
fun getViewWidget(view: View!): ConstraintWidget!
Parameters | |
---|---|
view: View! |
Returns | |
---|---|
ConstraintWidget! |
loadLayoutDescription
fun loadLayoutDescription(layoutDescription: Int): Unit
Load a layout description file from the resources.
Parameters | |
---|---|
layoutDescription: Int |
The resource id, or 0 to reset the layout description. |
setConstraintSet
fun setConstraintSet(set: ConstraintSet!): Unit
Sets a ConstraintSet object to manage constraints. The ConstraintSet overrides LayoutParams of child views.
Parameters | |
---|---|
set: ConstraintSet! |
Layout children using ConstraintSet |
setDesignInformation
fun setDesignInformation(type: Int, value1: Any!, value2: Any!): Unit
setMaxHeight
fun setMaxHeight(value: Int): Unit
Set the max height for this view
Parameters | |
---|---|
value: Int |
setMaxWidth
fun setMaxWidth(value: Int): Unit
Set the max width for this view
Parameters | |
---|---|
value: Int |
setMinHeight
fun setMinHeight(value: Int): Unit
Set the min height for this view
Parameters | |
---|---|
value: Int |
setMinWidth
fun setMinWidth(value: Int): Unit
Set the min width for this view
Parameters | |
---|---|
value: Int |
setOnConstraintsChanged
fun setOnConstraintsChanged(
constraintsChangedListener: ConstraintsChangedListener!
): Unit
Notify of constraints changed
Parameters | |
---|---|
constraintsChangedListener: ConstraintsChangedListener! |
setOptimizationLevel
fun setOptimizationLevel(level: Int): Unit
Set the optimization for the layout resolution.
The optimization can be any of the following:
- Optimizer.OPTIMIZATION_NONE
- Optimizer.OPTIMIZATION_STANDARD
- a mask composed of specific optimizations
- Optimizer.OPTIMIZATION_DIRECT
- Optimizer.OPTIMIZATION_BARRIER
- Optimizer.OPTIMIZATION_CHAIN (experimental)
- Optimizer.OPTIMIZATION_DIMENSIONS (experimental)
Parameters | |
---|---|
level: Int |
optimization level |
Protected functions
applyConstraintsFromLayoutParams
protected fun applyConstraintsFromLayoutParams(
isInEditMode: Boolean,
child: View!,
widget: ConstraintWidget!,
layoutParams: ConstraintLayout.LayoutParams!,
idToWidget: SparseArray<ConstraintWidget!>!
): Unit
dynamicUpdateConstraints
protected fun dynamicUpdateConstraints(widthMeasureSpec: Int, heightMeasureSpec: Int): Boolean
This can be overridden to change the way Modifiers are used.
Returns | |
---|---|
Boolean |
generateDefaultLayoutParams
protected fun generateDefaultLayoutParams(): ConstraintLayout.LayoutParams!
generateLayoutParams
protected fun generateLayoutParams(p: ViewGroup.LayoutParams!): ViewGroup.LayoutParams!
onLayout
protected fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int): Unit
parseLayoutDescription
protected fun parseLayoutDescription(id: Int): Unit
Subclasses can override the handling of layoutDescription
Parameters | |
---|---|
id: Int |
resolveMeasuredDimension
protected fun resolveMeasuredDimension(
widthMeasureSpec: Int,
heightMeasureSpec: Int,
measuredWidth: Int,
measuredHeight: Int,
isWidthMeasuredTooSmall: Boolean,
isHeightMeasuredTooSmall: Boolean
): Unit
Handles calling setMeasuredDimension()
resolveSystem
protected fun resolveSystem(
layout: ConstraintWidgetContainer!,
optimizationLevel: Int,
widthMeasureSpec: Int,
heightMeasureSpec: Int
): Unit
Handles measuring a layout
Parameters | |
---|---|
layout: ConstraintWidgetContainer! |
|
optimizationLevel: Int |
|
widthMeasureSpec: Int |
|
heightMeasureSpec: Int |
setSelfDimensionBehaviour
protected fun setSelfDimensionBehaviour(
layout: ConstraintWidgetContainer!,
widthMode: Int,
widthSize: Int,
heightMode: Int,
heightSize: Int
): Unit