我如何使用形状而不是图像创建条纹背景

Question

I was wondering how I can create a background with lines of different colors without actually add a background image. I wanted to solve it using any shape or some code in java.

Thank you very much!

Answer 1

This is my 9 patch (I called it /res/drawable/stripes_vert_4.9.png ):

<= LOOK! It's here! It's 14*5 px in size, including the borders. Weight: 205 bytes

This is the result when set as background:

Now a semi-opaque gradient (I called it /res/drawable/bg_stripes_vert_gradient ):

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <gradient
        android:startColor="#0000"
        android:endColor="#8000"
        android:gradientRadius="180"
        android:type="linear"
        android:angle="-90"
    />
</shape>

Play with the start|center|endColor to get the best balance.
Now, the layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/stripes_vert_4"
    >
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/bg_stripes_vert_gradient"
    />
</RelativeLayout>

And the ultimate result:

Answer 2

You can use dummy views in your layout file. Dummy views are just simple "view" objects in an xml layout file. you can set width, heigh, backgroundcolor, padding, ... on these views. They're especially useful when creating horizontal/vertical dividers or stripes in android. This is how you can use them to achieve a background, just like the image in your question.Instead of color for the background of this views, you can define a gradient as an xml file in your drawable folder :

Here I have used a linear layout to put 4 of these views in vertical orientation, while each of them occupies 25% of screen-width real estate, on any screen size.

   <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:weightSum="1">

       <View 
         android:id="@+id/stripe_one"
         android:layout_width="0dp"
         android:layout_height="match_parent"
         android:layout_weight="0.25"
         android:background="@color/red"  />

       <View 
         android:id="@+id/stripe_two"
         android:layout_width="0dp"
         android:layout_height="match_parent"
         android:layout_weight="0.25"
         android:background="@color/orange"  />

       <View 
         android:id="@+id/stripe_three"
         android:layout_width="0dp"
         android:layout_height="match_parent"
         android:layout_weight="0.25"
         android:background="@color/velvet"  />

       <View 
         android:id="@+id/stripe_four"
         android:layout_width="0dp"
         android:layout_height="match_parent"
         android:layout_weight="0.25"
         android:background="@color/green"  />

  <LinearLayout />

Answer 3

There are good answers here already. This method is meant to show that it is not too hard to solve these kinds of problems with a custom view, if you know a few tricks. Details can be found in this article:

https://developer.android.com/guide/topics/graphics/2d-graphics.html

Here's the code:

package com.example;

import android.content.Context;
import android.graphics.*;
import android.util.AttributeSet;
import android.view.View;

public class CustomView extends View {
Bitmap bitmap;
Paint paint;
Rect dst;

public CustomView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public CustomView(Context context) {
    super(context);
    init();
}

void init() {
    paint = new Paint();
    paint.setStyle(Paint.Style.FILL_AND_STROKE);

    bitmap = Bitmap.createBitmap(4, 1, Bitmap.Config.ARGB_8888);
    Canvas c = new Canvas(bitmap);

    paint.setColor(Color.parseColor("#c43134"));
    c.drawRect(0, 0, 1, 1, paint);

    paint.setColor(Color.parseColor("#b3632e"));
    c.drawRect(1, 0, 2, 1, paint);

    paint.setColor(Color.parseColor("#ab2463"));
    c.drawRect(2, 0, 3, 1, paint);

    paint.setColor(Color.parseColor("#8e9e34"));
    c.drawRect(3, 0, 4, 1, paint);
}

protected void onDraw(Canvas canvas) {
    canvas.drawBitmap(bitmap, (Rect) null, dst, paint);
}

protected void onSizeChanged(int x, int y, int ox, int oy) {
    dst = new Rect(0, 0, x, y);
}
}

The idea is to use basic 2d drawing commands to pre-draw a simple shape into a small bitmap that will be automatically scaled up to fit the dimensions of the view when it is drawn.

The drawBitmap() call in the onDraw() method is fast, according to the article linked, so this method is compatible with dynamic or animated displays.

Edit: a screenshot:

Edit: I didn't point out how to include the custom view in a layout. Here is a basic example.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<com.example.CustomView
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</FrameLayout>