我对材质设计的纽扣款式很困惑。我想要像附件链接那样的彩色凸起按钮。,比如用法部分下面的“强制停止”和“卸载”按钮。是否有可用的样式或者我需要定义它们?
http://www.google.com/design/spec/components/buttons.html#buttons-usage
我找不到默认的按钮样式。
例子:
<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" />
如果我尝试通过添加来改变按钮的背景颜色
android:background="@color/primary"
所有的样式都消失了,比如触摸动画、阴影、圆角等等。
我尝试了很多答案和第三方的libs,但没有一个是保持边界和提高效果的前棒棒糖,同时对棒棒糖产生无缺陷的涟漪效应。以下是我的最终解决方案,结合了几个答案(由于灰度颜色深度,边框/凸起在gif上不能很好地渲染):
棒棒糖
Pre-lollipop
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>
drawable-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;
}
});
我是这样得到我想要的东西的。
首先,创建一个按钮(在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>
按钮的波纹和背景,作为一个可绘制的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>
这增加了我正在寻找的连锁反应。
我尝试了很多答案和第三方的libs,但没有一个是保持边界和提高效果的前棒棒糖,同时对棒棒糖产生无缺陷的涟漪效应。以下是我的最终解决方案,结合了几个答案(由于灰度颜色深度,边框/凸起在gif上不能很好地渲染):
棒棒糖
Pre-lollipop
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>
drawable-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;
}
});
除了android.support.design.button.MaterialButton (Gabriele Mariotti提到过)之外,
还有另一个按钮小部件,名为com.google.android.material.button.MaterialButton,它有不同的风格,并从AppCompatButton扩展:
style="@style/Widget.MaterialComponents.Button"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
style="@style/Widget.MaterialComponents.Button.TextButton"
style="@style/Widget.MaterialComponents.Button.Icon"
style="@style/Widget.MaterialComponents.Button.TextButton.Icon"
填充,升高按钮(默认):
style="@style/Widget.MaterialComponents.Button"
填充,未抬高按钮:
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
文本按钮:
style="@style/Widget.MaterialComponents.Button.TextButton"
图标按钮:
style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/icon_24px" // Icons can be added from this
带有图标的文本按钮::
阅读:https://material.io/develop/android/components/material-button/
一个用于创建新材质按钮的方便类。
类中的按钮的更新的材质样式
构造函数。小部件将显示正确的默认材质
不使用样式标志的样式。
1)你可以通过定义xml drawable来创建圆角按钮,你可以增加或减少半径来增加或减少按钮角的圆度。
设置此xml绘图作为按钮的背景。
<?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)改变默认的阴影和阴影过渡动画之间的按钮状态,你需要定义选择器,并应用到按钮使用android:stateListAnimator属性。完整的按钮定制参考:http://www.zoftino.com/android-button
我刚刚创建了一个android库,它允许您轻松地修改按钮颜色和波纹颜色
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"/>
你不需要为每个你想要不同颜色的按钮创建一个样式,允许你随机自定义颜色