如何更改android 设计支持库FAB Button 边框颜色?
How to change android design support library FAB Button border color?
我想更改 fab 按钮边框颜色。
边框颜色为白色,内部颜色为黑色或透明
我希望我的按钮看起来像这样:
首先创建一个 .xml 形状资源,我们将其命名为 ring.xml 并将以下内容放入其中:
<?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>
您将不得不尝试使用 thickness 和 innerRadius 属性来获得正确的效果,但应该做到了!另外位图源只是一个填充物,你想把你的F图像放在那里。
然后在声明工厂的地方,像这样引用您的戒指:
android:background="@drawable/ring"
或
在您的 java 代码中,执行以下操作:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setBackgroundResource(R.drawable.ring);
希望对您有所帮助!
fab.xml 在 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>
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"/>
注意:您的 FAB 的定制设计违反了 Google Material Floating Action Button
设计的指导方针
如果你想设置浮动按钮边框那么你只需要做这些事情。首先创建一个 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>
然后在你的 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>
不用drawable也可以画圆
<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" />
输出:
我想更改 fab 按钮边框颜色。 边框颜色为白色,内部颜色为黑色或透明
我希望我的按钮看起来像这样:
首先创建一个 .xml 形状资源,我们将其命名为 ring.xml 并将以下内容放入其中:
<?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>
您将不得不尝试使用 thickness 和 innerRadius 属性来获得正确的效果,但应该做到了!另外位图源只是一个填充物,你想把你的F图像放在那里。
然后在声明工厂的地方,像这样引用您的戒指:
android:background="@drawable/ring"
或
在您的 java 代码中,执行以下操作:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setBackgroundResource(R.drawable.ring);
希望对您有所帮助!
fab.xml 在 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>
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"/>
注意:您的 FAB 的定制设计违反了 Google Material Floating Action Button
设计的指导方针如果你想设置浮动按钮边框那么你只需要做这些事情。首先创建一个 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>
然后在你的 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>
不用drawable也可以画圆
<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" />
输出: