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 trialAritro Banerjee
Courses Plus Student 2,567 PointsHow 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>
1 Answer
Boban Talevski
24,793 PointsIt'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>
Dillon Shaw
6,400 PointsDillon Shaw
6,400 PointsI'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.