How to put 'spinner' on top of button

How to put 'spinner' on top of button - android

Is there a way I can make my spinner be put on top of my button? (There will be various things on top of my button and when you press the button everything thats on it including the button will disappear)(the button spans the width of the screen) Now it's my spinner under my button. I tried looking at different RelativeLayout settings but it didn't work. Here's the xml code below
<?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:background="#color/colorBackground"
android:minHeight="170dp"
tools:context=".create"
tools:layout_editor_absoluteY="81dp">
<View
android:id="#+id/view"
android:layout_width="320dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="76dp"
android:background="#color/colorText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/spinner"
android:layout_width="296dp"
android:layout_height="49dp"
android:layout_marginEnd="56dp"
android:layout_marginRight="56dp"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteY="95dp" />
<Button
android:id="#+id/button"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_marginBottom="312dp"
android:background="#drawable/button_shadow"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="320dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="28dp"
android:background="#color/colorText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/droid_sans"
android:text="#string/done_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="128dp"
android:layout_marginRight="128dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/droid_sans"
android:text="#string/aisle_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginEnd="44dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="44dp"
android:layout_marginStart="8dp"
android:layout_marginTop="5dp"
android:fontFamily="#font/droid_sans"
android:text="#string/qty_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.973"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="0.7" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/droid_sans"
android:text="#string/item_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
</android.support.constraint.ConstraintLayout>
Edit: I put my button and spinner into a frame layout, and when I tested it on my phone it works. However I tested it on a phone of a bigger size (and a newer android version) and the spinner doesn't show up (probably hidden again?) No idea why it would work on one phone but not the other,
<FrameLayout
android:layout_width="327dp"
android:layout_height="63dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.195"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view">
<Button
android:id="#+id/buttontest"
android:layout_width="313dp"
android:layout_height="63dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="24dp"
android:layout_marginStart="8dp"
android:background="#drawable/button_shadow"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.863"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="102dp" />
<Spinner
android:id="#+id/spinner"
android:layout_width="249dp"
android:layout_height="58dp"
android:layout_marginBottom="344dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.237"
app:layout_constraintStart_toStartOf="parent" />
</FrameLayout>

Try calling
findViewById(R.id.spinner).bringToFront();

You can use 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:background="#color/browser_actions_bg_grey"
android:minHeight="170dp"
tools:layout_editor_absoluteY="81dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="25dp"
>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Done"
android:textSize="20sp"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=" aisle_label"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=" qty_label"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.973"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="0.7" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=" item_label"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
</LinearLayout>
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="10dp"
android:background="#a4a4a4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="49dp"
android:layout_gravity="center"
android:layout_margin="10dp"
/>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="10dp"
android:background="#a4a4a4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

I think I managed to sort something out - I created a 'FrameLayout' and put both my spinner & button in there.
Should do the job, unless I find an issue, in which I'll come back here,this should be solved. :) Thank you

In case anyone was wondering:
I put my 'button' into a FrameLayout then put the elements I want 'ontop' of it, under it (as in the code under it) like so:
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="357dp"
android:layout_height="58dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.195"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintVertical_bias="0.016">
<Button
android:id="#+id/buttontest"
android:layout_width="393dp"
android:layout_height="63dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="24dp"
android:layout_marginStart="8dp"
android:background="#drawable/button_shadow"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.863"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="102dp" />
</FrameLayout>
<EditText
android:id="#+id/editText"
android:layout_width="44dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="184dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="184dp"
android:layout_marginStart="8dp"
android:ems="10"
android:hint="qty"
android:inputType="number"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/spinner"
app:layout_constraintTop_toTopOf="#+id/frameLayout"
app:layout_constraintVertical_bias="1.0" />
<Spinner
android:id="#+id/spinner"
android:layout_width="85dp"
android:layout_height="45dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.06"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/editText" />

Related

How to make a fragment fit in a FrameLayout in all screen sizes?

