Android材质设计按钮样式

我对材质设计的纽扣款式很困惑。我想要像附件链接那样的彩色凸起按钮。，比如用法部分下面的“强制停止”和“卸载”按钮。是否有可用的样式或者我需要定义它们?

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"

所有的样式都消失了，比如触摸动画、阴影、圆角等等。

603513 次浏览
小开

你可以通过添加z轴来给视图添加航空，并且可以有默认的阴影。该功能在L预览版中提供，并将在发布后可用。现在，你可以简单地添加一个图像给这个按钮的背景

小开

我是这样得到我想要的东西的。

首先，创建一个按钮(在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>

这增加了我正在寻找的连锁反应。

小开
如果我没理解错的话，你应该这样做:
enter image description here

在这种情况下，它应该足够使用:

<item name="android:colorButtonNormal">#2196f3</item>

如果API小于21:

<item name="colorButtonNormal">#2196f3</item>

除了使用材质主题教程。

动画变体是在这里。

小开

下面是一个示例，它将有助于在整个应用程序中一致地应用按钮样式。

这是一个样本主题，我使用特定的风格..

<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文件夹中的效果…

<?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角与材质主题保持一致。

小开

我刚刚创建了一个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"/>

你不需要为每个你想要不同颜色的按钮创建一个样式，允许你随机自定义颜色

小开

我尝试了很多答案&第三方自由，但没有一个是保持边界和提高作用前棒棒糖，同时对棒棒糖的涟漪效应没有退税。以下是我的最终解决方案，结合了几个答案(由于灰度颜色深度，边框/凸起在gif上不能很好地渲染):

棒棒糖

enter image description here

Pre-lollipop

enter image description here

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;
}
});
小开

我将添加我的答案，因为我没有使用任何其他提供的答案。

在支持库v7中，所有的样式实际上都已经定义并可以使用，对于标准按钮，所有这些样式都是可用的:

style="@style/Widget.AppCompat.Button"
style="@style/Widget.AppCompat.Button.Colored"
style="@style/Widget.AppCompat.Button.Borderless"
style="@style/Widget.AppCompat.Button.Borderless.Colored"
< p > Widget.AppCompat.Button: enter image description here < / p > < p > Widget.AppCompat.Button.Colored: enter image description here < / p > < p > Widget.AppCompat.Button.Borderless enter image description here < / p > < p > Widget.AppCompat.Button.Borderless.Colored: enter image description here < / p >

要回答这个问题，使用的风格是

<Button style="@style/Widget.AppCompat.Button.Colored"
.......
.......
.......
android:text="Button"/>

如何改变颜色

对于整个应用程序:

所有UI控件的颜色(不仅是按钮，还包括浮动操作按钮，复选框等)由属性colorAccent管理，如在这里所述。 您可以修改此样式并在主题定义中应用您自己的颜色:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="colorAccent">@color/Orange</item>
</style>

对于特定的按钮:

如果需要更改特定按钮的样式，可以定义一个新样式，继承上面描述的父样式之一。在下面的例子中，我只是改变了背景和字体的颜色:

<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">@color/Red</item>
<item name="android:textColor">@color/White</item>
</style>

然后你只需要在按钮上应用这个新样式:

android:theme="@style/AppTheme.Button"

要在布局中设置默认的按钮设计，将这一行添加到styles.xml主题中:

<item name="buttonStyle">@style/btn</item>

其中@style/btn是你的按钮主题。这将为具有特定主题的布局中的所有按钮设置按钮样式

小开

简单的解决方案

步骤1:使用最新的支持库

compile 'com.android.support:appcompat-v7:25.2.0'

步骤2:使用AppCompatActivity作为你的父Activity类

public class MainActivity extends AppCompatActivity

步骤3:在布局XML文件中使用app命名空间

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

第四步:使用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"/>

enter image description here

小开
你可以通过定义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

小开
最佳答案

可以使用 材料组件库 > < /强。

将的依赖添加到你的build.gradle:

dependencies { implementation ‘com.google.android.material:material:1.3.0’ }

然后将< >强MaterialButton < / >强添加到布局中:

<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"
app:strokeColor="@color/colorAccent"
app:strokeWidth="6dp"
app:layout_constraintStart_toStartOf="parent"
app:shapeAppearance="@style/MyShapeAppearance"
/>

你可以检查这里的完整的文档和API在这里。

要更改背景颜色，您有两个选项。

  1. 使用backgroundTint属性。

喜欢的东西:

<style name="MyButtonStyle"
parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">@color/button_selector</item>
//..
</style>
  1. 在我看来，这是最好的选择。如果你想覆盖一些默认样式的主题属性，那么你可以使用新的materialThemeOverlay属性。

喜欢的东西:

<style name="MyButtonStyle"
parent="Widget.MaterialComponents.Button">
<item name=“materialThemeOverlay”>@style/GreenButtonThemeOverlay</item>
</style>


<style name="GreenButtonThemeOverlay">
<!-- For filled buttons, your theme's colorPrimary provides the default background color of the component -->
<item name="colorPrimary">@color/green</item>
</style>

选项#2至少需要1.1.0版本。

enter image description hereenter image description here

你可以使用下列样式之一:

  • 填充按钮(默认): style="@style/Widget.MaterialComponents.Button
  • 文本按钮: style="@style/Widget.MaterialComponents.Button.TextButton"
  • OutlinedButton: style="@style/Widget.MaterialComponents.Button.OutlinedButton"

旧支持库:

有了新的支持库28.0.0，设计库现在包含了MaterialButton。

你可以添加这个按钮到我们的布局文件:

<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="YOUR TEXT"
android:textSize="18sp"
app:icon="@drawable/ic_android_white_24dp" />

默认情况下，这个类将使用主题的口音的颜色作为按钮填充的背景色，并使用白色作为按钮的文本色。

你可以用这些属性自定义按钮:

  • app:rippleColor:用于按钮波纹效果的颜色

  • app:backgroundTint:用于在按钮的背景上添加色彩。如果您希望更改按钮的背景颜色，请使用此属性而不是背景。

  • app:strokeColor:用于按钮描边的颜色

  • app:strokeWidth:用于按钮行程的宽度

  • app:cornerRadius:用于定义按钮的角的半径

小开

在android.support.design.button.MaterialButton (Gabriele Mariotti提到的)旁边，

还有另一个名为< >强com.google.android.material.button.MaterialButton < / >强的Button小部件，它具有不同的风格，并从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"

填充，提升的Button(默认): enter image description here

style="@style/Widget.MaterialComponents.Button"

填充，未抬高Button: enter image description here

style="@style/Widget.MaterialComponents.Button.UnelevatedButton"

文本Button: enter image description here

style="@style/Widget.MaterialComponents.Button.TextButton"

图标Button: enter image description here

style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/icon_24px" // Icons can be added from this

带有图标的文本Button:: enter image description here

读: https://material.io/develop/android/components/material-button/

一个用于创建新材质按钮的方便类。

类中的按钮提供了更新的材质样式 构造函数。小部件将显示正确的默认材质

.样式不使用样式标志
小开 
// here is the custom button style
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="45"
android:centerColor="@color/colorPrimary"
android:startColor="@color/colorPrimaryDark"
android:endColor="@color/colorAccent"
>
</gradient>
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
>
</corners>
<stroke
android:width="2dp"
android:color="@color/colorWhite"
>
</stroke>
</shape>
</item>


</selector>

提交答案