Android Design Library - Masalah Padding / Margin Tombol Tindakan Mengambang

Saya menggunakan FloatingActionButton baru dari Google Design Library dan saya mendapatkan beberapa masalah padding / margin yang aneh. Gambar ini (dengan opsi tata letak pengembang aktif) berasal dari API 22.

Dan dari API 17.

Ini adalah XML

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_gravity="bottom|right"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="-32dp"
        android:src="@drawable/ic_action_add"
        app:fabSize="normal"
        app:elevation="4dp"
        app:borderWidth="0dp"
        android:layout_below="@+id/header"/>

Mengapa FAB di API 17 jauh lebih besar dari segi padding / margin?

Pembaruan (Okt 2016):

Solusi yang tepat sekarang adalah memasukkan app:useCompatPadding="true"FloatingActionButton Anda. Ini akan membuat padding konsisten di antara berbagai versi API. Namun, ini tampaknya masih membuat margin default sedikit berkurang, jadi Anda mungkin perlu menyesuaikannya. Tapi setidaknya tidak diperlukan lagi gaya khusus API.

Jawaban sebelumnya:

Anda dapat melakukannya dengan mudah menggunakan gaya khusus API. Dalam keadaan normal Anda values/styles.xml, letakkan sesuatu seperti ini:

<style name="floating_action_button">
    <item name="android:layout_marginLeft">0dp</item>
    <item name="android:layout_marginTop">0dp</item>
    <item name="android:layout_marginRight">8dp</item>
    <item name="android:layout_marginBottom">0dp</item>
</style>

dan kemudian di bawah values-v21 / styles.xml, gunakan ini:

<style name="floating_action_button">
    <item name="android:layout_margin">16dp</item>
</style>

dan terapkan gaya ke FloatingActionButton Anda:

<android.support.design.widget.FloatingActionButton
...
style="@style/floating_action_button"
...
/>

Seperti yang telah dicatat orang lain, dalam API <20, tombol menampilkan bayangannya sendiri, yang menambah lebar logis keseluruhan tampilan, sedangkan di API> = 20 menggunakan parameter Elevasi baru yang tidak berkontribusi pada lebar tampilan.

Tidak perlu lagi mengutak - atikstyles.xml atau dengan .javafile. Biarkan saya membuatnya sederhana.

Anda dapat menggunakan app:useCompatPadding="true"dan menghapus margin kustom untuk mempertahankan margin yang sama di berbagai versi Android

Margin / padding ekstra yang Anda lihat di FAB di gambar kedua Anda disebabkan oleh compatPadding ini pada perangkat pra-lollipop . Jika properti ini tidak disetel, properti ini akan diterapkan di perangkat pra-lollopop dan BUKAN di perangkat lollipop +.

Bukti dari konsep

setelah beberapa waktu mencari dan menguji solusi, saya memperbaiki masalah saya dengan menambahkan baris ini ke hanya tata letak xml saya:

app:elevation="0dp"
app:pressedTranslationZ="0dp"

dan ini adalah seluruh tata letak tombol float saya

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        android:src="@drawable/ic_add"
        app:elevation="0dp"
        app:pressedTranslationZ="0dp"
        app:fabSize="normal" />

Ada masalah dalam Pustaka Dukungan Desain. Gunakan metode di bawah ini untuk memperbaiki masalah ini sampai perpustakaan diperbarui. Coba tambahkan kode ini ke aktivitas atau fragmen Anda untuk menyelesaikan masalah. Jaga agar xml Anda tetap sama. Di lollipop ke atas tidak ada margin tapi di bawah ada margin 16dp.

Perbarui Contoh Kerja

XML - FAB ada di dalam RelativeLayout

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="16dp"
    android:layout_marginRight="16dp"
    android:src="@mipmap/ic_add"
    app:backgroundTint="@color/accent"
    app:borderWidth="0dp"
    app:elevation="4sp"/>

Jawa

FloatingActionButton mFab = (FloatingActionButton) v.findViewById(R.id.fab);
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
    ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) mFab.getLayoutParams();
    p.setMargins(0, 0, dpToPx(getActivity(), 8), 0); // get rid of margins since shadow area is now the margin
    mFab.setLayoutParams(p);
}

Ubah dp ke px

public static int dpToPx(Context context, float dp) {
    // Reference http://stackoverflow.com/questions/8309354/formula-px-to-dp-dp-to-px-android
    float scale = context.getResources().getDisplayMetrics().density;
    return (int) ((dp * scale) + 0.5f);
}

Lollipop

Pra Lollipop

