Struggling making GridLayout fit correctly in android studio
<p>I am using a gridlaout in my project in android studio and have run into problems, the UI goes out of view to the right, here is a screen shot that shows the elements out of view 
<a href="https://i.stack.imgur.com/xzPYk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xzPYk.png" alt="enter image description here"></a></p>

<p>I have searched and cannot find the right way of making this work, i have added compile 'com.android.support:gridlayout-v7:23.2.1' to the gradle build but still not working out for me! there must be a sollution to this but i am a newbie to android and still learning. on the preview the UI looks fine, but when run on device it looks like the above picture.Here is my layout.xml and would really appreciate some help on this, thank you</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="hcil.umd.edu.calculator.MainActivity"&gt;


    &lt;GridLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/gridLayoutCalculator"
        android:layout_centerHorizontal="true"
        &gt;

        &lt;TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            android:id="@+id/textViewOutputScreen"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_columnSpan="4"
            android:textSize="50sp"
            android:background="@drawable/calc_screen_border"
            android:layout_gravity="fill"
            android:padding="4dp" /&gt;


        &lt;Button style="@style/CalculatorButton"
            android:text="C"
            android:id="@+id/buttonKeyC"
            android:layout_row="1"
            android:layout_column="0"
            android:background="@drawable/button"
            /&gt;

        &lt;Button style="@style/CalculatorButton"
            android:text="/"
            android:id="@+id/buttonKeyDivide"
            android:layout_row="1"
            android:layout_column="3"
            android:background="@drawable/button"/&gt;

        &lt;Button style="@style/CalculatorButton"
            android:text="7"
            android:id="@+id/buttonKey7"
            android:layout_row="2"
            android:layout_column="0"
            android:background="@drawable/button"/&gt;

        &lt;Button style="@style/CalculatorButton"
            android:text="8"
            android:id="@+id/buttonKey8"
            android:layout_row="2"
            android:layout_column="1"
            android:background="@drawable/button"/&gt;

        &lt;Button style="@style/CalculatorButton"
            android:text="9"
            android:id="@+id/buttonKey9"
            android:layout_row="2"
            android:layout_column="2"
            android:background="@drawable/button" /&gt;

        &lt;Button style="@style/CalculatorButton"
            android:text="*"
            android:id="@+id/buttonKeyMultiply"
            android:layout_row="2"
            android:layout_column="3"
            android:background="@drawable/button" /&gt;

        &lt;Button style="@style/CalculatorButton"
            android:text="4"
            android:id="@+id/buttonKey4"
            android:layout_row="3"
            android:layout_column="0"
            android:background="@drawable/button"/&gt;

        &lt;Button style="@style/CalculatorButton"
            android:text="5"
            android:id="@+id/buttonKey5"
            android:layout_row="3"
            android:layout_column="1"
            android:background="@drawable/button"/&gt;

        &lt;Button style="@style/CalculatorButton"
            android:text="6"
            android:id="@+id/buttonKey6"
            android:layout_row="3"
            android:layout_column="2"
            android:background="@drawable/button"/&gt;

        &lt;Button style="@style/CalculatorButton"
            android:text="-"
            android:id="@+id/buttonKeySubtract"
            android:layout_row="3"
            android:layout_column="3"
            android:background="@drawable/button" /&gt;

        &lt;Button style="@style/CalculatorButton"
            android:text="1"
            android:id="@+id/buttonKey1"
            android:layout_row="4"
            android:layout_column="0"
            android:background="@drawable/button" /&gt;

        &lt;Button style="@style/CalculatorButton"
            android:text="2"
            android:id="@+id/buttonKey2"
            android:layout_row="4"
            android:layout_column="1"
            android:background="@drawable/button"/&gt;

        &lt;Button style="@style/CalculatorButton"
            android:text="3"
            android:id="@+id/buttonKey3"
            android:layout_row="4"
            android:layout_column="2"
            android:background="@drawable/button"/&gt;

        &lt;Button style="@style/CalculatorButton"
            android:text="+"
            android:id="@+id/buttonKeyAdd"
            android:layout_row="4"
            android:layout_column="3"
            android:background="@drawable/button"/&gt;

        &lt;Button style="@style/CalculatorButton"
            android:text="0"
            android:id="@+id/buttonKey0"
            android:layout_row="5"
            android:layout_column="0"
            android:layout_columnSpan="2"
            android:layout_gravity="fill_horizontal"
            android:background="@drawable/button"/&gt;

        &lt;Button style="@style/CalculatorButton"
            android:text="="
            android:id="@+id/buttonKeyEquals"
            android:layout_row="5"
            android:layout_column="3"
            android:background="@drawable/button"/&gt;
    &lt;/GridLayout&gt;
&lt;/RelativeLayout&gt;</code></pre>
</div>
</div>
</p>