Drawable Resources Tutorial | Android

Drawable Resources adalah mewakili file grafik atau file xml drawable yang dapat digambar di layar.
Di Android, file-file ini disimpan dalam folder res / drawable. Untuk mencegah gambar buram, sumber daya yang dapat digambar untuk resolusi layar yang berbeda disediakan dalam folder khusus yang dapat ditarik resolusi layar seperti drawable-mdpi, drawable-hdpi, drawable-xhdpi dan drawable-xxhdpi.

Berbagai jenis gambar yang dapat digambar adalah bitmap, bitmap xml, sembilan-patch, daftar lapisan, daftar negara, daftar tingkat, transisi dapat digambar, klip dapat digambar, skala dapat digambar dan bentuk dapat digambar.

Bitmap

File bitmap adalah .png, .jpg dan .gif. File bitmap yang disukai untuk android adalah .png. File bitmap harus disimpan dalam folder res / drawable dan dapat diakses dari xml dan kode java. Misalnya jika Anda menyimpan file bitmap panda.png dalam proyek Anda, Anda dapat mengakses dari xml dan kode java seperti yang ditunjukkan di bawah ini.

 <ImageButton android:id="@+id/panda"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/panda"/> 

 ((ImageButton)findViewById(R.id.panda)).setImageResource(R.drawable.panda); 

File bitmap dapat dibaca sebagai objek Drawable menggunakan objek Resources.

 Drawable panda = getResources().getDrawable(R.drawable.panda); 

Bitmap XML

Anda dapat menambahkan properti ke bitamp di xml dan menggunakannya sebagai drawable. Beberapa properti yang dapat ditambahkan ke bitmap adalah dither, digunakan ketika gambar dan piksel layar tidak cocok, filter, digunakan untuk kelancaran tampilan bitmap ketika itu meregang atau menyusut, dan mode ubin, digunakan untuk mengulang gambar. Di bawah ini adalah contoh bitmap xml dengan tileMode diatur ke cermin.

Jika bitmap lebih kecil dari wadahnya, Anda dapat menentukan posisi drawable dalam wadahnya menggunakan atribut gravitasi. Nilai atribut gravitasi seperti atas, bawah, kiri, kanan, dan tengah tidak akan menskala bitmap jika lebih kecil dari tampilan penampung.

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/zoftino"
    android:tileMode="mirror" /> 

Digunakan sebagai latar belakang tampilan gambar.

 <ImageView
    android:id="@+id/img"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/xml_bitmap"/> 

Sembilan-File Patch

Mirip dengan bitmap, Anda dapat menggunakan file sembilan-patch dan sembilan-patch xml. untuk mengetahui bagaimana mengkonversi bitmap menjadi file gambar sembilan-patch.

Daftar Lapisan

Anda dapat menentukan daftar gambar yang dapat digambar dalam xml dan menggunakannya sebagai sumber daya yang dapat ditarik di aplikasi Android Anda. Drawable ini disebut daftar layer drawable. Layer list drawable menarik item yang dapat ditarik dalam urutan yang ditentukan dalam xml dan setiap item yang dapat ditarik ditarik di atas item yang dapat digambar sebelumnya. Barang yang terakhir ditarik ditarik di atas.

Elemen akar dari daftar lapisan xml yang dapat ditarik adalah elemen daftar-lapisan, Anda dapat menentukan lapisan item yang dapat ditarik menggunakan elemen item. Di bawah ini adalah contoh daftar lapisan yang dapat digambar.

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap android:src="@drawable/square_blue"
            android:gravity="center" />
    </item>
    <item>
        <bitmap android:src="@drawable/square_red"
            android:gravity="center" />
    </item>
    <item>
        <bitmap android:src="@drawable/square_green"
            android:gravity="center" />
    </item>
</layer-list>

Layer list drawable digunakan sebagai nilai atribut src dari ImageView.

 <ImageView
    android:id="@+id/img"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/layer_list"/>

Daftar Negara

Daftar negara yang dapat ditarik memungkinkan Anda untuk menentukan daftar gambar yang dapat digambar untuk negara bagian yang berbeda dari suatu tampilan. Ketika daftar status dapat ditarik disetel ke salah satu atribut gambar yang dapat ditarik, nilai atribut diambil dari daftar negara xml yang dapat ditarik untuk keadaan tampilan saat ini. Ketika kondisi tampilan berubah, nilai untuk atribut akan berubah ke drawable yang didefinisikan dalam daftar negara xml yang dapat ditarik untuk status yang diubah.

Elemen root dari daftar status xml yang dapat ditarik adalah pemilih. Anda menetapkan item yang dapat ditarik untuk setiap status menggunakan elemen item. Status tampilan difokuskan, dipilih, ditekan, dibidik, dapat diperiksa, diklik, diaktifkan, dan diaktifkan.

Di bawah ini adalah contoh dari daftar negara xml ditarik yang dapat digunakan dalam gaya sebagai nilai untuk atribut tombol untuk kotak centang.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true"
        android:drawable="@drawable/checked" />
    <item android:state_focused="true"
        android:drawable="@drawable/focused" />
    <item android:state_enabled="false"
        android:drawable="@drawable/diabled" />
    <item android:drawable="@drawable/unchecked" />
