如何删除微胖或保证金的材料设计按钮？ [英] How to remove extra padding or margin in material design button?

问题描述

我想创建一个连接到按键上的TextView如下面的图像中的按钮。

上面的截图是从注4所和OS版本是5.0.1。

下面是code是用来实现的UI。

布局/ xyz.xml

 ＆LT;按钮
    机器人：layout_width =250dp
    机器人：layout_height =50dp
    机器人：主题=@风格/ myButton的
    机器人：文字=取消/＆GT;
 

值-V21 / style.xml

 ＆LT;样式名称=myButton的父=@风格/ Base.Widget.AppCompat.Button＆GT;
    ＆LT;项目名称=机器人：colorButtonNormal＆GT;＃3578A9＆LT; /项目＆GT;
    ＆LT;项目名称=机器人：插入＆GT; 0dp＆LT; /项目＆GT;
    ＆LT; /风格＆GT;
 

但是，如果我运行相同的code在Nexus4 OS 5.1.1 verison，按钮走的是保证金为所有4侧面和截图看起来像下面。

如果我删除了安卓主题，并提供机器人：背景，用户界面​​看起来像第一张图像。但它不会给连锁反应。那么如何实现UI与连锁反应第一张图像。

解决方案

 第1步：将低于code在styles.xml    ＆LT;样式名称=myColoredButton＆GT;
        ＆LT;项目名称=机器人：文字颜色＆GT;＃FF3E96＆LT; /项目＆GT;
        ＆LT;项目名称=机器人：填充＆GT; 0dp＆LT; /项目＆GT;
        ＆LT;项目名称=安卓了minWidth＆GT; 88dp＆LT; /项目＆GT;
        ＆LT;项目名称=安卓了minHeight＆GT; 36dp＆LT; /项目＆GT;
        ＆LT;项目名称=机器人：海拔＆GT; 1DP＆LT; /项目＆GT;
        ＆LT;项目名称=机器人：translationZ＆GT; 1DP＆LT; /项目＆GT;
        ＆LT;项目名称=机器人：背景＆GT;＃FF0000＆LT; /项目＆GT;
    ＆LT; /风格＆GT;在这里，你可以改变文字颜色（我用上面＃FF3E96）和背景颜色（我用＃FF0000）为您的按钮。您也可以从你的按钮布局有关XML使用Android的替代文字颜色值：colorButtonNormal。第2步：可绘制文件夹下创建一个新的XML文件，并添加以下code：
我叫我的XML文件作为primary.xml＆LT;纹波的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：颜色=@色/ colorPrimary＆GT;
    ＆LT;项目＆GT;
        ＆LT;形状的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android＆GT;
            ＆LT;角落的an​​droid：半径=1DP/＆GT;
            [固体机器人：颜色=＃8B8386/＆GT;
        ＆LT; /形状＆GT;
    ＆LT; /项目＆GT;
＆LT; /纹波＆GT;步骤3：使用样式和绘制你的按钮，如下所示。    ＆LT;按钮
        风格=@风格/ myColoredButton
        机器人：layout_width =250dp
        机器人：layout_height =50dp
        机器人：文字=取消
        机器人：比重=中心
        机器人：背景=@绘制/ primary_round
        机器人：colorButtonNormal =＃3578A9/＆GT;
希望它可以解决您的问题。如果这个答案是对你有用，接受应答....`输入code here`
 

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

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

Below is the code is used to achieve the UI.

layout/xyz.xml

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

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>

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.

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.

解决方案

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>

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.

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>

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.

If this answer is useful to you, Accept the Answer....`enter code here`

这篇关于如何删除微胖或保证金的材料设计按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！