Develop Reference

Center horizontally with only one View for constraint

Is there a way, using ConstraintLayout to achieve the below, without setting an invisible View on the right side as well? (The right back arrow should be invisible, I've made it visible to make things easier to understand)
The middle view currently is as follows:
<RelativeLayout
android:id="#+id/cover_wrapper"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="#dimen/_10sdp"
android:onClick="#{(view) -> viewModel.onAutoPlayButtonClick()}"
app:layout_constraintStart_toEndOf="#id/back_button"
app:layout_constraintEnd_toStartOf="#id/dummy_button"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/buttons_wrapper"
app:layout_constraintDimensionRatio="3:4">
Besides simply setting a right margin calculated as button_width + button_margin_left + button_margin_right, is there a trick to not have the right View there and not use margins either?

Yes you can achieve that using ConstraintLayout and Guidelines without setting any invisible View
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:background="#color/grey"
>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tint="#color/green"
android:background="#color/white"
android:padding="10dp"
app:srcCompat="?attr/actionModeCloseDrawable" />
<View
android:layout_width="0dp"
android:layout_height="200dp"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="#id/guideline3"
app:layout_constraintTop_toTopOf="#id/imageView"
/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".3" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".7" />
</androidx.constraintlayout.widget.ConstraintLayout>

Android TextView Left Gravity Problem in an Item XML for RecyclerView

I have an RecyclerViewAdapter and I'm preparing an item xml to display my all items as list.
I've written my xml like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="#+id/constraintLayoutAutoCompleteTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:background="#drawable/bg_film_add_recycler_view">
<TextView
android:id="#+id/textViewFilmName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:textSize="16sp"
android:textColor="#color/figma_text_color_dark"
android:fontFamily="#font/inter500_regular"
app:layout_constraintBottom_toBottomOf="#id/imageViewFilmLogo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/imageViewFilmLogo"
app:layout_constraintTop_toTopOf="#id/imageViewFilmLogo"
tools:text="MyFilm">
</TextView>
<ImageView
android:id="#+id/imageViewFilmLogo"
android:layout_width="80dp"
android:layout_height="30dp"
android:layout_marginStart="30dp"
android:layout_marginVertical="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
</ImageView>
</androidx.constraintlayout.widget.ConstraintLayout>
As result of this, I see my RecyclerView like this (red ones are textviews, green ones are imageviews):
As you see, the textviews looks like centered in specific area. But I want aligned to left like this:
I tried to add android:gravity="left" but it doesn't work, what is the problem? can you help me please?
If possible, can you equilaze the distances between "left edge of layout - imageview" and "imageview - left edge of textview"

Use 0dp for views if you wish to set behavior of view like layout_gravity="start" in constraintLayout
And don't forget add margin start for second element
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="#+id/constraintLayoutAutoCompleteTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:background="#drawable/bg_film_add_recycler_view">
<TextView
android:id="#+id/textViewFilmName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:clickable="false"
android:textSize="16sp"
android:textColor="#color/figma_text_color_dark"
android:fontFamily="#font/inter500_regular"
app:layout_constraintBottom_toBottomOf="#id/imageViewFilmLogo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/imageViewFilmLogo"
app:layout_constraintTop_toTopOf="#id/imageViewFilmLogo"
tools:text="MyFilm">
</TextView>
<ImageView
android:id="#+id/imageViewFilmLogo"
android:layout_width="80dp"
android:layout_height="30dp"
android:layout_marginStart="30dp"
android:layout_marginVertical="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
</ImageView>
</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="#+id/constraintLayoutAutoCompleteTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:background="#drawable/bg_film_add_recycler_view">
<ImageView
android:id="#+id/imageViewFilmLogo"
android:layout_width="80dp"
android:layout_height="30dp"
android:layout_marginStart="30dp"
android:layout_marginVertical="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:ignore="ContentDescription">
</ImageView>
<LinearLayout
android:id="#+id/textViewFilmName_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#id/imageViewFilmLogo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/imageViewFilmLogo"
app:layout_constraintTop_toTopOf="#id/imageViewFilmLogo"
android:paddingStart="30dp">
<TextView
android:id="#+id/textViewFilmName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:textSize="16sp"
android:textColor="#color/figma_text_color_dark"
android:fontFamily="#font/inter500_regular"
tools:text="MyFilm">
</TextView>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

How to center align elements of a layout that is added by using <include/>

I have created a simple layout that contains 2 imageViews.
This is my code.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/root_team1"
android:layout_gravity="center"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/team_one_IV"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:background="#004187"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/team_one_IV2"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginTop="2dp"
android:layout_centerVertical="true"
android:background="#004187"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/team_one_IV" />
</androidx.constraintlayout.widget.ConstraintLayout>
This is what its showing me when i view the layout.
Now i want to include this layout in another layout. This is what i did.
<include
android:id="#+id/firstTeam"
layout="#layout/team_1"
android:layout_width="0dp"
android:layout_height="300dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
and this is what i get after including this layout in another layout.
As you can see the layout is attached to the top, but i want it to be in the center of the container, i have defined container height to 300dp. Do i need to use some other type of layout to achieve this?
EDIT:
Complete layout code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content"
android:gravity="center">
<include
android:id="#+id/team_1"
layout="#layout/team_1"
android:layout_width="0dp"
android:layout_height="300dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

So if the layout you are trying to include is the first layout in this post you have to options:
make those imageViews' width wrap_content
or add
app:layout_constraintWidth_default="wrap"

Constraint Layout Vertical Align Center - Two Child Views

I have two TextViews, one above the other. I would like the vertical middle of the two TextViews to be at the same position as the vertical middle of the ImageView. (This is so, regardless of the amount of text that may go into either TextView, everything will always look neat, vertically.)
I created what I need perfectly using two LinearLayouts (as the space above the title is the same as the space beneath the description):
But Android Studio was unable to covert it to ConstraintLayout successfully, as it just dumped the TextViews at the bottom of the layout. I've played with a lot of attributes, but could not quite arrive at the desired layout.
My question is similar to this one, except that I am trying to center_vertical align a pair of views rather than a single one - which means I have no view edge to align to the centre of the ImageView/container.
Is it possible to achieve what I'm after with ConstraintLayout? (I expect I may be able to do it with a single RelativeLayout, but I would like to use the layout_constraintDimensionRatio attribute on my ImageView which presumably leave me needing to use ConstraintLayout.)
In case it helps, here's the code for my aforementioned LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView"
android:layout_width="#dimen/resources_list_image_size"
android:layout_height="#dimen/resources_list_image_size"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_gravity="center_vertical"
android:contentDescription="#string/resource_image"
android:scaleType="centerCrop"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/textViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/MyTextAppearanceMedium"
tools:text="Title" />
<TextView
android:id="#+id/textViewDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/MyTextAppearanceSmall"
tools:text="Description" />
</LinearLayout>
</LinearLayout>
Update: Solution
Thanks to Ben P's answer, this is my final code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content">
<!-- Add guideline to align imageView to. -->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:contentDescription="#string/resource_image"
android:scaleType="centerCrop"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<TextView
android:id="#+id/textViewTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
app:layout_constraintBottom_toTopOf="#id/textViewDescription"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/imageView"
app:layout_constraintTop_toTopOf="parent"
android:textAppearance="#style/MyTextAppearanceMedium"
app:fontFamily="#font/roboto_slab_regular"
app:layout_constraintVertical_chainStyle="packed"
tools:text="#string/enter_title_colon" />
<TextView
android:id="#+id/textViewDescription"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/imageView"
app:layout_constraintTop_toBottomOf="#id/textViewTitle"
app:fontFamily="#font/roboto_slab_light"
android:textAppearance="#style/MyTextAppearanceSmall"
tools:text="Description" />
</androidx.constraintlayout.widget.ConstraintLayout>

It sounds like you could solve this problem by using a packed chain anchored to the top and bottom of the ImageView. You'll also need to use horizontal bias and a constrained width in order to get wrapping to work correctly.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
<View
android:id="#+id/anchor"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_margin="64dp"
android:background="#caf"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintHorizontal_bias="0"
app:layout_constrainedWidth="true"
app:layout_constraintTop_toTopOf="#id/anchor"
app:layout_constraintStart_toEndOf="#id/anchor"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/two"/>
<TextView
android:id="#+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_bias="0"
app:layout_constrainedWidth="true"
app:layout_constraintTop_toBottomOf="#id/one"
app:layout_constraintStart_toEndOf="#id/anchor"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#id/anchor"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The important attributes here are:
app:layout_constraintVertical_chainStyle="packed" on the first view, which causes the two textviews to stack right on top of each other
app:layout_constraintHorizontal_bias="0" on both views, which means that when the text is not long enough to reach the edge of the screen it will stick to the edge of the anchor view
app:layout_constrainedWidth="true" on both views, which prevents the textview from ever being wider than its constraints, and so the text wraps to a new line

If you want to use ConstraintLayout you could use something like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
<ImageView
android:id="#+id/imageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:contentDescription="description"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/imageView">
<TextView
android:id="#+id/textViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Title" />
<TextView
android:id="#+id/textViewDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Description" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

You can use this layout:
<?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">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/colorAccent"
android:text="I am 5% of the screen height"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="#+id/textView3"
app:layout_constraintHeight_percent="0.05"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.15"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorPrimary"
android:text="I am 15% of the screen height (And the image is 20% screen size in height) "
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.20"
app:layout_constraintDimensionRatio="1:1"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/rose" />
</android.support.constraint.ConstraintLayout>
It will look like this:
One important thing about this layout:
You can control your aspect ratio (for the image) with app:layout_constraintDimensionRatio="x:y" and by passing "1:1" make it square
And by the way - I am using support library for no reason on this example, you can use androidx

How to put text on right centre of image view on constraint layout

Following is a part of my whole xml of constraint Layout.
<ImageView
android:id="#+id/img_apn_not_set"
style="#style/DeviceManagementImageView"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_sos"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view1" />
<TextView
android:id="#+id/tv_apn_not_set"
style="#style/DeviceManagementHeaderText"
android:text="Apn not set"
android:layout_marginTop="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/img_apn_not_set"
app:layout_constraintTop_toTopOf="#+id/img_apn_not_set" />
What I am trying to do is get the text view on exact centre on the right side of image view. In linear layout we achieve it mostly by gravity. Here I am using marginTop to achieve the same . So can I do the same by using any property . Is there a property something like rightOfCentreOf ?
Thanks

pls add one line in your textview
app:layout_constraintBottom_toBottomOf="#+id/img_apn_not_set"
also remove android:layout_marginTop="5dp"
hope it help you

Try this, If you want to move the text to the right or left use Horizontal bias, If you want to move your text to the top or bottom use vertical bias.
<TextView
android:id="#+id/tv_apn_not_set"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="#string/app_name"
app:layout_constraintBottom_toBottomOf="#+id/img_apn_not_set"
app:layout_constraintEnd_toEndOf="#+id/img_apn_not_set"
app:layout_constraintHorizontal_bias="0.63"
app:layout_constraintStart_toStartOf="#+id/img_apn_not_set"
app:layout_constraintTop_toTopOf="#+id/img_apn_not_set" />

Try this
<?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:orientation="vertical">
<ImageView
android:id="#+id/AmountLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBaseline_toBaselineOf="#id/Amount"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/Amount"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:text="NILESH"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#id/AmountLabel"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
RESULT

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img_apn_not_set"
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:id="#+id/tv_apn_not_set"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Apn not set"
app:layout_constraintBottom_toBottomOf="#+id/img_apn_not_set"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/img_apn_not_set"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

You can use app:layout_constraintWidth_default="wrap" and give all 4 side constraint it will be at center
Example:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img_apn_not_set"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_launcher_foreground"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="#+id/tv_apn_not_set"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Apn not set"
app:layout_constraintWidth_default="wrap"
app:layout_constraintTop_toTopOf="#+id/img_apn_not_set"
app:layout_constraintBottom_toBottomOf="#+id/img_apn_not_set"
app:layout_constraintLeft_toRightOf="#+id/img_apn_not_set"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
It will look like this