androidandroid-layoutandroid-recyclerviewandroid-constraintlayoutlinearlayoutmanager

Recyclerview listitem layout gravity issue


This is the chat bot. Some messages are left aligned and some are right aligned. Left aligned messages are working fine but right aligned messages also get left aligned. This is the required listitem. layout_gravity to be on the right. But when added to the recycledview, the list item moves to the left as depicted in another photo. I don't know what could be the culprit. Is it constraint_layout or linearlayoutmanager or something else.

`<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:padding="@dimen/paddingBig"
        android:background="@drawable/balloon_outgoing_normal"
        android:layout_gravity="right"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_margin="8dp">

    <TextView
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:id="@+id/text"
            android:layout_width="0dp"
            android:paddingRight="@dimen/paddingSmall"
            android:layout_height="wrap_content"
            tools:text="Hello hello Hellomnhbhvbhbvhbhvbhvbhbvhbvhbvhbvhbhvbhvbhvbhvbhbvhbvhbv hello Hello hello Hello hello Hello hello"/>

    <TextView
            android:id="@+id/time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintRight_toLeftOf="@id/status"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@id/text"
            tools:text="21/04/2016, 2:30 P.M."/>

    <ImageView
            android:id="@+id/status"
            tools:visibility="visible"
            android:src="@drawable/baseline_schedule_black_18"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="@id/time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" tools:ignore="ContentDescription"/>
</androidx.constraintlayout.widget.ConstraintLayout>`

<code>enter image description here</code>

`<?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:id="@+id/chat_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true">

    <ImageView
            android:id="@+id/sendMessage"
            android:layout_width="52dp"
            android:layout_height="52dp"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:background="?android:attr/selectableItemBackground"
            android:padding="@dimen/paddingMedium"
            android:src="@drawable/send_disable" tools:ignore="ContentDescription"/>

    <EditText
            android:id="@+id/input"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:hint="@string/type_message"
            app:layout_constraintRight_toLeftOf="@id/sendMessage"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:inputType="textCapSentences|textMultiLine"
            android:maxLines="2"
            android:padding="@dimen/paddingMedium" tools:ignore="Autofill"/>

    <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:paddingBottom="20dp"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toTopOf="@id/input"
            tools:listitem="@layout/me_message"
            app:layout_constraintTop_toTopOf="parent">
    </androidx.recyclerview.widget.RecyclerView>

    <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            tools:visibility="visible"
            android:visibility="gone"/>

</androidx.constraintlayout.widget.ConstraintLayout>`

I have tried many things. Actually earlier I have used relativelayout for the same and using alignParentBottom that is working but I am amazed why constraintlayout is not working.


Solution

  • You need to use a nested constraintlayout to achieve that view. Also in in your recyclerview set the width to match_parent

    android:layout_width="match_parent"
    
    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    
        <androidx.constraintlayout.widget.ConstraintLayout
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:padding="@dimen/paddingBig"
            android:background="@drawable/balloon_outgoing_normal"
            android:layout_margin="8dp">
    
            <TextView
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                android:id="@+id/text"
                android:layout_width="0dp"
                android:paddingRight="@dimen/paddingSmall"
                android:layout_height="wrap_content"
                tools:text="Hello hello Hellomnhbhvbhbvhbhvbhvbhbvhbvhbvhbvhbhvbhvbhvbhvbhbvhbvhbv hello Hello hello Hello hello Hello hello"/>
    
            <TextView
                android:id="@+id/time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintRight_toLeftOf="@id/status"
                app:layout_constraintBottom_toBottomOf="parent"
                android:layout_marginTop="8dp"
                app:layout_constraintTop_toBottomOf="@id/text"
                tools:text="21/04/2016, 2:30 P.M."/>
    
            <ImageView
                android:id="@+id/status"
                tools:visibility="visible"
                android:src="@drawable/baseline_schedule_black_18"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintBottom_toBottomOf="@id/time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" tools:ignore="ContentDescription"/>
    
        </androidx.constraintlayout.widget.ConstraintLayout>
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    enter image description here