Android studio doesn't draw button correctly

Android studio doesn't draw button correctly - android

In my Android studio project I have a fragment with constraint layout inside. Here is XML.
<android.support.constraint.ConstraintLayout
android:id="#+id/pinLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topLayout">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible">
<TextView
android:id="#+id/numberTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:gravity="top"
android:text="00000000"
android:textColor="#color/appTintColor"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/confirmButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner_shape_tint"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Confirm Pin"
android:textColor="#color/appMainColor"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/pinView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
As you can see the confirm button is centered with constraints in his parent.
But when I am running application in my Xperia z5 compact, a layout inspector shows that button is not centered.
Why does it happen and how to fix that?
Note if I am removing numberTextView with it's parent constarintLayout, the problem disappears.
Note In my code I am programmatically setting a text to numberTextView. In case when I am commenting that code i.e not setting text programmatically, button draws correctly.

app:layout_constraintHorizontal_bias="0.5"
layout_constraintHorizontal_bias this will make a small variation from center. try code given below,
<Button
android:id="#+id/confirmButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner_shape_tint"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Confirm Pin"
android:textColor="#color/appMainColor"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

Remove the below line from your button layout in xml.
app:layout_constraintHorizontal_bias="0.5"
Horizontal Bias:
This allows us to position a view along the horizontal axis using a bias value, this will be relative to it’s constrained position.
For more information about Constraint Layout refer
this article

android:id="#+id/pinLayout" has hight of 250dp that's why button doesn't position at vertically center. try the code given below.
<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.support.constraint.ConstraintLayout
android:id="#+id/pinLayout"
android:layout_width="match_parent"
android:layout_height="250dp">
<android.support.constraint.ConstraintLayout
android:id="#+id/cl_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible">
<TextView
android:id="#+id/numberTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:gravity="top"
android:text="00000000"
android:textColor="#color/appTintColor"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/cl_root"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/pinView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/confirmButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner_shape_tint"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Confirm Pin"
android:textColor="#color/appMainColor"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

try to use RelativeLayout instead of ConstraintLayout by changing all ConstraintLayout to RelativeLayout in your xml
<android.support.constraint.ConstraintLayout >
...
Your content
...
</android.support.constraint.ConstraintLayout>
to
<RelativeLayout >
...
Your content
...
</RelativeLayout>
then you might give set your button to be center in parent
android:layout_centerInParent="true"
for your TextView pinView1, pinView2, pinView3 and pinView4 you have simply put it inside a LinearLayout.

Related

Elevation no showing properly on cardview

I have the below xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data></data>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/mainHolder_CL"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/preview_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
app:srcCompat="#color/mcorner_page_background" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
style="#style/HomeScreenTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="#string/screen_title_corners"
app:addWindowInsetMarginTop="#{true}"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="#+id/cornerPeace"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="30dp"
android:layout_marginTop="35dp"
android:layout_marginEnd="30dp"
android:layout_marginBottom="30dp"
android:background="#android:color/white"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
app:layout_constraintBottom_toTopOf="#+id/otherCorners"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/peaceImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_bottom_nav_home_new" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="header"
android:textColor="#android:color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/peaceImg" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/desc"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:text="description"
app:layout_constraintBottom_toTopOf="#+id/separator"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header" />
<View
android:id="#+id/separator"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginBottom="5dp"
android:alpha="0.1"
android:background="#android:color/black"
app:layout_constraintBottom_toTopOf="#+id/mins"
app:layout_constraintEnd_toEndOf="#+id/desc"
app:layout_constraintStart_toStartOf="#+id/desc" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/mins"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="minutes"
android:textColor="#android:color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/otherCorners"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:layout_marginBottom="20dp"
app:addBottomNavigationHeightMarginBottom="#{true}"
app:addWindowInsetMarginBottom="#{true}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<androidx.cardview.widget.CardView
android:id="#+id/corner1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:cardElevation="10dp"
app:cardCornerRadius="10dp"
app:layout_constraintEnd_toStartOf="#+id/corner2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/challengeImg"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_bottom_nav_home_new" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/challengesTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="corner 1"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/challengeImg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/corner2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:background="#android:color/white"
android:clipToPadding="false"
app:cardElevation="10dp"
app:cardCornerRadius="10dp"
app:layout_constraintEnd_toStartOf="#+id/corner3"
app:layout_constraintStart_toEndOf="#+id/corner1"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/humourImg"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_bottom_nav_home_new" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="corner 2"
android:textSize="13sp"
app:fontFamily="#font/font_regular"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/humourImg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/corner3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:clipToPadding="false"
app:cardElevation="10dp"
app:cardCornerRadius="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/corner2"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/thoughtImg"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_bottom_nav_home_new" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="corner 3"
android:textSize="13sp"
app:fontFamily="#font/font_regular"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/thoughtImg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
This is the output I get
As you see I applied the elevation to corner 1,2 and 3 but it isn't showing properly.
It seems to be getting cut-off. What am I missing here?

