Android L FAB Button shadow

In the Material Design guidelines Google presented a new style of button, the FAB Button. I found instructions how to make it but I have trouble adding the shadow. How can this be achieved?

Answers


Check out the "activity.java", there is probably the code you need.

I made the Fab - Button like this:

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);

This code will be shown as error in android studio v0.8.1, so as other android l components. It will be fixed in the next version.

Result:


You can use a Button:

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

where the ic_action_add is your icon.

drawable/ripple.xml is:

<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 is:

<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 is

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

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

With the elevation attribute you should set the Outline via code:

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);
    }        
}

The problem with the circular shadow can be easily solved without any tricks with Outline: just add these properties to the button in the XML layout (in addition to the custom background):

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

Although Android Studio may display it wrong in the layout preview, it works fine when launched on a device.


Need Your Help

Merge Sort - Segmentation Error

c++ segmentation-fault mergesort

I've been programming in Python for more than a year now, and I just moved back to C++, to learn a few basic algorithms. I started with merge sort, but it gives me a segmentation errror. Help would...

node.js mongo db write concern

node.js mongodb

I am running node.js 10.22, windows 8 and mongodb not sure what version, but I just downloaded it today, when I run my code I am getting a message, please ensure you set the default write concern, ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.