Android Studio rendering when ScrollView is added

Question

I am using Android Studio 1.3.2. So, I was doing a test app and I have a LinearLayout group. The preview of the layout is this : http://imgur.com/EkPv1v2

Next, I added a ScrollView group above the LinearLayout group. Then the preview only shows this : http://imgur.com/ccb2IFu

The action bar is gone. The frame of the phone is gone.

However, if I put the ScrollView group after the main LinearLayour group, then rendering is a-ok.

What's happening? Am I missing something?

Below is the XML layout with the ScrollView :

<ScrollView 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"
tools:context=".MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    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=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:text="Toppijjngs"
        android:textAllCaps="true" />

    <CheckBox
        android:id="@+id/notify_me_checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:onClick="hasTopping"
        android:paddingLeft="24dp"
        android:text="Whipped Cream"
        android:textSize="16sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:text="quantity"
        android:textAllCaps="true" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:onClick="decrement"
            android:text="-" />

        <TextView
            android:id="@+id/quantity_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:text="0"
            android:textColor="#000000" />

        <Button
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:onClick="increment"
            android:text="+" />

    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="order summary"
        android:textAllCaps="true" />

    <TextView
        android:id="@+id/order_summary_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="$0.00"
        android:textColor="#000000" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:onClick="submitOrder"
        android:text="order" />

</LinearLayout>

Answer 1

Due to the nature of the ScrollView, Android Studio hides the phone frame and action bar so you can see the complete view, so if your ScrollView is larger than the screen of a phone, the preview shows the whole ScrollView.

If you want to see temporarily the phone frame in the preview window, you can do this:

1. In the "Render configuration" button, select the "Preview Representative Sample" option.

2. In the same button, now select the "None" option.

3. The phone frame will appear (without the action bar)

However, the phone frame will dissapear once you switch to another file, or switch to Design mode, and back to Text mode.

You can see your ScrollView inside the phone frame and action bar in the Design mode pressing the "Toggle Viewport Render Mode" button:

But you will not see all the content if the ScrollView is larger than phone screen.

That's all!