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

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

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.

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>

How to put 'spinner' on top of button

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" />

ScrollView wont scroll Completely

I'm trying to make a layout divided into two parts in which the lower part should be scrollable.But the scrollview wont scroll completely till the end.
I have tried using NestedScrollView.I have also already tried adding margins and padding to scrollview, constraint layout, last view in the scroll view.Button at the end is not reachable. view abruptly ends in the middle of the textview above that button.
<?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"
tools:context=".mainClusterActivity"
android:id="#+id/const1"
android:layout_height="match_parent"
android:layout_width="match_parent">
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Seen" />
<android.support.v7.widget.AppCompatCheckBox
android:clickable="false"
android:id="#+id/searchedCheckBoxId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tv1" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/searchedCheckBoxId"
android:text="Learnt" />
<android.support.v7.widget.AppCompatCheckBox
android:id="#+id/learnedCheckBoxId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tv2" />
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/learnedCheckBoxId"
android:text="Mark" />
<android.support.v7.widget.AppCompatCheckBox
android:id="#+id/markedCheckBoxId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tv3" />
</RelativeLayout>
<TextView
android:id="#+id/wordTvId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:text="WORD!"
android:textSize="80sp"
app:layout_constraintTop_toBottomOf="#+id/relativeLayout2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>
<TextView
android:id="#+id/tempBarTv"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/black"
app:layout_constraintTop_toBottomOf="#+id/wordTvId"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/tempBarTv"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="#+id/meaningTempId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="Meaning"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent" />
<ListView
android:id="#+id/meaningLvId"
android:layout_width="350dp"
android:layout_height="200dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:background="#drawable/round_rect_shape"
android:scrollbars="vertical"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.488"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/meaningTempId" />
<TextView
android:id="#+id/temp2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Synonyms"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20sp"
app:layout_constraintTop_toBottomOf="#+id/meaningLvId"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.069"
app:layout_constraintStart_toStartOf="parent" />
<ListView
android:id="#+id/SynonymsLvId"
android:layout_width="350dp"
android:layout_height="250dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="48dp"
android:background="#drawable/round_rect_shape"
android:scrollbars="vertical"
android:text="Meaning"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/temp2" />
<TextView
android:id="#+id/temp1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Synonyms with Seached Words"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20sp"
app:layout_constraintTop_toBottomOf="#+id/SynonymsLvId"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.069"
app:layout_constraintStart_toStartOf="parent" />
<ListView
android:id="#+id/SynonymsWithSearchedLvId"
android:layout_width="350dp"
android:layout_height="200dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="48dp"
android:background="#drawable/round_rect_shape"
android:scrollbars="vertical"
android:text="Meaning"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/temp1" />
<TextView
android:id="#+id/notesTempTvId"
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="15dp"
android:text="Notes"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/SynonymsWithSearchedLvId" />
<TextView
android:id="#+id/notesTvId"
android:layout_width="350dp"
android:layout_height="150dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:background="#drawable/round_rect_shape"
android:text="Notes"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="23sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/notesTempTvId" />
<Button
android:id="#+id/addNotesId"
android:layout_width="350dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="15dp"
android:background="#drawable/red_rounded_rect"
android:text="EDIT NOTES!"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/notesTvId"
/>
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
EDIT: I changed the parent constraint layout to relative layout and it works perfectly fine now. Still no idea why it didn't before. Thanks for the response.

<!--I have commented where you have to change and why. do all mention changes. it will work fine-->
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/const1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Seen" />
<android.support.v7.widget.AppCompatCheckBox
android:id="#+id/searchedCheckBoxId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tv1"
android:clickable="false" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/searchedCheckBoxId"
android:text="Learnt" />
<android.support.v7.widget.AppCompatCheckBox
android:id="#+id/learnedCheckBoxId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tv2" />
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/learnedCheckBoxId"
android:text="Mark" />
<android.support.v7.widget.AppCompatCheckBox
android:id="#+id/markedCheckBoxId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tv3" />
</RelativeLayout>
<TextView
android:id="#+id/wordTvId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
android:text="WORD!"
android:textSize="80sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/relativeLayout2" />
<TextView
android:id="#+id/tempBarTv"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/wordTvId" />
<!-- Add app:layout_constraintBottom_toBottomOf="parent"
And also set width and Height to 0dp so scrollView will take rest screen height.-->
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tempBarTv">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="#+id/meaningTempId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="12dp"
android:text="Meaning"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent" />
<ListView
android:id="#+id/meaningLvId"
android:layout_width="350dp"
android:layout_height="200dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:background="#drawable/round_rect_shape"
android:scrollbars="vertical"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.488"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/meaningTempId" />
<!--This textView is having wrong id if you have not defined into resource. There is + sign is missing or define id into resource-->
<TextView
android:id="#+id/temp2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Synonyms"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.069"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/meaningLvId" />
<ListView
android:id="#+id/SynonymsLvId"
android:layout_width="350dp"
android:layout_height="250dp"
android:layout_marginStart="8dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="8dp"
android:background="#drawable/round_rect_shape"
android:scrollbars="vertical"
android:text="Meaning"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/temp2" />
<TextView
android:id="#+id/temp1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Synonyms with Seached Words"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.069"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/SynonymsLvId" />
<ListView
android:id="#+id/SynonymsWithSearchedLvId"
android:layout_width="350dp"
android:layout_height="200dp"
android:layout_marginStart="8dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="8dp"
android:background="#drawable/round_rect_shape"
android:scrollbars="vertical"
android:text="Meaning"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/temp1" />
<TextView
android:id="#+id/notesTempTvId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Notes"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/SynonymsWithSearchedLvId" />
<TextView
android:id="#+id/notesTvId"
android:layout_width="350dp"
android:layout_height="150dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:background="#drawable/round_rect_shape"
android:text="Notes"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="23sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/notesTempTvId" />
<Button
android:id="#+id/addNotesId"
android:layout_width="350dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="8dp"
android:background="#drawable/red_rounded_rect"
android:text="EDIT NOTES!"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/notesTvId" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>

