Android Build a Simple Android App Creating the Screen Layout Adding a TextView

Constraint Layout instead of relative layout, buttons, TextView show all together on top-left diferent from design view.

in design view i have the program as the teacher shows on the video and looks good, but when i run the emulator for Nexus 4, all textview and buttons are together on the top-left different from what it's on design view.

Code Example

<?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="@android:color/holo_blue_light" tools:context="josiaolivo.funfacts.FunFactsActivity" tools:layout_editor_absoluteY="81dp" tools:layout_editor_absoluteX="0dp">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Did you Know?"
    android:textColor="@android:color/background_light"
    android:textSize="24sp"
    tools:layout_editor_absoluteY="16dp"
    tools:layout_editor_absoluteX="16dp" />

<TextView
    android:id="@+id/FunFactText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Ants Strench when they wake up in the morning."
    android:textColor="@android:color/background_light"
    android:textSize="24sp"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="212dp" />

<Button
    android:id="@+id/ShowFunFactsButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Show More Fun Facts"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="447dp" />

</android.support.constraint.ConstraintLayout>

2 Answers

Ben Deitch
STAFF
Ben Deitch
Treehouse Teacher

Yep, we're working on refreshing this one. Until then you can just replace android.support.constraint.ConstraintLayout with RelativeLayout. Here's my layout file so you can compare: https://github.com/bfdeitch/FunFacts/blob/master/app/src/main/res/layout/activity_fun_facts.xml

Sachin Jayaram
Sachin Jayaram
5,460 Points

Hey so the problem here is that you are using constraint layout but you aren't constraining the view to the parent. The best example which will help you overcome your problem is in the following link. Hope it helps. https://developer.android.com/training/basics/firstapp/building-ui.html