วิธีที่จะทำให้พื้นหลังไล่ระดับสีใน Android


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

ลองใช้webgradients.com
Ivan Aracki

คำตอบ:


59

คุณสามารถสร้างลุค 'ไล่ระดับสี' นี้โดยใช้เลเยอร์ xml เพื่อรวม 'แถบ' ด้านบนและล่างลงในไฟล์เดียว แต่ละวงมีรูปร่างเป็น xml

ดูคำตอบก่อนหน้านี้ดังนั้นสำหรับกวดวิชารายละเอียด: รูปทรงหลายลาด


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 ฉันจะระบุวิธีการเริ่มการไล่ระดับสีนี้จากส่วนที่เฉพาะเจาะจงได้อย่างไร? ฉันหมายถึงฉันต้องการเริ่มการเปลี่ยนสีจากด้านขวาเล็กน้อย
ผู้ใช้

317

ตัวอย่างภาพช่วยในคำถามประเภทนี้

สำเร็จรูป

ในการสร้างการไล่ระดับสีคุณต้องสร้างไฟล์ xml แบบ res / drawable ฉันโทรหาฉัน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"/>

พิมพ์ = "เส้นตรง"

ตั้งค่าangleสำหรับlinearประเภท จะต้องมีหลาย 45 องศา

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

ป้อนคำอธิบายรูปภาพที่นี่

พิมพ์ = "รัศมี"

ตั้งค่าgradientRadiusสำหรับradialประเภท การใช้%pหมายความว่าเป็นเปอร์เซ็นต์ของขนาดที่เล็กที่สุดของพาเรนต์

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

ป้อนคำอธิบายรูปภาพที่นี่

พิมพ์ = "กวาด"

ฉันไม่รู้ว่าทำไมทุกคนถึงใช้การกวาด แต่ฉันรวมไว้เพื่อความสมบูรณ์ ฉันไม่สามารถหาวิธีเปลี่ยนมุมได้ดังนั้นฉันจึงรวมภาพเดียวเท่านั้น

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

ในหนังสือที่ฉันกำลังอ่านมันพูดถึงการวางลงในโฟลเดอร์ drawable ฉันต้องการหนึ่งโฟลเดอร์หรือไม่
JGallardo

1
สร้างในโฟลเดอร์ drawable และวางไฟล์ 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

ใช้รหัสนี้ในโฟลเดอร์ drawable

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

ทำไมไม่สร้างภาพหรือภาพ Patch 9 และใช้มัน?

ลิงค์ด้านล่างมีคำแนะนำที่ดีเกี่ยวกับวิธีการ:

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

หากคุณยืนยันที่จะใช้รูปร่างลองเว็บไซต์ด้านล่าง (เลือก 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.