Develop Reference

how can I make my app not break on certain screen sizes due to scaling

I'm building an app and I can't figure out how can I make my app not break on certain screen sizes.
I want the app to have a standard look on all devices.
how it should look here
how it looks on the pixel 3
how it looks on a tablet
<ImageView
android:scaleType="fitXY"
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/hub_background" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="19dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="19dp" />
<ImageView
android:translationZ="3dp"
android:id="#+id/background2"
android:layout_width="409dp"
android:layout_height="1200dp"
android:adjustViewBounds="true"
android:maxWidth="302dp"
android:maxHeight="722dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/start_anim_background_color"
tools:visibility="gone" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/monthProgress"
android:layout_width="327dp"
android:layout_height="159dp"
android:layout_marginTop="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.494"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView"
app:layout_constraintVertical_bias="0.0"
tools:ignore="=">
<TextView
android:id="#+id/topPanel"
android:layout_width="320dp"
android:layout_height="70dp"
android:layout_marginBottom="35dp"
android:background="#drawable/btn_shape_capsule_empty"
android:gravity="center_vertical"
android:textAlignment="center"
android:textSize="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/time"
app:layout_constraintStart_toStartOf="#+id/money"
tools:ignore="RtlCompat" />
<TextView
android:id="#+id/money"
android:layout_width="160dp"
android:layout_height="70dp"
android:layout_marginBottom="35dp"
android:gravity="center_vertical"
android:text="1500$"
android:textAlignment="center"
android:textSize="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="RtlCompat" />
<TextView
android:id="#+id/time"
android:layout_width="160dp"
android:layout_height="70dp"
android:layout_marginBottom="35dp"
android:gravity="center_vertical"
android:text="150hrs"
android:textAlignment="center"
android:textSize="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:ignore="RtlCompat" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:text="Your month's progress:"
android:textColor="#color/white"
android:textSize="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/line"
android:layout_width="1dp"
android:layout_height="30dp"
android:background="#757575"
app:layout_constraintBottom_toBottomOf="#+id/topPanel"
app:layout_constraintEnd_toEndOf="#+id/topPanel"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/topPanel" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout1"
android:layout_width="150dp"
android:layout_height="280dp"
android:layout_marginStart="47dp"
android:layout_marginLeft="47dp"
android:layout_marginBottom="250dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent">
<android.widget.Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/btn_shape_lightedge4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="200dp"
android:backgroundTint="#color/white"
android:gravity="center"
android:text="start a new\nshift"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="#+id/button1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout2"
android:layout_width="150dp"
android:layout_height="170dp"
android:layout_marginEnd="47dp"
android:layout_marginRight="47dp"
android:layout_marginBottom="360dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<android.widget.Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/btn_shape_lightedge2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="90dp"
android:backgroundTint="#color/white"
android:gravity="center"
android:text="see all of\nyour shifts"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout3"
android:layout_width="150dp"
android:layout_height="280dp"
android:layout_marginEnd="47dp"
android:layout_marginRight="47dp"
android:layout_marginBottom="70dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<android.widget.Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/btn_shape_lightedge3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="200dp"
android:backgroundTint="#color/white"
android:gravity="center"
android:text="settings"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout4"
android:layout_width="150dp"
android:layout_height="170dp"
android:layout_marginStart="47dp"
android:layout_marginLeft="47dp"
android:layout_marginBottom="70dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent">
<android.widget.Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/btn_shape_lightedge1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="90dp"
android:backgroundTint="#color/white"
android:gravity="center"
android:text="about"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="#+id/button4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I'm using up as my measurement unit for everything.

