Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Android Android Lists and Adapters (2015) Using Parcelable Data Updating the Daily Forecast UI

Aritro Banerjee
PLUS
Aritro Banerjee
Courses Plus Student 2,567 Points
Posted by Aritro Banerjee
Aritro Banerjee
Courses Plus Student 2,567 Points

How can we do this with ConstraintView(since that is the new default for Activities in latest Android Studio)?

How can we do this with ConstraintView(since that is the new default for Activities in latest Android Studio)? I tried mimicking but my code crashes on clicking that button. This version of my activity_daily_forecast.xml doesnt crash. Could you help me implement the changes here or otherwise help me do this with a ConstraintView?

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_gradient"
    tools:context="com.example.aritrobanerjee93.stormy.ui.DailyForecastActivity">

    <ListView
        android:id="@android:id/list"
        android:layout_width="344dp"
        android:layout_height="551dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="0dp"

        android:layout_marginRight="0dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toTopOf="@+id/locationLabel"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/thisWeekLabel"
        tools:layout_editor_absoluteY="8dp"/>

    <TextView
        android:id="@android:id/empty"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/no_daily_forecast_data"
        android:textColor="#ffffffff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteX="151dp"
        tools:layout_editor_absoluteY="275dp"/>

    <TextView
        android:id="@+id/thisWeekLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="8dp"
        android:text="This Week's Weather"
        android:textColor="#ffffffff"
        android:textSize="30sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteY="42dp"
        />

    <TextView
        android:id="@+id/locationLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Kolkata,WB-India"
        android:textColor="#ffffffff"
        android:textSize="18sp"
        tools:layout_editor_absoluteX="112dp"
        tools:layout_editor_absoluteY="512dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>
Dillon Shaw
Dillon Shaw
6,400 Points
Dillon Shaw
Dillon Shaw
6,400 Points

I'm currently trying to figure out how to do this with a ConstraintLayout as well. Articles online say that ultimately this is simpler but it's still a bit of a mystery. One option you have though, if you just want to be able to follow along with the videos, is deleting the ConstraintLayout and using a RelativeLayout instead.

1 Answer

Boban Talevski
Boban Talevski
24,793 Points
Boban Talevski
Boban Talevski
24,793 Points

It's a bit tricky in the beginning, but it becomes a more natural way of laying out things than a RelativeLayout the longer you use it. Imagine it like having springs attached to each view and you control where those strings attach to other views or to the sides of the screen, whether there are springs in all directions or only some, how tight they hold (bias) etc. It's actually the visual way the AS presents it anyway, and I think they pretty much nailed it.

I really can't pinpoint a single tutorial out there, guess you'll have to go through several to get the hang of it. And I suggest to make it a challenge to recreate every RelativeLayout used in the older courses using ConstraintLayout and you'll get the hang of it in time. But need to be persistent :).

Here's my xml layout files from this course if it's of any help. Note that I have additional views in activity_main.xml showing the apparentTemperature (real feel temperature) so it's not exactly the same as in the course.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_gradient"
    tools:context="com.example.bobantalevski.stormy.ui.MainActivity">

    <TextView
        android:id="@+id/temperatureLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:includeFontPadding="false"
        android:text="@string/two_dashes"
        android:textColor="@android:color/white"
        android:textSize="150sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/degreeImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        app:layout_constraintLeft_toRightOf="@+id/temperatureLabel"
        app:layout_constraintTop_toTopOf="@+id/temperatureLabel"
        app:srcCompat="@drawable/degree" />

    <TextView
        android:id="@+id/timeLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:text="@string/ellipsis"
        android:textColor="#80ffffff"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@+id/temperatureLabel"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/locationLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="60dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:text="@string/two_dashes"
        android:textColor="#ffffffff"
        android:textSize="24sp"
        app:layout_constraintBottom_toTopOf="@+id/timeLabel"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <ImageView
        android:id="@+id/iconImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        app:layout_constraintBottom_toBottomOf="@+id/locationLabel"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/locationLabel"
        app:srcCompat="@drawable/cloudy" />

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:orientation="horizontal"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/feelTempLabel">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="8dp">

            <TextView
                android:id="@+id/humidityLabel"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="@string/humidity"
                android:textColor="#80ffffff"
                tools:layout_editor_absoluteX="8dp"
                tools:layout_editor_absoluteY="-24dp" />

            <TextView
                android:id="@+id/humidityValue"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="@string/two_dashes"
                android:textColor="#ffffffff"
                android:textSize="24sp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="8dp">

            <TextView
                android:id="@+id/precipLabel"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="@string/rain_snow"
                android:textColor="#80ffffff" />

            <TextView
                android:id="@+id/precipValue"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="@string/two_dashes"
                android:textColor="#ffffffff"
                android:textSize="24sp" />
        </LinearLayout>
    </LinearLayout>

    <TextView
        android:id="@+id/summaryLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:gravity="center_horizontal"
        android:text="@string/getting_current_weather"
        android:textColor="#ffffffff"
        android:textSize="18sp"
        app:layout_constraintHorizontal_bias="0.505"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout" />

    <TextView
        android:id="@+id/feelTempLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:text="--"
        android:textColor="#ffffffff"
        android:textSize="50sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/temperatureLabel" />

    <TextView
        android:id="@+id/feelTempText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="@string/real_feel"
        android:textColor="#80ffffff"
        app:layout_constraintBottom_toBottomOf="@+id/feelTempLabel"
        app:layout_constraintRight_toLeftOf="@+id/feelTempLabel" />

    <ImageView
        android:id="@+id/degreeRealFeelImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toRightOf="@+id/feelTempLabel"
        app:layout_constraintTop_toTopOf="@+id/feelTempLabel" />

    <ImageView
        android:id="@+id/refreshImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/refresh" />

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

    <LinearLayout
        android:id="@+id/bottomButtonsLinearLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/summaryLabel"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp">

        <Button
            android:id="@+id/hourlyButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#40ffffff"
            android:text="@string/hourly"
            android:textColor="#ffffffff" />

        <Button
            android:id="@+id/dailyButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#40ffffff"
            android:text="@string/_7_day"
            android:textColor="#ffffffff"
            android:layout_marginStart="2dp"
            android:layout_marginLeft="2dp"/>
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

activity_daily_forecast.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_gradient"
    tools:context="com.example.bobantalevski.stormy.ui.DailyForecastActivity">


    <TextView
        android:id="@android:id/empty"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:text="@string/no_daily_forecast_data"
        android:textColor="#ffffffff"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp" />

    <TextView
        android:id="@+id/thisWeekLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="16dp"
        android:text="@string/this_week_s_weather"
        android:textColor="#ffffffff"
        android:textSize="30sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/locationLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        android:textColor="#ffffffff"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <ListView
        android:id="@android:id/list"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintVertical_bias="0.5"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/thisWeekLabel"
        app:layout_constraintBottom_toTopOf="@+id/locationLabel"
        android:divider="@null"
        android:dividerHeight="0dp"/>

</android.support.constraint.ConstraintLayout>