get rounded elevation-shadow on FloatingActionButton (v21)

Question

I am pretty new to android development and yes I have tried a lot to fix this before asking.

So I am trying to implement the FloatingActionButton (only on v21 for simplicity) and I just can't get the elevation-shadow to be rounded.

Here are the code lines I have already:

In the main activity .java (named overview):

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_overview);
        ImageButton fabbutton = (ImageButton) findViewById(R.id.fab);

        ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
        @Override
        public void getOutline(View view, Outline outline) {
            int size = getResources().getDimensionPixelSize(R.dimen.round_button_diameter);
            outline.setOval(0, 0, size, size);
        }
};
fabbutton.setOutlineProvider(viewOutlineProvider);

main activity .xml:

    <ImageButton
    android:id="@+id/fab"
    android:layout_width="@dimen/round_button_diameter"
    android:layout_height="@dimen/round_button_diameter"
    android:layout_gravity="end|bottom"
    android:background="@drawable/oval_ripple"
    android:src="@android:drawable/ic_input_add"
    android:tint="@android:color/white"
    android:elevation="@dimen/elevation_low"
    android:stateListAnimator="@anim/button_elevation"
    android:layout_alignBottom="@+id/expandableListView"
    android:layout_alignEnd="@+id/expandableListView"
    android:layout_marginRight="@dimen/add_button_margin"
    android:layout_marginBottom="@dimen/add_button_margin"
    android:contentDescription="@string/fab"
    android:cropToPadding="false" />

dimens.xml

<dimen name="round_button_diameter">56dp</dimen>
<dimen name="add_button_margin">16dp</dimen>
<dimen name="elevation_low">8dp</dimen>
<dimen name="elevation_high">14dp</dimen>

oval_ripple.xml

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

button_elevation.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
    <objectAnimator
        android:propertyName="translationZ"
        android:duration="@android:integer/config_shortAnimTime"
        android:valueFrom="8dp"
        android:valueTo="14dp"
        android:valueType="floatType"/>
</item>
<item>
    <objectAnimator
        android:propertyName="translationZ"
        android:duration="@android:integer/config_shortAnimTime"
        android:valueFrom="14dp"
        android:valueTo="8dp"
        android:valueType="floatType"/>
</item>

I hope I haven't forget any important code-part and sorry for the long post but I am pretty helpless. If it would help I also could upload the AndroidStudio project file.

Greetings from Germany and thanks for the answers. :)

Did you try my solution? – Konrad Krakowiak Feb 14 '15 at 13:54 — Konrad Krakowiak, Feb 14 '15 at 13:54

score 0 · Accepted Answer · answered Feb 14 '15 at 10:36

0

Why do not you use library?

Add this line in you build.gradle

dependencies {
     ...
     compile 'com.getbase:floatingactionbutton:1.3.0'
     ...
}

and in your layout xml file use this:

<com.getbase.floatingactionbutton.FloatingActionButton
    android:id="@+id/common_ring_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="10dp"
    android:layout_marginEnd="10dp"
    android:layout_marginRight="10dp"
    fab:fab_colorNormal="#FF2222"
    fab:fab_colorPressed="#FF0000"
    fab:fab_icon="android:drawable/ic_input_add"/>

But you remember you have to put FloatingButton inside of RelativeLayout

If you have any problem ask in comment :)

answered Feb 14 '15 at 10:36

Konrad Krakowiak

12,285
11
58
45

actually I don't really know how to use libaries :D I have added your code but know Android Studio is telling me in "FloatingActionButton.class" that the source is not found – Feb 17 '15 at 17:10
Did you added dependencies to build.gradle? – Konrad Krakowiak Feb 17 '15 at 20:17
Yes I did. After an reboot of Android Studio it worked. Do your know how to change the color of the plus icon? Do I have the change the resource itself or is there a xml line to do so? And how do I get the ripple effect now? Thanks for your help, I really appreciate it :) – Feb 18 '15 at 20:24
That's grate! I am glad that I could help you. – Konrad Krakowiak Feb 18 '15 at 20:26
And though it's pretty easy to ask every time I have a problem, I don't want to do so. Do you know a side/book/whatever that helps me with learning to develop apps in Android Studio? whould be great – Feb 18 '15 at 20:33
There is many books to learn but I think one of the best way place to find information is internet and place like this. You can look some getting started tutorial or sth like this or read some blogs. – Konrad Krakowiak Feb 18 '15 at 20:37

get rounded elevation-shadow on FloatingActionButton (v21)

1 Answers1