ConstraintLayout Demo

NOTE: See official demo project by Google for complete set of examples.

A demo application for Android ConstraintLayout with various usage with sample code.

Get the beta release with current snapshot!

:bookmark: Official Demo

Google has official demo project that contains a list of layouts that showcases the various features and usage of ConstraintLayout and MotionLayout

See https://github.com/android/views-widgets-samples/tree/master/ConstraintLayoutExamples

Proposed App Features

• Have a grid containing different feature set of ConstraintLayout
• For each feature, have different examples
• Each example should allow you to share the code snippet or copy to clipboard
• Each example may also contain additional resource links to blog or technical articles
• Example may have set of sliders/toggle to change metrics dynamically to visualize.

See contribution guideline if you want to add demos or fix something.

ConstraintLayout features to cover

TIP: Jump to layout resources directoy to see existing layouts.

• [ ] Relative positioning
  • [ ] Horizontal Axis: left, right, start and end sides
  • [ ] Vertical Axis: top, bottom sides and text baseline
• [ ] Margins
• [x] Centering positioning and bias
• [x] Circular positioning (Added in 1.1)
• [x] Visibility behavior
• [ ] Dimension constraints
  • [x] Ratio
  • [x] Percent dimension
  • [x] Min and Max
  • [ ] MATCH_CONSTRAINT dimensions (Added in 1.1)
  • [ ] WRAP_CONTENT : enforcing constraints (Added in 1.1)
  • [ ] Widgets dimension constraints
• [ ] Chains
  • [x] Chain Style
  • [x] Weighted chains
  • [ ] Margins and chains (Added in 1.1)
• [x] Virtual Helpers objects 🥇
  • [x] Guideline
  • [x] Barrier
  • [x] Group
• [ ] Optimizer (Added in 1.1)
• [x] Fully functional demo screens 🥇
  • [x] Movie Details Screen
  • [x] TED Talk Preview Screen
  • [x] Secure PIN Entry Screen

Objective

These are the my objectives for this demo application.

• To explore all the features of constraint layout
• Learn and use material design component in the sample app
• Learn and use the new architecture components in the sample app
• Learn and use proper architecture for the app - likely MVVM
• Document everything well so that future external contribution is easier

Preview

Here is a snapshot of current progress (This will be updated from time to time).

Screencast