It's impossible for it to look the same on all different screens as they have different ratios. But what is possible is to make it look very similar on different screens with the same ratio.
Generally the best is going with dp since the user can then rescale your app via Android settings if he/she has sight difficulties (to e.g. make it bigger). But if you prefer your app to always use the same design ratios you can for example use GridLayouts and weights. You can then specify how much percentage of your screen should be covered by a view. Additionally, you could of course also always go by manually implementing stuff like
desiredRatio = 0.4f;
viewHeight = desiredRatio * getMeasuredHeight();
and then applying the height to your view by changing the LayoutParams or implementing your own ViewGroup and do the whole onLayout stuff yourself (sure possible and necessary in rare occasions)
Generally, I'd try to get it done with GridLayouts or LinearLayouts using weights and in rare cases implement your own ViewGroup.
So in your case that could be something like
<androidx.gridlayout.widget.GridLayout
android:layout_width="match_parent"
android:layout_height=match_parent"
app:orientation="horizontal"
app:columnCount="2">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/monthProgress"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout_1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout_3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout_4"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
</androidx.gridlayout.widget.GridLayout>
Sorry for the missing indentations, the StackOverFlow code "editor" is just horrible.
Anyhow, that's how you'll get some parts done. Make sure to set the height in your ConstraintLayouts to "0dp", likewise with the width. Otherwise, GridLayout won't be able to do what you want.
Additionally, you used android:scaleType="fitXY" in your ImageView. That will look weird. Instead, I'd recommend centerCrop instead.

How to align TextView in two lines between images in ConstraintLayout

I'm doing some design in constraintlayout that is give me a pain. I have an image at the left, two text in a vertical orientation that is align at the end of this image and I have other constraints at right with an image and text.
If I type a long text in the two text that i have in a vertical orientation the text cover the constraint that I have at right of my view. That I want to do is if this text is long can't cover this constraint, have to expand to other line.
This is my code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_slider"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="8dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/ic_error" />
<TextView
android:id="#+id/txt_title_animation_native_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:textColor="#color/app_primary_medium"
android:textSize="15sp"
app:layout_constraintStart_toEndOf="#+id/image_slider"
app:layout_constraintTop_toTopOf="#+id/image_slider"
tools:text="Title" />
<TextView
android:id="#+id/txt_subtitle_animation_native_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:maxLines="2"
android:textColor="#color/app_grey_medium"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/txt_title_animation_native_cart"
app:layout_constraintTop_toBottomOf="#+id/txt_title_animation_native_cart"
tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraint_undo_button"
android:layout_width="31dp"
android:layout_height="match_parent"
android:layout_marginEnd="24dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_undo"
android:layout_width="14dp"
android:layout_height="16dp"
android:src="#drawable/icon_loop"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/icon_loop"
tools:visibility="visible" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:gravity="center"
android:text="Ree"
android:textColor="#color/app_primary_medium"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_undo" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

I recommend you use only one parent view and read about Guideline view, Constraints Chains and Barriers. So a possible solution could be the next:
And the 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:padding="16dp">
<!-- In the parent constraint group add your custom background -->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_80_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.85" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_slider"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_title_animation_native_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="#id/guideline_80_percent"
app:layout_constraintStart_toEndOf="#id/image_slider"
app:layout_constraintTop_toTopOf="#id/image_slider"
tools:text="Title" />
<TextView
android:id="#+id/txt_subtitle_animation_native_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:maxLines="2"
app:layout_constraintBottom_toBottomOf="#id/image_slider"
app:layout_constraintEnd_toEndOf="#id/txt_title_animation_native_cart"
app:layout_constraintStart_toStartOf="#id/txt_title_animation_native_cart"
app:layout_constraintTop_toBottomOf="#id/txt_title_animation_native_cart"
tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t adfadf adflkjadfkj adlkjadflk" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_undo"
android:layout_width="16dp"
android:layout_height="16dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toTopOf="#id/text_undo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/guideline_80_percent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/text_undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/image_undo"
app:layout_constraintStart_toStartOf="#id/image_undo"
app:layout_constraintTop_toBottomOf="#id/image_undo"
tools:text="Ree" />
</androidx.constraintlayout.widget.ConstraintLayout>

First, you don't need two nested constraint layouts, one is enough.
Then just set the text with endToStartoOf image_undo and set the width to 0dp instead of wrap_content

