Android xml styling for different sized elements in constrained layout

Question

I have the farrowing code that I am using to dynamically place items in gridview

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="350dp"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_margin="@dimen/margin_small"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="@dimen/margin_small">

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/margin_small"
    android:layout_gravity="center">
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/name"
        card_view:layout_constraintTop_toTopOf="parent"
        card_view:layout_constraintBottom_toTopOf="@+id/cost"
        card_view:layout_constraintStart_toStartOf="@+id/image"
        android:maxLines="3"
        android:padding="9dp"
        android:textAppearance="?android:attr/textAppearanceSmall"/>
    <TextView
        android:id="@+id/cost"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/ksh_000_00"
        card_view:layout_constraintTop_toBottomOf="@+id/name"
        card_view:layout_constraintBottom_toTopOf="@+id/image"
        card_view:layout_constraintStart_toStartOf="@+id/image"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:typeface="serif"/>
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:contentDescription="@string/food_fuzz_logo"
        android:src="@drawable/logo"
        card_view:layout_constraintBottom_toTopOf="@+id/footer"
        card_view:layout_constraintEnd_toEndOf="parent"
        card_view:layout_constraintStart_toStartOf="parent"
        card_view:layout_constraintTop_toBottomOf="@+id/cost"
        tools:scaleType="fitCenter" />

    <LinearLayout
        android:layout_width="match_parent"
        android:id="@+id/footer"
        android:layout_height="wrap_content"
        card_view:layout_constraintTop_toBottomOf="@+id/image"
        card_view:layout_constraintBottom_toBottomOf="parent"
        card_view:layout_constraintEnd_toEndOf="@+id/image"
        card_view:layout_constraintStart_toStartOf="@+id/name"
        android:orientation="horizontal"
        android:background="@color/gradient_background">

        <TextView
            android:id="@+id/minus"
            android:layout_width="14dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:layout_marginStart="@dimen/activity_vertical_margin"
            android:gravity="start"
            android:text="@string/minus"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold" />
        <TextView
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:id="@+id/quantity"
            android:text="@string/zero"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_gravity="center"
            android:gravity="center"/>
        <TextView
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:id="@+id/plus"
            android:text="@string/plus"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_gravity="end"
            android:gravity="end"/>
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 </androidx.cardview.widget.CardView>

now I would like to have it like the bootstrap card with card-header, card-body and card-footer effect but I am only able to make it have the body like effect only. My attempt for the footer only positions the footer id element in the centre and its components crumbled together instead of the first one(minus) being spread out one to the extreme left, the other(quantity) in the centre and the last one(plus)n to the extreme right of the cardview's linear layout item. This is what the code gives me And this is what I expect yet what I want is for the grey area to span the entire width of the card view and position the components appropriately as explained earlier How is it possible to achieve my design idea?

Answer 1

what I want is for the grey area to span the entire width of the card view

I see that you used tools:scaleType for the image, and this won't work at runtime, as tools namespace is used for design purpose, so change it to android:scaleType

and position the components appropriately as explained earlier

You need to set the width of the LinearLayout that holds the buttons to match_parent, and set the weight values so that the buttons can be distribute like you need:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="350dp"
    android:layout_margin="@dimen/margin_small"
    card_view:cardCornerRadius="10dp"
    card_view:cardElevation="@dimen/margin_small">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="@dimen/margin_small">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="3"
            android:padding="9dp"
            android:text="@string/name"
            android:textAppearance="?android:attr/textAppearanceSmall"
            card_view:layout_constraintBottom_toTopOf="@+id/cost"
            card_view:layout_constraintStart_toStartOf="@+id/image"
            card_view:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/cost"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ksh_000_00"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:typeface="serif"
            card_view:layout_constraintBottom_toTopOf="@+id/image"
            card_view:layout_constraintStart_toStartOf="@+id/image"
            card_view:layout_constraintTop_toBottomOf="@+id/name" />

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher_background"
            card_view:layout_constraintBottom_toTopOf="@+id/footer"
            card_view:layout_constraintEnd_toEndOf="parent"
            card_view:layout_constraintStart_toStartOf="parent"
            card_view:layout_constraintTop_toBottomOf="@+id/cost"
            tools:scaleType="fitCenter" />

        <LinearLayout
            android:id="@+id/footer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/gradient_background"
            android:orientation="horizontal"
            card_view:layout_constraintBottom_toBottomOf="parent"
            card_view:layout_constraintEnd_toEndOf="@+id/image"
            card_view:layout_constraintStart_toStartOf="@+id/name"
            card_view:layout_constraintTop_toBottomOf="@+id/image">

            <TextView
                android:id="@+id/minus"
                android:layout_width="14dp"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                android:layout_marginStart="@dimen/activity_vertical_margin"
                android:gravity="start"
                android:text="@string/minus"
                android:layout_weight="1"
                android:textColor="@color/white"
                android:textSize="18sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/quantity"
                android:layout_width="30dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="@string/zero"
                android:textColor="@color/white"
                android:textSize="18sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/plus"
                android:layout_width="30dp"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/activity_vertical_margin"
                android:layout_weight="1"
                android:layout_gravity="end"
                android:gravity="end"
                android:text="@string/plus"
                android:textColor="@color/white"
                android:textSize="18sp"
                android:textStyle="bold" />
        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>