How to surround views with background colour? Android Studio Java-CodePudding

How could I turn the following UI:

into something like this:

My current code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f2f2f2"
    tools:context=".WelcomePage">

        <EditText
            android:id="@ id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="75dp"
            android:layout_marginRight="75dp"
            android:layout_marginBottom="336dp"
            android:hint="Username"
            android:textColor="@color/white"
            android:textColorHint="@color/white"
            android:textSize="25dp"
            ></EditText>

        <EditText
            android:id="@ id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="75dp"
            android:layout_marginRight="75dp"
            android:layout_marginBottom="240dp"
            android:hint="Password"
            android:inputType="textPassword"
            android:textColor="@color/white"
            android:textColorHint="@color/white"
            android:textSize="25dp"
></EditText>

... button xml code

</androidx.constraintlayout.widget.ConstraintLayout>

I've tried using a RelativeLayout but I can't figure it out. Basically, I just want to put those two edit texts in a black box. How could it be done?

CodePudding user response：

try to add View before both EditTexts and with background set to black and constraints that fills EditTexts, something like this:

<View
  android:background="@color/black"
  app:layout_constraintTop_toTopOf="@ id/username"
  app:layout_constraintBottom_toBottomOf="@ id/password"
  app:layout_constraintStart_toStartOf="@ id/username"
  app:layout_constraintEnd_toEndOf="@ id/username"/>

CodePudding user response：

Put your UI elements inside another layout (e.g LinearLayout) then set background color to that layout. This is how your layouts should be:

Parent Layout{
     LinearLayout{
        android:background="@color/black" // your desired color here 
        ...
        
       User Edittext{...}

       Password Edittext{...}
    }