Just do this:
<TextView
android:id="#+id/txt_subtitle_animation_native_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginEnd="4dp"
android:maxLines="2"
android:textColor="#color/app_grey_medium"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/txt_title_animation_native_cart"
app:layout_constraintTop_toBottomOf="#+id/txt_title_animation_native_cart"
app:layout_constraintEnd_toStartOf="#+id/constraint_undo_button"
tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t" />

How to ensure views are well constraint even when they grow in context without pushing other views out of the layout

I am trying to achieve the below in my xml but currently when I my textView does not wrap the text as exepcted but instead pushes the the text down and the imageButton far. I am wondering how can I achieve this having in mind the texts can be bigger and need to wrap and fit in nicely without pushing the button away? below is my code sample
<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">
<ImageView
android:id="#+id/hospitalButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
app:image="#drawable/hospital_btn"
app:layout_constraintEnd_toStartOf="#+id/guidelineCenterButton"
app:layout_constraintHorizontal_bias="0.5"
app:startsChecked="true" />
<View
android:id="#+id/buttonDivider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="32dp"
android:layout_marginTop="42dp"
android:background="#color/white_"
app:layout_constraintBottom_toTopOf="#+id/hospitalGroup"
app:layout_constraintTop_toBottomOf="#id/hospitalButton" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/hospitalGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="#id/buttonDivider">
<TextView
android:id="#+id/idTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:text="#string/id_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/midTextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Get ID" />
<TextView
android:id="#+id/midTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:text="#string/mid_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/submitButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageButton
android:id="#+id/submitButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginEnd="32dp"
android:background="#drawable/submitbackground"
android:src="#drawable/submit_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/animation"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginEnd="16dp"
android:elevation="3dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="#+id/submitButton"
app:layout_constraintEnd_toEndOf="#+id/submitButton"
app:layout_constraintStart_toStartOf="#+id/submitButton"
app:layout_constraintTop_toTopOf="#+id/submitButton"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_rawRes="#raw/spinner" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/submitGroupDivider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="32dp"
android:layout_marginTop="12dp"
android:background="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/hospitalGroup" />
</androidx.constraintlayout.widget.ConstraintLayout>

From your description it's not clear what you wanted to do but here is the solution you can apply to make your view as a picture you uploaded.
Just apply height & width of midTextView to 0dp
Note: don't know what your idTextView will do it's not clear as per your layout structure.
<TextView
android:id="#+id/idTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:text="#string/id_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Get ID" />
<TextView
android:id="#+id/midTextView"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center_vertical"
android:layout_marginEnd="30dp"
android:text="#string/mid_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/submitButton"
app:layout_constraintStart_toEndOf="#id/idTextView"
app:layout_constraintTop_toTopOf="parent"
/>

Constraint Layout to stretch to edge of the screen

here is the image of the pic i want without the space on the rightI have a nested constraint layout.
I am trying to use a drawable as a background for my constraint layout. The only problem is that it does not stretches to the edges of the screen. what I want is to have the drawable on the edge of the screen so that it can be a part of the edge of the screen.
<?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:background="#drawable/img_bg"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginEnd="12dp"
android:translationZ="8dp"
app:layout_constraintBottom_toBottomOf="#+id/innter_constraint"
app:layout_constraintEnd_toEndOf="#id/innter_constraint"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/barrier"
app:srcCompat="#drawable/ic_btn_enter" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="of spa booking"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_termsandconditions">
</TextView>
<TextView
android:id="#+id/tv_termsandconditions"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="102dp"
android:gravity="center"
android:text="#string/terms_and_condititons"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageButton"
app:layout_constraintVertical_bias="0.736" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="innter_constraint"
tools:layout_editor_absoluteY="437dp">
</androidx.constraintlayout.widget.Barrier>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/innter_constraint"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:alpha="0.5"
android:background="#drawable/ic_img_bg"
android:orientation="vertical"
android:padding="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.51"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintLeft_toRightOf="#+id/guideline_vertical"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline_vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.499">
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="(+91)Enter the mobile number"
android:inputType="phone"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/imageView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_gravity="center"
android:src="#drawable/ic_icon_phone"
app:layout_constraintEnd_toStartOf="#+id/editText"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/editText" />
<TextView
android:id="#+id/not_verify_short"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="16dp"
android:text="Hello,"
android:textColor="#color/colorViews"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/editText"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
app:barrierDirection="bottom"
app:constraint_referenced_ids="editText" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
</androidx.constraintlayout.widget.ConstraintLayout>
as you can see I really don't want the space that is out there and need to just stick it to the right edge of the screen. How can I make sure that it is scalable in all the phones. I used padding but it goes off the screen and is not a recommended practice. What constraint should I add to fill my space on the right side of the screen with the drawable background.

