Fragments 2019

State of mobile engineering, state of platforms, hardware and user research.

Responsive UI with Constraint and Motion Layout

Submitted by Imran Mohammed (@imran0101) on Mar 4, 2019

Section: Full talk Technical level: Advanced Status: Confirmed & scheduled

Abstract

ConstraintLayout is new way to build responsive Android UI. ConstraintLayout(CL) has been in beta development for over 3 years, stable version released just over a year ago. ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy.

In this talk, I will walk you through the benefits of ConstraintLayout. Animation using CL. We will also look at the Layout Editor for CL.

Outline

What is this talk about?
ConstraintLayout implementation is similar to RelativeLayout, a more powerful and flat view implementation. ConstraintLayout children position based on the constraints of a child to its parent layout or another child, make the view hierarchy flat.

We will talk about how constraint layouts reduces the time taken to create a complex layout, reduce developer time and add easy animations. We will also briefly look into MotionLayout.

Who should attend this talk?
Android developers who would like to build complex layouts faster. Responsive UI with more control over scene changes.

This talk will also be helpful for iOS developers who have experience using AutoLayout and want to start Android development.

Requirements

  • Basic understanding of XML layouts.
  • Understand Android View hierarchy.
  • Basic Animation using TransitionManager.
  • Basic knowledge of Kotlin.

Speaker bio

Imran is a Mobile Engineer at Uncommon. He has worked on Android, iOS and React Native.
He enjoys building performant UI layouts and animations. “Clean code is non-existent. Code evolves as the project grows.”

If you do spot him ask him about animations on Android and iOS.

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('You need to be a participant to comment.') }}

{{ formTitle }}
{{ gettext('Post a comment...') }}
{{ gettext('New comment') }}

{{ errorMsg }}