Jak zrobić tło gradientowe w Androidzie

229

Chcę utworzyć tło gradientowe, w którym gradient znajduje się w górnej połowie, a w dolnej połowie jest jednolity kolor, jak na poniższym obrazku:

Nie mogę, ponieważ centerColorrozkłada się na dolną i górną część.

W gradiencie przycisku biała pozioma linia zanika na niebiesko w górę i w dół.

Jak mogę zrobić tło jak pierwszy obraz? Jak mogę zrobić małe, centerColorktóre się nie rozłożą?

To jest kod w XML przycisku tła powyżej.

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <gradient 
        android:startColor="#6586F0"
        android:centerColor="#D6D6D6"
        android:endColor="#4B6CD6"
        android:angle="90"/>
    <corners 
        android:radius="0dp"/>


</shape>
kongkea
źródło
1
dzięki, już to rozwiązałem. ale będę dumny, jeśli odpowiesz więcej. stackoverflow.com/questions/6652547/…
kongkea
spróbuj tego webgradients.com
Ivan Aracki

Odpowiedzi:

59

Możesz stworzyć ten „pół-gradientowy” wygląd, używając xml Layer-List do łączenia górnych i dolnych „pasm” w jeden plik. Każdy zespół ma kształt xml.

Zobacz tę poprzednią odpowiedź na temat SO, aby uzyskać szczegółowy samouczek: Kształty wielokątne .

Gunnar Karlsson
źródło
317

Spróbuj tego:

<?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:centerColor="#555994"
        android:endColor="#b5b6d2"
        android:startColor="#555994"
        android:type="linear" />

    <corners 
        android:radius="0dp"/>

</shape>
Pratik Sharma
źródło
Co jeśli chcę umieścić gradient w tle dla układu liniowego?
Ankit Srivastava
@Ankit Skaluje się, aby wypełnić układ
Dawid Drozd
2
@Ankit: tworzysz plik .xml z możliwością rysowania, kopiujesz i wklej powyższy kod do tego pliku, fajnie się baw. <RelativeLayout ... android: background = "@ drawable / your_xml_name" ...>
TomeeNS
Ponadto, jeśli chcesz, aby gradient zanikał na całym ekranie, ustaw 50% krycie pasma środkowego. W tym przypadku „# 50555994”
Zachary
@Pratik Sharma Jak mogę określić, aby rozpocząć gradiant od określonej części? mam na myśli, że chcę trochę zmienić kolor z prawej strony
Użytkownik
316

Przykłady wizualne pomagają w tego rodzaju pytaniach.

Płyta grzewcza

Aby utworzyć gradient, należy utworzyć plik XML w res / drawable. Dzwonię do mojego my_gradient_drawable.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="linear"
        android:angle="0"
        android:startColor="#f6ee19"
        android:endColor="#115ede" />
</shape>

Ustawiasz go jako tło jakiegoś widoku. Na przykład:

<View
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:background="@drawable/my_gradient_drawable"/>

type = „linear”

Ustaw angledla lineartypu. Musi to być wielokrotność 45 stopni.

<gradient
    android:type="linear"
    android:angle="0"
    android:startColor="#f6ee19"
    android:endColor="#115ede" />

wprowadź opis zdjęcia tutaj

type = „radial”

Ustaw gradientRadiusdla radialtypu. Używanie %poznacza, że ​​jest to procent najmniejszego wymiaru rodzica.

<gradient
    android:type="radial"
    android:gradientRadius="10%p"
    android:startColor="#f6ee19"
    android:endColor="#115ede" />

wprowadź opis zdjęcia tutaj

type = „sweep”

Nie wiem, dlaczego ktoś miałby zamiatać, ale włączam to dla kompletności. Nie mogłem wymyślić, jak zmienić kąt, więc dołączam tylko jeden obraz.

<gradient
    android:type="sweep"
    android:startColor="#f6ee19"
    android:endColor="#115ede" />

wprowadź opis zdjęcia tutaj

środek

Możesz także zmienić środek typu przeciągnięcia lub promieniowy. Wartości są ułamkami szerokości i wysokości. Możesz także użyć %pnotacji.

android:centerX="0.2"
android:centerY="0.7"

wprowadź opis zdjęcia tutaj

Suragch
źródło
49

Poniższy link może pomóc http://angrytools.com/gradient/ . Spowoduje to utworzenie niestandardowego tła gradientu w Androidzie, jak w Photoshopie.

Trafienia
źródło
Jeszcze raz podoba mi się CSS Matic , aby przyszli inni
krozaine
33

Najpierw musisz utworzyć plik gradient.xml w następujący sposób

<shape>
    <gradient android:angle="270" android:endColor="#181818" android:startColor="#616161" />

    <stroke android:width="1dp" android:color="#343434" />
</shape>

Następnie należy wspomnieć o powyższym gradiencie w tle układu

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/gradient"
    >   
</LinearLayout>
Harish
źródło
w książce, którą czytam, mówi się o umieszczeniu ich w folderze drawables. Czy potrzebuję jednego na folder?
JGallardo,
1
Utwórz w folderze z możliwością rysowania i umieść w nim plik gradient.xml, skąd możesz uzyskać do niego dostęp. Nie musisz tworzyć wielu folderów.
Harish
22

Lub możesz użyć w kodzie, cokolwiek myślisz w PSD:

    private void FillCustomGradient(View v) {
        final View view = v;
        Drawable[] layers = new Drawable[1];

        ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
            @Override
            public Shader resize(int width, int height) {
                LinearGradient lg = new LinearGradient(
                        0,
                        0,
                        0,
                        view.getHeight(),
                        new int[] {
                                 getResources().getColor(R.color.color1), // please input your color from resource for color-4
                                 getResources().getColor(R.color.color2),
                                 getResources().getColor(R.color.color3),
                                 getResources().getColor(R.color.color4)},
                        new float[] { 0, 0.49f, 0.50f, 1 },
                        Shader.TileMode.CLAMP);
                return lg;
            }
        };
        PaintDrawable p = new PaintDrawable();
        p.setShape(new RectShape());
        p.setShaderFactory(sf);
        p.setCornerRadii(new float[] { 5, 5, 5, 5, 0, 0, 0, 0 });
        layers[0] = (Drawable) p;

        LayerDrawable composite = new LayerDrawable(layers);
        view.setBackgroundDrawable(composite);
    }
miroslavign
źródło
i powinno być szybsze niż przy użyciu list warstw
miroslavign
8
//Color.parseColor() method allow us to convert
// a hexadecimal color string to an integer value (int color)
int[] colors = {Color.parseColor("#008000"),Color.parseColor("#ADFF2F")};

//create a new gradient color
GradientDrawable gd = new GradientDrawable(
GradientDrawable.Orientation.TOP_BOTTOM, colors);

gd.setCornerRadius(0f);
//apply the button background to newly created drawable gradient
btn.setBackground(gd);

Patrz tutaj https://android--code.blogspot.in/2015/01/android-button-gradient-color.html

Upendranath Reddy
źródło
3

Użyj tego kodu w folderze z możliwością rysowania.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#3f5063" />
    <corners
        android:bottomLeftRadius="30dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="0dp" />
    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" />
    <gradient
        android:angle="45"
        android:centerColor="#015664"
        android:endColor="#636969"
        android:startColor="#2ea4e7" />
    <stroke
        android:width="1dp"
        android:color="#000000" />
</shape>
Muthu Krishnan
źródło