如何使用 XML 样式在 Android 中创建自定义按钮答案

【问题标题】：How to create custom button in Android using XML Styles如何使用 XML 样式在 Android 中创建自定义按钮
【发布时间】：2013-09-01 16:11:38
【问题描述】：

我想通过使用 XML 样式来制作这种按钮 [相同的背景和文本] 颜色

这只是一个例子，我想写一些其他的文字，比如：关于我

我仍然使用设计师在 Photoshop 中创建的按钮

    <ImageButton
        android:id="@+id/imageButton5"
        android:contentDescription="AboutUs"
        android:layout_width="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/view_pager"
        android:layout_centerHorizontal="true"
        android:background="@drawable/aboutus" />

注意：我需要各种尺寸和形状的这种按钮

我不想在我的 Android 应用程序中使用任何图像，我只想使用 XML 来制作它

【问题讨论】：

使用这样的图像并将其设置为 imageView 的背景。

标签： android android-widget

【解决方案1】：

从“Adrián Santalla”在 androidcookbook.com 上编写的食谱复制粘贴： https://www.androidcookbook.com/Recipe.seam?recipeId=3307

1.创建一个表示按钮状态的 XML 文件

在drawable中创建一个名为'button.xml'的xml来命名按钮状态：

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="false"
        android:drawable="@drawable/button_disabled" />
    <item
        android:state_pressed="true"
        android:state_enabled="true"
        android:drawable="@drawable/button_pressed" />
    <item
        android:state_focused="true"
        android:state_enabled="true"
        android:drawable="@drawable/button_focused" />
    <item
        android:state_enabled="true"
        android:drawable="@drawable/button_enabled" />
</selector>

2。创建一个表示每个按钮状态的 XML 文件

为四种按钮状态中的每一种创建一个 xml 文件。所有这些都应该在drawables文件夹下。让我们按照 button.xml 文件中设置的名称进行操作。

button_enabled.xml：

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#00CCFF"
        android:centerColor="#0000CC"
        android:endColor="#00CCFF"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>

button_focused.xml：

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#F7D358"
        android:centerColor="#DF7401"
        android:endColor="#F7D358"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>

button_pressed.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#0000CC"
        android:centerColor="#00CCFF"
        android:endColor="#0000CC"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>

button_disabled.xml：

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#F2F2F2"
        android:centerColor="#A4A4A4"
        android:endColor="#F2F2F2"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>

3.创建一个表示按钮样式的 XML 文件

创建上述文件后，就该创建应用程序按钮样式了。现在，您需要创建一个名为 styles.xml 的新 XML 文件（如果您还没有），您可以在其中将更多自定义样式包含到 de values 目录中。

此文件将包含您的应用程序的新按钮样式。您需要在其中设置新的按钮样式功能。请注意，其中一个功能，即新样式的背景，应通过对第一步中创建的按钮 (button.xml) 可绘制对象的引用进行设置。要引用新的按钮样式，我们使用 name 属性。

以下示例显示了 styles.xml 文件的内容：

<resources>
    <style name="button" parent="@android:style/Widget.Button">
        <item name="android:gravity">center_vertical|center_horizontal</item>
        <item name="android:textColor">#FFFFFFFF</item>
        <item name="android:shadowColor">#FF000000</item>
        <item name="android:shadowDx">0</item>
        <item name="android:shadowDy">-1</item>
        <item name="android:shadowRadius">0.2</item>
        <item name="android:textSize">16dip</item>
        <item name="android:textStyle">bold</item>
        <item name="android:background">@drawable/button</item>
        <item name="android:focusable">true</item>
        <item name="android:clickable">true</item>
    </style>
</resources>

4.使用您自己的自定义应用程序主题创建 XML

最后，您需要覆盖默认的 Android 按钮样式。为此，您需要在 values 目录中创建一个名为 theme.xml（如果还没有的话）的新 XML 文件并覆盖默认的 Android 按钮样式。

下面的例子展示了themes.xml的内容：

