【问题标题】:Android shape border with gradient带有渐变的Android形状边框
【发布时间】:2014-01-19 04:29:18
【问题描述】:

我想为线性布局创建一个边框。所以我决定创建一个形状。我希望边框有渐变。以下不做。它填充矩形,然后创建一个笔触。我不想要一个填充的矩形,只是中风。我想将渐变应用到笔画。

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

    <gradient
        android:angle="360"
        android:centerColor="#e95a22"
        android:endColor="#ff00b5"
        android:gradientRadius="360"
        android:startColor="#006386"
        android:type="sweep" />

    <stroke
        android:width="2dp"
        android:color="#ff207d94" />

</shape>

【问题讨论】:

标签: android android-layout android-drawable xml-drawable


【解决方案1】:

试试这样的:

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

    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="360"
                android:centerColor="#e95a22"
                android:endColor="#ff00b5"
                android:gradientRadius="360"
                android:startColor="#006386"
                android:type="sweep" />

            <stroke
                android:width="2dp"
                android:color="#ff207d94" />
        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="rectangle" >
            <solid android:color="#fff" />
        </shape>
    </item>

</layer-list>

【讨论】:

  • 能否解释一下第二项的纯色?
  • 它是它自己的按钮颜色
  • Jesus Dimrix 你的意思是布局
  • @vipul ,如何做到这一点stackoverflow.com/questions/40322955/…
  • 黑白色怎么办?
【解决方案2】:

由于接受的答案并没有完全按照我希望的那样为我工作,我也会发布我的解决方案,也许它可以帮助其他人:)

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>
<!-- create gradient you want to use with the angle you want to use -->
    <shape android:shape="rectangle" >
        <gradient
            android:angle="0"
            android:centerColor="@android:color/holo_blue_bright"
            android:endColor="@android:color/holo_red_light"
            android:startColor="@android:color/holo_green_light" />

    </shape>
</item>
<!-- create the stroke for top, left, bottom and right with the dp you want -->
<item
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp"
    android:top="2dp">
    <shape android:shape="rectangle" >
        <!-- fill the inside in the color you want (could also be a gradient again if you want to, just change solid to gradient and enter angle, start, maybe center, and end color) -->
        <solid android:color="#fff" />
    </shape>
</item>

</layer-list>

【讨论】:

  • 经过大量搜索,我得到了完美的解决方案。非常感谢:)
  • 不完美,因为我的 EditTexts 的填充应该是透明的。
  • Starwave 在实心矩形中,您应该可以使用 @android:color/transparent 这应该可以解决问题。或者您只是通过将颜色设置为例如来使用 alpha #00FFFFFF
  • 我想在拐角处添加半径,如何定义拐角半径?
  • @HAXM 在 用于 12 dp 角半径。 如果每个角需要不同的角半径,可以使用 bottomLeftRadius、bottomRightRadius、topLeftRadius 和 topRightRadius 来代替半径。跨度>
【解决方案3】:

这将创建一个顶部边框为 2dp 的布局。 只需将其设置为布局的背景

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#4fc949"
                android:centerColor="#0c87c5"
                android:endColor="#b4ec51"
                android:angle="180" />
        </shape>
    </item>
    <item android:top="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/background_color"/>
        </shape>
    </item>
</layer-list>

【讨论】:

    【解决方案4】:

    这将是您想要做的适当解决方案。它包括描边渐变和填充颜色渐变。

    <?xml version="1.0" encoding="utf-8"?>
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
            <item>
                <shape >
                    <gradient
                        android:startColor="#2196F3"
                        android:endColor="#673AB7"
                        android:angle="270" />
                    <stroke
                        android:width="0dp"
                        android:color="@color/transparentColor" />
                    <corners
                        android:radius="8dp" />
                    <padding
                        android:left="2dp"
                        android:right="2dp"
                        android:top="2dp"
                        android:bottom="2dp" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
    
                </shape>
            </item>
            <item android:top="0dp">
                <shape>
                    <gradient
                        android:startColor="#FBB100"
                        android:endColor="#FF9900"
                        android:angle="270"/>
    
                    <corners
                        android:radius="8dp" />
                </shape>
            </item>
        </layer-list>
    

    【讨论】:

    • 谢谢!什么是空的第二个&lt;item&gt;?第一个透明色的&lt;stroke&gt;是干什么用的?
    【解决方案5】:

    这个额外的资源应该可以解决你的问题

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="rectangle">
                <gradient
                    android:angle="360"
                    android:centerColor="#e95a22"
                    android:endColor="#ff00b5"
                    android:gradientRadius="360"
                    android:startColor="#006386"
                    android:type="sweep" />
                <size android:height="170dp"
                    android:width="170dp"/>
            </shape>
        </item>
        <item android:top="2dp" android:bottom="2dp" android:right="2dp" android:left="2dp">
            <shape android:shape="rectangle">
                <size android:width="140dp"
                    android:height="140dp"/>
                <solid android:color="@color/colorAccent"/>
                <solid android:color="@color/white"/>
            </shape>
        </item>
    </layer-list>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-02-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多