Фон для градієнта Android LinearLayout


247

У мене виникають проблеми із застосуванням градієнтного фону до LinearLayout.

Це має бути порівняно простим з того, що я прочитав, але це, здається, не працює. Для довідок я розробляю версію 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>

Якщо я зміню @ dravable / header_bg на колір - наприклад, # FF0000, він буде відмінно працювати. Я пропускаю тут щось очевидне?


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

Відповіді:


407

Гаразд, мені вдалося вирішити це за допомогою селектора. Дивіться код нижче:

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>

Сподіваємось, це допомагає тому, хто має таку ж проблему.


5
Чудово. FYI, дивіться інші типи градієнтів: developer.android.com/reference/android/graphics/dravable/…
Бамако

86

Можливо також третій колір (центр). І різні види фігур.

Наприклад, у dravable / 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>

Це дає вам чорний - сірий - чорний (зліва направо), що є моїм улюбленим темним тлом атм.

Не забудьте додати gradient.xml як тло у макет xml:

android:background="@drawable/gradient"

Можна також обертати за допомогою:

кут = "0"

дає вертикальну лінію

і с

кут = "90"

дає горизонтальну лінію

Можливі кути:

0, 90, 180, 270.

Також є кілька різних видів фігур:

android: shape = "прямокутник"

Закруглена форма:

android: shape = "oval"

і, мабуть, ще кілька.

Сподіваюся, це допоможе, ура!


40

У файлі 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>

У вашому файлі макета: android: background = "@ dravable / 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>

введіть тут опис зображення


Привіт, як ти досягнув прозорого рядка стану? Якщо я встановив його прозорим у стилях.xml, він стане чорним ..
kironet

21

Спробуйте видалити android: gradientRadius = "90". Ось такий, який працює для мене:

<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>

На жаль, це не працює для мене. Я оновив початкове запитання тим, що маю зараз.
Буття

Це все ще не працює, коли ви додаєте віджет у макет (наприклад, TextView?
Vincent Mimoun-Prat

Правильно - він все ще не працює з TextView всередині макета. Знову ж таки, якщо я застосую статичний колір, а не малювальний, він буде добре. Я помітив одне, що я можу (іноді) змусити його працювати за допомогою селектора, але це не повинно бути необхідним з мого розуміння.
Буття

6

Моєю проблемою було те, що розширення .xml не було додано до імені новоствореного файлу XML. Додавання розширення .xml виправило мою проблему.


3

З Котліном ви можете це зробити всього за 2 рядки

Зміна значень кольорів у масиві

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

                   //Set Gradient
                   linearLayout.setBackground(gradientDrawable);

Результат

введіть тут опис зображення


1

Я не знаю, чи це комусь допоможе, але моя проблема полягала в тому, що я намагався встановити градієнт на "src" властивості ImageView так:

<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"/>

Не на 100% впевнений, чому це не спрацювало, але тепер я змінив його і помістив в "фон" властивість батьківського зображення ImageView, що в моєму випадку є відносною схемою, як: (це спрацювало успішно)

<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

Я перевірив би ваш альфа-канал на ваші кольори градієнта. Для мене, коли я тестував свій код, у мене був встановлений альфа-канал неправильним кольором, і він не працював для мене. Як тільки я отримав набір альфа-каналів, це все спрацювало!


0

Для цього можна скористатися спеціальним представленням. Цим рішенням закінчено градієнтні форми всіх кольорів у ваших проектах:

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)
    }

}

Я також створюю проект із відкритим кодом GradientView із цим спеціальним поданням:

https://github.com/lopspower/GradientView

implementation 'com.mikhaellopez:gradientview:1.1.0'

Виглядає цікаво. Чи працює це з пізнішими версіями Android. У мене виникли проблеми з іншими відповідями, оскільки вони, здається, застаріли: issueetracker.google.com/isissue/37114374
дерева_are_great
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.