CardView button and text not aligning

Question

I'm having a problem creating a CardView with a button that aligns to the start of the text:

I'm following the dimensions set out in the Material Design spec for the 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's a gap between the start of the text and borderless button text.

As shown in the Material Design spec, the button and the start of the title and subtitle should line up:

Where am I going wrong?

Answer 1

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

    <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"