Android LinearLayout градиентный фон

247

У меня проблемы с применением градиентного фона к LinearLayout.

Это должно быть относительно просто из того, что я прочитал, но это просто не работает. Для справки я разрабатываю на 2.1-обновление1.

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>

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

генезис
источник
android: backgroundTint android: backgroundTintMode stackoverflow.com/a/43341289/3209132
Прамод

Ответы:

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
Отлично. К вашему сведению, см. Другие типы градиентов: developer.android.com/reference/android/graphics/drawable/…
Bamaco
87

Также возможно иметь третий цвет (в центре). И разные виды фигур.

Например, в drawable / градиент.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>

Это дает вам черный - серый - черный (слева направо), который является моим любимым темным фоном.

Не забудьте добавить градиент.xml в качестве фона в свой макет xml:

android:background="@drawable/gradient"

Также возможно вращение с помощью:

Угол = "0"

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

и с

Угол = "90"

дает вам горизонтальную линию

Возможные углы:

0, 90, 180, 270.

Также есть несколько различных видов фигур:

Android: форма = "прямоугольник"

Округлая форма:

Android: форма = "овальный"

и, вероятно, еще несколько.

Надеюсь, это поможет, ура!

Синдри Лор
источник
40

В XML Drawable File:

<?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 = "@ drawable / градиент_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>

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

Pacific P. Regmi
источник
Привет, как ты достиг прозрачной строки состояния? Если я установлю его прозрачным в styles.xml, он станет черным ..
kironet
21

Попробуйте удалить андроид: градиентRadius = "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?
Винсент Мимун-Прат
Правильно - он все еще не работает с TextView внутри макета. Опять же, если я применяю статический цвет, а не прорисовываемый, он работает просто отлично. Одна вещь, которую я заметил, - я могу (иногда) заставить это работать, используя селектор, но это не должно быть необходимым из моего понимания.
Бытие
6

Моя проблема заключалась в том, что расширение .xml не было добавлено к имени файла вновь созданного XML-файла. Добавление расширения .xml решило мою проблему.

kwahn
источник
3

С Kotlin вы можете сделать это всего за 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%, почему это не сработало, но теперь я изменил его и поместил drawable в свойство «background» родительского объекта ImageView, которое в моем случае является RelativeLayout, например: (это сработало успешно)

<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'
lopez.mikhael
источник
Выглядит интересно. Работает ли это с более поздними версиями Android. У меня возникли проблемы с другими ответами, поскольку теперь они устарели: issetracker.google.com/issues/37114374
trees_are_great