将视图包装在 xml 中的框中

Question

如何将 XML 代码中的元素包装在像框一样的视图中？这意味着我希望它们看起来像是被分组在某个带有边框的盒子中。

<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

将您的小部件放入布局（例如 LinearLayout）中并编辑此布局背景，如下所示：

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

然后在可绘制文件夹中创建一个名为 background.xml 的 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>