I'd debug the "otherCorners" ConstraintLayout.
You seem to have set the margins of that layout in a way to make it equal to the big CardView above it. And since the first and last CardView inside the otherCorners Layout are placed directly against the borders of the parent it prob just cuts off the shadow of the elevation on the sides. Same story, different values, for the bottom.

Recyclerview items overflow from the bottom of the screen in android

I have a xml layout that has a combination of image view, constraint layout and a recycler view. When I scroll the recycler view items, a few of the last items cannot be scrolled to the top fully. These items go beyond the bottom constraint. I have noticed one thing that if my layout consists of only recycler view then this is not a problem. Could this be an issue because my xml layout has an image view, constraint layout as well as a recycler view?
Following is my xml layout, events_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
xmlns:tools="http://schemas.android.com/tools">
<ImageView
android:id="#+id/itemThumbnail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:paddingBottom="16dp"
android:visibility="gone"
android:src="#drawable/social_facebook_teal"
app:layout_constraintDimensionRatio="3:2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/errorMessage"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingTop="16dp"
android:paddingRight="16dp"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/itemThumbnail" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/headerCL"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/itemThumbnail">
<TextView
android:id="#+id/dateHeader"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Date"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guidelineNavHeight1">
</TextView>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineNavHeight1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25" />
<TextView
android:id="#+id/eventHeader"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Event"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#+id/guidelineNavHeight1"
app:layout_constraintRight_toLeftOf="#+id/guidelineNavHeight2">
</TextView>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineNavHeight2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.70" />
<TextView
android:id="#+id/timeHeader"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Time"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#+id/guidelineNavHeight2"
app:layout_constraintRight_toLeftOf="#+id/zoneHeader">
</TextView>
<TextView
android:id="#+id/zoneHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="(CST/CDT)"
android:textSize="12sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#+id/timeHeader"
app:layout_constraintRight_toRightOf="parent">
</TextView>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/swipeRefresh"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/headerCL">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/eventsRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Below is my item layout, event_item.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp">
<TextView
android:id="#+id/date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text=""
android:textSize="12sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guidelineNavHeight1">
</TextView>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineNavHeight1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25" />
<TextView
android:id="#+id/event"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text=""
android:textSize="12sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#+id/guidelineNavHeight1"
app:layout_constraintRight_toLeftOf="#+id/timeHeader">
</TextView>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineNavHeight2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.70" />
<TextView
android:id="#+id/time"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text=""
android:textSize="12sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#+id/guidelineNavHeight2"
app:layout_constraintRight_toRightOf="parent">
</TextView>
</androidx.constraintlayout.widget.ConstraintLayout>

I think your events fragrment constraint layout height should be match_parent

I would like to know if my approach of creating this UI is improper

