如何让 Android 小部件贴在布局的右侧？

Question

I am designing an android layout for a comment system. I need to make the ImageView (expandImage) stick to the right of the layout permanently no matter how short or long the text in commentTextView. If the text is short, expandImage moves to the left, and if the text is long it pushes expandImage off the screen. I don't want that.

I have used gravity but it makes no difference. I also tried Relative Layout but it messed up the layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="5dp"
    android:paddingBottom="5dp">


    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@android:color/white"
        app:cardCornerRadius="2dp"
        app:cardElevation="4dp"
        app:cardUseCompatPadding="true">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp"
            android:orientation="horizontal">

            <com.mikhaellopez.circularimageview.CircularImageView
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:src="@drawable/photo_female_5"/>

            <View
                android:layout_width="5dp"
                android:layout_height="5dp"/>

                <LinearLayout
                    android:id="@+id/linearLayout"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="username"
                        android:textColor="@android:color/black"
                        android:textSize="18sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/commentTextView"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_marginRight="50dp"
                        android:singleLine="false"
                        android:text="This is a comment. It spills" />

                </LinearLayout>

                <View
                    android:layout_width="5dp"
                    android:layout_height="5dp" />

            <ImageView
                android:id="@+id/expandImage"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:layout_gravity="center_vertical"
                android:layout_marginRight="5dp"
                android:src="@drawable/ic_expand_arrow" />

        </LinearLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

This is the way it currently looks in the image:

enter image description here

Please, how do I make expandImage stick to the right of the layout without moving at all. Thank you in advance.

Answer 1

Long story short: You can put RelativeLayout inside your CardView and in it add those attributes:

android:layout_alignParentRight="true"
android:layout_centerVertical="true"

So you will get the expandImage in the needed position without rebuilding linear layout

Full code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:paddingTop="5dp"
    android:paddingBottom="5dp">


    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@android:color/white"
        app:cardCornerRadius="2dp"
        app:cardElevation="4dp"
        app:cardUseCompatPadding="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:orientation="horizontal">

                <com.mikhaellopez.circularimageview.CircularImageView
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:src="@drawable/photo_female_5" />

                <View
                    android:layout_width="5dp"
                    android:layout_height="5dp" />

                <LinearLayout
                    android:id="@+id/linearLayout"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="username"
                        android:textColor="@android:color/black"
                        android:textSize="18sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/commentTextView"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_marginRight="50dp"
                        android:singleLine="false"
                        android:text="This is a comment. It spills" />

                </LinearLayout>

                <View
                    android:layout_width="5dp"
                    android:layout_height="5dp" />

            </LinearLayout>

            <ImageView
                android:id="@+id/expandImage"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_gravity="center_vertical"
                android:layout_marginEnd="5dp"
                android:layout_marginRight="5dp"
                android:src="@drawable/ic_expand_arrow" />

        </RelativeLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

Answer 2

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
android:paddingTop="5dp"
android:paddingBottom="5dp">

<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    app:cardCornerRadius="2dp"
    app:cardElevation="4dp"
    app:cardUseCompatPadding="true">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:orientation="horizontal">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/image"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:src="@drawable/photo_female_5" />


        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toEndOf="@id/image"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="username"
                android:textColor="@android:color/black"
                android:textSize="18sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/commentTextView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginRight="50dp"
                android:singleLine="false"
                android:text="This is a comment. It spills" />

        </LinearLayout>

        <View
            android:layout_width="5dp"
            android:layout_height="5dp" />

        <ImageView
            android:id="@+id/expandImage"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="5dp"
            android:src="@drawable/ic_expand_arrow" />

    </RelativeLayout>


</androidx.cardview.widget.CardView>

</LinearLayout>