I am developing an app where I want to show few fragments in a container(Framelayout) one after other. I want my fragments to fit in the framelayout without its parts going out of the screen.
I want this:
But Getting this:
Here is my code snippet:
<android.support.constraint.ConstraintLayout
android:id="#+id/relativeLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="24dp"
android:background="#drawable/grey_border_circular_rect"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline3"
app:layout_constraintVertical_bias="0.0">
<FrameLayout
android:id="#+id/fragment_holder"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="32dp"
app:layout_constraintBottom_toTopOf="#+id/elipse1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</FrameLayout>
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_end="32dp" />
<ImageView
android:id="#+id/elipse1"
android:layout_width="14dp"
android:layout_height="14dp"
app:layout_constraintEnd_toStartOf="#+id/elipse2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline4"
app:srcCompat="#drawable/ic_elipse_filled"
tools:layout_editor_absoluteY="568dp" />
<ImageView
android:id="#+id/elipse2"
android:layout_width="14dp"
android:layout_height="14dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="#+id/elipse1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/elipse1"
app:srcCompat="#drawable/ic_elipse_blank" />
</android.support.constraint.ConstraintLayout>
I can't share the full xml code as I have some restriction on the code. But the Root layout is also a ConstraintLayout.
fragment.xml
<?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="wrap_content">
<TextView
android:id="#+id/otpVerificationTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="OTP Verification"
android:textColor="#color/blue"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:background="#color/btn_grey"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/otpVerificationTV" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="8dp"
android:text="We sent you a code"
android:textColor="#android:color/black"
android:textSize="26sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/view2" />
<Button
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:background="#color/transparent"
android:text="Resend OTP"
android:textAllCaps="false"
android:textColor="#color/grey_secondary"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="#+id/view3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
<View
android:id="#+id/view3"
android:layout_width="3dp"
android:layout_height="30dp"
android:layout_marginStart="10dp"
android:background="#color/grey_secondary"
app:layout_constraintBottom_toBottomOf="#+id/textView7"
app:layout_constraintEnd_toStartOf="#+id/textView7"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView5" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:textColor="#color/blue"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/textView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/view3"
tools:text="29 sec" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="56dp"
android:text="OTP"
android:textColor="#android:color/black"
android:textSize="26sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView5" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="262dp"
android:layout_height="48dp"
android:layout_marginTop="8dp"
android:background="#color/blue"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="#+id/textView8"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/blue_circular_rect"
android:elevation="#dimen/btn_elevation"
android:text="Next"
android:textAllCaps="false"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/linearLayout"
app:layout_constraintTop_toBottomOf="#+id/linearLayout" />
</android.support.constraint.ConstraintLayout>
So is there any possible way that I can make the fragment fit on any screen size and all of it is visible inside the framelayout.

Below code will help with your fragment.xml file.
You didn't provided more values files means color code, string file and other. So below are some changes from your file like drawable and value related data.
Fill free to put comment if you have any question related to below views. If below code work for you then please approve this answer.
<?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/otpVerificationTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="OTP Verification"
android:textColor="#android:color/holo_blue_light"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:background="#color/colorGrey"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/otpVerificationTV" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="We sent you a code"
android:textColor="#android:color/black"
android:textSize="26sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#id/group2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/group2" />
<android.support.constraint.Group
android:id="#+id/group2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:constraint_referenced_ids="textView6"
app:layout_constraintBottom_toTopOf="#id/group"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/view2" />
<android.support.constraint.Group
android:id="#+id/group"
android:layout_width="match_parent"
android:layout_height="0dp"
app:constraint_referenced_ids="view3,textView7,textView5"
app:layout_constraintBottom_toTopOf="#id/group1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/group2" />
<android.support.constraint.Group
android:id="#+id/group1"
android:layout_width="match_parent"
android:layout_height="0dp"
app:constraint_referenced_ids="linearLayout,textView8"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/group" />
<Button
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:text="Resend OTP"
android:textAllCaps="false"
android:textColor="#color/colorGrey"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="#+id/view3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="#id/group"
app:layout_constraintTop_toTopOf="#+id/group" />
<View
android:id="#+id/view3"
android:layout_width="3dp"
android:layout_height="30dp"
android:layout_marginStart="10dp"
android:background="#color/colorGrey"
app:layout_constraintBottom_toBottomOf="#+id/textView7"
app:layout_constraintEnd_toStartOf="#+id/textView7"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView5" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:textColor="#android:color/holo_blue_light"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/textView5"
app:layout_constraintEnd_toEndOf="#id/group"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/view3"
tools:text="29 sec" />
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:text="OTP"
android:textColor="#android:color/black"
android:textSize="26sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/group1" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="262dp"
android:layout_height="48dp"
android:layout_marginTop="8dp"
android:background="#android:color/holo_blue_light"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="#+id/textView8"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#android:color/holo_blue_light"
android:elevation="1dp"
android:text="Next"
android:textAllCaps="false"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/linearLayout"
app:layout_constraintTop_toBottomOf="#+id/group1" />
</android.support.constraint.ConstraintLayout>

