안드로이드에서 그라디언트 배경을 만드는 법


229

아래 이미지와 같이 그라디언트가 위쪽 절반에 있고 아래쪽 절반에 단색이있는 그라디언트 배경을 만들고 싶습니다.

나는 centerColor바닥과 상단을 덮기 위해 퍼지기 때문에 나는 할 수 없습니다 .

버튼의 그라디언트에서 흰색 가로선이 파란색과 위쪽 및 아래쪽으로 흐려집니다.

첫 번째 이미지와 같은 배경을 어떻게 만들 수 있습니까? centerColor퍼지지 않는 작은 것을 어떻게 만들 수 있습니까?

위의 백그라운드 버튼의 XML 코드입니다.

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

1
고마워 이미 해결했습니다. 당신이 더 대답한다면 나는 자랑스러워 할 것입니다. stackoverflow.com/questions/6652547/…
kongkea

답변:


59

xml Layer-List 를 사용하여 상단 및 하단 '밴드'를 하나의 파일로 결합 하여이 '하프 그라디언트'모양을 만들 수 있습니다 . 각 밴드는 xml 모양입니다.

자세한 자습서는 다중 그라디언트 모양에 대한 SO의 이전 답변을 참조하십시오 .


317

이것을 사용해보십시오 :

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

선형 레이아웃의 배경에 그라디언트를 넣고 싶다면 어떻게해야합니까 ??
Ankit Srivastava

@Ankit 그것은 레이아웃 채우기 위해 확장 할 수
DAWID 할 Drozd에게

2
@Ankit : 드로어 블 .xml 파일을 만들고 위 코드를 복사하여 붙여 넣습니다. <RelativeLayout ... android : background = "@ drawable / your_xml_name"...>
TomeeNS

또한 그라디언트가 전체 화면에서 페이드 인되도록하려면 중앙 밴드를 50 % 불투명도로 만드십시오. 이 경우 "# 50555994"
Zachary

@Pratik Sharma 특정 부분에서이 gradiant를 시작하도록 어떻게 지정할 수 있습니까? 난 그냥 오른쪽에서 약간의 색상 변경을 시작하고 싶다는 의미
User

317

시각적 예는 이런 종류의 질문에 도움이됩니다.

보일러 플레이트

그라디언트를 만들려면 res / drawable에 xml 파일을 만듭니다. 내 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>

일부보기의 배경으로 설정했습니다. 예를 들면 다음과 같습니다.

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

type = "linear"

를 설정 angleA의 linear유형입니다. 45 도의 배수 여야합니다.

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

여기에 이미지 설명을 입력하십시오

type = "방사형"

를 설정 gradientRadiusA의 radial유형입니다. 사용 %p은 부모의 가장 작은 차원의 백분율을 의미합니다.

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

여기에 이미지 설명을 입력하십시오

type = "sweep"

나는 왜 누군가가 스윕을 사용할지 모르겠지만, 완전성을 위해 그것을 포함하고 있습니다. 각도를 변경하는 방법을 알 수 없으므로 하나의 이미지 만 포함합니다.

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

여기에 이미지 설명을 입력하십시오

센터

스윕 중심 또는 방사형 유형을 변경할 수도 있습니다. 값은 너비와 높이의 분수입니다. %p표기법 을 사용할 수도 있습니다 .

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

여기에 이미지 설명을 입력하십시오



33

먼저 다음과 같이 gradient.xml을 만들어야합니다.

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

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

그런 다음 레이아웃 배경에서 위의 그라디언트를 언급해야합니다.

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

내가 읽고있는 책에서 그것들을 drawables 폴더에 넣는 것에 대해 이야기합니다. 폴더 당 하나가 필요합니까?
JGallardo

1
드로어 블 폴더를 만들고 거기에서 gradient.xml 파일을 저장하면 그 폴더에 액세스 할 수 있습니다. 여러 폴더를 만들 필요가 없습니다.
Harish

22

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

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

여기에서 참조하십시오 https://android--code.blogspot.in/2015/01/android-button-gradient-color.html


3

드로어 블 폴더에서이 코드를 사용하십시오.

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

1

이미지 나 9 패치 이미지를 만들어서 사용하지 않겠습니까?

아래 링크에는 방법에 대한 유용한 가이드가 있습니다.

http://android.amberfog.com/?p=247

Shape 사용을 고집하는 경우 아래 사이트를 방문하십시오 (왼쪽 아래에서 Android 선택). http://angrytools.com/gradient/

이 링크에있는 것과 비슷한 그라디언트를 만들었습니다 ( http://angrytools.com/gradient/?0_6586f0,54_4B6CD6,2_D6D6D6&0_100,100_100&l_269

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.