Android CardView center horizontally

Question

I have read several answers on how to align a card view horizontally. I am trying to achieve the following:

Desired Result

This is so far the code I have written (I have followed around 20 answers from different posts, none which have helped me. The problem is the margin or space on the left and the right, I need that space, but the card view expands the whole width.

<RelativeLayout
            android:id="@+id/relativeLayout2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true">

            <TextView
                android:id="@+id/textView8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_alignStart="@+id/mProjectCDCNumCardView"
                android:layout_marginStart="7dp"
                android:layout_marginTop="7dp"
                android:text="DETAIL"
                android:textColor="#000"
                android:textSize="16sp" />

            <android.support.v7.widget.CardView
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:card_view="http://schemas.android.com/tools"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/mProjectCDCNumCardView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="13dp"
                card_view:cardCornerRadius="2dp"
                card_view:contentPaddingLeft="50dp"
                card_view:contentPaddingRight="@dimen/activity_horizontal_margin"
                card_view:contentPaddingTop="20dp"
                card_view:contentPaddingBottom="@dimen/activity_vertical_margin"
                android:background="@drawable/cardview_normal"
                android:layout_centerHorizontal="true"
                android:layout_below="@+id/textView8">

                    <EditText
                        android:id="@+id/mProjectCDCNumEditText"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerHorizontal="true"
                        android:background="@drawable/editborder"
                        android:hint="Project Number"
                        android:inputType="textPersonName"
                        android:padding="10dp" />


            </android.support.v7.widget.CardView>

            <TextView
                android:id="@+id/mProjectAddressLabel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:background="@drawable/editborder"
                android:layout_below="@id/mProjectCDCNumCardView"
                android:ems="16"
                android:padding="10dp"
                android:hint="Location"
                android:textColor="#000"
                android:textSize="18sp"
                android:drawableRight="@drawable/left_arrow"/>



        </RelativeLayout>

Thanks!

Hypoderm

Answer 1

little late to the party here but I really like using ConstraintLayouts. It is super easy to center Views in them.

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

     ... Content ...

    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

This code will center CardView inside of the ConstraintLayout that has the same width as parent. The CardView has width of 200dp and thanks to the constraints it will be centered horizontaly in the Layout.

More info about ConstraintLayout.

Lidialidice

Answer 2

1. In your CardView component, add a LinearLayout component.
2. Add android:gravity="center_horizontal" property to your LinearLayout.

3. In your LinearLayout component add your EditText component.

   <android.support.v7.widget.CardView 
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:cardUseCompatPadding="true"
       app:cardElevation="4dp"
       app:cardCornerRadius="3dp">
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:gravity="center_horizontal">
           <EditText
                   android:id="@+id/mProjectCDCNumEditText"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:layout_centerHorizontal="true"
                   android:background="@drawable/editborder"
                   android:hint="Project Number"
                   android:inputType="textPersonName"
                   android:padding="10dp" />
       </LinearLayout>
   

Gassaway

Answer 3

You just add android:layout_marginStart and android:layout_marginEnd to your cardview.

Vitelline

Answer 4

The height attribute of your layout must be match_parent.

Alethiaaletta