UI on design view is not being displayed the same in emulator

I have a design created with ConstraintLayout. On the design pane is it okay, but when I run it on emulator it's not same same. Below is the image of how it looks on design view
And the next one is how it looks on emulator.
A snippet of the manifest
<activity
android:theme="#style/Theme.MaterialComponents.Light.DarkActionBar"
android:name=".WelcomeActivity" />
I have these installed
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'
compileSdkVersion 28
minSdkVersion 16
targetSdkVersion 28
I have extended AppCompatActivity for the WecomeActivity class. I have also tried to invalidate cache and restart but it's not working.
I have no idea what is causing this. Thanks for help.
Here is the the code for that.
activity_welcome.yml
<?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"
tools:context=".WelcomeActivity">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="96dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="#string/safe"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<TextView
android:id="#+id/textView2"
android:layout_width="45dp"
android:layout_height="20dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="20dp"
android:text="#string/cheap"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="411dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:contentDescription="#string/todo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.515"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:srcCompat="#drawable/guliver_go_logo" />
<TextView
android:id="#+id/textView"
android:layout_width="70dp"
android:layout_height="20dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="#string/convinient"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<Button
android:id="#+id/welcome_login_button"
style="#style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="141dp"
android:layout_height="63dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="88dp"
android:layout_weight="1"
android:background="#drawable/button_login_rounded"
android:text="#string/start_phone_auth"
android:textColor="#color/colorPrimaryDark"
android:textSize="20sp"
app:backgroundTint="#color/login_button_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.275"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/welcome_call_button"
style="#style/Widget.MaterialComponents.Button.UnelevatedButton.Icon"
android:layout_width="141dp"
android:layout_height="63dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="9dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="88dp"
android:layout_weight="1"
android:background="#drawable/button_call_rounded"
android:drawablePadding="5dp"
android:paddingLeft="40dp"
android:paddingRight="40dp"
app:backgroundTint="#color/call_button_color"
app:icon="#drawable/ic_call"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.83"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>

Here is the layout as you might missing some constraint of image or assigning wrong image constraint.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:layout_width="0dp"
android:layout_height="400dp" tools:srcCompat="#tools:sample/avatars[1]"
android:id="#+id/imageView" app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="32dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<TextView
android:text="Text One"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView" android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/imageView" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<TextView
android:text="Text Two"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintTop_toBottomOf="#+id/textView" android:layout_marginTop="8dp"/>
<TextView
android:text="TextView"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView3" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<Button
android:text="Phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
app:layout_constraintBaseline_toBaselineOf="#+id/button2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="32dp" app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"/>
<Button
android:text="Call"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="32dp"
app:layout_constraintStart_toEndOf="#+id/button" android:layout_marginTop="32dp"
app:layout_constraintTop_toBottomOf="#+id/textView3" app:layout_constraintHorizontal_bias="0.5"/>
</android.support.constraint.ConstraintLayout>
or With Toolbar Set theme as Theme.MaterialComponents.Light.NoActionBar not as this Theme.MaterialComponents.Light.DarkActionBar. Then apply
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:id="#+id/toolbar" app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/>
<ImageView
android:layout_width="0dp"
android:layout_height="400dp" tools:srcCompat="#tools:sample/avatars[1]"
android:id="#+id/imageView" app:layout_constraintTop_toBottomOf="#id/toolbar"
android:layout_marginTop="32dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<TextView
android:text="Text One"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView" android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/imageView" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<TextView
android:text="Text Two"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintTop_toBottomOf="#+id/textView" android:layout_marginTop="8dp"/>
<TextView
android:text="TextView"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView3" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<Button
android:text="Phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
app:layout_constraintBaseline_toBaselineOf="#+id/button2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="32dp" app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"/>
<Button
android:text="Call"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="32dp"
app:layout_constraintStart_toEndOf="#+id/button" android:layout_marginTop="32dp"
app:layout_constraintTop_toBottomOf="#+id/textView3" app:layout_constraintHorizontal_bias="0.5"/>
</android.support.constraint.ConstraintLayout>
For small screen phone add ScrollView After ConstraintLayout (only if your development has phone screen < 5.0).