<resources>
    <style name="YourApplicationTheme" parent="android:style/Theme.NoTitleBar">
        <item name="android:buttonStyle">@style/button</item>
    </style>
</resources>

希望你们能像我在寻找自定义按钮时一样幸运。享受吧。

【讨论】：

好的，得到了一个更好的答案，肯定会帮助其他人。而关于回答一个老话题，我觉得我在寻找它，其他人可能也会这样做。一个主题越完整，开发人员就越能更快地找到解决问题的方法，至少我是这样认为的。还是谢谢。
很好的答案，但知道为什么忽略填充选项吗？
仅供参考 - 兄弟，您可能想将链接的 https 更改为 http - 因为该站点不再使用安全协议。

【解决方案2】：

您是否尝试过为任何按钮创建背景形状？

在下面查看：

下面是从按钮图像中分离出来的图像。

现在，将它放在你的 ImageButton for android:src "source" 中，如下所示：

android:src="@drawable/twitter"

现在，只需创建 ImageButton 的形状以使其具有黑色着色器背景。

android:background="@drawable/button_shape"

而button_shape是drawable资源中的xml文件：

    <?xml version="1.0" encoding="UTF-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke 
        android:width="1dp" 
        android:color="#505050"/>
    <corners 
        android:radius="7dp" />

    <padding 
        android:left="1dp"
        android:right="1dp"
        android:top="1dp"
        android:bottom="1dp"/>

    <solid android:color="#505050"/>

</shape>

试着用这个来实现它。您可能需要根据需要更改颜色值。

如果它不起作用，请告诉我。

【讨论】：

您可以尝试 angrytools.com/android/button 以声明方式轻松创建自定义按钮的 xml 布局，而无需编写。

【解决方案3】：

看看Styled Button，它一定会对你有所帮助。有很多例子请在INTERNET上搜索。

例如：风格

<style name="Widget.Button" parent="android:Widget">
    <item name="android:background">@drawable/red_dot</item>
</style>

你可以用你的选择器代替 red_dot

红点：

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"  >

    <solid android:color="#f00"/>
    <size android:width="55dip"
        android:height="55dip"/>
</shape>

按钮：

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="49dp"
        style="@style/Widget.Button"
        android:text="Button" />

【讨论】：

是的，我知道，但我需要在我的代码中实现相同的背景和文本颜色
@Sneha 你的意思是你在问题中给出的图像中的确切颜色吗？
@Sneha 你有互联网连接使用它。您可以找到该背景颜色的颜色代码。使用 Gru 的答案创建具有该颜色的可绘制图像。搜索符合您要求的字体并应用在该按钮上。
您的链接指向 xamarin。有一些差异可能会造成混淆（例如，这甚至不是 Java 代码）

【解决方案4】：

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

   <solid 
       android:color="#ffffffff"/>

   <size 
       android:width="@dimen/shape_circle_width"
        android:height="@dimen/shape_circle_height"/>
</shape>

1.在你的drawable中添加这个

2.设置为按钮的背景

【讨论】：

我知道如何使用形状，但我需要在我的代码中实现相同的背景和文本颜色

【解决方案5】：

<gradient android:startColor="#ffdd00"
    android:endColor="@color/colorPrimary"
    android:centerColor="#ffff" />

<corners android:radius="33dp"/>

<padding
    android:bottom="7dp"
    android:left="7dp"
    android:right="7dp"
    android:top="7dp"
    />

【讨论】：

【解决方案6】：

如果您想进行自定义按钮设计，您需要做两件事。

第一个是： 在drawable文件夹中创建一个xml资源文件（例如：btn_shape_rectangle.xml）然后将代码复制并粘贴到那里。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="16dp"
android:shape="rectangle">
<solid
    android:color="#fff"/>
<stroke
    android:width="1dp"
    android:color="#000000"
    />
<corners android:radius="10dp" />
</shape>

第二个是转到您要实现此设计的布局按钮。把它连接起来。例子： android:background="@drawable/btn_shape_rectangle"

你可以改变形状颜色半径你想要的设计可以做什么。

希望它会起作用并帮助您。快乐编码

【讨论】：