Membuat Button Gradien di Android

Belajar Android

Membuat tombol atau button gradien dapat dibuat dengan berbagai cara. dalam tutorial ini penulis akan menunjukkan kepada pembaca metode paling sederhana. menggunakan xml kita akan menciptakan drawable yang menggambarkan sebagai pewarna tombol. kemudian dalam layout kita dapat mengatur  drawable menjadi latar belakang tombol (menggunakan

 Android:setbackground="@drawable /..."

)

Untuk membuat button gradien, langkah – langkahnya adalah sebagai berikut :

  1. Dalam project yang dibuat, navigasikan ke res > drawable (buat folder jika belum ada)
  2. Buat file buttons_<color>.xml selector. (right
  3. click on the drawable folder > New > Android XML File)
  4. Anda dapat membuatnya dengan warna yang saya gunakan atau bisa di ganti sesuai selera
  5. Jangan lupa tetapkan latar belakang drawable yang di inginkan .misalnya 
     android:background="@drawable/button_red.xml"

button_light.xml

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

    <item android:state_pressed="true">
        <shape android:shape="rectangle">

            <solid android:color="#A6A6A6" />
            <corners android:radius="6dp" />

        </shape>
    </item>

    <item>
		<shape android:shape="rectangle">

	        <gradient
	            android:startColor="#EEEEEE"
	            android:endColor="#FFFFFF"
	            android:centerColor="#D1D1D1"
	            android:angle="90" />
	            <corners android:radius="6dp" />

       </shape>
   </item>
</selector>

button_yellow.xml

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

<item android:state_pressed="true">
<shape android:shape="rectangle">

<solid android:color="#FFE996" />
<corners android:radius="6dp" />

</shape>
</item>

<item>
<shape android:shape="rectangle">

<gradient
android:startColor="#FFD330"
android:endColor="#FFE996"
android:centerColor="#DEB51F"
android:angle="90" />
<corners android:radius="6dp" />

</shape>
</item>
</selector>

button_orange.xml

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

<item android:state_pressed="true">
<shape android:shape="rectangle">

<solid android:color="#F5B95F" />
<corners android:radius="6dp" />

</shape>
</item>

<item>
<shape android:shape="rectangle">

<gradient
android:startColor="#D59D4A"
android:endColor="#F5B95F"
android:centerColor="#BF8F49"
android:angle="90" />
<corners android:radius="6dp" />

</shape>
</item>
</selector>

button_red.xml

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

<item android:state_pressed="true">
<shape android:shape="rectangle">

<solid android:color="#EB4B49" />
<corners android:radius="6dp" />

</shape>
</item>

<item>
<shape android:shape="rectangle">

<gradient
android:startColor="#BE3C3A"
android:endColor="#EB4B49"
android:centerColor="#AD3634"
android:angle="90" />
<corners android:radius="6dp" />

</shape>
</item>
</selector>

 button_green.xml

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

<item android:state_pressed="true">
<shape android:shape="rectangle">

<solid android:color="#60EBCA" />
<corners android:radius="6dp" />

</shape>
</item>

<item>
<shape android:shape="rectangle">

<gradient
android:startColor="#4BAE97"
android:endColor="#60EBCA"
android:centerColor="#3B8F7B"
android:angle="90" />
<corners android:radius="6dp" />

</shape>
</item>
</selector>

button_blue.xml

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

<item android:state_pressed="true">
<shape android:shape="rectangle">

<solid android:color="#79CCED" />
<corners android:radius="6dp" />

</shape>
</item>

<item>
<shape android:shape="rectangle">

<gradient
android:startColor="#6FBBD9"
android:endColor="#79CCED"
android:centerColor="#4A869E"
android:angle="90" />
<corners android:radius="6dp" />

</shape>
</item>
</selector>

button_navy.xml

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

<item android:state_pressed="true">
<shape android:shape="rectangle">

<solid android:color="#B2D5DB" />
<corners android:radius="6dp" />

</shape>
</item>

<item>
<shape android:shape="rectangle">

<gradient
android:startColor="#9BB9BE"
android:endColor="#B2D5DB"
android:centerColor="#62777A"
android:angle="90" />
<corners android:radius="6dp" />

</shape>
</item>
</selector>

button_black.xml

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

<item android:state_pressed="true">
<shape android:shape="rectangle">

<solid android:color="#575757" />
<corners android:radius="6dp" />

</shape>
</item>

<item>
<shape android:shape="rectangle">

<gradient
android:startColor="#333333"
android:endColor="#575757"
android:centerColor="#141414"
android:angle="90" />
<corners android:radius="6dp" />

</shape>
</item>
</selector>

Styles.xml :

<style name="customButton">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">26sp</item>
<item name="android:textColor">#FEFEFE</item>
<item name="android:text">Press Me!</item>
<item name="android:layout_margin">5dp</item>

</style>

<Button
android:id="@+id/button1"
style="@style/customButton"
android:background="@drawable/button_red" />

No related posts.