web-dev-qa-db-fra.com

[Android L] Bouton circulaire Matériau Android

http://imgur.com/KafNkf8Android L

Alors, comment pourrait-on implémenter le bouton circulaire présenté dans Android L? Quel est également le nom technique du bouton circulaire, le code XML serait apprécié.

androidxmlandroid-5.0-lollipop
25
M0NKEYRASH

Le bouton est appelé FAB (Floating Action Button), il est assez simple à réaliser.

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>

et votre fichier de mise en page pour définir le bouton FAB.

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

Enfin, l'ondulation affecte lorsque vous appuyez sur le bouton. 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>

Profitez de votre nouveau FAB. Veuillez garder à l'esprit que c'est pour Android L uniquement!

[~ # ~] modifier [~ # ~] Ceci a été mis à jour à: https://stackoverflow.com/a/24548910/4352176

48
M0NKEYRASH

Il existe un moyen plus simple et pour toutes les versions (v7):

<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" />

Regardez style = "@ style/AppTheme" Le style que j'ai défini pour l'ancienne version est:

<style name="AppTheme" parent="AppTheme.Base"/>

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">

Pour Android Lollipop est:

<style name="AppTheme" parent="Android:Theme.Material.Light.DarkActionBar">

La forme que l'on peut dessiner pour le cercle est:

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="oval">
    <solid Android:color="#81D4FA"/>
</shape>

Cela fonctionne très bien pour tous Android, il crée automatiquement l'ombre du cercle dans Lollipop.

14
Jose Mª

Vous devez définir un autre dessinable pour cela. C'est assez simple en fait, mais non documenté.

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

Je l'ai obtenu ici: https://github.com/romainguy/google-io-2014/blob/7c174c7901d8cd2601807dcd17f3df7ed88fbee9/app/src/main/res/drawable/info_background.xml

N'oubliez pas de régler l'élévation et le contour

3
nickmartens1980