Material style button bar layout

Question

I’m trying to create a button bar at the bottom of the screen ("Cancel" and "Save" buttons similar to the one used by Google Drive:

However, nowhere in the Material guidelines have I found anything related to this bar. There is no specification of height, margins, etc. The closest I found was that, but however this link does not cover fixed bars at the bottom of the screen.

So far, I have that result:

But it just seems wrong. It does not appear to be the same height, the positioning of the buttons is different and I still could not put the dividing line at the top. This is my XML:

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context="com.renanlazarotto.fserv2.activities.NovoChamadoActivity">

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/chamados_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/ciano_500"
    app:theme="@style/Theme.AppCompat"
    app:popupTheme="@style/Theme.AppCompat.Light" />

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/novo_scroll"
    android:layout_below="@+id/chamados_toolbar"
    android:layout_above="@+id/novo_botoes"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true">

    ...
</ScrollView>

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:id="@+id/novo_botoes"
    android:gravity="right"
    android:paddingRight="16dp"
    android:layout_alignParentBottom="true"
    android:paddingLeft="16dp"
    android:layout_marginTop="24dp">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="36dp"
        android:text="@string/novo_botao_cancelar"
        android:id="@+id/novo_botao_cancelar"
        style="?android:attr/borderlessButtonStyle"
        android:minWidth="64dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"  />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="36dp"
        android:text="@string/novo_botao_abrir"
        android:id="@+id/novo_botao_abrir"
        style="?android:attr/borderlessButtonStyle"
        android:minWidth="64dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:textColor="@color/ciano_500" />
</LinearLayout>

The item in question is the latest Linearlayout. How can I improve this layout so it looks more like the Google Drive image?

Answer 1

I believe the bar you’re referring to is the action area of a Dialog. I believe even that screen of Google Drive is a Dialog in Full Screen.

To Dialog in Fullscreen they give another disposition of actions, but this form of the Google Drive does not contradict the Guidelines.

The link to Dialogs in Fullscreen is http://www.google.com/design/spec/components/dialogs.html#dialogs-confirmation-dialogs (section of Full-screen dialogs)

The metrics for this action button area are as follows:

More details on: http://www.google.com/design/spec/components/dialogs.html#dialogs-specs

References:

• http://www.google.com/design/spec/components/dialogs.html