web-dev-qa-db-ja.com

ビューマージンでのフローティングアクションボタンのシャドウクリッピング

コーディネーターレイアウトの右下にフローティングアクションボタンが固定されています。ビューの余白から16dpです（余白はデフォルトで含まれ、dimens.xmlファイルで指定されています）が、その影はクリッピングされており、正方形の外観になっています（以下を参照）。フローティングアクションボタンをビューの余白から32dpに移動すると、その影が正しく表示されます。

標高属性（Android:elevation="5dp"）を設定しようとしましたが、効果がないようです。また、属性borderWidthを0（app:borderWidth="0dp"）に設定しようとしましたが、効果がありませんでした。

フローティングアクションボタンがこのように動作する理由はありますか？

[〜＃〜] xml [〜＃〜]

<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    xmlns:app="http://schemas.Android.com/apk/res-auto" 
    Android:id="@+id/coordinator_layout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:paddingBottom="@dimen/activity_vertical_margin"
    Android:paddingLeft="@dimen/activity_horizontal_margin"
    Android:paddingRight="@dimen/activity_horizontal_margin"
    Android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/create_floating_action_button"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:src="@drawable/ic_create_white_48dp"
        app:layout_anchor="@id/coordinator_layout"
        app:layout_anchorGravity="bottom|right" />

</Android.support.design.widget.CoordinatorLayout>

画像

FAB 16dp from the margin.FAB 32dp from the margin.

androidandroid-layoutshadowfloating-action-button
18
user5030423

問題は親が影を切り取っているです。シャドウをクリッピングしている親（必ずしも階層内の次の親である必要はありません）を探し、これをxmlのビューに追加します。

Android:clipChildren="false"

私は今これをテストしていて、ビューをクリッピングしていて正常に機能している親にその行を削除して追加しています。

別のコンテナを追加したり、マージンを変更したりすることは、私がお勧めしない回避策です。パッチが多すぎます。ミニファブのコンテナサイズは異なり、APIレベル（<21または> = 21）に応じて異なるサイズが必要です。

30
Sotti

同様の問題がありました。 2つのことをする：

  1. Android.support.design.widget.CoordinatorLayout 削除する Android:paddingRight="@dimen/activity_horizontal_margin"およびAndroid:paddingBottom="@dimen/activity_vertical_margin"

  2. Android.support.design.widget.FloatingActionButton 追加 Android:layout_marginRight="@dimen/activity_horizontal_margin"およびAndroid:layout_marginBottom="@dimen/activity_horizontal_margin"

説明= FABには影を表示する場所がなかったため、完全には表示されていません。

11
Mateusz Pryczkowski

私も同じ問題を抱えていました。しかし、FABのためにマージン値を捨てることはできませんでした。そこで、階層に別のレイヤーを追加しました。これにより、親を混乱させることなく、FABを目的の場所に正確に配置することができました。これで、CoordinatorLayoutのためにCoordinatorLayout内にFABができました。以下は私の変更したレイアウトファイルです。

<Android.support.design.widget.CoordinatorLayout
    Android:id="@+id/ddd"
    xmlns:Android="http://schemas.Android.com/apk/res/Android" 
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:background="@drawable/tile"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.design.widget.CoordinatorLayout
        Android:id="@+id/fff"
        Android:padding="10dp"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

        <ScrollView
            Android:id="@+id/scroll_container"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">

            <!-- All my views under a LinearLayout parent -->

        </ScrollView>

    </Android.support.design.widget.CoordinatorLayout>

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fabAdd"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:contentDescription="Add Text"
        Android:visibility="visible"
        Android:layout_margin="10dp"
        app:backgroundTint="@color/primary"
        app:layout_anchor="@+id/fff"
        app:layout_anchorGravity="bottom|right|end"/>

</Android.support.design.widget.CoordinatorLayout>
1
Henry

これをparentビューに追加しました：

Android:clipToPadding="false"
0
fireb86