Reputation: 894
https://i.sstatic.net/7vvPa.jpg
So, how would someone go about implementing the circular button that is showcased in android L? Also what is the technical name of the the circular button, XML code would be appreciated.
Upvotes: 25
Views: 48354
Reputation: 130
There is a easier and for all version (v7) way:
<ImageButton style="@style/AppTheme"
android:layout_width="60dp"
android:layout_height="60dp"
android:text="New Button"
android:id="@+id/OkBt"
android:elevation="10dp"
android:src="@drawable/ic_keyboard_return_black_36dp"
android:background="@drawable/circle" />
Look at style="@style/AppTheme" The style that I have set for old version is:
<style name="AppTheme" parent="AppTheme.Base"/>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
For Android lollipop is:
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
The shape drawable for circle is:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#81D4FA"/>
</shape>
It works fine for all android version, it make automatically the circle shadow in Lollipop.
Upvotes: 13
Reputation: 894
The button is called a FAB(Floating Action Button), it's quite simple to make.
Activity.java
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layoutfab);
//Outline
int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
Outline outline = new Outline();
outline.setOval(0, 0, size, size);
findViewById(R.id.fab).setOutline(outline);
}
}
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>
and your layout file to define the FAB button.
<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="match_parent"
tools:context=".MainActivity">
<ImageButton
android:id="@+id/fab"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_width="@dimen/fab_size"
android:layout_height="@dimen/fab_size"
android:layout_gravity="bottom|right"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:background="@drawable/ripple"
android:stateListAnimator="@anim/anim"
android:src="@drawable/ic_action_add"
android:elevation="4dp"
/>
</RelativeLayout>
Finally the ripple affect when you press the button. 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>
Enjoy your new FAB. Please keep in mind this is for android L only!
EDIT This has been updated at: https://stackoverflow.com/a/24548910/4352176
Upvotes: 49
Reputation: 1593
You need to define another drawable for it. It is quite simple actually, but undocumented.
<?xml version="1.0" encoding="utf-8"?>
<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>
I got this from here: https://github.com/romainguy/google-io-2014/blob/7c174c7901d8cd2601807dcd17f3df7ed88fbee9/app/src/main/res/drawable/info_background.xml
Don't forget to set the elevation and the outline
Upvotes: 4