Latar Belakang Gradien LinearLayout Android


246

Saya mengalami kesulitan menerapkan latar belakang gradien ke LinearLayout.

Ini seharusnya relatif sederhana dari apa yang saya baca tetapi sepertinya tidak berhasil. Demi referensi saya sedang mengembangkan pada 2.1-update1.

header_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:startColor="#FFFF0000"
        android:endColor="#FF00FF00"
        android:type="linear"/>
</shape>

main_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:orientation="horizontal"
    android:background="@drawable/header_bg">
</LinearLayout>

Jika saya mengubah @ drawable / header_bg ke warna - mis. # FF0000 berfungsi dengan baik. Apakah saya melewatkan sesuatu yang jelas di sini?


android: backgroundTint android: backgroundTintMode stackoverflow.com/a/43341289/3209132
Pramod Garg

Jawaban:


406

Ok, saya sudah berhasil menyelesaikan ini menggunakan pemilih. Lihat kode di bawah ini:

main_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:orientation="horizontal"
    android:background="@drawable/main_header_selector">
</LinearLayout>

main_header_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape>
        <gradient
            android:angle="90"
            android:startColor="#FFFF0000"
            android:endColor="#FF00FF00"
            android:type="linear" />
    </shape>
</item>
</selector>

Semoga ini membantu seseorang yang memiliki masalah yang sama.


5
Bagus. FYI, lihat jenis gradien lainnya: developer.android.com/reference/android/graphics/drawable/…
Bamaco

86

Dimungkinkan juga untuk memiliki warna ketiga (tengah). Dan berbagai macam bentuk.

Misalnya di drawable / gradient.xml:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#000000"
        android:centerColor="#5b5b5b"
        android:endColor="#000000"
        android:angle="0" />
</shape>

Ini memberi Anda hitam - abu - abu (kiri ke kanan) yang merupakan atm latar belakang gelap favorit saya.

Ingatlah untuk menambahkan gradient.xml sebagai latar belakang dalam tata letak Anda xml:

android:background="@drawable/gradient"

Dimungkinkan juga untuk memutar, dengan:

angle = "0"

memberi Anda garis vertikal

dan dengan

angle = "90"

memberi Anda garis horizontal

Kemungkinan sudut adalah:

0, 90, 180, 270.

Juga ada beberapa jenis bentuk:

android: shape = "rectangle"

Bentuk bulat:

android: shape = "oval"

dan mungkin beberapa lagi.

Semoga ini bisa membantu, tepuk tangan!


40

Dalam File Drawable XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient android:angle="90"
                android:endColor="#9b0493"
                android:startColor="#38068f"
                android:type="linear" />
        </shape>
    </item>
</selector>

Dalam file tata letak Anda: android: background = "@ drawable / gradient_background"

  <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gradient_background"
        android:orientation="vertical"
        android:padding="20dp">
        .....

</LinearLayout>

masukkan deskripsi gambar di sini


Hai, bagaimana Anda mencapai bilah status transparan? Jika saya atur transparan dalam styles.xml menjadi hitam ..
kironet

21

Coba hapus android: gradientRadius = "90". Inilah salah satu yang bekerja untuk saya:

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
>
    <gradient
        android:startColor="@color/purple"
        android:endColor="@color/pink"
        android:angle="270" />
</shape>

Sayangnya itu tidak bekerja untuk saya. Saya telah memperbarui pertanyaan awal dengan apa yang saya miliki sekarang.
Kejadian

Apakah itu masih tidak berfungsi ketika Anda menambahkan widget di tata letak (misalnya TextView?
Vincent Mimoun-Prat

Benar - masih tidak berfungsi dengan TextView di dalam tata letak. Sekali lagi, jika saya menerapkan warna statis daripada yang dapat digambar itu berfungsi dengan baik. Satu hal yang saya perhatikan adalah saya bisa (kadang-kadang) membuatnya bekerja menggunakan pemilih tetapi itu tidak perlu dari pemahaman saya.
Kejadian

6

Masalah saya adalah ekstensi .xml tidak ditambahkan ke nama file dari file XML yang baru dibuat. Menambahkan ekstensi .xml memperbaiki masalah saya.


3

Dengan Kotlin Anda dapat melakukannya hanya dalam 2 baris

Ubah nilai warna dalam array

                  val gradientDrawable = GradientDrawable(
                        GradientDrawable.Orientation.TOP_BOTTOM,
                        intArrayOf(Color.parseColor("#008000"),
                                   Color.parseColor("#ADFF2F"))
                    );
                    gradientDrawable.cornerRadius = 0f;

                   //Set Gradient
                   linearLayout.setBackground(gradientDrawable);

Hasil

masukkan deskripsi gambar di sini


1

Saya tidak tahu apakah ini akan membantu siapa pun, tetapi masalah saya adalah saya mencoba mengatur gradien ke properti "src" dari ImageView seperti:

<ImageView 
    android:id="@+id/imgToast"
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    android:src="@drawable/toast_bg"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"/>

Tidak 100% yakin mengapa itu tidak berhasil, tapi sekarang saya mengubahnya dan meletakkan drawable di properti "latar belakang" dari induk ImageView, yang merupakan RelativeLayout dalam kasus saya, seperti: (ini berhasil)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/custom_toast_layout_id"
    android:layout_height="match_parent"
    android:background="@drawable/toast_bg">

0

Saya akan memeriksa saluran alpha Anda pada warna gradien Anda. Bagi saya, ketika saya menguji kode saya, saya memiliki saluran alpha salah pada warna dan itu tidak berhasil untuk saya. Setelah saya mendapatkan saluran alpha, semuanya bekerja!


0

Anda dapat menggunakan tampilan khusus untuk melakukan itu. Dengan solusi ini, selesai bentuk gradien dari semua warna di proyek Anda:

class GradientView(context: Context, attrs: AttributeSet) : View(context, attrs) {

    // Properties
    private val paint: Paint = Paint()
    private val rect = Rect()

    //region Attributes
    var start: Int = Color.WHITE
    var end: Int = Color.WHITE
    //endregion

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        // Update Size
        val usableWidth = width - (paddingLeft + paddingRight)
        val usableHeight = height - (paddingTop + paddingBottom)
        rect.right = usableWidth
        rect.bottom = usableHeight
        // Update Color
        paint.shader = LinearGradient(0f, 0f, width.toFloat(), 0f,
                start, end, Shader.TileMode.CLAMP)
        // ReDraw
        invalidate()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawRect(rect, paint)
    }

}

Saya juga membuat proyek open source GradientView dengan tampilan khusus ini:

https://github.com/lopspower/GradientView

implementation 'com.mikhaellopez:gradientview:1.1.0'

Terlihat menarik. Apakah ini berfungsi dengan versi Android yang lebih baru. Saya mengalami masalah dengan jawaban lain karena sekarang tampaknya sudah usang: issuetracker.google.com/issues/37114374
trees_are_great
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.