Using Constraint Layout but still layout gets messed up - android

I'm trying to create a layout for my recycler view. I thought the best would be using a constraint layout for the activity. It renders correctly in the preview window but gets distorted while running the application. I tried using constraint layout before but I got the same problem please help. I posted both the code and image file of the layout
this is after running the application
<?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"
android:background="#drawable/levelback">
<ImageView
android:id="#+id/userface"
android:layout_width="76dp"
android:layout_height="76dp"
android:contentDescription="#string/player2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.004"
app:srcCompat="#drawable/ic_angry" />
<TextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="27dp"
android:layout_marginEnd="212dp"
android:text="#string/player2"
android:textColor="#android:color/background_light"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.014" />
<TextView
android:id="#+id/usedesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="descryption"
android:textColor="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.324"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.06" />
</androidx.constraintlayout.widget.ConstraintLayout>


There you go:
<ImageView
android:id="#+id/userface"
android:layout_width="76dp"
android:layout_height="76dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:contentDescription="#string/player2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_angry" />
<TextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="27dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="player2"
android:textColor="#android:color/background_light"
android:textSize="25sp"
app:layout_constraintStart_toEndOf="#+id/userface"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/usedesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="descryption"
android:textColor="#android:color/darker_gray"
app:layout_constraintStart_toEndOf="#+id/userface"
app:layout_constraintTop_toBottomOf="#id/username" />
Put it inside ConstraintLayout.
Change your Strings and manipulate with margins if you need to.

Related

View overlaps other views because it get drawn last android

I have a ConstraintLayout with 3 views inside.
<?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:id="#+id/localPeerContainer"
android:layout_width="120dp"
android:layout_height="180dp"
android:background="#color/colorPrimary">
<TextView
android:id="#+id/localPeerCircleText"
android:layout_width="65dp"
android:layout_height="65dp"
android:layout_gravity="center"
android:background="#drawable/circle_white"
android:padding="16dp"
android:text="UU"
android:textAlignment="center"
android:textAllCaps="true"
android:textColor="#color/colorWhite"
app:autoSizeMaxTextSize="32sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeStepGranularity="2sp"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="#+id/localPeerSurfaceView"
app:layout_constraintEnd_toEndOf="#+id/localPeerSurfaceView"
app:layout_constraintStart_toStartOf="#+id/localPeerSurfaceView"
app:layout_constraintTop_toTopOf="#+id/localPeerSurfaceView" />
<org.webrtc.SurfaceViewRenderer
android:id="#+id/localPeerSurfaceView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/localPeerHeader" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/localPeerHeader"
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">
<ImageView
android:id="#+id/localPeerSpotLight"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginStart="16dp"
android:background="#drawable/circle_accent"
android:padding="3dp"
android:src="#drawable/ic_spot_light"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tint="#color/colorWhite" />
<ImageView
android:id="#+id/localPeerExitSpotLight"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="end"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:background="#drawable/circle_accent"
android:padding="3dp"
android:src="#drawable/ic_close_24dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
When i run the application, i clearly see the two ImageViews. But after 2-3 seconds that the SurfaceViewRenderer shows my camera preview, the SurfaceViewRenderer is on the Front of every view. How can i prevent that from happening because i want the ImageViews to be on front always!

Use 0dp for the height of SurfaceViewRenderer, currently, its height is set to match_parent. It's taking the whole screen.

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

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

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

Constraint Layout not working properly despite adding constraints

I am using Constraint Layout in a list item and having difficulties in getting it to work properly when the code is compiled, though it is coming up properly in the preview pane. I can use Relative Layout but still want to know why it does not work because I am facing this problematic behaviour in many other cases.
In the image below, this is how the layout is, with all the children
constrained as desired.
For the sake of clarity, below image shows each child's constraints individually
This is how it renders in a recycler view :
List item scrolled down :
Source code for this layout :
<?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"
xmlns:tools="http://schemas.android.com/tools">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_recent_activity">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/civ_user_avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:src="#color/primary"/>
<TextView
android:id="#+id/tv_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/civ_user_avatar" />
<TextView
android:id="#+id/tv_candidate_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
android:textAppearance="#style/TextTitle"
app:layout_constraintBottom_toTopOf="#+id/tv_candidate_email"
app:layout_constraintEnd_toStartOf="#+id/tv_status"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/civ_user_avatar"
app:layout_constraintTop_toTopOf="#+id/civ_user_avatar" />
<TextView
android:id="#+id/tv_candidate_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
android:textAppearance="#style/TextSecondary"
app:layout_constraintEnd_toStartOf="#+id/tv_status"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/tv_candidate_name"
app:layout_constraintTop_toBottomOf="#+id/tv_candidate_name" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Assessment : "
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/tv_candidate_name"
app:layout_constraintTop_toBottomOf="#+id/tv_candidate_email" />
<TextView
android:id="#+id/tv_assessment_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
android:textAppearance="#style/TextTitleBold"
app:layout_constraintBottom_toBottomOf="#+id/textView7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/textView7"
app:layout_constraintTop_toTopOf="#+id/textView7" />
</android.support.constraint.ConstraintLayout>
</layout>
Is there an explanation for this behavior so that I can understand how Constraint layout is actually working?
Update : After removing bottom constraints of Imageview and textView7constraint, the layout looks as below :

For all of your views instead of match_parent
use 0dp in the xml or select fill_parent in the design view

