Changes

Jump to: navigation, search

Kotlin - A Guide to using ConstraintLayout in Android Studio

1,399 bytes added, 19:35, 24 November 2017
no edit summary
[[File:as3.0_layout_design_and_blueprint_constraints.png]]
[[File:as3.0_layout_design_constraints.png]]
[[File:as3.0_layout_show_constraints.png]]
[[File:as3.0_layout_autoconnect_button.png]]
[[File:as3.0_layout_inference_button.png]]
[[File:as3.0_layout_constraint_elements.png]]
[[File:as3.0_layout_drag_constraint.png]]
[[File:as3.0_layout_baseline_constraint.png]]
[[File:as3.0_constraint_inspector.png]]
[[File:as3.0_layout_delete_connection.png]]
[[File:as3.0_layout_delete_all_connections.png]]
[[File:as3.0_layout_delete_all_connections_in_layout.png]]
[[File:as3.0_layout_bias_sliders.png]]
[[File:as3.0_layout_centered_button.png]]
[[File:as3.0_layout_100_percent_bias.png]]
ConstraintLayout margins can appear at the end of constraint connections and represent a fixed gap into which the widget cannot be moved even when adjusting bias or in response to layout changes elsewhere in the activity. In Figure 25-16, the right-hand constraint now includes a 50dp margin into which the widget cannot be moved even though the bias is still set at 100%.
[[File:as3.0_layout_margin_constraint.png]]
Existing margin values on a widget can be modified from within the Inspector. As can be seen in Figure 25-17, a dropdown menu is being used to change the right-hand margin on the currently selected widget to 16dp. Alternatively, clicking on the current value also allows a number to be typed into the field.
[[File:as3.0_layout_inspector_set_margin.png]]
The default margin for new constraints can be changed at any time using the option in the toolbar highlighted in Figure 25-18:
[[File:as3.0_layout_set_all_margins.png]]
[[File:as3.0_layout_opposing_constraint.png]]
[[File:as3.0_layout_opposing_constraint_landscape.png]]
[[File:as3.0_layout_opposing_constraint_bias.png]]
[[File:as3.0_layout_opposing_constraint_landscape_bias.png]]
[[File:as3.0_layout_widget_dims.png]]
In the above figure, both the horizontal and vertical dimensions are set to wrap content mode (indicated by the inward pointing chevrons). The inspector uses the following visual indicators to represent the three dimension modes:
[[File:as3.0_layout_widget_dims_fixed.png]] - Fixed Size <br><br>[[File:as3.0_layout_widget_dims_match.png]] - Match Constraint <br><br>[[File:as3.0_layout_widget_dims_wrap.png]] - Wrap Content <br><br>
[[File:as3.0_constraint_view_with_match_constraints.png]]
[[File:as3.0_layout_expand.png]]
[[File:as3.0_layout_add_guidelines.png]]
[[File:as3.0_layout_guideline.png]]
[[File:as3.0_layout_guideline_percent.png]]
[[File:as3.0_adding_barrier.png]]
[[File:as3.0_barrier_in_component_tree.png]]
[[File:as3.0_barrier_in_component_tree_with_widgets.png]]
[[File:as3.0_barrier_direction_property.png]]
[[File:as3.0_barrier_example.png]]
[[File:as3.0_layout_align_menu.png]]
[[File:as3.0_layout_toolbar_align_menu.png]]
[[File:as3.0_layout_convert_to_constraint_layout.png]]

Navigation menu