Skip to content
A demo application for Android ConstraintLayout with various usage with sample code.
Branch: master
Clone or download
amardeshbd Merge pull request #113 from amardeshbd/support-tech-blog
[UPDATE] Support tech blog items on resources screen
Latest commit 0d8fb4c Jun 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.idea [UPDATE] Added different icon for technical article. Jun 20, 2019
app [UPDATE] App version for next release. Jun 22, 2019
gradle/wrapper [UPDATE] Build tools, Google Play services and firebase. Jun 4, 2019
resources [UPDATE] Readme with resource screen and added some resources. Jun 7, 2019
.gitignore [ADDED] IDE files that are relavant and ignore others. Apr 28, 2019
CONTRIBUTING.md [ADDED] Contribution guideline Apr 6, 2019
LICENSE [ADDED] [#6] Dagger dependency injection support. May 1, 2018
PRIVACY.md [UPDATE] App name May 12, 2018
README.md [UPDATE] Readme with resource screen and added some resources. Jun 7, 2019
build.gradle [FIXED] Gradle warning API 'variant.getExternalNativeBuildTasks()' is… Jun 22, 2019
gradle.properties [UPDATE] [#46] Ran the `Refactor > Migrate to AndroidX` widzard Mar 24, 2019
gradlew
gradlew.bat [ADDED] Sample app using android studio widzard. Apr 29, 2018
settings.gradle [ADDED] Sample app using android studio widzard. Apr 29, 2018

README.md

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/googlesamples/android-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
  • Centering positioning and bias
  • Circular positioning (Added in 1.1)
  • Visibility behavior
  • Dimension constraints
    • Ratio
    • Percent dimension
    • Min and Max
    • MATCH_CONSTRAINT dimensions (Added in 1.1)
    • WRAP_CONTENT : enforcing constraints (Added in 1.1)
    • Widgets dimension constraints
  • Chains
    • Chain Style
    • Weighted chains
    • Margins and chains (Added in 1.1)
  • Virtual Helpers objects 🥇
    • Guideline
    • Barrier
    • Group
  • Optimizer (Added in 1.1)
  • Fully functional demo screens 🥇
    • Movie Details Screen
    • TED Talk Preview 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

You can’t perform that action at this time.