Contoh dan cara membuat Android Shape Drawable | Tutorial
Cara Membuat Drawable Di Android, bentuk gambar dapat didefinisikan dalam xml yang dapat digunakan sebagai sumber daya dalam kode java dan xml untuk mengatur atribut terkait gambar seperti latar belakang, ikon, dll dari tampilan. Anda dapat menentukan persegi panjang, oval, cincin, dan bentuk garis yang dapat digambar dalam xml.
Elemen akar dari bentuk xml yang dapat ditarik adalah bentuk, Anda dapat menentukan sudut, gradien, padding, ukuran, solid dan stroke sebagai elemen anak dari bentuk untuk menentukan drawable. Menggunakan elemen sudut, Anda dapat menentukan bentuk persegi panjang terpojok. Elemen Gradien memungkinkan Anda untuk mengatur warna awal dan warna akhir, posisi x, posisi y, jenis gradien dan sudut dalam kelipatan 45 untuk menentukan gradien bentuk. Elemen padat memungkinkan Anda mengatur warna untuk mengisi bentuk. Elemen stroke memungkinkan Anda menentukan goresan seperti dan ketebalannya. Anda perlu menyimpan bentuk xmls yang dapat digambar di folder res / drawable.
Rectange Shape Drawable
Contoh di bawah ini mendefinisikan bentuk persegi panjang digambar dengan gradien dan sudut bulat. Atribut elemen gradien memungkinkan Anda menentukan pusat gradien pada sumbu x dan y, sudut gradien 0 (kiri ke kanan), 45 atau 90 (bawah ke atas), mulai, akhir dan pusat warna dan jenis gradien (radial, linier) dan menyapu).
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="0"
android:centerX="0.1"
android:centerY="0.1"
android:centerColor="#1976d2"
android:startColor="#00e5ff"
android:endColor="#6200ea"
android:gradientRadius="100"
android:type="linear"/>
<padding android:left="5dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp" />
<corners android:radius="6dp" />
</shape>
Ketika drawable di atas diterapkan ke sebuah tombol dengan mengatur atribut latar belakang ke drawable, itu akan menciptakan tombol terpojok, warna-gradien bulat. Di bawah ini adalah output dengan tipe gradien menyapu, linier dan radial.
Di bawah ini adalah output dengan nilai tengahX dan centerY dari elemen gradien diatur ke 0,1 dan 0,5, 0,5 dan 0,1 dan 0,5 dan 0,5 untuk jenis gradien yang berbeda.
Di bawah ini adalah output dengan nilai tengahX dan centerY dari elemen gradien diatur ke 0,1 dan 0,5, tipe gradien diatur ke linier dan dengan sudut gradien yang berbeda.
Di bawah ini adalah output dengan nilai yang berbeda untuk atribut gradientRadius elemen gradien dan dengan jenis gradien diatur ke radial.
Di bawah ini adalah definisi bentuk dengan elemen stroke, Anda dapat menggunakannya untuk membuat tombol dengan batas seperti yang ditunjukkan di bawah ini.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
....
<stroke android:color="@color/colorPrimaryDark"
android:width="4dp"
android:dashGap="4dp"
android:dashWidth="8dp"/>
</shape>
Bentuk Oval Dapat Ditarik
Anda dapat membuat bentuk lonjong seperti yang ditunjukkan di bawah ini dan menerapkannya ke tombol untuk membuat tombol berbentuk oval.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/colorPrimary"/>
</shape>
Di bawah gambar menunjukkan tombol berbentuk oval yang bisa Anda dapatkan ketika latar belakang diatur ke bentuk oval ditarik dengan elemen solid atau gradien didefinisikan.
Ring Shape Drawable
Untuk membuat bentuk cincin dapat digambar, Anda perlu mengatur bentuk, atribut innerRadius dan thichkness dari elemen bentuk. Di bawah layar menunjukkan tombol bulat yang dapat Anda buat dengan menyetel atribut latar belakang tombol ke bentuk cincin yang dapat digambar.
Untuk mengatur cincin di sekeliling tampilan, Anda perlu mengatur padding dalam definisi bentuk cincin yang dapat digambar. Anda dapat mengatur warna cincin menggunakan elemen bentuk padat atau gradien.
Di bawah ini adalah bentuk xmls menarik untuk ketiga output tombol yang ditunjukkan di atas masing-masing.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="20dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="@color/colorPrimary" />
<padding android:bottom="50dp"
android:left="16dp"
android:right="16dp"
android:top="50dp"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thickness="40dp"
android:useLevel="false">
<gradient
android:angle="0"
android:centerX="0.2"
android:centerY="0.6"
android:centerColor="#b60862"
android:startColor="#ba68c8"
android:endColor="#dd2c00"
android:gradientRadius="120"
android:type="sweep"/>
<padding android:bottom="50dp"
android:left="16dp"
android:right="16dp"
android:top="50dp"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="8dp"
android:shape="ring"
android:thickness="30dp"
android:useLevel="false">
<gradient
android:angle="0"
android:centerX="0.1"
android:centerY="0.1"
android:centerColor="#b60862"
android:startColor="#ba68c8"
android:endColor="#dd2c00"
android:gradientRadius="120"
android:type="sweep"/>
<padding android:bottom="50dp"
android:left="16dp"
android:right="16dp"
android:top="50dp"/>
</shape>
Bentuk Garis Dapat Dibaca
Untuk menentukan bentuk garis dapat digambar, Anda perlu mengatur atribut bentuk elemen bentuk ke garis dan menambahkan elemen storke dengan warna dan elemen ukuran.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="20dp"
android:color="#b71c1c" />
<size android:height="8dp" />
</shape>Semoga Bermanfaat dan Selamat Mencoba ~
0 Response to "Contoh dan cara membuat Android Shape Drawable | Tutorial"
Post a Comment