web-dev-qa-db-fra.com

Comment changer la couleur de la bordure FAB Button de la bibliothèque de prise en charge de la conception Android?

Je veux changer la couleur de la bordure des boutons. la couleur de la bordure est blanche, la couleur intérieure est noire ou transparente

J'aimerais que mon bouton ressemble à ceci:

 This is how it should look like

androidandroid-design-librarymaterialfloating-action-button
9
Jiho Heo

fab.xml in drawable

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:innerRadius="0dp"
    Android:shape="ring"
    Android:thicknessRatio="2"
    Android:useLevel="false" >
    <solid Android:color="@Android:color/transparent" />

    <stroke
        Android:width="3dp"
        Android:color="@Android:color/white" />
</shape>

Bouton d'action flottant dans layout 

<Android.support.design.widget.FloatingActionButton
        Android:id="@+id/buttton_float"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:src="@drawable/ic_action_social_notifications"
        Android:background="@drawable/fab"
        Android:layout_margin="@dimen/fab_margin"
        Android:layout_gravity="bottom|right"
        app:fabSize="normal"
        app:backgroundTint="@Android:color/white"
        app:rippleColor="@Android:color/black"
        app:borderWidth="0dp"
        app:elevation="2dp"
        app:pressedTranslationZ="12dp"/>

Remarque: La conception personnalisée de votre FAB est en contradiction avec les directives de Google Material Design pour bouton d'action flottante

8
Vipul Asri

vous pouvez faire un cercle sans dessin

  <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/bottom_navigation_fab"
        style="@style/fab_material"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:layout_centerInParent="true"
        Android:layout_gravity="bottom|center"
        app:borderWidth="3dp"
        Android:backgroundTint="@color/mountain_meadow" // inner circle color
        Android:layout_marginBottom="10dp"
        Android:tint="@color/white"
        app:backgroundTint="@color/white" // border color
        app:srcCompat="@drawable/bottom_nav_star" />

sortie:
 enter image description here

5
saigopi

Commencez par créer une ressource de forme .xml, appelons-la ring.xml et introduisons-la comme suit:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape
            xmlns:Android="http://schemas.Android.com/apk/res/Android"
            Android:innerRadiusRatio="1"
            Android:shape="ring"
            Android:thicknessRatio="1"
            Android:useLevel="false">

            <solid Android:color="#FFF"/>
            <stroke
                Android:width="5dp"
                Android:color="#000"/>
        </shape>
    </item>
    <item>
        <bitmap xmlns:Android="http://schemas.Android.com/apk/res/Android"
                Android:src="@drawable/ic_cast_light"/>
    </item>

</layer-list>

Vous aurez à jouer avec les attributs épaisseur et innerRadius pour bien faire les choses, mais ça devrait le faire! De plus, la source bitmap n’est qu’un élément de remplissage, vous voulez y placer votre image F.

Ensuite, lorsque vous déclarez votre fab, référencez votre bague comme telle:

Android:background="@drawable/ring"

OR

Dans votre code Java, procédez comme suit:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setBackgroundResource(R.drawable.ring);

J'espère que cela t'aides!

2
Joshua King

Si vous souhaitez définir la bordure du bouton Flottant, il vous suffit de faire ces choses. Créez d'abord un fichier XML

fab_background.xml 

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:innerRadius="0dp"
    Android:shape="ring"
    Android:thicknessRatio="2"
    Android:useLevel="false" >

    <!--Here if you want to set transparent can set-->
    <solid Android:color="@color/white" />

    <!--Here you can set your fab button border color-->
    <stroke
        Android:width="3dp"
        Android:color="@color/white" />
</shape>

Puis, après utilisation, comme ceci dans votre fichier de mise en page XML.

main_activity.xml 

<RelativeLayout 
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/rl_content_main"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@color/black">

    <LinearLayout
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_centerHorizontal="true"
        Android:layout_centerVertical="true"
        Android:padding="5dp"
        Android:background="@drawable/fab_background">

        <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/fab_map"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center_vertical"
            Android:elevation="0dp"
            Android:src="@Android:drawable/ic_media_play"
            app:fabSize="normal"
            app:elevation="0dp"/>
    </LinearLayout>

</RelativeLayout>
2
Shailesh

Vous pouvez utiliser la solution suivante:

app:backgroundTint="@Android:color/white 

<Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab_add_doc"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:layout_alignParentRight="true"
        Android:onClick="navigateToCreateActivity"
        Android:backgroundTint="@color/colorPrimary"
        app:backgroundTint="@Android:color/white"
        Android:layout_marginBottom="@dimen/fab_margin"
        Android:layout_marginEnd="50dp"
        app:srcCompat="@drawable/ic_plus"/>

Cela fonctionne bien pour la frontière. ressemble à ci-dessous

 floating button with boarder

0
Akhila Madari