Here is the code to my activity_main.xml. For some apparent reason, adding a ScrollView complete messes up my Android Preview screen. However when I run the app, everything looks fine like how it should look.
<?xml version="1.0" encoding="utf-8"?>
<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="com.mienapps.justjava.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="Toppings"
android:textColor="@android:color/black"
android:textSize="16sp"/>
<CheckBox
android:id="@+id/whip_cream_checkb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:paddingLeft="24dp"
android:text="Whip Cream"
android:textSize="16sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Quantity"
android:textAllCaps="true"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginTop="16dp"
android:orientation="horizontal">
<Button
android:id="@+id/decrement"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginRight="8dp"
android:onClick="decrement"
android:text="-"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="@android:color/black"/>
<TextView
android:id="@+id/quantity_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="0"
android:textColor="@android:color/black"
android:textSize="16sp"/>
<Button
android:id="@+id/increment"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginLeft="8dp"
android:onClick="increment"
android:text="+"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="@android:color/black"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Price"
android:textAllCaps="true"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Order Summary"
android:textAllCaps="true"
android:textAppearance="?android:attr/textAppearanceSmall"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/price_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:text="$0"
android:textColor="@android:color/black"
android:textSize="16sp"/>
<TextView
android:id="@+id/order_summary_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:text="Subtotal: $0.00\nTax: 7.50%\nTotal: $0.00"
android:textColor="@android:color/black"
android:textSize="16sp"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:onClick="submitOrder"
android:text="Order"/>
</RelativeLayout>
</LinearLayout>
</ScrollView>
Here are images of before adding the ScrollView and after adding the ScrollView.