web-dev-qa-db-ja.com

レイアウトの他のビューによって隠されたマテリアルの波及効果

ImageButtonに波及効果を追加しましたが、親ビューImageViewの背景として使用されるRelativeLayoutによって非表示になっています。

レイアウトファイルは次のとおりです。

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
                xmlns:tools="http://schemas.Android.com/tools"
                Android:layout_width="match_parent"
                Android:layout_height="172dp"
                Android:orientation="vertical"
                Android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        Android:id="@+id/drawerBackgroundImageView"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:scaleType="centerCrop"
        Android:src="@drawable/drawer_background"/>

    [...]

    <ImageButton
        Android:id="@+id/drawerLogoutButton"
        Android:layout_width="32dp"
        Android:layout_height="32dp"
        Android:layout_alignBottom="@id/drawerEmailTextView"
        Android:layout_alignParentEnd="true"
        Android:layout_alignParentRight="true"
        Android:layout_marginEnd="@dimen/activity_horizontal_margin"
        Android:layout_marginRight="@dimen/activity_horizontal_margin"
        style="@style/FlatButtonStyle"
        Android:scaleType="centerInside"
        Android:src="@drawable/ic_logout_white_24dp"/>

</RelativeLayout>

（他にもたくさんの見解がありますが、ここでは関係ありません）

画像に特定のImageViewを設定する必要があるため、RelativeLayoutの背景としてscaleTypeを使用しているため、基本的なAndroid:backgroundプロパティ。

波及効果はマスクレイヤーがないため非表示になっており（ボタンの境界を超えて拡張したい）、ImageButtonの親ビューを使用して表示されます。 ImageViewを削除すると、効果が完全に表示されます。

問題のあるImageViewの上に波及効果を表示する方法はありますか？

androidandroid-layoutmaterial-designrippledrawable
15
Jukurrpa

まったく同じ問題があり、このスレッドを使用して解決しました： https://code.google.com/p/Android/issues/detail?id=15588

問題のプレビュー：

解決前：

Before

解決後：

After

説明：

「フチなしボタンは、最も近い背景にコンテンツを描画します。ボタンは、ボタン自体とImageViewの間に背景がない可能性があるため、ImageViewの下に描画されます。」

解決策：

"透明な背景を使用してください（Android:background="@Android:color/transparent"）ボタンを含むレイアウト（ImageViewの下）。これにより、波及効果の最大範囲が決まります。」

<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
                ...>

    <!-- Your background ImageView -->
    <ImageView
        Android:id="@+id/drawerBackgroundImageView"
        Android:src="@drawable/drawer_background"
        ... />

        <!-- ... -->

    <!-- HERE, you need a container for the button with the transparent
         background. Let's say you'll use a FrameLayout -->
    <FrameLayout
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@Android:color/transparent">

        <!-- Maybe more items --> 

        <!-- Button with borderless ripple effect -->
        <ImageButton
            Android:id="@+id/drawerLogoutButton"
            Android:background="?selectableItemBackgroundBorderless"
            ... />

    </FrameLayout>

</FrameLayout>

それが役に立てば幸い。

51
Santiago Vanegas

同じ問題が発生しています。私がこれまでに見つけた唯一の解決策は、リップルがビューによってマスクされているため（ボーダレスではない）、100％大丈夫ではありません。

解決策（回避策）：ImageButtonを他のビューで囲み、次のようにレイアウトの背景ではなく前景にリップルを設定します。

<ImageView ... /> 

<FrameLayout
    ...
    Android:clickable="true"
    Android:focusable="true"
    Android:foreground="?attr/selectableItemBackgroundBorderless" >

    <ImageButton />
</FrameLayout>

画像の後ろに波紋が描かれている理由を誰かが説明してくれたら本当に嬉しいです。また、Googleフォトアプリを見ると、画像の詳細では、画像ビューの上に波紋のある透明なアイコンがあります。これを再現したいのですが、波紋を前景にすることができません。透明な画像ボタンをすべてに配置する方法を知っているが、それでも波紋がある人はいますか？

最終的な解決策を編集するここでまったく同じ質問を見つけることができます リンク

何が起こっているのかについての素晴らしい説明があります。解決策は同じですが、それに加えて、追加することで長方形のマスクを解決します

Android:clipChildren="false"
Android:clipToPadding="false"

あなたのレイアウトに。今、あなたの波紋はボーダレスでなければなりません（それは私のために働きました）。レイアウトxmlは次のようになります。

<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
...
Android:clipChildren="false"
Android:clipToPadding="false">

    <ImageView ... /> 

    <FrameLayout
        ...

        Android:clickable="true"
        Android:foreground="?attr/selectableItemBackgroundBorderless">
       <ImageView ... />
    </FrameLayout>

</FrameLayout>
7
Marek Salát

私はこれが古い投稿であることを知っていますが、今日はこれにかなり苦労しました。それで私は最終的に理解できたものを投稿し、おそらく他の誰かがそれから利益を得るかもしれません。事前に1つの重要な強調点として、常にRTFMを実行してください！

1）ストーリー

タブアイテムに無制限の波及効果を使用し、その結果、AppBarLayout領域全体に波及させることを目指しました。 @Android:color/transparentを最初のラッピング親としてTabLayoutに適用し、AppBarLayoutに背景色を指定しましたが、それでも、TabLayoutの高さの境界でリップルがカットされていました。

2）ストーリーの教訓（RTFM）

だから私はAndroid知識：ドキュメントの巣に走り、これを見つけました：

？android：attr/selectableItemBackgroundBorderlessは、ビューを超えて広がる波紋に対応します。これは、null以外の背景を持つビューの最も近い親に描画され、境界が設定されます。

3）行動方針

Layout Inspectorを使用して、@Android:color/transparentは透過的ですが（duh！）、実際にはビューのbg属性の値として0を割り当てますが、ゼロはnullではありませんしたがって、リップルは最も近い親で制限されます。

4）結論

それを手に、TabLayoutのAndroid:backgroundプロパティを透明ではなく@nullに設定しました。これで、AppBarLayoutの領域に小さな波紋が広がりました。

5）エンディング：** Android＆SO FTW！

Wordの問題に光を当てるこの投稿のすべての人への小道具。乾杯！

5
Xhezairi

ImageButtonをFrameLayout内にラップした後、タッチすると長方形になりました。 FrameLayoutに楕円形の背景を適用し、タッチすると円形になりました。

0
PK Gupta