如何删除材料设计按钮中的额外填充或边距? [英] How to remove extra padding or margin in material design button?

问题描述

我正在尝试创建一个按钮，该按钮附加到按钮上方的 TextView，如下图所示.

I am trying to create an button which is attached to the TextView above the button as shown in the below image.

以上截图来自Note 4，操作系统版本为5.0.1.

The above screenshot is taken from the Note 4 and the OS version is 5.0.1.

下面是实现UI的代码.

Below is the code is used to achieve the UI.

布局/xyz.xml

    <Button
    android:layout_width="250dp"
    android:layout_height="50dp"
    android:theme="@style/myButton"
    android:text="Cancel"/>

values-v21/style.xml

values-v21/style.xml

    <style name="myButton" parent="@style/Base.Widget.AppCompat.Button">
    <item name="android:colorButtonNormal">#3578A9</item>
    <item name="android:inset">0dp</item>
    </style>

但是如果我在 Nexus4 OS verison 5.1.1 中运行相同的代码，按钮会占用所有 4 个边的边距，屏幕截图如下所示.

But if I run the same code in Nexus4 OS verison 5.1.1, the button is taking the margin for all the 4 sides and the screenshot looks like below.

如果我删除android:theme"并提供android:background"，则用户界面看起来像第一张图片.但它不会产生涟漪效应.那么如何实现 UI 作为具有涟漪效果的第一张图片.

If I remove the "android:theme" and provide the "android:background", the UI looks like the first image. But It won't give the ripple effect. So how the achieve the UI as first image with the ripple effect.

推荐答案

第一步:将下面的代码放入styles.xml

Step 1: Put the below code in styles.xml

    <style name="myColoredButton">
        <item name="android:textColor">#FF3E96</item>
        <item name="android:padding">0dp</item>
        <item name="android:minWidth">88dp</item>
        <item name="android:minHeight">36dp</item>
        <item name="android:elevation">1dp</item>
        <item name="android:translationZ">1dp</item>
        <item name="android:background">#FF0000</item>
    </style>

在这里您可以更改按钮的文本颜色(我在上面使用了#FF3E96)和背景颜色(我使用了#FF0000).您还可以使用 android:colorButtonNormal 覆盖与 Button 相关的布局 xml 中的 textColor 值.

Here you can change the textColor( I have used #FF3E96 above) and background color (I have used #FF0000) for your button. You can also override textColor values from your Button related layout xml by using android:colorButtonNormal.

第 2 步:在 drawables 文件夹下创建一个新的 XML 文件并添加以下代码:我将我的 XML 文件命名为 primary.xml

Step 2:Create a new XML file under drawables folder and add the following code: I named my XML file as primary.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimary">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <corners android:radius="1dp" />
            <solid android:color="#8B8386" />
        </shape>
    </item>
</ripple>

第 3 步:按如下方式在 Button 中使用样式和可绘制对象.

Step 3: Use the style and drawable in your Button as follows.

    <Button
        style="@style/myColoredButton"
        android:layout_width="250dp"
        android:layout_height="50dp"
        android:text="Cancel"
        android:gravity="center"
        android:background="@drawable/primary_round"
        android:colorButtonNormal="#3578A9" />

希望它能解决您的问题.

Hope it solves your problem.

这篇关于如何删除材料设计按钮中的额外填充或边距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！