Horizontally center TextView inside ImageView and there is another view next to Imageview

Hi I want to build UI as below
I want to center imageview above textview at the same time there is another view next to imagview dash line I am not able to do this.
Currently I am using RelativeLayout. Any idea how this can be done?
Following is XML
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/ivnumberfill"
android:layout_width="16dp"
android:layout_height="16dp"
app:srcCompat="#drawable/ic_otp_fill" />
<ImageView
android:id="#+id/ivfirstdiv"
android:layout_width="76dp"
android:layout_height="2dp"
android:layout_alignBottom="#id/ivnumberfill"
android:layout_alignTop="#+id/ivnumberfill"
android:layout_toRightOf="#id/ivnumberfill"
android:src="#drawable/stroke_divider" />
<ImageView
android:id="#+id/ivotp"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_toRightOf="#+id/ivfirstdiv"
app:srcCompat="#drawable/otp_process_circle" />
<ImageView
android:id="#+id/ivseconddiv"
android:layout_width="76dp"
android:layout_height="2dp"
android:layout_alignBottom="#id/ivotp"
android:layout_alignTop="#+id/ivotp"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/ivotp"
android:background="#drawable/stroke_divider" />
<ImageView
android:id="#+id/ivprofile"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_toRightOf="#+id/ivseconddiv"
app:srcCompat="#drawable/otp_process_circle" />
<TextView
android:id="#+id/tvnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ivnumberfill"
android:alig="#id/ivnumberfill"
android:text="Mobile Number"
android:textColor="?colorAccent"
android:textSize="11sp" />
</RelativeLayout>

I would recommend using ConstraintLayout, you should really learn it and use it instead of Relative Layout, it's more flexible and less computation consuming. Here is my layout, is it also more flexible - you can just move guideline and everything moves with it.
<?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"
android:layout_centerHorizontal="true"
android:layout_margin="24dp">
<ImageView
android:id="#+id/ivnumberfill"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginEnd="18dp"
android:layout_marginTop="4dp"
app:layout_constraintBottom_toBottomOf="#id/guideline2"
app:layout_constraintEnd_toStartOf="#+id/ivotp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/guideline2"
app:srcCompat="#drawable/plane" />
<ImageView
android:id="#+id/ivotp"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginEnd="18dp"
android:layout_marginTop="4dp"
app:layout_constraintBottom_toBottomOf="#id/guideline2"
app:layout_constraintEnd_toStartOf="#+id/ivprofile"
app:layout_constraintStart_toEndOf="#id/ivnumberfill"
app:layout_constraintTop_toTopOf="#id/guideline2"
app:srcCompat="#drawable/plane" />
<ImageView
android:id="#+id/ivprofile"
android:layout_width="16dp"
android:layout_height="16dp"
app:layout_constraintBottom_toBottomOf="#id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/ivotp"
app:layout_constraintTop_toTopOf="#id/guideline2"
app:srcCompat="#drawable/plane" />
<ImageView
android:id="#+id/ivfirstdiv"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_default="wrap"
android:src="#drawable/line"
app:layout_constraintBottom_toBottomOf="#id/guideline2"
app:layout_constraintTop_toTopOf="#id/guideline2"
app:layout_constraintEnd_toStartOf="#+id/ivotp"
app:layout_constraintStart_toEndOf="#+id/ivnumberfill"
/>
<ImageView
android:id="#+id/ivseconddiv"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_default="wrap"
android:src="#drawable/line"
app:layout_constraintBottom_toBottomOf="#id/guideline2"
app:layout_constraintEnd_toStartOf="#+id/ivprofile"
app:layout_constraintStart_toEndOf="#id/ivotp"
app:layout_constraintTop_toTopOf="#id/guideline2" />
<TextView
android:id="#+id/tvnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Mobile Number"
android:textColor="?colorAccent"
android:textSize="11sp"
app:layout_constraintEnd_toEndOf="#id/ivnumberfill"
app:layout_constraintStart_toStartOf="#id/ivnumberfill"
app:layout_constraintTop_toBottomOf="#id/ivnumberfill" />
<TextView
android:id="#+id/tvotp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="OTP"
android:textColor="?colorAccent"
android:textSize="11sp"
app:layout_constraintEnd_toEndOf="#id/ivotp"
app:layout_constraintStart_toStartOf="#id/ivotp"
app:layout_constraintTop_toBottomOf="#id/ivotp" />
<TextView
android:id="#+id/tvprofile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Profile"
android:textColor="?colorAccent"
android:textSize="11sp"
app:layout_constraintEnd_toEndOf="#id/ivprofile"
app:layout_constraintStart_toStartOf="#id/ivprofile"
app:layout_constraintTop_toBottomOf="#id/ivprofile" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
</android.support.constraint.ConstraintLayout>

