Monday, 10 July 2017

Discussion about Constraint Layout

Before starting on the next video, we want to bring to your attention a new feature in new Android Studio - Constraint Layout - that may require you to make some code modifications to the steps you see in the following videos.

Keeping up with the changes

Google is constantly improving the Android platform and adding new features. This is great for you as a developer, but it makes learning harder sometimes. Recently Google released ConstraintLayout; a tool that makes it super fast to create responsive UIs with many different types of components. ConstraintLayout is a great tool to have on the sleeve, but for this class, we will use RelativeLayout, LinearLayout simpler.
All of this matters to you because the new project templates in Android Studio now use ConstraintLayout as default, which makes the code you see on your computer a bit different from what is on the screen.

Current Layout File

In the new versions of Android Studio, after choosing the Empty Activity template, the layout file app/src/main/res/layout/activity_main.xml will look like this:
<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.udacity.myapplication.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintLeft_toLeftOf="@+id/activity_main"
        app:layout_constraintTop_toTopOf="@+id/activity_main"
        app:layout_constraintRight_toRightOf="@+id/activity_main"
        app:layout_constraintBottom_toBottomOf="@+id/activity_main" />

</android.support.constraint.ConstraintLayout>
Note the use of ConstraintLayout, and that TextView has a list of limiters that position it within ConstraintLayout.

Modify the Layout File

Unlike the above code, our videos and start code assume that the template looks more like the following, using as the root of the view a RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.udacity.myapplication.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>
When you create your new project, go to app/src/main/res/layout/activity_main.xml and copy and paste the above code. Then you're ready to go!
If you want to understand more about the great features that ConstraintLayout provides, check out the documentation at: https://developer.android.com/studio/write/layout-editor.html

No comments:

Post a Comment