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

Sara Mørk
seal-mask
.a{fill-rule:evenodd;}techdegree
Sara Mørk
Full Stack JavaScript Techdegree Student 2,838 Points
Posted by Sara Mørk
.a{fill-rule:evenodd;}techdegree
Sara Mørk
Full Stack JavaScript Techdegree Student 2,838 Points

Project layout is fine under the Design tab, but is "squished" together in the AVD. How can I fix this?

I'm following Beginning Android Development, and am experiencing difficulties with running the project on the Android Virtual Device.

Everything seems fine under the Design tab, but when I run the application in a virtual device, the layout looks very very.. wrong.. :S

The best way I can describe how it looks is to make a tiny comparison to CSS - it is as though every object in the layout has position: absolute; - because all the objects on the layout are living on the topmost corner of the AVD's screen, and overlapping one another. This isn't how it looks like under the design tab, which is why I am really confused.

I'm not sure I've missed a step, or if I need to take extra steps to fix this??

I've included a screenshot of what's wrong.

..I don't even know :L

Hope to hear from you guys soon!

  • Sara

2 Answers

Matthias Margot
Matthias Margot
7,236 Points
Matthias Margot
Matthias Margot
7,236 Points

Theres a bunch of reasons why this could happen.

  1. You're not using a RealativeLayout as the parent Layout.

  2. Your Views weren't actually aligned correctly when you placed them (they need to touch the edges and they need to be green then you release your view, in case your using the drag and drop editor).

  3. Another reason could be that you haven't defined the ID's of the Views before your dragged them into the right place or you haven't defined them at all (If you have defined them check in the XML file if the name of the View is the same as in the editor and first of all check if it has a name at all obviously).

  4. You have placed your views using hard coded non-relative units, like say, 48px instead of 48dp. If you did that your layout will only appear the way you want it to on the screen size you were using in the editor and appear relatively out of place on every other screen size.

I'm sorry that i can't tell you the exact reason for this happening. You just didn't provide enough information to me. I would be glad to reply to you as soon as i can if you were to copy in your xml code in here. I would 100% be able to tell you what's wrong if i could see the xml file.

hope i could help

Matthias :)

Sara Mørk
seal-mask
.a{fill-rule:evenodd;}techdegree
Sara Mørk
Full Stack JavaScript Techdegree Student 2,838 Points
Sara Mørk
.a{fill-rule:evenodd;}techdegree
Sara Mørk
Full Stack JavaScript Techdegree Student 2,838 Points

Thank you so much for your response!

I've taken a look at my XML, and it looks like the layout is "Constraint"? Not sure I am looking in the correct place though (and not quite sure how to solve the issue :S)

<?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"
    tools:context="dk.saralina.funfacts.FunFactsActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:text="Did you know?"
        android:textSize="24sp"
        app:layout_constraintHorizontal_bias="0.077"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/factTextView"
        android:layout_width="344dp"
        android:layout_height="wrap_content"
        android:text="Ants stretch when they wake up in the morning.."
        android:textSize="28sp"
        tools:layout_editor_absoluteY="222dp"
        tools:layout_editor_absoluteX="8dp" />

    <Button
        android:id="@+id/bigButt"
        android:layout_width="344dp"
        android:layout_height="wrap_content"
        android:text="Click for another fact"
        tools:layout_editor_absoluteY="447dp"
        tools:layout_editor_absoluteX="8dp" />

</android.support.constraint.ConstraintLayout>
Matthias Margot
Matthias Margot
7,236 Points
Matthias Margot
Matthias Margot
7,236 Points

@Sara Mørk Couple of things wrong with your code.

(I'd suggest you delete your current Layout file and just create a new one with the RelativeLayout, still read this tho if you wanna know how to set it up correctly)

  • You do indeed have the wrong type of layout. Just delete this 'android.support.constraint.ConstraintLayout' and replace with RelativeLayout
  • Get rid of everything in your xml view parameters that's not starting with android: like app: and tools: for example.
  • relative dimensions for any view are always looking better on every device than numeric ones. change your layout width for the 'Ants...' TextView to match_parent.

Now a relativeLayout works like this: Every view's position is defined relative to either other views or it's parent. You can either code this yourself or just fiddle around with the drag and drop layout editor. XML relativeLayout parameters look like this:

    <Button
        android:id="@+id/bigButt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Click for another fact" />

If ever you use the relativeLayout to put views next to eachother or above one another you absolutely have to define their ID's. This is not gonna be relevant for this course it is going to for the next one tho.

From their names it should be more or less clear what these parameters do to your view.

Hope everything's cleared up now

happy coding

Matthias :)

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

Android Studio is one of those tools that keeps changing constantly. This includes the templates you get when you create a new Activity, etc. Since the course was released the default parent layout was changed from a RelativeLayout to a ConstraintLayout. If you you go to the XML and change android.support.constraint.ConstraintLayoutto RelativeLayout at both the top and bottom of the file that should fix things.