Android Studio Nesting ScrollView in a Constraint Layout

I am new to android studio and have been messing around with this layout for the last hour or two. I want the whole screen to be able to scroll.
<?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"
tools:context=".MainActivity">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorPrimaryDark"
android:padding="40dp"
app:layout_constraintBottom_toTopOf="#+id/emailEditText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/welcomeTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="#string/welcome_text"
android:textColor="#fff"
android:textSize="23dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<TextView
android:id="#+id/introTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="#string/intro_text"
android:textColor="#fff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/welcomeTextView" />
<Button
android:id="#+id/learnMoreButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#drawable/pink_button"
android:text="#string/learn_more_button"
android:textColor="#fff"
app:layout_constraintEnd_toStartOf="#+id/signUpButton"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/introTextView" />
<Button
android:id="#+id/signUpButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/navy_button"
android:text="#string/sign_up_button"
android:textColor="#fff"
app:layout_constraintBaseline_toBaselineOf="#+id/learnMoreButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/learnMoreButton" />
<ImageView
android:id="#+id/imageView"
android:layout_width="89dp"
android:layout_height="74dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/logo" />
</android.support.constraint.ConstraintLayout>
<EditText
android:id="#+id/emailEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:drawableLeft="#drawable/ic_person_outline_black_24dp"
android:drawablePadding="10dp"
android:ems="10"
android:hint="#string/enter_email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout" />
<EditText
android:id="#+id/passwordEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:drawableLeft="#drawable/ic_lock_outline_black_24dp"
android:drawablePadding="10dp"
android:ems="10"
android:hint="#string/enter_password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailEditText" />
<Button
android:id="#+id/signInButton"
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#drawable/pink_button"
android:text="#string/sign_in_button"
android:textColor="#fff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passwordEditText" />
<TextView
android:id="#+id/orTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="#string/or"
android:textColor="#color/colorPrimary"
app:layout_constraintBottom_toTopOf="#+id/fbSignInButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/signInButton" />
<Button
android:id="#+id/fbSignInButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="14dp"
android:background="#drawable/pink_button"
android:text="#string/fb_button"
android:textColor="#fff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/orTextView" />
</android.support.constraint.ConstraintLayout>
I have tried putting the scrollview nested inside the main constraint layout and I have also changed the layout to a Scrollview layout and nested a Constraint layout which I also could not get to work. Can someone explain where I am going wrong?

As scrollview is only capable of handling a single view, I would suggest you to wrap everything within a Linear Layout
Use the following code:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
//PUT ALL OF YOUR ELEMENTS IN HERE
//STARTING WITH...
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorPrimaryDark"
android:padding="40dp"
app:layout_constraintBottom_toTopOf="#+id/emailEditText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
..............REMAINING ELEMENTS.............
//AND ENDING WITH
<Button
android:id="#+id/fbSignInButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="14dp"
android:background="#drawable/pink_button"
android:text="#string/fb_button"
android:textColor="#fff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/orTextView" />
</LinearLayout>
</ScrollView>

How to give gravity for child views inside ConstraintLayout

I am working on ConstraintLayout, I can adjust the child views, but I can't align the Textview from left to right. Is there any way to align the Textview from left to right?
Here is the code:
<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:id="#+id/mylotslist_itemview"
android:layout_height="wrap_content">
<TextView
android:id="#+id/serialnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:gravity="left"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:padding="#dimen/padding5"
android:text="1"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/lotnumber"
android:gravity="left"
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:padding="#dimen/padding5"
android:text="50"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.08"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/sellername"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="right"
android:padding="#dimen/padding5"
android:text="ffffffffff"
android:textColor="#color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
/>
<TextView
android:id="#+id/lotstatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:gravity="left"
android:layout_marginTop="8dp"
android:background="#color/lot_statusfalse"
android:paddingBottom="#dimen/padding5"
android:paddingLeft="#dimen/padding5"
android:paddingRight="#dimen/padding5"
android:paddingTop="#dimen/padding5"
android:text="Alloted and Empty"
android:textColor="#color/white"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.66"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/createddate"
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:gravity="left"
android:padding="#dimen/padding5"
android:text="01-FEB-2018 10:30 AM"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
I want my textview to be aligned like this. Is there any possible way to
align like this?

