Search code examples
androidandroid-layoutandroid-recyclerviewtextviewandroid-cardview

how to adjust textview with screen limits?


I have a cardview in which I am displaying ingredient list but the problem i am facing is sometimes the ingredient name becomes so lengthy that it kicks out the textviews and button next to it out of screen. How can I adjust the entire cardview within screen even if ingredient name becomes lengthy ?

That is the code of my ingredient_list.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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="65dp"
    app:cardCornerRadius="12dp"
    app:cardElevation="5dp"
    android:backgroundTint="#333333"
    android:layout_margin="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#333333"
        android:layout_margin="4dp"
        android:padding="5dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/ith_ingredient_inventory"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ingredient i"
            android:gravity="center"
            android:textColor="@color/colorAccent"
            android:textSize="20dp"
            android:textStyle="bold"
            android:padding="10dp"
            />
        <TextView
            android:id="@+id/ith_ingredient_quantity_inventory"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@drawable/round_corners"
            android:backgroundTint="@color/colorAccent"
            android:text="100"
            android:textSize="20dp"
            android:textAlignment="center"
            android:textColor="@android:color/black"
            android:textStyle="bold"
            android:padding="5dp"
            android:layout_margin="5dp">

        </TextView>
        <TextView
            android:id="@+id/ith_ingredient_quantity_unit_inventory"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="unit"
            android:textColor="@color/colorAccent"
            android:textSize="16dp"
            android:padding="10dp"
            />
        <Button
            android:id="@+id/add_quantity_inventory"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:background="@drawable/plus"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:padding="10dp"
            android:layout_marginLeft="10dp">
        </Button>
    </LinearLayout>
 </androidx.cardview.widget.CardView>

Solution

  • I changed your LinearLayout to ConstraintLayout and made some other changes:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.cardview.widget.CardView 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="65dp"
        android:layout_margin="10dp"
        android:backgroundTint="#333333"
        app:cardCornerRadius="12dp"
        app:cardElevation="5dp">
    
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="4dp"
            android:background="#333333"
            android:padding="5dp">
    
            <TextView
                android:id="@+id/ith_ingredient_inventory"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:gravity="center"
                android:maxLines="1"
                android:text="ingredient i ingredient i ingredient i ingredient i ingredient i"
                android:textColor="@color/colorAccent"
                android:textSize="20dp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toLeftOf="@+id/ith_ingredient_quantity_inventory"
                app:layout_constraintTop_toTopOf="parent" />
    
            <TextView
                android:id="@+id/ith_ingredient_quantity_inventory"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_margin="5dp"
                android:backgroundTint="@color/colorAccent"
                android:text="100"
                android:textAlignment="center"
                android:textColor="@android:color/black"
                android:textSize="20dp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintRight_toLeftOf="@+id/ith_ingredient_quantity_unit_inventory"
                app:layout_constraintTop_toTopOf="parent" />
    
            <TextView
                android:id="@+id/ith_ingredient_quantity_unit_inventory"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="unit"
                android:textColor="@color/colorAccent"
                android:textSize="16dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintRight_toLeftOf="@+id/add_quantity_inventory"
                app:layout_constraintTop_toTopOf="parent" />
    
            <Button
                android:id="@+id/add_quantity_inventory"
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_margin="10dp"
                android:foreground="?attr/selectableItemBackgroundBorderless"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"></Button>
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
    

    and this is the result:

    enter image description here

    So, you can use ConstraintLayout with my properties and that TextView you want to not cover the other views, must have a maxLine value and ellipsize to show three dots at the end, when it is long.