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 Build an Interactive Story App User Input Using EditText for Text Input

Posted by <noob />
<noob />
17,062 Points

Difference between the Design template at android studio to the Emulator device, i got stuck multiple times.

Hi, It's really confusing, I try to follow along this video but it seem like my Design layout is alot different from the video's layout and the actual emulator layout, to understand what im actually talking about this is a link to a picture that describe what i mean: https://gyazo.com/fa996b6851adb6c41946a9693492606c

As u can see in the design layout i have alot of gap from the picture , the editText and the button, and when in run this it somehow got displayed correct!, i had this issue with setting the image on the screen because i saw a huge gap between and i solve this by copy paste the xml code at the end..

this is the xml im using NEXSUS 5X as my testing device.

    <ImageView
        android:contentDescription="Signals from Mars title image"
        android:id="@+id/titleImageView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginTop="0dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/main_title"
        />

    <Button
        android:id="@+id/startButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:text="START YOUR GAME"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent" />

    <EditText
        android:id="@+id/nameEditText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:ems="10"
        android:hint="Enter your name"
        android:inputType="textPersonName|textCapWords"
        android:maxLength="30"
        app:layout_constraintBottom_toTopOf="@+id/startButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/titleImageView" />

It's really confusing me why is this happen and how i can fix it, thanks in advance..

Tonnie Fanadez I saw that u have gone far in this tracks, i will appreciate if u could help me.

4 Answers

Lauren Moineau
Lauren Moineau
9,483 Points
Lauren Moineau
Lauren Moineau
9,483 Points

Hi Noob developer. Not to worry.

It's just that the status bar (and app/action bar) and the bottom navigation bar are hidden by default now on Android Studio (since version 3.3).

In the layout editor, at the top left corner, next to the Palette Menu, there's an eye icon with a drop-down menu. Check the last option (Show Layout Decorations) and they will be displayed.

Hope that helps :)

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

Lauren Moineau Hi!, Thanks for the help but it fixed half of the problem XD, now i see the action bar , but i still got a huge gap between the image, editview and the button as this picture: https://gyazo.com/913daa2c779553dbcab67083047e532b

any suggestions?, i hope u understand my intention, look at the emulator and then the design layout.

btw, I saw your quite advanced in android, and i kinda have tons of questions, maybe we can help each other on discord or skype since treehouse dosent have the best comm system..

Lauren Moineau
Lauren Moineau
9,483 Points
Lauren Moineau
Lauren Moineau
9,483 Points

OK. Glad we're halfway there though :)

You say you're using a Nexus 5 emulator but are you sure it is what you're using too in the layout editor preview? It seems to be a "taller" device, like a Pixel2 XL maybe. You can check that on the layout Editor toolbar at the top (next to the API version drop-down menu).

Of course, I'd be happy to help you with any Android-related questions to the best of my abilities, but it will have to be here I'm afraid as I'm pretty busy. I check in here almost every day so feel free to tag me if you want, no problem :)

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

Lauren Moineau That was the problem lol!, the layout editor was set on Pixel2, so evreytime i need to check that the emulator + layout editor in the same device.

Btw, do u have any good toturials outside of treehouse about the designing part?, I feel like they dontg explain the UI well. u use any other resources?

Lauren Moineau
Lauren Moineau
9,483 Points

Great to hear! It makes sense to have the same phone selected on both the emulator and the preview, yes, just so you know what to expect :)

Google has some very nice Codelabs you can try. For example:

They have many others you can check, not just on the UI. Just be careful because many (more and more) are in Kotlin. If you do not know Kotlin, stick to the ones in Java for now.