Question

How can i wrap elements in the XML code in a box like view? meaning that i want them to be looking like they are grouped in some box with borders.

<Button
    android:id="@+id/carbgraph"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_x="230dp"
    android:layout_y="378dp"
    android:text="Button" />

<ProgressBar
    android:id="@+id/progressBarforcals"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="280dp"
    android:layout_height="wrap_content"
    android:layout_x="15dp"
    android:layout_y="346dp" />

<TextView
    android:id="@+id/calsinmenu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_x="16dp"
    android:layout_y="320dp"
    android:text="TextView" />

Answer 1

Put your widgets in a layout (LinearLayout for example) and edit this layout background as below:

<LinearLayout 
   ...
   android:background="@drawable/background"
</LinearLayout>

Then create an XML file in your drawable folder named background.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke 
        android:width="3dp" 
        android:color="#838c7f">
    </stroke>

    <padding 
        android:left="3dp" 
        android:top="3dp"
    android:right="3dp" 
    android:bottom="3dp">
    </padding>

    <corners android:radius="4dp" />

    <gradient 
        android:startColor="@color/background_start" 
        android:endColor="@color/background_end"/>
</shape>