Wrap text in ConstraintLayout

I have to make a layout with following image using Constraint Layout (ver 1.1.2)
This is done, but there is an issue. When the value of any of the field is larger then the width available it get something like this:
I want to keep the alignments while warping the value text in consequent lines.
Here is the code for one row:
<android.support.constraint.ConstraintLayout
android:id="#+id/top_application_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintWidth_default="wrap"
android:padding="5dp"
android:background="#drawable/bg_white_header"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_client_container"
>
<TextView
android:id="#+id/top_application_label"
style="?gsTrafficHistoryClientDetailLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:text="#string/top_application"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/top_application"
style="?gsTrafficHistoryClientDetailValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/top_application_label"
app:layout_constraintTop_toTopOf="parent"
/>
</android.support.constraint.ConstraintLayout>
Now I have tried Relative Layout but I want to do it using Constraint Layout. Really appreciate any pointers.

Add app:layout_constrainedWidth="true" attribute to the TextView which is going to expand (id/top_application) to allow for wrap_content and enforce constraints at the same time.

Change Your TextView Width to match_constraint, the problem is wrap_content.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/top_application_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_white_header"
android:padding="5dp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_client_container"
app:layout_constraintWidth_default="wrap">
<TextView
android:id="#+id/top_application_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
style="?gsTrafficHistoryClientDetailValue"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:text="#string/top_application"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/top_application"
android:layout_width="0dp"
android:layout_height="wrap_content"
style="?gsTrafficHistoryClientDetailValue"
android:layout_marginBottom="20dp"
android:layout_marginTop="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/top_application_label"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Try using the concepts of chains in the constraint layouts using which I have achieved the layout you wanted as follows
<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="wrap_content">
<TextView
android:id="#+id/tv_left1"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:padding="20dp"
android:text="Most active client"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/tv_right1"
app:layout_constraintEnd_toStartOf="#+id/tv_right1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/tv_right1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/tv_left1"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/tv_left2"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:padding="20dp"
android:text="Most active client"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/tv_right2"
app:layout_constraintEnd_toStartOf="#+id/tv_right2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_left1"
/>
<TextView
android:id="#+id/tv_right2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/tv_left2"
app:layout_constraintTop_toBottomOf="#+id/tv_right1"
/>
<TextView
android:id="#+id/tv_left3"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:padding="20dp"
android:text="Most active client"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/tv_right3"
app:layout_constraintEnd_toStartOf="#+id/tv_right3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_left2"
/>
<TextView
android:id="#+id/tv_right3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/tv_left3"
app:layout_constraintTop_toBottomOf="#+id/tv_right2"
/>
</android.support.constraint.ConstraintLayout>
**Note:**Besides this you can use the concepts of the barrier which you can find here

replace with below code
<android.support.constraint.ConstraintLayout
android:id="#+id/top_application_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintWidth_default="wrap"
android:padding="5dp"
android:background="#drawable/bg_white_header"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_client_container"
>
<TextView
android:id="#+id/top_application_label"
style="?gsTrafficHistoryClientDetailLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:text="#string/top_application"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/top_application"
style="?gsTrafficHistoryClientDetailValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#id/top_application_label"
app:layout_constraintTop_toTopOf="parent"
/>
</android.support.constraint.ConstraintLayout>

Try using constraintWidth_default & constraintWidth_percent like:
<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">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="top_application"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".5" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".5" />
</android.support.constraint.ConstraintLayout>