Norway


Square Island: Constraint Layout: Icon Label Text - iconlabeltext - Square Island: Constraint Layout: Icon Label Text

I am making one of those classic layouts: an with two lines of . I would like to use vector drawable for the icon, and scale it according to the sizes. I want the edge of the icon to line up with the edge of the first line of , and the bottom edge of the icon to line up with the bottom edge of the second line.

How would I do that? With ConstraintLayout!

<ImageView
  :id="@+id/flower_image"
  :_width="0dp"
  android:_height="0dp"
  :layout_constraintTop_toTopOf="@+id/label"
  :layout_constraintBottom_toBottomOf="@+id/text"
  :layout_constraintLeft_toLeftOf="parent"
  :layout_constraintDimensionRatio="1:1"
  :srcCompat="@drawable/ic_flower"/>
<TextView
  android:id="@+id/label"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  :layout_constraintLeft_toRightOf="@+id/image"
  :layout_constraintTop_toTopOf="parent"
  android:text="@string/flower"
  android:textSize="16sp"/>
<TextView
  android:id="@+id/text"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  :layout_constraintTop_toBottomOf="@+id/label"
  :layout_constraintLeft_toLeftOf="@+id/label"
  android:text="@string/jasmine"
  android:textSize="24sp"/>

The width and the height of the ImageView is 0dp. This tells ConstraintLayout to compute them by the constraints. In this case, the height of the ImageView is determined by these constraints:

app:layout_constraintTop_toTopOf="@+id/label"
app:layout_constraintBottom_toBottomOf="@+id/text"

The width is the same as the height.

app:layout_constraintDimensionRatio="1:1"

The rest of the constraints are for positioning.

With that, the image scales up as the text sizes increase. It stays sharp because it is a vector.

Square Island: Constraint Layout: Icon Label Text - iconlabeltext - Square Island: Constraint Layout: Icon Label Text

I tried to make this layout with the Layout Editor, but could not figure out how to create the constraint app:layout_constraintTop_toTopOf="@+id/label" for the ImageView. I was hovering my cursor around the top edge but not sure how to drag it to link the two views. So I added up playing with the editor a bit to deduce the XML attributes, and switched to editing the XML directly. I hope to use the layout editor in my next attempt to use Constraint Layout.

Follow-up Twitter discussion:

Read the whole Twitter thread.

github.com/chiuki/iconlabeltext

Click on either TextView to increase its size. Click on the image to reset.





Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here