Стилизация приложений часть вторая

    Gradroid
    В прошлом уроке мы рассмотрели основные приемы стилизации. Идем дальше и узнаем немного нового про градиенты и рамки фигур.

    Градиенты


    Все хорошее быстро приедается, и мы хотим реализовать другие типы градиентов. Андроид поддерживает три стиля градиентов:
    • Линейный
    • Радиальный
    • Конический

    С линейным мы уже знакомы, идем к радиальному.

    Радиальный градиент

    radial gradient
    В радиальном градиенте происходит плавный переход из одного цвета в другой.

    Давайте модифицируем hbutton_normal.xml из предыдущего урока и изменим градиент на радиальный:
    <gradient
        android:endColor="#00CC00"
        android:gradientRadius="40"
        android:startColor="#EE0000"
        android:type="radial" />
    

    Получаем на выходе:
    button 1

    Хм, а не сместить ли нам градиент левее?
    <gradient
        android:centerX="0.2"
        android:endColor="#00CC00"
        android:gradientRadius="40"
        android:startColor="#EE0000"
        android:type="radial" />
    

    Получаем:


    Допустим, мы хотим добавить еще цветов. Андроид позволяет добавить еще один цвет в центр градиента:

    	<gradient
    	    android:centerColor="#0000DD"
    	    android:centerX="0.2"
    	    android:endColor="#00CC00"
    	    android:gradientRadius="40"
    	    android:startColor="#EE0000"
    	    android:type="radial" />
    

    Любуемся:


    Конический градиент

    В целом я не очень понимаю, зачем вообще Андроиду этот градиент, но вдруг вам пригодится:

    <gradient
        android:centerColor="#0000DD"
        android:centerX="0.8"
        android:endColor="#00CC00"
        android:gradientRadius="40"
        android:startColor="#EE0000"
        android:type="sweep" />
    

    Получаем:


    Рамки


    Рамки бывают двух видов — обычные непрерывные и необычные штрихами:)

    Обычные рамки

    Все довольно просто — цвет и толщина рамки:

    <stroke
        android:width="2dp"
        android:color="#00FFFF" />
    



    Штрихи

    Дополнительно указываем ширину штриха и расстояние между ними:

    <stroke
        android:dashGap="3dp"
        android:dashWidth="5dp"
        android:width="2dp"
        android:color="#00FFFF" />
    

    Получаем:
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 29

      0
      Спасибо! Полезная статья.
      Вот недавно задался вопросом как реализовать glow border, типа неоновую рамку вокруг елемента. Пока, что ничего другого как задать фоном картинку и сделать отступ ничего не придумал. Может есть более изящное решение?
        +1
        Ну если вам не хватает возможностей XML Drawable, то только 9-patch
        +2
        Скажите, а плагинов для экспорта в drawable для софта от Adobe, Corel или для Inkscape не существует?
          0
          Я с такими не встречался, скорей-всего нет
          +10
          Урок посвященный радиальному градиенту со страшными примерами.
            +3
            Я брал очень контрасные цвета, для демонстрации градиента, а не для готового стиля приложения.
              0
              Вспоминается комментарий про «выпадающие глаза» в статье про эффекты CSS3 :)
              0
              Глядя на эти чудные градиенты, я теперь понимаю, почему мне все время хочется спросить у Андроида: — и что жы страшная такая? и накрашенная страшная, и ненакрашенная…
              зы. Минус? :) А слабо удержаться от?..
                +5
                Хватит придираться у моим цветовым пристрастиям:) я может дальтоник:)
                  0
                  Я к Андроиду придирался :)
                    +3
                    Во-во, а надо было у моим цветовым пристрастиям.
                +2
                А в примере всегда обязательно использовать ужасные сочетания цвета?
                  0
                  Ну что вы как маленький, не раскрывать ведь мне боевые сочетания цветов, которые используются в настоящем приложении:) Для обучающей статьи само-то:)
                    0
                    Можно подумать, вы не можете изменить тон с голубого в реальном приложении на жёлтый в обучающих статьях и показывать что-то приличное вместо этой, с позволения сказать, жути.
                      +1
                      Вот немогу. Скриншот из прошлой статьи и то был из закрытого приложения, которое пока доступно 5 человекам, и мне вообще нельзя о нем ничего рассказывать. Вам ведь никто не мешает открыть тот-же фотошоп, побаловаться с палитрой и поменять цвета?
                        0
                        Попытаюсь поверить, поэтому готов не продолжать обсуждения. Но поверить получается плохо.
                        Ярко-зелёная кнопка на коричневом фоне — ваша большая тайна? При этом вырвать кнопку из контекста, перекрасить в красный запрещено компанией?
                        Много думал о будущем вашего приложения. Чешу в затылке.
                        Ну, судьба нас рассудит.
                          0
                          Зеленая кнопка и коричневый фон тоже перекрашены. Ну вот такая политика компании, я тут непричем
                +1
                Помнится, конический градиент — одно из важных преимуществ CorelDraw над Adobe Illustrator. С его помощью иконки CD рисовались на раз.
                Но зачем он андроиду, я тоже не понимаю.
                  0
                  Может кто-нибудь знает программу, в которой можно поиграться с этими параметрами? Эдакая утилита подготовки градиентов?
                    0
                    Эээ, GNU Image Manipulation Program, не?
                      0
                      :) Я имел ввиду генератор готового кода градиента под Андроид. Неужели самому писать.
                        0
                        Писать что? Программу? Да. 15 минут максимум, и то 5 из них будут запускаться эклипс и эмулятор. Далее вопрос: зачем? То-же самое можно реализовать и на пк, хотя-бы как веб странчку с селекторами цветов и изменением фона этой самой странички на нужный градиент. Плюс можно прикрутить как-бэ маленький ползунок, которым можно будет менять насыщенность градиента, видели может такой где-нить.
                          0
                          Да, я об этом тоже подумал.
                          Может создадим страницу со ссылками на хорошие инструменты разработчиков под Андроид?
                          Сейчас все настолько разбросано… :(
                            0
                            Может подскажете инструменты такие интересные? Я пока только один знаю: документация андроида.
                              0
                              Ну, например «родная» студия Андроида: android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
                              Средство подготовки изображений 9patch сразу на несколько разрешений: android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
                                0
                                Дык это все один инструмент. Его сырцы даже на гитхабе есть. Чего не нравиться — git clone и ковыряй, сколько хочешь. Можно еще локальный сервер поднять и можно ковырять в офлайне. В чем проблемы?
                                  0
                                  Тьфу, не на гитхабе, на code.google.com
                                    0
                                    Нравится. А существующее скудное разнообразие каждому по потребностям. Написание первой полезной программы заняло неделю: чтение первой книги, опыты, блуждание по developer.android.com и stackoverflow.com, поиск всяких хитрых загогулин, без знания которых ничего не получалось и в итоге очень приличный результат. Так что с высоты моей колокольни — написать первое приложение под Андроид — задача средней сложности, где больше всего нужно желание, иначе сдаться и бросить соблазн велик. Меня все еще бросает в дрожь, когда вспоминаю первые попытки написать приложение под Symbian в 2008 году. Мне тогда так и не удалось до конца настроить среду разработки, т.к. документация по установке, также как дополнительные инструменты разработчика под Android, разбросаны по просторам интернета. Да и нужды особой небыло, так что бросил я это занятие. С Андроидом все получилось, несмотря на скудоумие документации, которую явно писали закоренелые профессионалы, знающие все подводные камни, не упоминающие о них в текстах.

                    Only users with full accounts can post comments. Log in, please.