Best android open-source packages and libraries.

Android constraint layout cheatsheet

A demo application for Android ConstraintLayout with various usage with sample code.
Updated 4 months ago

CircleCI codebeat badge Beta Badge

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!
google-play-badge

🔖 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).

Browse Layout Variances - Landscape Mode
Show Layout Screen Complete Demo - Moview Details Complete Demo - TED Talk External Learning Resources

Screencast

screencast

Related Packages
Package Tags
Related