Saturday, February 23, 2019

Sticky label using ConstraintLayout

Purpose of this post is to create layout like


If you notice, label "New" should move along with email title, i.e. if email title is wide it should move up to left of date, if title is small then should stick with title. While moving to end, title should ellipsize. It is shown below.

Here is how we can achieve it.

Constraint right of tvTitle to tvTime text view. It should have right margin of 64dp.


How I have reached 64dp?
"New" label fits properly inside width of 56dp. Add 4dp margin on both sides of new label, it comes to 64 dp.

56 (width)+ 4 (left margin) + 4 (right margin) = 64 dp

Now add tvNew with left constraint to tvTitle and 4dp left margin.

To make tvTitle to have small width when text is small (e.g. "Email Subject"), add app:layout_constraintWidth_default="wrap" in the layout.

Complete layout looks like this.

No comments:

Post a Comment

Securing Microservices with JWT Authentication and Data Encryption

Securing Microservices with JWT Authentication and Data Encryption Securing Microservices with JWT A...