Android 登录框周围的框架

我正在尝试在我的Android登录框周围制作一个框架。 这里有两张图片解释了我所拥有的和我所寻找的：

我的login.xml文件：

<?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="fill_parent"
    android:layout_height="fill_parent"
    android:fitsSystemWindows="true">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!-- Logo -->
        <ImageView
            android:id="@+id/imageViewLogo"
            android:layout_width="wrap_content"
            android:layout_height="72dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="24dp"
            android:layout_marginTop="24dp"
            android:src="@drawable/logo" />
        <!-- //Logo -->

        <!-- Login form -->
        <TableLayout
            android:id="@+id/tableLayoutFrame"
            android:background="@color/colorGray"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal">
            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal">
                <TableLayout
                    android:id="@+id/tableLayoutLogin"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal">

                    <!-- Email -->
                    <TableRow
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="12dp"
                        android:layout_marginRight="12dp"
                        android:layout_marginTop="12dp"
                        android:background="@color/colorWhite">

                        <ImageView
                            android:id="@+id/imageViewEmail"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginEnd="6dp"
                            android:layout_marginTop="12dp"
                            android:src="@drawable/ic_mail_outline_black" />

                        <EditText
                            android:id="@+id/editTextEmail"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_horizontal"
                            android:ems="10"
                            android:inputType="textEmailAddress"
                            android:text="@string/blank" />
                    </TableRow>
                    <!-- // Email -->

                    <!-- Password -->
                    <TableRow
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="12dp"
                        android:layout_marginRight="12dp"
                        android:layout_marginTop="12dp"
                        android:background="@color/colorWhite">

                        <ImageView
                            android:id="@+id/imageViewPassword"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginEnd="6dp"
                            android:layout_marginTop="12dp"
                            android:src="@drawable/ic_lock_black" />

                        <EditText
                            android:id="@+id/editTextPassword"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_horizontal"
                            android:ems="10"
                            android:inputType="textWebPassword" />

                    </TableRow>
                    <!-- //Password -->

                    <!-- Login button -->
                    <TableRow
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="12dp"
                        android:layout_marginRight="12dp"
                        android:layout_marginTop="8dp">

                        <Button
                            android:id="@+id/buttonLogin"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_span="2"
                            android:background="@drawable/btn_primary"
                            android:text="@string/login"
                            android:textAllCaps="false"
                            android:textAppearance="?android:attr/textAppearanceMedium"
                            android:textColor="@color/colorWhite" />

                    </TableRow>
                    <!-- //Login button -->

                    <!-- Forgot password -->
                    <TableRow
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginBottom="12dp"
                        android:layout_marginLeft="12dp"
                        android:layout_marginRight="12dp"
                        android:layout_marginTop="8dp">


                        <TextView
                            android:id="@+id/textViewForgotPassword"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_span="2"
                            android:layout_gravity="center_horizontal"
                            android:text="@string/forgot_password_question_mark" />
                    </TableRow>
                    <!-- //Forgot password -->

                </TableLayout>
            </TableRow>
        </TableLayout>
        <!-- //Login form -->

        <!-- New user -->
        <Button
            android:id="@+id/buttonSignUp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="22dp"
            android:textAllCaps="false"
            android:text="@string/new_user_sign_up" />
        <!-- //New user -->
    </LinearLayout>
</ScrollView>

---

是否可以使灰色框架填充设计的水平部分？也许我根本不需要使用表格布局来实现这一点？

在表格布局中添加左右边距，以减少灰色部分。然后相应地调整编辑文本的边距。

将TableLayout的布局宽度设置为与父项匹配：

    <TableLayout
        android:id="@+id/tableLayoutFrame"
        android:background="@color/colorGray"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">

---

您可以在TableLayout设置颜色属性之前定义linearLayout，请尝试上面的代码

<?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="fill_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="wrap_content">

    <!-- Logo -->
    <ImageView
        android:id="@+id/imageViewLogo"
        android:layout_width="wrap_content"
        android:layout_height="72dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="24dp"
        android:layout_marginTop="24dp"
        android:src="@drawable/logo" />
    <!-- //Logo -->

    <!-- Login form -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@color/colorGray">
    <TableLayout
        android:id="@+id/tableLayoutFrame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">
        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal">
            <TableLayout
                android:id="@+id/tableLayoutLogin"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal">

                <!-- Email -->
                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="12dp"
                    android:layout_marginRight="12dp"
                    android:layout_marginTop="12dp"
                    android:background="@color/colorWhite">

                    <ImageView
                        android:id="@+id/imageViewEmail"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="6dp"
                        android:layout_marginTop="12dp"
                        android:src="@drawable/ic_mail_outline_black" />

                    <EditText
                        android:id="@+id/editTextEmail"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:ems="10"
                        android:inputType="textEmailAddress"
                        android:text="@string/blank" />
                </TableRow>
                <!-- // Email -->

                <!-- Password -->
                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="12dp"
                    android:layout_marginRight="12dp"
                    android:layout_marginTop="12dp"
                    android:background="@color/colorWhite">

                    <ImageView
                        android:id="@+id/imageViewPassword"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="6dp"
                        android:layout_marginTop="12dp"
                        android:src="@drawable/ic_lock_black" />

                    <EditText
                        android:id="@+id/editTextPassword"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:ems="10"
                        android:inputType="textWebPassword" />

                </TableRow>
                <!-- //Password -->

                <!-- Login button -->
                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="12dp"
                    android:layout_marginRight="12dp"
                    android:layout_marginTop="8dp">

                    <Button
                        android:id="@+id/buttonLogin"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_span="2"
                        android:background="@drawable/btn_primary"
                        android:text="@string/login"
                        android:textAllCaps="false"
                        android:textAppearance="?android:attr/textAppearanceMedium"
                        android:textColor="@color/colorWhite" />

                </TableRow>
                <!-- //Login button -->

                <!-- Forgot password -->
                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginBottom="12dp"
                    android:layout_marginLeft="12dp"
                    android:layout_marginRight="12dp"
                    android:layout_marginTop="8dp">


                    <TextView
                        android:id="@+id/textViewForgotPassword"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_span="2"
                        android:layout_gravity="center_horizontal"
                        android:text="@string/forgot_password_question_mark" />
                </TableRow>
                <!-- //Forgot password -->

            </TableLayout>
        </TableRow>
    </TableLayout>

    </LinearLayout>

    <!-- //Login form -->

    <!-- New user -->
    <Button
        android:id="@+id/buttonSignUp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        android:textAllCaps="false"
        android:text="@string/new_user_sign_up" />
    <!-- //New user -->
</LinearLayout>