CODEWITHSUNDEEP
androidgraphicstextviewprogress
Ahamed
Ahamed

Reputation: 39695

Display progress in TextView Android

Hi I have to show progress in the number itself. I have come across Shader, Gradient used in TextView for horizontal multicoloring of the text. Is their any such built in API to paint characters as in the below image?

Sample Progress Percentage Image - MSPaint

Thanks in Advance

Upvotes: 1

Views: 1079

Answers (4)

Arun Chand
Arun Chand

Reputation: 384

Use the below code to make gradient.

int[] color = {Color.DKGRAY,Color.CYAN};
float[] position = {0, 1};
TileMode tile_mode = TileMode.REPEAT;
LinearGradient lin_grad = new LinearGradient(0, 0, 0, 35, color, position, tile_mode);
Shader shader_gradient = lin_grad;
your_text_view.getPaint().setShader(shader_gradient); //you can change the gradient colour in textview

Upvotes: 4

SDJMcHattie
SDJMcHattie

Reputation: 1699

Another possible solution, improving on Arun's answer is this (untested but should work):

private void setTextViewShading(TextView view, float percentage) {
    int[] colors = {Color.WHITE, Color.WHITE, Color.GREEN, Color.GREEN};
    float floatPerc = percentage / 100;
    float[] position = {0, floatPerc, floatPerc + 0.0001, 1};
    TileMode tileMode = TileMode.REPEAT;
    LinearGradient linGrad = new LinearGradient(0, 0, 0, view.getHeight(), colors, position, tileMode);
    Shader shaderGradient = linGrad;
    view.getPaint().setShader(shaderGradient);
}

Upvotes: 1

SDJMcHattie
SDJMcHattie

Reputation: 1699

If I were you, I would create my own view class that, in onDraw(), renders white text using a StaticLayout, then sets a PorterDuffXferMode mask on the canvas to mask off the area you want to avoid drawing in green. Save the layer, use another StaticLayout to render the text in green then restore the layer with the mask to get the cut off exactly where you want it to be.

Upvotes: 0

Dave C
Dave C

Reputation: 928

You can create two TextViews, one white and one green in exactly the same position. Set the height of one so that the text is clipped and it only partly covers the other.

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#990000" >

<TextView
    android:id="@+id/text_green"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_x="58dp"
    android:layout_y="77dp"
    android:text="50"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="#009900"
    android:textSize="100sp" />

<TextView
    android:id="@+id/text_white"
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    android:layout_x="58dp"
    android:layout_y="77dp"
    android:text="50"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="#FFFFFF"
    android:textSize="100sp" />

</AbsoluteLayout>

Upvotes: 4

Related Questions