web-dev-qa-db-ja.com

Android LFABボタンの影

Googleが提示したマテリアルデザインガイドラインでは、 新しいスタイルのボタン 、FABボタン。作り方の説明を見つけましたが、影を付けるのに苦労しています。これはどのように達成できますか？

androidbuttonshadowandroid-5.0-lollipopfloating-action-button
11
zeTechMoy

「activity.Java」をチェックしてください。おそらく必要なコードがあります。

私はFab-ボタンを次のように作成しました：

layout.xml

    <Button
    style="?android:attr/buttonStyleSmall"
    Android:layout_width="56dp"
    Android:layout_height="56dp"
    Android:text="+"
    Android:textSize="40sp"
    Android:background="@drawable/ripple"
    Android:id="@+id/fabbutton"
    Android:layout_margin="@dimen/activity_horizontal_margin"
    Android:elevation="3dp"
    Android:paddingBottom="16dp"
    Android:fontFamily="sans-serif-light"
    Android:layout_alignParentEnd="true"
    Android:layout_gravity="right|bottom" />

ripple.xml

<?xml version="1.0" encoding="utf-8"?>
 <ripple Android:color="#ffb300" xmlns:Android="http://schemas.Android.com/apk/res/Android">
 <item Android:drawable="@drawable/fab"></item>
</ripple>

fab.xml

<?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
  <solid Android:color="@color/accentColor" />
</shape>

Activity.Java

    import Android.graphics.Outline;
    ...
    Button fab = (Button) rootView.findViewById(R.id.fabbutton);

    Outline mOutlineCircle;
    int shapeSize = getResources().getDimensionPixelSize(R.dimen.shape_size);
    mOutlineCircle = new Outline();
    mOutlineCircle.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);

    fab.setOutline(mOutlineCircle);
    fab.setClipToOutline(true);

このコードは、Android studio v0.8.1、他のAndroid lコンポーネントと同様にエラーとして表示されます。次のバージョンで修正される予定です。

結果：

enter image description here

20
yannickpulver

ボタンを使用できます：

<ImageButton
        Android:id="@+id/fab"
        Android:background="@drawable/ripple"
        Android:stateListAnimator="@anim/anim"
        Android:src="@drawable/ic_action_add"
        Android:elevation="4dp"
        />

どこ ic_action_addはあなたのアイコンです。

drawable/ripple.xmlは：

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:color="?android:colorControlHighlight">
    <item>
        <shape Android:shape="oval">
            <solid Android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

anim/anim.xmlは：

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:state_enabled="true"
        Android:state_pressed="true">
        <objectAnimator
            Android:duration="@Android:integer/config_shortAnimTime"
            Android:propertyName="translationZ"
            Android:valueFrom="@dimen/button_elevation"
            Android:valueTo="@dimen/button_press_elevation"
            Android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
            Android:duration="@Android:integer/config_shortAnimTime"
            Android:propertyName="translationZ"
            Android:valueFrom="@dimen/button_press_elevation"
            Android:valueTo="@dimen/button_elevation"
            Android:valueType="floatType" />
    </item>
</selector>

Dimens.xmlは

<resources>
    <dimen name="fab_size">56dp</dimen>

    <dimen name="button_elevation">2dp</dimen>
    <dimen name="button_press_elevation">4dp</dimen>
</resources>

elevation属性を使用して、コードを介してOutlineを設定する必要があります。

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layoutfab);

        //Outline            
        Button fab = (Button) findViewById(R.id.fab)

        ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
          @Override
              public void getOutline(View view, Outline outline) {
                 // Or read size directly from the view's width/height
                 int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
                 outline.setOval(0, 0, size, size);
              }
        };
        fab.setOutlineProvider(viewOutlineProvider);
    }        
}
2
Gabriele Mariotti

円形の影の問題は、Outlineを使用するトリックなしで簡単に解決できます。これらのプロパティを（カスタム背景に加えて）XMLレイアウトのボタンに追加するだけです。

Android:elevation="5dp"
Android:stateListAnimator="@null"

Android Studioはレイアウトプレビューで間違って表示される場合がありますが、デバイスで起動すると正常に動作します。

1
davee44