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 a Simple Android App (2014) Creating the Screen Layout Adding a Button

Steven Choi
Steven Choi
2,125 Points
Posted by Steven Choi
Steven Choi
2,125 Points

Button is behind the bottom navbar on Android Studio, but not in emulator; would like correct bottom margin

When I clicked and dragged in Button to align to the bottom margin, in the design view, it seemed to think that the bottom margin was under, not above, the bottom navbar (the black bar w/ the Back, Home, and Menu buttons; if this is not what it's called, I'm curious about that too.) So my "Show Fact Button" looks like it's behind the bottom navbar, but when I run the emulator, the "Show Fact Button" is above the bottom navbar, just the way I want it to look. So, why do Android Studio & the emulator show the placement of the button (and the bottom margin) in different places? Thanks!

Dorothy Serley
Dorothy Serley
1,958 Points

Mine did the same initially, but after finishing the layout and adjusting the padding margins, I haven't seen the issue. I think it's a rendering issue where the capacitive buttons (physical buttons on a phone like at the bottom of the Samsung Galaxy Note 2) which is what you might be using in the emulator and the virtual buttons that are used in other devices. Check which device is being used for rendering in Android Studio to see which it uses. I know mine defaults to the Nexus 5 which has virtual buttons.

Steven Choi
Steven Choi
2,125 Points
Steven Choi
Steven Choi
2,125 Points

As a note, I've been using the Nexus 6, which has the virtual buttons, but even when I switch to Nexus One, the layout's bottom margin still somehow ends up under the physical buttons!

I also tried messing w/ the padding margins. Doesn't work.

Here's my code for "activity_fun_facts.xml":

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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:fitsSystemWindows="true"
    tools:context=".FunFactsActivity">

    <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
        android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
            android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_fun_facts" />

    <android.support.design.widget.FloatingActionButton android:id="@+id/fab"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

2 Answers

Fernando Hernandez
Fernando Hernandez
11,013 Points
Fernando Hernandez
Fernando Hernandez
11,013 Points

I had this same issue with Android 1.4.1 defaults. I was able to resolve this by right-clicking somewhere on the preview pane screen (i.e. right-click directly on the button) and selecting the first option "Hide Including Layout".

After that, it matched the video and emulator/app exactly.

Dorothy Serley
Dorothy Serley
1,958 Points
Dorothy Serley
Dorothy Serley
1,958 Points

The toolbar pushes the window lower in rendering. After removing the toolbar it will sit in the right space. See my comment for memoir info.

Steven Choi
Steven Choi
2,125 Points
Steven Choi
Steven Choi
2,125 Points

I was able to remove the toolbar and right the bottom margin by deleting "android.support.v7.widget.Toolbar", but I don't think that's what they were really going for, since they still manage to keep both the toolbar and the right bottom margin. Nevertheless, it's a nice workaround to help me see what's hidden, so thanks for that! Hoping there's a better answer to the rendering problem.