You need to remove app:layout_constraintStart_toStartOf="parent" from all your views except first one.because it's will assign your all views in left.
<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:id="#+id/mylotslist_itemview"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/serialnumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="8dp"
android:text="1"
android:textColor="#color/black"
android:textSize="#dimen/font_normal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.1" />
<TextView
android:id="#+id/lotnumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="8dp"
android:text="50"
android:textColor="#color/black"
android:textSize="#dimen/font_normal"
app:layout_constraintStart_toEndOf="#+id/serialnumber"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.1" />
<TextView
android:id="#+id/sellername"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="end"
android:padding="8dp"
android:text="ffffffffff"
android:textColor="#color/black"
app:layout_constraintStart_toEndOf="#+id/lotnumber"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.2" />
<TextView
android:id="#+id/lotstatus"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:gravity="start"
android:padding="8dp"
android:text="Alloted and Empty"
android:textColor="#color/white"
android:textSize="#dimen/font_normal"
app:layout_constraintStart_toEndOf="#+id/sellername"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.3" />
<TextView
android:id="#+id/createddate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:padding="8dp"
android:text="01-FEB-2018 10:30 AM"
android:textColor="#color/black"
android:textSize="#dimen/font_normal"
app:layout_constraintStart_toEndOf="#+id/lotstatus"
app:layout_constraintWidth_percent="0.3" />
</android.support.constraint.ConstraintLayout>

Remove app:layout_constraintStart_toStartOf="parent" from all views except first one and also add app:layout_constraintStart_toEndOf = "#+id/your_left_views_id" for each view except first one.
like
<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:id="#+id/mylotslist_itemview"
android:layout_height="wrap_content">
<TextView
android:id="#+id/serialnumber"
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:gravity="left"
android:padding="#dimen/padding5"
android:text="1"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/lotnumber"
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:gravity="left"
android:padding="#dimen/padding5"
android:text="50"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.08"
app:layout_constraintStart_toEndOf="#+id/serialnumber"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/sellername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="right"
android:padding="#dimen/padding5"
android:text="ffffffffff"
android:textColor="#color/black"
app:layout_constraintStart_toEndOf="#+id/lotnumber"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/lotstatus"
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:background="#color/colorPrimary"
android:gravity="left"
android:paddingBottom="#dimen/padding5"
android:paddingLeft="#dimen/padding5"
android:paddingRight="#dimen/padding5"
android:paddingTop="#dimen/padding5"
android:text="Alloted and Empty"
android:textColor="#color/white"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.66"
app:layout_constraintStart_toEndOf="#+id/sellername"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/createddate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="left"
android:padding="#dimen/padding5"
android:text="01-FEB-2018 10:30 AM"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/lotstatus"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />

You are giving to all views
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" this is wrong.
In constraint layout you have to give start,end,top,bottom constraint to related view.
try below code:
<?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:id="#+id/mylotslist_itemview"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/serialnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:padding="#dimen/padding5"
android:text="1"
android:textColor="#color/color_btn_blue"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/lotnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:padding="#dimen/padding5"
android:text="50"
android:textColor="#color/color_charcoal"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintStart_toEndOf="#+id/serialnumber"
app:layout_constraintTop_toTopOf="#+id/serialnumber" />
<TextView
android:id="#+id/sellername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:padding="#dimen/padding5"
android:text="ffffffffff"
android:textColor="#color/radius_text_blue"
app:layout_constraintStart_toEndOf="#+id/lotnumber"
app:layout_constraintTop_toTopOf="#+id/serialnumber" />
<TextView
android:id="#+id/lotstatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/blue_text"
android:padding="#dimen/padding5"
android:text="Alloted and Empty"
android:textColor="#color/default_text"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintStart_toEndOf="#+id/sellername"
app:layout_constraintTop_toTopOf="#+id/serialnumber" />
<TextView
android:id="#+id/createddate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:background="#color/file_limit_error"
android:padding="#dimen/padding5"
android:text="01-FEB-2018 10:30 AM"
android:textColor="#color/default_text"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/lotstatus"
app:layout_constraintTop_toTopOf="#+id/serialnumber" />
</android.support.constraint.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Add constraints (top + bottom or start + end)
Set android:layout_width="0dp" (for start-end relations), or
android:layout_height="0dp" (for top-bottom relations)
Now, your child view has constraints to related parent view and its gravity starts from start (or else, what you defined with android:gravity="" tag).

How to remove unnecessary spacing and padding inside the Constraint Layout?

