How To Programmatically Create Or Alter A Drawable Made Of Lines Of Different Colors

I have to draw a 3dp line to represent a level completion in a quizz game. This line must be of 2 colors. For example, if user has completed 40% of the level, the line will be red

Solution 1:

so this is a custom Drawable you can use:

classLineDrawableextendsDrawable {
    private Paint mPaint;

    publicLineDrawable() {
        mPaint = newPaint();
        mPaint.setStrokeWidth(3);
    }

    @Overridepublicvoiddraw(Canvas canvas) {
        intlvl= getLevel();
        Rectb= getBounds();
        floatx= b.width() * lvl / 10000.0f;
        floaty= (b.height() - mPaint.getStrokeWidth()) / 2;
        mPaint.setColor(0xffff0000);
        canvas.drawLine(0, y, x, y, mPaint);
        mPaint.setColor(0xff00ff00);
        canvas.drawLine(x, y, b.width(), y, mPaint);
    }

    @OverrideprotectedbooleanonLevelChange(int level) {
        invalidateSelf();
        returntrue;
    }

    @OverridepublicvoidsetAlpha(int alpha) {
    }

    @OverridepublicvoidsetColorFilter(ColorFilter cf) {
    }

    @OverridepublicintgetOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
}

and the test code:

Viewv=newView(this);
finalLineDrawabled=newLineDrawable();
d.setLevel(4000);
v.setBackgroundDrawable(d);
setContentView(v);
OnTouchListenerl=newOnTouchListener() {
    @OverridepublicbooleanonTouch(View v, MotionEvent event) {
        intlvl= (int) (10000 * event.getX() / v.getWidth());
        d.setLevel(lvl);
        returntrue;
    }
};
v.setOnTouchListener(l);

Solution 2:

How about using a progress bar? The style of the done and to-do markers can be set either programatically or via xml files. Your code will also be more readable/maintainable because you'll be using the right widget for the job. Your layout will contain:

<ProgressBar
    android:id="@+id/progressBar"
    android:layout_height="3dip"
    android:layout_width="match_parent"
    android:progressDrawable="@drawable/progress_bar" />

You can update the bar from your code using e.g.:

ProgressBarbar= (ProgressBar)findViewById(R.id.progressBar);
bar.setProgress(40);

This example overrides the style of the bar (as directed by the progressDrawable attribute), using a res/drawable/progress_bar.xml file - contents below. This one has extra niceness like gradient shading and rounded corners; adjust as you see fit:

<layer-listxmlns:android="http://schemas.android.com/apk/res/android" ><itemandroid:id="@android:id/background"><shape><cornersandroid:radius="5dip" /><gradientandroid:angle="270"android:centerColor="#ff5a5d5a"android:centerY="0.5"android:endColor="#ff747674"android:startColor="#ff9d9e9d" /></shape></item><itemandroid:id="@android:id/progress"><clip><shape><cornersandroid:radius="5dip" /><gradientandroid:angle="0"android:endColor="#ff009900"android:startColor="#ff000099" /></shape></clip></item></layer-list>

Credit to http://www.tiemenschut.com/how-to-customize-android-progress-bars/, which gives much more detail on how to customise progress bars.

Solution 3:

I found a way to do this. Don't know if it's the most efficient way, but here it is:

I used a RelativeLayout to superpose ImageViews with background color.

in layout.xml:

<RelativeLayoutstyle="@style/CompletionBar"><ImageViewandroid:id="@+id/row_completion_bar_0"style="@style/CompletionBar0" /><ImageViewandroid:id="@+id/row_completion_bar_1"style="@style/CompletionBar1" /></RelativeLayout>

in styles.xml:

<!-- Completion Bar (Relative Layout) --><stylename="CompletionBar"><itemname="android:layout_width">wrap_content</item><itemname="android:layout_height">wrap_content</item></style><!-- Completion Bar 0 (ImageView) --><stylename="CompletionBar0"><itemname="android:layout_width">100dp</item><itemname="android:layout_height">2dp</item><itemname="android:background">#CCCCCC</item></style><!-- Completion Bar 1 (ImageView) --><stylename="CompletionBar1"><itemname="android:layout_width">40dp</item><itemname="android:layout_height">2dp</item><itemname="android:background">#555555</item></style>

in java file:

ImageViewcb1= (ImageView)row.findViewById(R.id.row_completion_bar_1);
cb1.getLayoutParams().width = 40; /* Value in pixels, must convert to dp */

Solution 4:

This snippet will work for all api

Use this:

Drawabledrawable= editText.getBackground();
drawable.setColorFilter(editTextColor, PorterDuff.Mode.SRC_ATOP);
if(Build.VERSION.SDK_INT > 16) {
    editText.setBackground(drawable);
}else{
    editText.setBackgroundDrawable(drawable);
}