ConstraintLayout center align image and text

Question

how can I align TextView to end of ImageView that TextView would be centered vertically using ConstraintLayout I managed to align it to the end of ImageView but it's not centered vertically because ImageView is a bit bigger than TextView I know how to do it using RelativeLayout, but wanna use best practices and use only ConstraintLayout

Here is an example how it should look (Cloud icon and text Last Backup)

Solution 1

Just use app:layout_constraintTop_toTopOf and app:layout_constraintBottom_toBottomOf together, and it will cause the TextView center vertical align to the ImageView.

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:text="Last Backup"
    app:layout_constraintStart_toEndOf="@+id/imageView"
    app:layout_constraintTop_toTopOf="@+id/imageView"
    app:layout_constraintBottom_toBottomOf="@+id/imageView"
    />

Solution 2

Use drawable left for your TextView like this and change gravity by your root layout as you want

<TextView
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:drawablePadding="15dp"
     android:drawableLeft="@drawable/google"
     android:text="@string/textGoogle" />

Solution 3

You can do like in using ConstraintLayout:

Set Textview top and bottom constrain to ImageView top and bottom. These constraints will set TextView in center of ImageView.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

 <android.support.v7.widget.AppCompatImageView
    android:id="@+id/imageview"
    android:layout_width="50dp"
    android:layout_height="50dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/ic_icon"/>


 <android.support.v7.widget.AppCompatTextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    android:textColor="@android:color/white"
    android:textSize="14sp"
    app:layout_constraintStart_toEndOf="@+id/imageview"
    app:layout_constraintBottom_toBottomOf="@+id/imageview"
    app:layout_constraintTop_toTopOf="@+id/imageview"/>

</android.support.constraint.ConstraintLayout>