I would like to create the UI as seen in this picture. My approach involves using multiple card views. I am uncertain as to if this is the right way to go about doing this. This method seems a bit laborious, and repetitive, secondly I am not sure if this will cause any problems in the future such as memory problem etc. For the experienced developers please enlighten me.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Controller.RegisterActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/messageToolBar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/backArrow"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="left"
android:background="#drawable/ic_arrow_back_black_24dp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="15dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:textSize="16sp"
android:text="Profile"
android:textColor="#424242" />
</androidx.appcompat.widget.Toolbar>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/userInfoConstraint"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
app:layout_constraintDimensionRatio="6:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/messageToolBar">
<androidx.cardview.widget.CardView
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_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profileImageView"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginTop="36dp"
app:civ_border_color="#FFFFFF"
app:civ_border_width="2dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/nameTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Name"
android:textColor="#424242"
android:textSize="#dimen/album_title"
app:layout_constraintEnd_toEndOf="#+id/profileImageView"
app:layout_constraintStart_toStartOf="#+id/profileImageView"
app:layout_constraintTop_toBottomOf="#+id/profileImageView" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Yale"
android:textSize="#dimen/songs_count"
app:layout_constraintEnd_toEndOf="#+id/nameTv"
app:layout_constraintStart_toStartOf="#+id/nameTv"
app:layout_constraintTop_toBottomOf="#+id/nameTv" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
app:layout_constraintDimensionRatio="4:1"
app:layout_constraintEnd_toEndOf="#+id/userInfoConstraint"
app:layout_constraintStart_toStartOf="#+id/userInfoConstraint"
app:layout_constraintTop_toBottomOf="#+id/userInfoConstraint">
<androidx.cardview.widget.CardView
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_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Empl ID"
android:textColor="#424242"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.051"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView7"
android:layout_width="64dp"
android:layout_height="16dp"
android:layout_marginTop="10dp"
android:text="2335795"
app:layout_constraintEnd_toEndOf="#+id/textView6"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
app:layout_constraintDimensionRatio="6:4"
app:layout_constraintEnd_toEndOf="#+id/constraintLayout"
app:layout_constraintStart_toStartOf="#+id/constraintLayout"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout">
<androidx.cardview.widget.CardView
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_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Contact"
android:textColor="#424242"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.05"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/emailTv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/textView8"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginEnd="24dp"
app:layout_constraintBottom_toBottomOf="#+id/emailTv"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/emailTv"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/pencil" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="333-333-1121"
app:layout_constraintEnd_toStartOf="#+id/imageView3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/emailTv"
app:layout_constraintTop_toBottomOf="#+id/emailTv" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginEnd="24dp"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView3"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/pencil" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

You can simple set background for your ConstraintLayout so you don't need to create CardView within ConstraintLayout
If you want shadow in you ConstraintLayout use, To show shadow in ConstraintLayout you must add background to it, simply set #FFFFFF and use this
android:elevation="4dp"
Or you can create a custom background to have round corners and custom background colors
Hope this will help

ScrollView inside ConstraintLayout not scrolling entirely to the bottom

I had to introduce a ScrollView in my Dialog layout to display all the layout when the phone is in landscape mode or the app is running on small screens. However, the bottom of the layout is being cut off.
I've tried different things like setting ScrollView's layout_height = "0dp", adding more constraints, replacing the ScrollView with a NestedScrollView and other small things as clipToPadding = false or fillViewPort = true but none of these have worked.
This is my layout currently used in a Dialog I need:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/icon_image_container"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/icon_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/ic_help_outline_white_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ScrollView
android:id="#+id/message_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/icon_image_container">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/help_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/help_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/internal_margin_views"
android:textAlignment="textStart"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/help_title" />
<TextView
android:id="#+id/help_example_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/internal_margin_views"
android:text="#string/help_dialog_example_title"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/help_message" />
<TextView
android:id="#+id/help_example_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/internal_margin_views"
android:textAlignment="textStart"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/help_example_title" />
<Button
android:id="#+id/help_button_ok"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/internal_margin_views"
android:background="#drawable/button_background"
android:text="#string/help_dialog_button_ok"
android:textAlignment="center"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/help_example_message" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
And this is how it's being displayed with the above xml layout. The image is showing the scrollview scrolled to the bottom as far as possible.
I have been stuck on this a lot. Any help would be much appreciated