I am having issues in my application where there is unnecessary spacing and padding in my layout. For some reason there as a big gap of space in between each views. Is there another solution to remove or to avoid unnecessary spacing and padding around my layout?
Thanks for your help!
Layout code
<ScrollView 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="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true" >
<android.support.constraint.ConstraintLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title_text"
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:background="#color/colorTeal"
android:ellipsize="none"
android:gravity="start"
android:padding="#dimen/title_padding"
android:textColor="#color/colorWhite"
android:textSize="35sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.571"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/vote_average"
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:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/overview_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.05"
app:layout_constraintStart_toEndOf="#+id/image_thumbnail"
app:layout_constraintTop_toBottomOf="#+id/release_date"
app:layout_constraintVertical_bias="0.19999999" />
<TextView
android:id="#+id/release_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="64dp"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.09"
app:layout_constraintStart_toEndOf="#+id/image_thumbnail"
app:layout_constraintTop_toBottomOf="#+id/title_text" />
<ImageView
android:id="#+id/image_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.02"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title_text" />
<TextView
android:id="#+id/overview_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="12dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.415"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_thumbnail"
app:layout_constraintVertical_bias="0.366" />
<ImageView
android:id="#+id/playbutton"
android:layout_width="39dp"
android:layout_height="44dp"
android:layout_marginBottom="48dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/trailer_title"
app:layout_constraintHorizontal_bias="0.326"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#android:drawable/ic_media_play" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#android:color/darker_gray"
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/overview_text"
app:layout_constraintVertical_bias="0.305" />
<TextView
android:id="#+id/trailer_title"
android:layout_width="93dp"
android:layout_height="21dp"
android:layout_marginBottom="64dp"
android:layout_marginEnd="144dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.25"
app:layout_constraintStart_toEndOf="#+id/imageView2" />
<TextView
android:id="#+id/TrailersName"
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="Trailers"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.055"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
1st layout screenshot
2nd layout screenshot

The space and padding you are seeing are not because of ScrollView, it's because of Viewgroup, try to use LinearLayout with vertical orienation, it should work just fine

Try this,
I had re-write your code and achieve the result as you want.
Please check the following code.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="false">
<RelativeLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#009587"
android:ellipsize="none"
android:gravity="start"
android:padding="20dp"
android:text="Jumaji: Welcome to the Jungle"
android:textColor="#ffffff"
android:textSize="35sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/title_text"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp">
<ImageView
android:id="#+id/ivMoviePoster"
android:layout_width="120dp"
android:layout_height="180dp"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/release_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="64dp"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_toEndOf="#id/ivMoviePoster"
android:text="2017-12-08"
android:textSize="24sp" />
<TextView
android:id="#+id/vote_average"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/release_date"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#id/ivMoviePoster"
android:text="6.4"
android:textSize="18sp" />
<TextView
android:id="#+id/overview_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/ivMoviePoster"
android:layout_marginBottom="8dp"
android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
android:textSize="18sp" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#id/overview_text"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp" />
<TextView
android:id="#+id/trailer_title"
android:layout_width="93dp"
android:layout_height="21dp"
android:layout_below="#id/view"
android:layout_marginBottom="64dp"
android:layout_marginEnd="144dp"
android:layout_marginStart="8dp"
android:text="Trailer title" />
<ImageView
android:id="#+id/playbutton"
android:layout_width="39dp"
android:layout_height="44dp"
android:layout_below="#id/trailer_title"
android:layout_marginBottom="48dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:contentDescription="#null"
app:srcCompat="#android:drawable/ic_media_play" />
<TextView
android:id="#+id/TrailersName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/trailer_title"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#id/playbutton"
android:text="Trailers"
android:textSize="24sp" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
Result,
Hope it would be help you.

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

How to put 'spinner' on top of button - android

Try calling findViewById(R.id.spinner).bringToFront();

I think I managed to sort something out - I created a 'FrameLayout' and put both my spinner & button in there. Should do the job, unless I find an issue, in which I'll come back here,this should be solved. :) Thank you

Related

How to make a fragment fit in a FrameLayout in all screen sizes?

UI on design view is not being displayed the same in emulator

Android Studio Nesting ScrollView in a Constraint Layout

How to give gravity for child views inside ConstraintLayout

How to remove unnecessary spacing and padding inside the Constraint Layout?

Categories

Resources