如何模仿材质devise凸起的button风格,即使是前棒棒糖(减去特殊效果)?

谷歌已经显示了一些很棒的方式, 这里的button显示在棒棒糖上。

我正在谈论凸起和平坦的button。

除了特殊效果(涟漪等),我怎样才能在前棒棒糖版本上模仿他们呢?

我正在谈论这个和这个 。

当然,在棒棒糖和以上,我想使用特殊效果。

我知道已经有多个(甚至很多)的post,但是我没有看到任何试图完全模仿它的post。

更新回答:build议您依靠Google的appcompat库将材质devise样式回溯到您的应用程序。 它似乎不再支持凸起的button(而是使用平面button),但仍然充分backportsbutton匹配的材料devise风格。 这是我的build议,你去这个方法。

如果您仍然希望回溯凸起的button效果,则需要依赖第三方材质devise库,或者您可以使用CardView查看以前的旧解决scheme并实施自己的解决scheme。

使用Google的官方Material Design backport设置appcompat库:

 compile "com.android.support:appcompat-v7:+" 

然后,您需要在styles.xml文件中设置您的应用程序主题。

 <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> 

并在您的AndroidManifest.xml确保上面的主题设置正确:

 <application android:allowBackup="false" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="false" android:theme="@style/AppTheme"> 

完成上述设置之后,请确保您的所有Activity都从AppCompatActivity扩展而来,并从那里使用材质devise风格来AppCompatActivity所有Button

如果您在项目中使用自定义的Button实现,请确保不是扩展Button ,而是扩展AppCompatButton 。 这适用于大部分自定义ViewAppCompatTextViewAppCompatEditText等…

它是如何工作的? 所有的Android xml布局都是使用称为LayoutInflater东西来夸大的。 LayoutInflaterActivity提供,并且可以select提供给它的LayoutInflaterFactory ,以便可以覆盖标准Android小部件(如ButtonTextView默认实现。 当你使用AppCompatActivity ,它会提供给你一个非标准的LayoutInflater ,它将LayoutInflater支持Material Design的小部件的特殊实例!

————————————————- 老答案: ———————————————— –

所以Android给了我们CardView来复制这样的行为。 它提供了一个圆angular的视图,应用投影。 你可能也想看看#setCardElevation()方法。

您可以将CardView库添加到您的Gradle项目中:

 compile 'com.android.support:cardview-v7:+' 

CardView将使用棒棒糖实现来做到这一点(如棒棒糖阴影更好),否则将尽可能最好地复制它。

这是一个示例:

 <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:layout_width="wrap_content" android:layout_height="wrap_content" card_view:cardBackgroundColor="#ffd9d9d9" card_view:cardCornerRadius="2dp" android:layout_margin="6dp" card_view:cardElevation="6dp"> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop="8.5dp" android:paddingBottom="8.5dp" android:paddingLeft="12dp" android:paddingRight="12dp" android:textColor="#de000000" android:fontFamily="sans-serif-medium" android:text="NORMAL" /> </android.support.v7.widget.CardView> 

上面的代码运行在5.0: 5.0上的CardView按钮

上面的代码在4.4.4上运行: CardView按钮在4.4.4上

它看起来像字体有差异,因为在无衬线字体有不同的字体重量或4.4.4不支持,但可以通过包括最新版本的Roboto和重写TextViews上的字体。

您发布的材料文档指向“boost的button”。 CardView的是我们如何使“高架”的任何东西。

将compat库添加到您的应用程序。 (最新的版本可以在这里find。)通过在你的build.gradle文件中添加一个依赖项来做到这一点:

 dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:21.0.3' } 

在位于值目录中的styles.xml文件中解压缩apptheme:

 <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/theme_primary</item> <item name="colorAccent">@color/theme_accent_1</item> <item name="actionMenuTextColor">@color/theme_text</item> </style> </resources> 

将声明的样式设置为manifest.xml文件中用于应用程序的样式:

 <application android:icon="@drawable/ic_launcher" android:theme="@style/AppTheme"/> 

在你的布局中声明一个提升的button,如下所示

 <Button android:id="@+id/addButton" android:layout_width="wrap_content" android:layout_height="match_parent" android:text="@string/title_add" /> 

声明一个扁平的button样式如下:

 <Button android:id="@+id/okbutton" style="?android:attr/borderlessButtonStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@android:string/ok" /> 

4.4(电话)和5.0(平板电脑)设备上的结果:

平板5.0

电话4.4

详细信息可以在官方文档中find: http : //developer.android.com/training/material/theme.html

我使用同样的效果,

  android:background="@android:drawable/dialog_holo_light_frame" 

我的testing结果:

在这里输入图像说明

根据Yigit(谷歌开发cardview)这个是hacky ,但做一个下降的工作。

您可以使用负数来摆脱CardView内部的填充和边距。

在api 15 nexus one和nexus 4仿真器上进行testing。 这个解决scheme将在棒棒糖前工作。

 <android.support.v7.widget.CardView android:id="@+id/elevated_button_card" card_view:cardElevation="2dp" android:layout_width="match_parent" android:layout_height="wrap_content" card_view:cardMaxElevation="8dp" card_view:contentPadding="-2dp" android:layout_marginBottom="-2dp" card_view:cardCornerRadius="0dp"> <Button android:id="@+id/elevated_button" style="?android:attr/borderlessButtonStyle" android:layout_width="match_parent" android:layout_height="match_parent" android:text="Add New Exercise"/ </android.support.v7.widget.CardView> 

码:

  final CardView cardView = (CardView) rootView.findViewById(R.id.elevated_button_card); final Button button = (Button) rootView.findViewById(R.id.elevated_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; } }); 

我正在研究一个材料兼容性库。 我写了自己的Button类,带有类似材质的风格,animation阴影和触摸涟漪效应。 虽然还不完美,但你可以在这里试试。

除了@ spierce7的答案,我改进了一点点的布局。 所以现在它有一个相对的布局,它将我们的自定义TextView完全放在CardView的中心。 所以在这里。

 <android.support.v7.widget.CardView android:layout_width="wrap_content" android:layout_height="wrap_content" card_view:cardBackgroundColor="@color/colorPrimary" card_view:cardCornerRadius="1dp" card_view:cardElevation="3dp" android:longClickable="false" android:id="@+id/button"> <RelativeLayout android:layout_width="match_parent" android:layout_height="48dp"> //just my custom height <com.example.admin.lanet_contactwork.MyTextView //for below 5.0 android:layout_width="wrap_content" android:layout_height="wrap_content" PipBoy:fontName="Roboto-Medium.ttf" //custom font android:text="@string/enter" android:textColor="@android:color/white" android:textSize="14sp" android:layout_centerInParent="true" /> </RelativeLayout> </android.support.v7.widget.CardView> 

看到我的答案解决scheme保持边界和预棒棒糖上的效果,同时保持对棒棒糖的连锁反应没有缺点