Change scrollview height to 0dp and constraint it to the bottom of parent it should solve your issue
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/icon_image_container"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/icon_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/ic_help_outline_white_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ScrollView
android:id="#+id/message_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scrollbars="none"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/icon_image_container">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/help_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/help_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/internal_margin_views"
android:textAlignment="textStart"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/help_title" />
<TextView
android:id="#+id/help_example_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/internal_margin_views"
android:text="#string/help_dialog_example_title"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/help_message" />
<TextView
android:id="#+id/help_example_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/internal_margin_views"
android:textAlignment="textStart"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/help_example_title" />
<Button
android:id="#+id/help_button_ok"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/internal_margin_views"
android:background="#drawable/button_background"
android:text="#string/help_dialog_button_ok"
android:textAlignment="center"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/help_example_message" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

I post the answer in case anybody encounter the same issue. I just replaced the root layout from ConstraintLayout to LinearLayout with orientation = "vertical" and the same thing for the layout inside the ScrollView.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/icon_image_container"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/icon_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/ic_help_outline_white_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ScrollView
android:id="#+id/message_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/icon_image_container">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/help_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Headline" />
<TextView
android:id="#+id/help_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/internal_margin_views"
android:textAlignment="textStart"
android:textAppearance="#style/TextAppearance.AppCompat.Medium" />
<TextView
android:id="#+id/help_example_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/internal_margin_views"
android:text="#string/help_dialog_example_title"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Headline" />
<TextView
android:id="#+id/help_example_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/internal_margin_views"
android:textAlignment="textStart"
android:textAppearance="#style/TextAppearance.AppCompat.Medium" />
<Button
android:id="#+id/help_button_ok"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/internal_margin_views"
android:background="#drawable/button_background"
android:text="#string/help_dialog_button_ok"
android:textAlignment="center"
android:textColor="#color/colorPrimary" />
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

Android studio doesn't draw button correctly, shifts down

In my Android studio project I have a fragment with constraint layout inside. Here is XML.
<android.support.constraint.ConstraintLayout
android:id="#+id/pinLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topLayout">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible">
<TextView
android:id="#+id/numberTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:gravity="top"
android:text="00000000"
android:textColor="#color/appTintColor"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/confirmButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner_shape_tint"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Confirm Pin"
android:textColor="#color/appMainColor"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/pinView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
As you can see the confirm button is centered with constraints in his parent.
But when I am running application in my Xperia z5 compact, a layout inspector shows that button is not centered.
Why does it happen and how to fix that?
Note if I am removing numberTextView with it's parent constarintLayout, the problem disappears.
Note In my code I am programmatically setting a text to numberTextView. In case when I am commenting that code i.e not setting text programmatically, button draws correctly.
Here is code part, where I am setting text to NumberTextView
private void performInitialLayout() {
fragmentViewHeight = fragmentView.getHeight();
ViewRelatedUtils.setHeightPercentage(topView, scrollView, 0.3);
ViewRelatedUtils.setHeightPercentage(pinLayout, scrollView, 0.4);
// here I am setting a text.
numberTextView.setText(number);
if (isProcessingPinConfirmation) showProcessing(); else hideProcessing();
wrapperView.requestFocus();
performedInitialLayout = true;
}

Please read my comment on the question, although I have made some changes to your layout, check this out
Change the colors as per your requirement.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearLayout17"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/hint_color">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible">
<TextView
android:id="#+id/numberTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:gravity="top"
android:text="00000000"
android:textColor="#color/txt_color"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/confirmButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_rounded_button"
android:padding="14dp"
android:text="Confirm Pin"
android:textColor="#color/colorPrimary"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/pinView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/txt_color"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/txt_color"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/txt_color"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/txt_color"
android:textSize="36sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.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.

Android studio doesn't draw button correctly - android

Related

Elevation no showing properly on cardview

Recyclerview items overflow from the bottom of the screen in android

I would like to know if my approach of creating this UI is improper

ScrollView inside ConstraintLayout not scrolling entirely to the bottom

Android studio doesn't draw button correctly, shifts down

Categories

Resources