Android材质devisebutton样式
我对材质devise的button样式感到困惑。 我想要在附加的链接中得到五颜六色的凸起button,就像在使用部分下看到的“强制停止”和“卸载”button。 有没有可用的样式,还是我需要定义它们?
http://www.google.com/design/spec/components/buttons.html#buttons-usage
我找不到默认的button样式。
例:
<Button style="@style/PrimaryButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Calculate" android:id="@+id/button3" android:layout_below="@+id/editText5" android:layout_alignEnd="@+id/editText5" android:enabled="true" />
如果我尝试通过添加更改button的背景颜色
android:background="@color/primary"
所有的风格消失,如触摸animation,阴影,圆angular等
我会添加我的答案,因为我没有使用任何其他答案。
使用支持库v7,所有样式实际上已经被定义并且可以使用,对于标准button,所有这些样式都是可用的:
style="@style/Widget.AppCompat.Button" style="@style/Widget.AppCompat.Button.Colored" style="@style/Widget.AppCompat.Button.Borderless" style="@style/Widget.AppCompat.Button.Borderless.Colored"
Widget.AppCompat.Button
:
Widget.AppCompat.Button.Colored
:
Widget.AppCompat.Button.Borderless
Widget.AppCompat.Button.Borderless.Colored
:
为了回答这个问题,所以使用的风格是
<Button style="@style/Widget.AppCompat.Button.Colored" ....... ....... ....... android:text="Button"/>
如何改变颜色
对于整个应用程序:
所有UI控件的颜色(不仅仅是button,还有浮动动作button,checkbox等)由属性colorAccent
pipe理,如此处所述。 您可以修改此样式并在您的主题定义中应用您自己的颜色:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> ... <item name="colorAccent">@color/Orange</item> </style>
对于特定的button:
如果您需要更改特定button的样式,则可以定义一个新样式,inheritance上述父样式之一。 在下面的例子中,我只是改变了背景和字体的颜色:
<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored"> <item name="colorButtonNormal">@color/Red</item> <item name="android:textColor">@color/White</item> </style>
那么你只需要在button上应用这个新样式:
android:theme="@style/AppTheme.Button"
要在布局中设置默认buttondevise,请将此行添加到styles.xml主题中:
<item name="buttonStyle">@style/btn</item>
其中@style/btn
是您的button主题。 这为具有特定主题的布局中的所有button设置button样式
如果我正确地理解你,你想要做这样的事情:
在这种情况下,应该足够使用:
<item name="android:colorButtonNormal">#2196f3</item>
或者对于API小于21:
<item name="colorButtonNormal">#2196f3</item>
除了使用材料主题教程 。
animation变体在这里 。
这是我如何得到我想要的。
首先,制作一个button(在styles.xml
):
<style name="Button"> <item name="android:textColor">@color/white</item> <item name="android:padding">0dp</item> <item name="android:minWidth">88dp</item> <item name="android:minHeight">36dp</item> <item name="android:layout_margin">3dp</item> <item name="android:elevation">1dp</item> <item name="android:translationZ">1dp</item> <item name="android:background">@drawable/primary_round</item> </style>
button的涟漪和背景,作为可绘制的primary_round.xml
:
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/primary_600"> <item> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="1dp" /> <solid android:color="@color/primary" /> </shape> </item> </ripple>
这增加了我正在寻找的涟漪效应。
最简单的解决scheme
第1步:使用最新的支持库
compile 'com.android.support:appcompat-v7:25.2.0'
第2步:使用AppCompatActivity作为您的父Activity类
public class MainActivity extends AppCompatActivity
第3步:在布局XML文件中使用应用程序名称空间
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent">
第4步:使用AppCompatButton而不是Button
<android.support.v7.widget.AppCompatButton android:id="@+id/buttonAwesome" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Awesome Button" android:textColor="@color/whatever_text_color_you_want" app:backgroundTint="@color/whatever_background_color_you_want"/>
这里有一个示例将有助于在应用程序中一致地应用button样式。
这是一个示例主题,我用特定的风格..
<style name="MyTheme" parent="@style/Theme.AppCompat.Light"> <item name="colorPrimary">@color/primary</item> <item name="colorPrimaryDark">@color/primary_dark</item> <item name="colorAccent">@color/accent</item> <item name="android:buttonStyle">@style/ButtonAppTheme</item> </style> <style name="ButtonAppTheme" parent="android:Widget.Material.Button"> <item name="android:background">@drawable/material_button</item> </style>
这是我如何定义res / drawable-v21文件夹中的button形状和效果…
<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?attr/colorControlHighlight"> <item> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="2dp" /> <solid android:color="@color/primary" /> </shape> </item> </ripple>
2dp的angular落是保持与材料主题一致。
我尝试了很多答案和第三方库,但没有一个是保持边界,并提高了对棒棒糖的影响,同时对棒棒糖的连锁反应没有缺点。 这是我最后的解决scheme,结合了几个答案(由于灰度颜色深度,边框/凸起不能很好地呈现在gif上):
棒糖
预棒棒糖
的build.gradle
compile 'com.android.support:cardview-v7:23.1.1'
layout.xml
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card" card_view:cardElevation="2dp" android:layout_width="match_parent" android:layout_height="wrap_content" card_view:cardMaxElevation="8dp" android:layout_margin="6dp" > <Button android:id="@+id/button" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="0dp" android:background="@drawable/btn_bg" android:text="My button"/> </android.support.v7.widget.CardView>
可绘制-V21 / btn_bg.xml
<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?attr/colorControlHighlight"> <item android:drawable="?attr/colorPrimary"/> </ripple>
绘制/ btn_bg.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/colorPrimaryDark" android:state_pressed="true"/> <item android:drawable="@color/colorPrimaryDark" android:state_focused="true"/> <item android:drawable="@color/colorPrimary"/> </selector>
活动的onCreate
final CardView cardView = (CardView) findViewById(R.id.card); final Button button = (Button) findViewById(R.id.button); button.setOnTouchListener(new View.OnTouchListener() { ObjectAnimator o1 = ObjectAnimator.ofFloat(cardView, "cardElevation", 2, 8) .setDuration (80); ObjectAnimator o2 = ObjectAnimator.ofFloat(cardView, "cardElevation", 8, 2) .setDuration (80); @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: o1.start(); break; case MotionEvent.ACTION_CANCEL: case MotionEvent.ACTION_UP: o2.start(); break; } return false; } });
我刚刚创build了一个android库,允许您轻松修改button颜色和纹波颜色
https://github.com/xgc1986/RippleButton
<com.xgc1986.ripplebutton.widget.RippleButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btn" android:text="Android button modified in layout" android:textColor="@android:color/white" app:buttonColor="@android:color/black" app:rippleColor="@android:color/white"/>
你不需要为每个你想要不同颜色的button创build一个样式,允许你随机的自定义颜色
您可以通过向其添加z轴来为航空提供视图,并且可以具有默认阴影。 此function在L预览中提供,并在发布后可用。 现在你可以简单地添加一个图像给这个button背景的外观
1)您可以通过定义xml drawable来创build圆angularbutton ,您可以增加或减less半径来增加或减lessbuttonangular的圆度。 设置这个xml drawable作为button的背景。
<?xml version="1.0" encoding="utf-8"?> <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetLeft="4dp" android:insetTop="6dp" android:insetRight="4dp" android:insetBottom="6dp"> <ripple android:color="?attr/colorControlHighlight"> <item> <shape android:shape="rectangle" android:tint="#0091ea"> <corners android:radius="10dp" /> <solid android:color="#1a237e" /> <padding android:bottom="6dp" /> </shape> </item> </ripple> </inset>
2)要更改button状态之间的默认阴影和阴影过渡animation,您需要定义select器并使用android:stateListAnimator属性将其应用于button。 有关完整的button自定义参考: http : //www.zoftino.com/android-button