How to create responsive GridView to cover whole screen? - android

I have the following layout in an Activity of my Android app:
There are 3 sections and 10 buttons, with icon and text.
As you can see on large screen (most of phones nowadays) I get a lot of blank space at the bottom of the screen.
Do you know how to make the GridView using all the room and filling that white part?
Is it possible to make it responsive so every row and column of the grid could adapt according to screen size?
Here are my XML files:
my_activity.xml (used by my Activity)
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:contentDescription="#string/logo"
android:src="#drawable/company_logo" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="26dp"
android:background="#4d4d4d"
android:textColor="#ffffff"
android:text="#string/menu1"
android:gravity="center"
android:textSize="16sp" />
<GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="5dp"
android:numColumns="3"
android:verticalSpacing="5dp" >
</GridView>
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="26dp"
android:background="#4d4d4d"
android:layout_marginTop="10dp"
android:textColor="#ffffff"
android:text="#string/menu2"
android:gravity="center"
android:textSize="16sp" />
<GridView
android:id="#+id/gridView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="5dp"
android:numColumns="auto_fit"
android:verticalSpacing="5dp" >
</GridView>
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="26dp"
android:background="#4d4d4d"
android:layout_marginTop="10dp"
android:textColor="#ffffff"
android:text="#string/menu3"
android:gravity="center"
android:textSize="16sp" />
<GridView
android:id="#+id/gridView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="5dp"
android:numColumns="2"
android:verticalSpacing="5dp" >
</GridView>
gridview_row.xml (used by a GridViewAdapter)
<ImageView
android:layout_height="32dp"
android:id="#+id/imageView1"
android:layout_width="32dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
</ImageView>
<TextView
android:text="TextView"
android:layout_height="wrap_content"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_below="#+id/imageView1"
android:layout_marginTop="5dp"
android:layout_centerHorizontal="true"
android:textSize="18sp"
android:ellipsize="marquee">
</TextView>
</RelativeLayout>


You better use ConstraintLayout if you want to have a responsive layout for all devices, here is an example of constraint layout with some guidelines:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/frameLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragments.MenusDesign.ExpandableCategoriesMenu.ExpandableCategoriesMenu"
tools:layout_editor_absoluteY="81dp">
<Button
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="logo"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/firstsection"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="first section"
app:layout_constraintBottom_toTopOf="#+id/guideline4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="5"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toStartOf="#+id/guideline6"
app:layout_constraintHorizontal_bias="0.548"
app:layout_constraintStart_toStartOf="#+id/guideline7"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="1"
app:layout_constraintBottom_toTopOf="#+id/guideline5"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="6"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline6"
app:layout_constraintTop_toTopOf="#+id/button3" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="4"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button7" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="3"
app:layout_constraintBottom_toTopOf="#+id/guideline5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline6"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="2"
app:layout_constraintBottom_toTopOf="#+id/guideline5"
app:layout_constraintEnd_toStartOf="#+id/guideline6"
app:layout_constraintStart_toStartOf="#+id/guideline7"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.66" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="second section"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline3" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.35" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="7"
app:layout_constraintBottom_toTopOf="#+id/guideline9"
app:layout_constraintEnd_toStartOf="#+id/guideline8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button9"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="8"
app:layout_constraintBottom_toTopOf="#+id/guideline9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline8"
app:layout_constraintTop_toBottomOf="#+id/button" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.75" />
<Button
android:id="#+id/button10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="third section"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline9" />
<Button
android:id="#+id/button11"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button10" />
<Button
android:id="#+id/button12"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="10"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline8"
app:layout_constraintTop_toBottomOf="#+id/button10" />
Here is how the layout will look on your screen:
Remember that this is just an example and you can change the ratio/height/width of the views as you like.
A small note on guidelines - they are very comfortable to use and in the above example you can see that I gave the guidelines Percents in order to tell them how to be placed (relatively to the screen) on the screen.

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>

Landscape screen for custom android phone

I'm using my Android phone (Xiaomi A2 Lite, 5.84 inches, 1080 x 2280, which is even bigger than Nexus 5) for app development. I have landscape layouts for every layout I have, and I used ConstraintLayouts for all of the elements inside.
However when testing landscape mode on my phone, the texts and images are not displayed as correctly as in Android Studio :(
Are there any solutions for this? Can I add my own resolutions / devices into the device list?
This is how it should look
This is how it displays
Code of the XML landscape file
<?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.ducnguyen.miniexplorer.MainMenu">
<TextView
android:id="#+id/textView11"
android:layout_width="150dp"
android:layout_height="42dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="#string/main_menu_title"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="#string/main_menu_title" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="94dp"
android:layout_height="93dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="gotoReadingScreen"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView4"
app:layout_constraintHorizontal_bias="0.455"
app:layout_constraintStart_toEndOf="#+id/imageView5"
app:layout_constraintTop_toBottomOf="#+id/textView11"
app:layout_constraintVertical_bias="0.092"
app:srcCompat="#drawable/forest" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="97dp"
android:layout_height="90dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="48dp"
android:layout_marginBottom="8dp"
android:onClick="gotoExplorerScreen"
app:layout_constraintBottom_toTopOf="#+id/textView13"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.756"
app:srcCompat="#drawable/car" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="96dp"
android:layout_height="76dp"
android:layout_marginStart="68dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="192dp"
android:onClick="gotoSettingScreen"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView4"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/settings" />
<ImageView
android:id="#+id/imageView10"
android:layout_width="58dp"
android:layout_height="65dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="56dp"
android:layout_marginBottom="56dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.551"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/phonecall" />
<ImageView
android:id="#+id/imageView12"
android:onClick="LogOut"
android:layout_width="47dp"
android:layout_height="101dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="48dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.879"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/logout" />
<TextView
android:id="#+id/textView12"
android:layout_width="152dp"
android:layout_height="27dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="gotoReadingScreen"
android:text="#string/menu_reading"
app:layout_constraintBottom_toTopOf="#+id/imageView10"
app:layout_constraintEnd_toStartOf="#+id/textView13"
app:layout_constraintStart_toEndOf="#+id/textView14"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="184dp"
android:layout_marginEnd="8dp"
android:onClick="gotoExplorerScreen"
android:text="#string/menu_explorer_status"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.891"
app:layout_constraintStart_toEndOf="#+id/textView14"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView14"
android:layout_width="66dp"
android:layout_height="35dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="gotoSettingScreen"
android:text="#string/menu_settings"
android:textSize="15sp"
app:layout_constraintBottom_toTopOf="#+id/imageView11"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.147"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView5"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="#string/menu_live_support"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView10"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="23dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="gotoAboutUsScreen"
android:text="#string/menu_about_us"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/textView15"
app:layout_constraintHorizontal_bias="0.454"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView11"
app:layout_constraintVertical_bias="0.333" />
<TextView
android:id="#+id/textView17"
android:layout_width="69dp"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="gotoLoginScreen"
android:text="#string/logout"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.709"
app:layout_constraintStart_toEndOf="#+id/textView15"
app:layout_constraintTop_toBottomOf="#+id/imageView12"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="#+id/imageView11"
android:layout_width="61dp"
android:layout_height="65dp"
android:layout_marginStart="8dp"
android:layout_marginTop="76dp"
android:layout_marginEnd="8dp"
android:onClick="gotoAboutUsScreen"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.155"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView5"
app:srcCompat="#drawable/question" />
</android.support.constraint.ConstraintLayout>

try this sample layout. It works in Mi A2 device
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity"
android:background="#212c3d">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textView11"
android:layout_width="150dp"
android:layout_height="42dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Main Menu"
android:textSize="30sp"
android:textColor="#FFF"
android:layout_margin="10dp"
android:layout_gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.551"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Sample Screenshot

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>

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.

ConstraintLayout - Even Space Between Buttons

I'm trying to make space between 2 buttons (Send and Clear) to be even.
It's adjusting to borders and vertical guideline which is in the center of the screen.
It seems to be fine on the project but it doesn't look like that in the app itself.
Please check below screenshots.
Project
App
<?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.f3nr1r.testkeyboard.MainActivity"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="0dp">
<Button
android:id="#+id/buttonClear"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:onClick="clearText"
android:text="Clear"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/editText"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline2"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="0"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/button8"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="9"
app:layout_constraintBaseline_toBaselineOf="#+id/button8"
app:layout_constraintLeft_toRightOf="#+id/button8"
android:layout_marginLeft="8dp" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="7"
app:layout_constraintRight_toLeftOf="#+id/button8"
android:layout_marginRight="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button8" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="6"
app:layout_constraintLeft_toRightOf="#+id/button5"
android:layout_marginLeft="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button5" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/button2"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="8"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/button5"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="4"
app:layout_constraintRight_toLeftOf="#+id/button5"
android:layout_marginRight="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button5" />
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:ems="10"
android:hint="Type something here..."
android:inputType="textPersonName"
android:maxLines="1"
android:selectAllOnFocus="false"
android:textAlignment="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="3"
app:layout_constraintLeft_toRightOf="#+id/button2"
android:layout_marginLeft="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button2" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="2"
app:layout_constraintTop_toTopOf="#+id/guideline3"
android:layout_marginTop="60dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="1"
app:layout_constraintRight_toLeftOf="#+id/button2"
android:layout_marginRight="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button2" />
<Button
android:id="#+id/buttonSend"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:onClick="sendText"
android:text="Send"
app:layout_constraintRight_toLeftOf="#+id/guideline2"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/editText"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline2"
android:orientation="vertical"
app:layout_constraintGuide_end="192dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline3"
app:layout_constraintGuide_begin="154dp"
android:orientation="horizontal" />
</android.support.constraint.ConstraintLayout>

I figured it out.
Constraint to the middle guideline should be removed and you can adjust the place with margins.
In XML, below lines should be removed from these buttons ("buttonSend" and "buttonClear").
app:layout_constraintLeft_toLeftOf="#+id/guideline2"
app:layout_constraintRight_toLeftOf="#+id/guideline2"

Categories

Resources