A View in ConstraintLayout not being placed as expected when app is made run in device

overlap views in constraint layout
constraint layout in android
androidx constraintlayout
this view is not constrained
this view is not constrained vertically
constraint layout barrier
add constraint-layout library dependency to the project, fix build path, edit xml, create class)
issue id: missingconstraints

I am using ConstraintLayout to create a view that is to be used in RecyclerView. For some reason, one TextView is taking unexpected place when I am installing an app in the device. Below is the view that is being used in RecyclerView

<?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/textViewDate"
        android:layout_width="70dp"
        android:layout_height="30dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:gravity="center"
        android:text="31-Jan"
        android:textSize="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textViewTime"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="10:10 PM"
        android:textSize="12dp"
        app:layout_constraintEnd_toEndOf="@+id/textViewDate"
        app:layout_constraintStart_toStartOf="@+id/textViewDate"
        app:layout_constraintTop_toBottomOf="@+id/textViewDate" />

    <TextView
        android:id="@+id/textViewReason"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="Reason"
        app:layout_constraintBottom_toBottomOf="@+id/textViewTime"
        app:layout_constraintStart_toEndOf="@+id/textViewDate"
        app:layout_constraintTop_toTopOf="@+id/textViewDate" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="@+id/textViewReason"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/textViewReason" />

</android.support.constraint.ConstraintLayout>

Below is the activity that contains RecyclerView:

<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=".activity.HomeActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:clickable="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/ic_action_name" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerViewTransactionList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

The view in question is textView2. It takes a proper place in the editor (at the end of parent with 8dp padding). But when I install the apk, it shifts in left. Also, I have used below written code to populate RecyclerView:

TransactionRecyclerViewAdapter transactionRecyclerViewAdapter = new TransactionRecyclerViewAdapter(transactionList);
    LinearLayoutManager l = new LinearLayoutManager(getBaseContext());
    recyclerViewTransactionList.setAdapter(transactionRecyclerViewAdapter);
    l.setOrientation(LinearLayoutManager.VERTICAL);
    recyclerViewTransactionList.setLayoutManager(l);

Here are editor and device screenshot:

I think your problem is in here:

app:layout_constraintBottom_toBottomOf="@+id/textViewReason"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/textViewReason"

Where you are trying to use constraintTop and constraintBottom in a same view.

Is it advisable to use LinearLayout inside ConstraintLayout in Android?, will make the orientation horizontal. An id was generated so that other views can be aligned to it. I'm using ConstraintLayout where I will show as below. I would like to hide First (using gone), and which the view I expect to be as below (where ElasticBody will stretch over to use up the original First view space as well.

Try this:

<TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBaseline_toBaselineOf="@id/textViewReason" />

Ideally you just need to constraint the base line if you want it to align with the reason textView

Getting started with ConstraintLayout in Kotlin, . view. ViewGroup which allows you to position and size widgets in a flexible way. ConstraintLayout works good until text starts wrapping into multiple lines. The left view shifts to the left (goes beyond the left border) on the width of the second view. The left view shifts to the left (goes beyond the left border) on the width of the second view.

Change Your last text view of recycler view layout to this. I guess the problem is here.

 <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Or you can try changing the Constraint layout to any other layout Like LinearLayout or Relative. Sometimes constraint layout gives a problem with recycler view.

ConstraintLayout, A great Android app not only needs to have a beautiful UI, but also layout in Android Studio, gives you many ways to place objects. On the next screen of the wizard, Target Android Devices, you'll want to set up your view of Android Studio to make it easier to add and view Build and run your app. Let’s build something that can be done with RelativeLayout or nested LinearLayouts. I wander if it’s easier to do with ConstraintLayout or not. And is it easier to read what you get in result. The end view is going to be this. And I’m not going to use Data Binding, just in case of any performance loses, if there are. LinearLayouts

It looks like the problem is with your RecyclerView constraints. It is not recommended to use match_parent for Views contained in a ConstraintLayout as stated in the documentation. The proper horizontal constraints for the RecyclerView should look like this:

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerViewTransactionList"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

