Android 漸變色Button

shape 屬性介紹

可以通過設(shè)置 angle 來自定義漸變方向吭敢,它是從左向右碰凶、逆時針轉(zhuǎn)的。
當(dāng) angle 設(shè)置為0度時 :


當(dāng)angle設(shè)置為90度時:


注意:設(shè)置的值以45度為一個單位鹿驼。

radial樣式的效果圖:


資源文件

layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.jkxy.custombutton.MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:textSize="50sp"
        android:text="Click me"
        android:textAllCaps="false"
        android:background="@drawable/button_enabled" />

    <Button
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:textSize="50sp"
        android:text="Click me"
        android:textAllCaps="false"
        android:background="@drawable/button_disabled" />
</LinearLayout>
第一個可點(diǎn)擊的Button:

drawable/button_enabled.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--正常狀態(tài)時-->
    <item android:state_pressed="false" android:drawable="@drawable/button_enabled_normal" />
    <!--被按下狀態(tài)時-->
    <item android:state_pressed="true" android:drawable="@drawable/button_enabled_pressed" />
</selector>

drawable/button_enabled_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="25dp">
        <shape android:shape="rectangle">
            <gradient
                android:angle="270"
                android:startColor="#B42DA0"
                android:endColor="#B12598"/>

            <!--設(shè)置上面兩個角的弧度-->
            <corners
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />
        </shape>
    </item>

    <item android:top="50dp">
        <shape android:shape="rectangle">
            <gradient
                android:angle="270"
                android:startColor="#94006C"
                android:endColor="#C20894"/>

            <!--設(shè)置下面兩個角的弧度-->
            <corners
                android:bottomLeftRadius="10dp"
                android:bottomRightRadius="10dp" />
        </shape>
    </item>
</layer-list>

drawable/button_enabled_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="25dp">
        <shape android:shape="rectangle">
            <!--設(shè)置漸變色-->
            <gradient
                android:angle="270"
                android:startColor="#F1983C"
                android:endColor="#F49C2D"/>

            <!--設(shè)置上面兩個角的弧度-->
            <corners
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />
        </shape>
    </item>

    <item android:top="50dp">
        <shape android:shape="rectangle">
            <gradient
                android:angle="270"
                android:startColor="#ED6B01"
                android:endColor="#F47307"/>
            <!--設(shè)置下面兩個角的弧度-->
            <corners
                android:bottomLeftRadius="10dp"
                android:bottomRightRadius="10dp" />
        </shape>
    </item>
</layer-list>
第二個不可點(diǎn)擊的Button:

drawable/button_disabled.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!--漸變1-->
    <item
        android:top="1dp"
        android:left="1dp"
        android:right="1dp"
        android:bottom="25dp">
        <shape android:shape="rectangle" >
            <!--設(shè)置漸變色-->
            <gradient
                android:angle="90"
                android:startColor="#F88800"
                android:endColor="#CB5500" />
            <!--設(shè)置角的弧度-->
            <corners
                android:topLeftRadius="8dp"
                android:topRightRadius="8dp" />
        </shape>
    </item>

    <!--漸變2-->
    <item
        android:top="50dp"
        android:left="1dp"
        android:right="1dp"
        android:bottom="1dp" >
        <shape android:shape="rectangle" >
            <gradient
                android:startColor="#FDD401"
                android:endColor="#E68E15"
                android:type="radial"
                android:centerY="0"
                android:gradientRadius="250" />
            <corners
                android:bottomLeftRadius="8dp"
                android:bottomRightRadius="8dp" />
        </shape>
    </item>

    <!--設(shè)置邊框-->
    <item>
        <shape android:shape="rectangle" >
            <corners android:radius="8dp" />
            <stroke
                android:width="2dp"
                android:color="#862501" />
        </shape>
    </item>
</layer-list>
最終效果圖

參考來源

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末欲低,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子畜晰,更是在濱河造成了極大的恐慌砾莱,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,013評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件凄鼻,死亡現(xiàn)場離奇詭異腊瑟,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)块蚌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,205評論 2 382
  • 文/潘曉璐 我一進(jìn)店門闰非,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人匈子,你說我怎么就攤上這事河胎。” “怎么了虎敦?”我有些...
    開封第一講書人閱讀 152,370評論 0 342
  • 文/不壞的土叔 我叫張陵游岳,是天一觀的道長政敢。 經(jīng)常有香客問我,道長胚迫,這世上最難降的妖魔是什么喷户? 我笑而不...
    開封第一講書人閱讀 55,168評論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮访锻,結(jié)果婚禮上褪尝,老公的妹妹穿的比我還像新娘。我一直安慰自己期犬,他們只是感情好河哑,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,153評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著龟虎,像睡著了一般璃谨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上鲤妥,一...
    開封第一講書人閱讀 48,954評論 1 283
  • 那天佳吞,我揣著相機(jī)與錄音,去河邊找鬼棉安。 笑死底扳,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的贡耽。 我是一名探鬼主播衷模,決...
    沈念sama閱讀 38,271評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蒲赂!你這毒婦竟也來了算芯?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,916評論 0 259
  • 序言:老撾萬榮一對情侶失蹤凳宙,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后职祷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體氏涩,經(jīng)...
    沈念sama閱讀 43,382評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,877評論 2 323
  • 正文 我和宋清朗相戀三年有梆,在試婚紗的時候發(fā)現(xiàn)自己被綠了是尖。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 37,989評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡泥耀,死狀恐怖饺汹,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情痰催,我是刑警寧澤兜辞,帶...
    沈念sama閱讀 33,624評論 4 322
  • 正文 年R本政府宣布迎瞧,位于F島的核電站,受9級特大地震影響逸吵,放射性物質(zhì)發(fā)生泄漏凶硅。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,209評論 3 307
  • 文/蒙蒙 一扫皱、第九天 我趴在偏房一處隱蔽的房頂上張望足绅。 院中可真熱鬧,春花似錦韩脑、人聲如沸氢妈。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,199評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽首量。三九已至,卻和暖如春衩匣,著一層夾襖步出監(jiān)牢的瞬間蕾总,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,418評論 1 260
  • 我被黑心中介騙來泰國打工琅捏, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留生百,地道東北人。 一個月前我還...
    沈念sama閱讀 45,401評論 2 352
  • 正文 我出身青樓柄延,卻偏偏與公主長得像蚀浆,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子搜吧,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,700評論 2 345

推薦閱讀更多精彩內(nèi)容