CardView button and text do not align

Question

I had a problem creating CardView with a button that aligns with the beginning of the text:

I keep track of the sizes indicated in the Material Design specification for padding and text sizes. This is the XML I'm using:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingBottom="16dp" android:paddingLeft="16dp" android:paddingRight="16dp" android:paddingTop="24dp" android:text="Title goes here" android:textColor="@color/primary_text_default_material_light" android:textSize="24sp" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingBottom="16dp" android:paddingLeft="16dp" android:paddingRight="16dp" android:text="Subtitle here" android:textSize="14sp" /> <Button style="@style/Base.Widget.AppCompat.Button.Borderless.Colored" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp" android:padding="0dp" android:text="Action 1" android:textColor="@color/accent_material_light" /> </LinearLayout> </android.support.v7.widget.CardView> 

Visually, there is a gap between the beginning of the text and the text of the button without borders.

As shown in the Material Specification , the button and the beginning of the title and subtitles should line up:

Where am I going wrong?

Answer 1

You must remove the attributes android: layout_margin and android: padding and replace with android: paddingLeft = "8dp", as shown below. You should also consider using android: paddingStart to better support the right to left layouts and use android: paddingRight and android: paddingEnd to better maintain symmetry from right to left.

  <Button style="@style/Base.Widget.AppCompat.Button.Borderless.Colored" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="8dp" android:text="Action 1" android:textColor="@color/accent_material_light" /> 

Answer 2

You need to set the gravity of the button

 android:gravity="start|center_vertical" 

Answer 3

try android: paddingLeft = "0dp"