ConstraintLayout Tutorial for Android: Getting Started , Build and run the app. ConstraintLayout is not the best choice for simple layouts, but it's It's close, but not quite where the layout needs to be. If you are using a different device, the views may look different than they do in the screenshots. You'll add all the constraints you need to make it look perfect  However in the constraint layout even if you drag and drop an element in the design view, when you run the app things may be shifted around. This can easily be fixed by manually setting the constraints or, a more risky move being to right click the element in the component tree, selecting the constraint layout sub menu, then clicking ‘infer

Try using the below mentioned code for your RecyclerView:

(as when using ConstraintLayout one must not use "match_parent" instead "match_constraint" is to be used whose value is equivalent to "0dp").

<android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerViewTransactionList"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

And also, try the below mentioned code for your "textView2" in the view that is being used for the RecyclerView purpose:

<TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="TextView"
        app:layout_constraintStart_toEndOf="@id/textViewReason"
        app:layout_constraintTop_toTopOf="@+id/textViewReason"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/textViewReason"
        app:layout_constraintHorizontal_bias="1.0" />

Hope this helps you. Happy coding.

ConstraintLayout Tutorial for Android: Complex Layouts , One XML which looks good on all screen sizes and device types. Open in app For our purpose, all we need to care about is the blueprint and not the and now the layout looks nothing like what our designer would expect. Similarly, we could place all views with respect to one or more sibling view. A similar problem will arise if the app is run on a device with a smaller screen than that used during the design process. When opposing constraints are implemented, the constraint connection is represented by the spring-like jagged line (the spring metaphor is intended to indicate that the position of the widget is not fixed to absolute X and

Getting your constraints right, You will be working primarily with the Layout Editor for this codelab and will not directly be editing the XML or Java code. By the end of this codelab, you'll have  You have to create another view that aligns itself to the views, then manually add some paddings to make it look right. Also, it doesn't support negative margins which can be helpful if you want something like a notification badge on top of another icon. There are ways to work around this, but it's not as easy as setting a negative margin.

Use ConstraintLayout to design your Android views, If your app does not use the UI Toolkit, as is the case for apps that are built Try running your app on a slower device to exacerbate the problem. If you see every item in your RecyclerView being rebound (and thus re-laid out with ConstraintLayout, which can make it easy to reduce structural Views. Click the Run button, and either choose an emulator or connect your Android device, which must be capable of running Android Lollipop (the minimum SDK supported is 22). The constraint-layout screen should appear: To use ConstraintLayout, the appropriate support library must be included in the build.gradle (Module: app) file in your

Slow rendering, App icons should not be placed inside a rounded rectangle (unless that's Common Mistake #2: Developing for Your Android Device We have learned that there is a better way for handling long running tasks, In this modern world immediate feedback is expected. Measure the view you're showing your images in. Once the above additions have been made, compile and run the application (either on a physical device or an emulator). Once launched, the visible result will be a button containing no text appearing in the top left-hand corner of the ConstraintLayout view as shown in Figure 23-1: A single button added to a ConstraintLayout using Java code

Comments
  • please share image
  • here they are..
  • @TarunBaria Could you give me a sample of your desire output?
  • the problem got solved. I have ticked the right answer. basically, I wanted one textView to be on the right side of the screen, which was slipping down to the left side it is seen in the picture. thanks for the answer anyway.
  • Yeah you are right. But it didn't solve the problem. Thanks for answering anyway!
  • Then change the constrainLayout.There is some problem with constraint layout while using it in the recycler sometimes. Once I had a problem with the same. I changed it to linear. This will work. Or you can try with the relative.
  • I tried this too. Relative was working. But then the solution that I have written below worked for ContstraintLayout too. Not sure about the reason behind it but it worked
  • Thanks for the answer. It didn't solve the issue but increased my knowledge about ConstraintLayout.
  • Try changing the dependency of the ConstraintLayout from 1.0.2 to 1.1.2 as 'com.android.support.constraint:constraint-layout:1.1.2'. It might work for you. Thanks for replying.
  • Since you weren't sending a parent view with the LayoutInflator the match_parent constraint wasn't working on the root view of the item layout