Please try below layout :
<?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"
xmlns:tools="http://schemas.android.com/tools">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/civ_user_avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:src="#color/primary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/civ_user_avatar" />
<TextView
android:id="#+id/tv_candidate_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/tv_status"
app:layout_constraintStart_toEndOf="#+id/civ_user_avatar"
app:layout_constraintTop_toTopOf="#+id/civ_user_avatar" />
<TextView
android:id="#+id/tv_candidate_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
android:textAppearance="#style/TextSecondary"
app:layout_constraintEnd_toStartOf="#+id/tv_status"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/tv_candidate_name"
app:layout_constraintTop_toBottomOf="#+id/tv_candidate_name" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:maxLines="1"
android:text="Assessment : "
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/tv_candidate_name"
app:layout_constraintTop_toBottomOf="#+id/tv_candidate_email" />
<TextView
android:id="#+id/tv_assessment_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/textView7"
app:layout_constraintTop_toTopOf="#+id/textView7" />
</android.support.constraint.ConstraintLayout>
</layout>

Try using Guidelines, for example horizontal, and you can fit all the view more easy there. If you combine it with 2 or 3 verticals (guidelines) it will be more easy to arrive it.

How to make a layout like this image using constraint layout

How to make this type of view in Android Studio using constraint layout

If you're wondering about how to place the menu to fall half on the top view and half on the bottom view, just drag it manually to the position you want to have it, and on the design tab of Android studio select the Magic Wand icon, to "infer constraints". As for the views in the background make sure you add app:layout_constraintBottomToTopOf="yourBottomView" to your view on top and app:layout_constraintTopToBottomOf="yourTopView".
Check the codelabs tutorial on Constraint Layout here for more info, or the documentation on the developers' website here
EDIT:
<?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">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:color/holo_blue_bright" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="450dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#android:color/darker_gray" />
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#+id/textView2"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
This is what I get from the above:

Constraint layout leaving space On top

I have a fragment containing a layout
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp"
tools:context="tech.pkg.name.fragments.ReportFragment">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Spinner
android:id="#+id/typeSlector"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout2" />
<android.support.constraint.ConstraintLayout
android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="#drawable/android_date_bgd"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/fromTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="#string/from"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/fromDateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:drawablePadding="5dp"
android:padding="5dp"
android:text="#string/dd_mm_yy"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/fromTextView"
app:layout_constraintEnd_toStartOf="#+id/view9"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/fromTextView"
app:layout_constraintTop_toTopOf="#+id/fromTextView" />
<View
android:id="#+id/view9"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp"
android:background="#android:color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/toTextView"
app:layout_constraintStart_toEndOf="#+id/fromDateTextView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/toTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/to"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/fromDateTextView"
app:layout_constraintEnd_toStartOf="#+id/toDateTextView"
app:layout_constraintStart_toEndOf="#+id/view9" />
<TextView
android:id="#+id/toDateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:drawablePadding="5dp"
android:padding="5dp"
android:text="#string/dd_mm_yy"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/toTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/toTextView" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
<RadioGroup
android:id="#+id/radioGroup"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:orientation="horizontal"
android:padding="10dp"
android:theme="#style/AppTheme.RadioButton"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView8"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1">
<RadioButton
android:id="#+id/mobileRadioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:layout_weight="0.20"
android:checked="true"
android:text="Mobile"
android:textSize="18sp" />
<RadioButton
android:id="#+id/DTHradioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.14"
android:text="DTH"
android:textSize="18sp" />
</RadioGroup>
<Button
android:id="#+id/button_view_report"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/button_bgd"
android:text="#string/submit"
android:textColor="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view5"
app:layout_constraintVertical_bias="0.0" />
<View
android:id="#+id/view5"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="15dp"
android:background="#color/colorEditTextLine"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioGroup" />
<CheckBox
android:id="#+id/downloadCheck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:theme="#style/AppTheme.Checkbox"
app:layout_constraintHorizontal_bias="0.088"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/download"
app:layout_constraintBaseline_toBaselineOf="#+id/downloadCheck"
app:layout_constraintHorizontal_bias="0.02"
app:layout_constraintLeft_toRightOf="#+id/downloadCheck"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
it is containing in
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
But in the layout editor it is showing
How can I remove the spacing above?

The problem is with your Activity where you had inflated the Fragment. Actually, i tried it on My system and I'm Getting Proper result.
Check Your Activity's Layout where the FrameLayout is Used.
2nd Possbility
Check your May be Your Theme is Changing this . Check all the possibilities

Try the following code Replacing the ConstraintLayout after the Spinner
<android.support.constraint.ConstraintLayout
android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/android_date_bgd"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

What happened to me was smiliar, a space on top that did not show in the editor.
The problem was not in the main layout file I was focusing on, I was displaying some fragments thru a viewpager and the margins on the editor for the pager were 0 so the editor preview did not showed a space on top. However the fragments that were being created/shown had of course a different layout file and in that layout there was a huge space on top because I erroneously thought centering the layout vertically was a good idea for some reason (mainly because I code at night before bed and sometimes im too tired lol). Since the layout height for the viewpager did not match the dimensions of the fragment I had some weird behaviors trying to position the elements of the main layout file.

I was facing a similar problem. By looking at the code snippet in the question I saw the similarity that we both have android:fitsSystemWindows set to True. By removing this android:fitsSystemWindows attribute, my space at the top was removed.

Categories

Resources