</selector>

Daftar Tingkat

Menggunakan daftar tingkat yang dapat digambar, atribut yang dapat ditarik dari suatu tampilan dapat disetel ke drawable yang tidak terlalu banyak pada waktu berjalan dengan memanggil setLevel pada objek Drawable dan nilai tingkat kelulusan ke atasnya. Nilai level menunjuk ke drawable dalam daftar level yang dapat digambar.

Anda dapat menentukan tingkat daftar xml yang dapat ditarik dengan item gambar yang dapat diatur yang berbeda nilai maks dan min untuk setiap drawable. Pada waktu proses, tergantung pada nilai yang diteruskan ke metode setLevel, drawable dari daftar yang dapat ditarik akan dipilih dan ditampilkan.

Contoh di bawah ini mendefinisikan daftar tingkat xml dengan tiga item yang dapat ditiru dengan tingkat dan rentang tingkat yang berbeda. Pada mengklik tombol, level bertambah dengan memanggil setLevel di Drawable yang akan membuatnya menunjukkan drawable yang sesuai dari daftar level. Setiap kali tombol diklik, gambar akan diubah untuk mencerminkan nilai level.

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/square_red"
        android:maxLevel="0" />
    <item
    android:drawable="@drawable/square_blue"
    android:maxLevel="1" />
    <item
        android:drawable="@drawable/square_green"
        android:minLevel="2"
        android:maxLevel="4"/>
</level-list>

Tata letak xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_margin="8dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/level_list"/>
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:text="Button"/>
</LinearLayout>

Aktivitas

public class LevelListActivity extends AppCompatActivity {
    private int levelInt = 0;
    private ImageView img;
    private Drawable drawable;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.level_list_activity);

        drawable = getResources().getDrawable(R.drawable.level_list);
        img = findViewById(R.id.img);

        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(levelInt >= 4){
                    levelInt = 0;
                }else{
                    levelInt++;
                }
                drawable.setLevel(levelInt);
                img.setImageDrawable(drawable);
                img.refreshDrawableState();
            }
        });
    }
}

Tarik Transisi

Transition drawable memungkinkan Anda untuk mendefinisikan dua item yang dapat digambar dalam xml dan transisi dari drawable ke drawable kedua pada memanggil metode starttransition di atasnya. Anda dapat menentukan waktu transisi sebagai argumen untuk metode startTransition. Untuk membuatnya bertransisi dari barang yang dapat ditarik kedua menjadi drawable pertama, metode reverseTransition harus dipanggil. Dalam contoh di bawah ini, setiap kali tombol diklik, transisi gambar akan terjadi.

 <?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/square_red" />
    <item android:drawable="@drawable/square_green" />
</transition> 

img = findViewById(R.id.img);
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        TransitionDrawable drawable = (TransitionDrawable) img.getDrawable();
        drawable.startTransition(1000);
    }
});

Drawable Inset

Anda dapat menggunakan inset drawable ketika drawable lebih kecil dari View untuk membuatnya terlihat.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/orange"
    android:insetTop="20dp"
    android:insetLeft="20dp" />

Clip Drawable

Clip drawable memungkinkan Anda menyembunyikan drawable dan secara perlahan membuatnya terlihat. Dengan memanggil setLevel pada objek yang dapat digambar dan meningkatkan level akan mengungkapkan gambar secara perlahan ketika levelnya meningkat. Pada contoh di bawah ini ketika tombol diklik, gambar akan terlihat secara perlahan.

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/android"
    android:clipOrientation="vertical"
    android:gravity="top" />

 public class ClipDrawableActivity extends AppCompatActivity {
    private int levelInt = 0;
    private ImageView img;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.clip_drawable_activity);

        img = findViewById(R.id.img);
        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ClipDrawable drawable = (ClipDrawable) img.getDrawable();
                levelInt = levelInt +500;
                drawable.setLevel(levelInt);
            }
        });
    }
}

Scale Drawable

Dengan menggunakan skala drawable, Anda dapat menentukan bagaimana drawable dapat diskalakan tergantung pada level dengan mengatur skala tinggi, skala lebar dan skala gravitasi. Di bawah ini adalah contoh skala yang dapat ditarik yang ditampilkan dalam tampilan gambar. Pada mengklik sebuah tombol, level drawable akan ditingkatkan dengan memanggil set Level dan tingkat kelulusan. Ketika level meningkat, drawable yang ditampilkan dalam ImageView akan diskalakan.

 <?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/zoftino"
    android:scaleGravity="center_vertical|center_horizontal"
    android:scaleHeight="60%"
    android:scaleWidth="60%" />

        img = findViewById(R.id.img);
        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ScaleDrawable drawable = (ScaleDrawable) img.getDrawable();
                levelInt = levelInt +800;
                drawable.setLevel(levelInt);
            }
        });

Shape Drawable

Shape drawable memungkinkan Anda untuk mendefinisikan berbagai bentuk dalam xml dan xml yang didefinisikan dapat digunakan sebagai nilai atribut drawable views. Anda dapat menentukan bentuk persegi panjang, persegi, oval, dan cincin menggunakan bentuk dapat digambar.

KEEP CODING ~

Share this post