Program

Cara Mudah Membuat Background Gradient di Android Studio

Share to

Teknologi Riau-Hallo teman-teman semua. Pada kesempatan kali ini saya akan membahas tentang apa itu gradient, dan memberi sedikit tips tentang cara mudah membuat background gradient di Android Studio. Tentunya teman-teman semua sudah mengetahui apa itu gradient, dan pasti teman-teman semua sudah pernah melihat background suatu aplikasi yang menggunakan gradient. Sebagai contoh coba temab-teman lihat gambar dibawah ini.

Terlihat pada gambar diatas dimana background dari tampilan tersebut menggunakan gradient warna. Dengan adanya gradient warna ini membuat suatu tampilan aplikasi lebih menarik. Namun, tidak semua orang mengetahui cara membuat gradient warna ini pada android studio. Oke tidak masalah, setelah teman-teman membaca dan mengimplementasikan isi dari artikel ini, pasti teman-teman bisa membuat background gradient di android studio. Jangan lupa kunjungi cara membuat game android tanpa coding.

Berikut akan dijelaskan langkah-langkah dalam membuat gradient background di android studio.

  1. Buka android studio, kemudian buat project baru.
  2. Setelah membuat project, teman-teman tambahkan xml baru dengan cara pilih menu res->drawable. Kemudian klik kanan, pilih new dan pilih Drawable Resource File.
  3. Kemudian beri nama file, disini saya memberi nama bg_gradient. Setelah itu klik ok, maka secara otomatis file bg_gradient akan terbuka.
  4. Langkah selanjutnya yaitu masukkan coding seperti dibawah ini.
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <gradient
            android:startColor="#06cf7e"
            android:centerColor="#4251f5"
            android:endColor="#5603fc"
            android:angle="270"
            />
    
    </shape>
    
    
    
  5. Ketika sudah memasukkan coding diatas, maka akan muncul tampilan seperti gambar dibawah pada xml. Silahkan teman-teman sesuaikan warna dan angle sesuai keinginan teman-teman. Untuk mempermudah teman-teman dalam memilih warna yang cocok dalam membuat gradient ini, teman-teman bisa mengunjungi link ini.
  6. Kemudian buka activity yang akan teman-teman jadikan backgroundnya menjadi background gradient. Sebagai contoh, disini saya menggunakan Activity_main.xml.
  7. Pada Activity_main.xml, panggil bg_gradient yang sudah dibuat dan jadikan sebagai background dengan menambahkan baris coding sebagai berikut.
    android:background="@drawable/bg_gradient"
  8. Background gradient sudah berhasil dibuat. Disini saya menambahkan suatu textview, sehingga codingnya menjadi seperti dibawah.
    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:background="@drawable/bg_gradient"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Belajar Membuat Gradient"
            android:textSize="22dp"
            android:textStyle="bold"
            android:textColor="#ffffff"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
  9. Ketika program dijalankan, maka akan muncul hasil seperti gambar dibawah ini.

Nah itu tadi cara mudah tentang membuat background gradient di android studio, semoga bermanfaat 🙂

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

[…] gambar atau logo bisa kunjungi situs ini. Untuk membuat background gradient, bisa mengunjungi tutorial ini. Untuk desain xml yang saya buat seperti gambar dibawah ini. Silahkan teman-teman sesuaikan […]