Pada pra Lollipop FloatingActionButtonbertanggung jawab untuk menggambar bayangannya sendiri. Oleh karena itu, tampilan harus sedikit lebih besar untuk memberi ruang bagi bayangan. Untuk mendapatkan perilaku yang konsisten, Anda dapat mengatur margin untuk memperhitungkan perbedaan tinggi dan lebar. Saya saat ini menggunakan kelas berikut :

import android.content.Context;
import android.content.res.TypedArray;
import android.support.design.widget.FloatingActionButton;
import android.util.AttributeSet;
import android.view.ViewGroup.MarginLayoutParams;

import static android.os.Build.VERSION.SDK_INT;
import static android.os.Build.VERSION_CODES.LOLLIPOP;

import static android.support.design.R.styleable.FloatingActionButton;
import static android.support.design.R.styleable.FloatingActionButton_fabSize;
import static android.support.design.R.style.Widget_Design_FloatingActionButton;
import static android.support.design.R.dimen.fab_size_normal;
import static android.support.design.R.dimen.fab_size_mini;

public class CustomFloatingActionButton extends FloatingActionButton {

    private int mSize;

    public CustomFloatingActionButton(Context context) {
        this(context, null);
    }

    public CustomFloatingActionButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomFloatingActionButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.obtainStyledAttributes(attrs, FloatingActionButton, defStyleAttr,
                Widget_Design_FloatingActionButton);
        this.mSize = a.getInt(FloatingActionButton_fabSize, 0);
        a.recycle();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (SDK_INT < LOLLIPOP) {
            int size = this.getSizeDimension();
            int offsetVertical = (h - size) / 2;
            int offsetHorizontal = (w - size) / 2;
            MarginLayoutParams params = (MarginLayoutParams) getLayoutParams();
            params.leftMargin = params.leftMargin - offsetHorizontal;
            params.rightMargin = params.rightMargin - offsetHorizontal;
            params.topMargin = params.topMargin - offsetVertical;
            params.bottomMargin = params.bottomMargin - offsetVertical;
            setLayoutParams(params);
        }
    }

    private final int getSizeDimension() {
        switch (this.mSize) {
            case 0: default: return this.getResources().getDimensionPixelSize(fab_size_normal);
            case 1: return this.getResources().getDimensionPixelSize(fab_size_mini);
        }
    }
}

Pembaruan: Pustaka Dukungan Android v23 mengganti nama fab_size dimens menjadi:

import static android.support.design.R.dimen.design_fab_size_normal;
import static android.support.design.R.dimen.design_fab_size_mini;

Jawaban Markus bekerja dengan baik untuk saya setelah memperbarui ke v23.1.0 dan membuat beberapa penyesuaian pada impor (dengan plugin gradle terbaru kami menggunakan aplikasi R kami alih-alih R perpustakaan desain). Berikut adalah kode untuk v23.1.0:

// Based on this answer: https://stackoverflow.com/a/30845164/1317564
public class CustomFloatingActionButton extends FloatingActionButton {
    private int mSize;

    public CustomFloatingActionButton(Context context) {
        this(context, null);
    }

    public CustomFloatingActionButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    @SuppressLint("PrivateResource")
    public CustomFloatingActionButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.FloatingActionButton, defStyleAttr,
                R.style.Widget_Design_FloatingActionButton);
        mSize = a.getInt(R.styleable.FloatingActionButton_fabSize, 0);
        a.recycle();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            int size = this.getSizeDimension();
            int offsetVertical = (h - size) / 2;
            int offsetHorizontal = (w - size) / 2;
            ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) getLayoutParams();
            params.leftMargin = params.leftMargin - offsetHorizontal;
            params.rightMargin = params.rightMargin - offsetHorizontal;
            params.topMargin = params.topMargin - offsetVertical;
            params.bottomMargin = params.bottomMargin - offsetVertical;
            setLayoutParams(params);
        }
    }

    @SuppressLint("PrivateResource")
    private int getSizeDimension() {
        switch (mSize) {
            case 1:
                return getResources().getDimensionPixelSize(R.dimen.design_fab_size_mini);
            case 0:
            default:
                return getResources().getDimensionPixelSize(R.dimen.design_fab_size_normal);
        }
    }
}

Dalam file layout, setel elevasi atribut ke 0. karena dibutuhkan elevasi default.

app:elevation="0dp"

Sekarang dalam aktivitas, periksa level api yang lebih besar dari 21 dan setel elevasi jika perlu.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    fabBtn.setElevation(10.0f);
}