Forecast Card

viewholder_forecast_card.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:bind="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="state"
            type="com.francescsoftware.weathersample.presentation.feature.weather.tabs.forecast.ForecastCardState" />
    </data>

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/forecast_card_root"
        android:layout_width="match_parent"
        android:layout_height="@dimen/forecast_card_height"
        app:cardElevation="@dimen/card_elevation"
        app:contentPadding="@dimen/margin_double">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:layout_width="320dp">

            <TextView
                android:id="@+id/header"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="@dimen/margin_double"
                android:text="@{state.header}"
                android:textAppearance="?textAppearanceBody1"
                android:textColor="?android:textColorPrimary"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/forecast_icon"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="15:00 - Partly cloudy" />

            <ImageView
                android:id="@+id/forecast_icon"
                android:layout_width="@dimen/forecast_card_icon_height"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:adjustViewBounds="true"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                android:contentDescription="@string/content_description_forecast_icon"
                bind:imageDrawableId="@{state.iconId}"
                tools:src="@drawable/ic_sunny" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guide_half"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent=".5" />

            <TextView
                android:id="@+id/min_temp_label"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/margin_single"
                android:text="@string/min_temperature_label"
                android:textAppearance="?textAppearanceOverline"
                android:textColor="?android:textColorSecondary"
                app:layout_constraintBottom_toTopOf="@+id/max_temp_label"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/forecast_icon" />

            <TextView
                android:id="@+id/max_temp_label"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/max_temperature_label"
                android:textAppearance="?textAppearanceOverline"
                android:textColor="?android:textColorSecondary"
                app:layout_constraintBottom_toTopOf="@+id/feels_temp_label"
                app:layout_constraintStart_toStartOf="@+id/min_temp_label"
                app:layout_constraintTop_toBottomOf="@+id/min_temp_label" />

            <TextView
                android:id="@+id/feels_temp_label"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/feels_like_label"
                android:textAppearance="?textAppearanceOverline"
                android:textColor="?android:textColorSecondary"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="@+id/min_temp_label"
                app:layout_constraintTop_toBottomOf="@+id/max_temp_label" />

            <androidx.constraintlayout.widget.Barrier
                android:id="@+id/left_barrier"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:barrierDirection="end"
                app:constraint_referenced_ids="min_temp_label, max_temp_label, feels_temp_label" />

            <TextView
                android:id="@+id/min_temperature"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/margin_single"
                android:text="@{state.minTemperature}"
                android:textAppearance="?textAppearanceCaption"
                android:textColor="?android:textColorPrimary"
                app:layout_constraintBaseline_toBaselineOf="@+id/min_temp_label"
                app:layout_constraintStart_toEndOf="@+id/left_barrier"
                tools:text="7.5°C" />

            <TextView
                android:id="@+id/max_temperature"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{state.maxTemperature}"
                android:textAppearance="?textAppearanceCaption"
                android:textColor="?android:textColorPrimary"
                app:layout_constraintBaseline_toBaselineOf="@+id/max_temp_label"
                app:layout_constraintStart_toStartOf="@+id/min_temperature"
                tools:text="16.4°C" />

            <TextView
                android:id="@+id/feels_like_temperature"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{state.feelsLikeTemperature}"
                android:textAppearance="?textAppearanceCaption"
                android:textColor="?android:textColorPrimary"
                app:layout_constraintBaseline_toBaselineOf="@+id/feels_temp_label"
                app:layout_constraintStart_toStartOf="@+id/min_temperature"
                tools:text="4.5°C" />

            <TextView
                android:id="@+id/wind_speed_label"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/margin_single"
                android:text="@string/wind_speed_label"
                android:textAppearance="?textAppearanceOverline"
                android:textColor="?android:textColorSecondary"
                app:layout_constraintBaseline_toBaselineOf="@+id/min_temp_label"
                app:layout_constraintStart_toEndOf="@+id/guide_half" />

            <TextView
                android:id="@+id/humidity_label"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/humidity_label"
                android:textAppearance="?textAppearanceOverline"
                android:textColor="?android:textColorSecondary"
                app:layout_constraintBaseline_toBaselineOf="@id/max_temp_label"
                app:layout_constraintBottom_toTopOf="@+id/feels_temp_label"
                app:layout_constraintStart_toStartOf="@+id/wind_speed_label" />

            <TextView
                android:id="@+id/visibility_label"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/visibility_label"
                android:textAppearance="?textAppearanceOverline"
                android:textColor="?android:textColorSecondary"
                app:layout_constraintBaseline_toBaselineOf="@+id/feels_like_temperature"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="@+id/wind_speed_label" />

            <androidx.constraintlayout.widget.Barrier
                android:id="@+id/right_barrier"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:barrierDirection="end"
                app:constraint_referenced_ids="wind_speed_label, humidity_label, visibility_label" />

            <TextView
                android:id="@+id/wind_speed"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/margin_single"
                android:text="@{state.windSpeed}"
                android:textAppearance="?textAppearanceCaption"
                android:textColor="?android:textColorPrimary"
                app:layout_constraintBaseline_toBaselineOf="@+id/min_temp_label"
                app:layout_constraintStart_toEndOf="@+id/right_barrier"
                tools:text="12 kph" />

            <TextView
                android:id="@+id/humidity"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{state.humidity}"
                android:textAppearance="?textAppearanceCaption"
                android:textColor="?android:textColorPrimary"
                app:layout_constraintBaseline_toBaselineOf="@+id/max_temp_label"
                app:layout_constraintStart_toStartOf="@+id/wind_speed"
                tools:text="52 %" />

            <TextView
                android:id="@+id/visibility"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{state.visibility}"
                android:textAppearance="?textAppearanceCaption"
                android:textColor="?android:textColorPrimary"
                app:layout_constraintBaseline_toBaselineOf="@+id/feels_temp_label"
                app:layout_constraintStart_toStartOf="@+id/wind_speed"
                tools:text="10000 m" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </com.google.android.material.card.MaterialCardView>
</layout>