card view appearing on top of screen when backround image is added though i use android:layout

I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center. I want the card view at the center.
activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical"
    android:background="@drawable/image">

    <androidx.cardview.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@ id/card_view"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="4dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
        <Spinner
            android:id="@ id/simpleSpinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            />


        <EditText
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:numeric="integer"
            android:maxLength="10"
            android:hint="Enter phone number"
              />
        </LinearLayout>
    </androidx.cardview.widget.CardView>
    <Button
        android:id="@ id/buttonOTP"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="20dp"
        android:layout_width="330dp"
        android:layout_height="wrap_content"
        android:text="        Send OTP         " />
    </LinearLayout>

custom_spinner_items.xml

   

 <

    ?xml version="1.0" encoding="utf-8"?>
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
        
        
            <ImageView
                android:id="@ id/imageView"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:padding="5dp"
                android:src="@drawable/ic_launcher" /><!--Make sure image is present in Drawable folder-->
        
            <TextView
                android:id="@ id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
        
                android:text="Enter phone number"
                android:textColor="#000" />
        
        </LinearLayout>

This is how the screen appears:

this is how the screen appears without android:background="@drawable/image" tag->

But when I chnged as follows, I get this android:layout_marginTop="250dp" in card view. I get this->

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical"
    android:background="@drawable/image">

    <androidx.cardview.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@ id/card_view"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="250dp"
        card_view:cardCornerRadius="4dp">
        <LinearLayout
            android:layout_marginTop="15dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center">
        <Spinner
            android:id="@ id/simpleSpinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            />


        <EditText
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:numeric="integer"
            android:maxLength="10"
            android:hint="Enter phone number"
              />
        </LinearLayout>
    </androidx.cardview.widget.CardView>
    <Button
        android:id="@ id/buttonOTP"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="20dp"
        android:layout_width="330dp"
        android:layout_height="wrap_content"
        android:text="        Send OTP         " />
    </LinearLayout>

Is this the right way to do this? But, look at the card view and space on its top, I want to reduce that space.

CodePudding user response：

You have to use match_parent for your Root layout height instead of wrap_content and instead of android:layout_gravity="center" use android:gravity="center"

Copy below code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:background="@drawable/image">
    <androidx.cardview.widget.CardView
        android:id="@ id/card_view"
        android:layout_width="330dp"
        card_view:cardElevation="4dp"
        android:layout_height="60dp"
        card_view:cardCornerRadius="4dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:gravity="center">
            <Spinner
                android:id="@ id/simpleSpinner"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                />
            <EditText
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:inputType="number"
                android:maxLength="10"
                android:hint="Enter phone number" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>
    <Button
        android:id="@ id/buttonOTP"
        android:layout_marginTop="20dp"
        android:layout_width="330dp"
        android:gravity="center"
        android:layout_height="50dp"
        android:text="Send OTP" />
</LinearLayout>

CodePudding user response：

in your viewgroup linearlayout, change the attribute android:layout_gravity="center" to android:gravity="center"

The attribute android:layout_gravity is used to specify how the gravity of a view itself aligns within its parent

The attribute android:gravity is used to specify how a parent view should position its children or content

since you want the contents of linearlayout to be centered within itself. use android:gravity

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:background="@drawable/image">
    
    <androidx.cardview.widget.CardView>
         <!-- your card view content -->
    </androidx.cardview.widget.CardView>

<Button
    android:id="@ id/buttonOTP"
    android:layout_marginTop="20dp"
    android:layout_width="330dp"
    android:layout_height="wrap_content"
    android:text="Send OTP" />

</LinearLayout>