Well, you can use Constraint layout for this just simple drag and drop and it will give you your desired layout.
sample 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:layout_width="match_parent"
android:layout_height="120dp"
android:background="#color/thirdColor">
<View
android:layout_width="272dp"
android:layout_height="2dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/firstColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.333" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.123"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.22"
app:srcCompat="#color/secondColor" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.897"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.22"
app:srcCompat="#color/secondColor" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.533"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.22"
app:srcCompat="#color/secondColor" />
<TextView
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="Sample Code"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.535"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.741" />
<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_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Sample Code"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.971"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.729" />
<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_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Sample Code"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.063"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.729" />
</android.support.constraint.ConstraintLayout>
sample output, change icons and background accordingly.

How to apply divider or view in Constraint layout

I want to apply a divider at some places in Constraint layout but when I do it by simple view, the whole layout get shifted to the top and everything gets merged. I want to use only constraints layout for the whole design.
<TextView
android:id="#+id/textView16"
android:layout_width="0dp"
android:layout_height="18dp"
android:text="TextView"
app:layout_constraintLeft_toRightOf="#+id/imageView11"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="1.0"
android:layout_marginTop="13dp"
app:layout_constraintTop_toBottomOf="#+id/textView14"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.0"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<TextView
android:id="#+id/textView20"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView16"
app:layout_constraintLeft_toRightOf="#+id/imageView11"
android:layout_marginLeft="8dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintVertical_bias="0.0"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<View
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#android:color/background_dark"
tools:layout_editor_absoluteY="98dp"
android:id="#+id/view"
tools:layout_editor_absoluteX="0dp" />
<TextView
android:id="#+id/textView21"
android:layout_width="wrap_content"
android:layout_height="17dp"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
android:text="Nivedita Parmar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintVertical_bias="0.035"
android:layout_marginEnd="8dp" />
Please give some idea regarding this.
Thanks in advance..

See my answer below. I am putting view between text view. May help you.
<?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="com.example.shweta.firebasedemo.Main2Activity">
<TextView
android:id="#+id/txt_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2"
app:layout_constraintBottom_toTopOf="#+id/txt_2"
/>
<TextView
android:id="#+id/txt_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView2"
android:layout_marginTop="8dp"
app:layout_constraintRight_toRightOf="#+id/txt_1"
app:layout_constraintLeft_toLeftOf="#+id/txt_1"
app:layout_constraintTop_toBottomOf="#+id/txt_1"
app:layout_constraintBottom_toTopOf="#+id/txt_3"
/>
<TextView
android:id="#+id/txt_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView3"
android:layout_marginTop="8dp"
app:layout_constraintRight_toRightOf="#+id/txt_2"
app:layout_constraintLeft_toLeftOf="#+id/txt_2"
app:layout_constraintTop_toBottomOf="#+id/txt_2"
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintLeft_toLeftOf="parent"
android:id="#+id/imageView2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="20dp"
android:layout_marginLeft="16dp" />
<View
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#android:color/background_dark"
android:id="#+id/view"
android:layout_marginTop="25dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2"
/>
<TextView
android:id="#+id/textView21"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Nivedita Parmar"
android:layout_marginLeft="16dp"
android:layout_marginRight="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/imageView"
app:layout_constraintHorizontal_bias="0.502" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:id="#+id/imageView"
android:layout_marginRight="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/view"
android:layout_marginTop="20dp" />
<TextView
android:id="#+id/txt_home"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="home"
android:layout_marginTop="8dp"
app:layout_constraintRight_toRightOf="#+id/textView21"
app:layout_constraintTop_toBottomOf="#+id/textView21"
app:layout_constraintLeft_toLeftOf="#+id/textView21"
app:layout_constraintBottom_toTopOf="#+id/txt_height"/>
<TextView
android:id="#+id/txt_height"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="home"
android:layout_marginTop="8dp"
app:layout_constraintRight_toRightOf="#+id/txt_home"
app:layout_constraintTop_toBottomOf="#+id/txt_home"
app:layout_constraintLeft_toLeftOf="#+id/txt_home"
app:layout_constraintBottom_toBottomOf="#+id/imageView"/>
</android.support.constraint.ConstraintLayout>

Check out Guideline. I've found it to be useful when working with Constraint Views.
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="100dp"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

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 remove unnecessary spacing and padding inside the Constraint Layout? - android

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

Related

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

How to put 'spinner' on top of button

ScrollView wont scroll Completely

Horizontally center TextView inside ImageView and there is another view next to Imageview

How to apply divider or view in Constraint layout

Categories

Resources