Android: How to create a StateListDrawable programmatically - android

I have a GridView to display some objects, and visually each of the objects will have an image icon and a text label. I also want the image icon to have some "push and pop" effect when clicked, that is, when pressed, the image will move a small distance to the bottom right direction, and when released get back to its original position.
The objects (and their image icons) are from some dynamic sources. My intuition is to create a StateListDrawable for each item, which will have two states: pressed or not. For GridView item view, I would use a Button, which can accomodate a Drawable and a label, that perfectly satisfies my requirment.
I defined an item class to wrap up the original object:
public class GridItem<T> {
public static final int ICON_OFFSET = 4;
private StateListDrawable mIcon;
private String mLabel;
private T mObject;
public Drawable getIcon() {
return mIcon;
}
public void setIcon(Drawable d) {
if (null == d) {
mIcon = null;
}else if(d instanceof StateListDrawable) {
mIcon = (StateListDrawable) d;
} else {
InsetDrawable d1 = new InsetDrawable(d, 0, 0, ICON_OFFSET, ICON_OFFSET);
InsetDrawable d2 = new InsetDrawable(d, ICON_OFFSET, ICON_OFFSET, 0, 0);
mIcon = new StateListDrawable();
mIcon.addState(new int[] { android.R.attr.state_pressed }, d2);
mIcon.addState(StateSet.WILD_CARD, d1);
//This won't help either: mIcon.addState(new int[]{}, d1);
}
}
public String getLabel() {
return mLabel;
}
public void setLabel(String l) {
mLabel = l;
}
public T getObject() {
return mObject;
}
public void setObject(T o) {
mObject = o;
}
}
Now the problem is, when I touch a grid item, the icon "moves" quite as I have expected, but it won't restore its original position when my finger lifts up leaving the item.
My question is: how to programmatically create a StateListDrawable equivalent to one inflated from an XML resource like
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/image_pressed" />
<item android:drawable="#drawable/image_normal" />
</selector>
?

if your drawables are just bitmaps, you could draw them programmatically, for now it should help, however I wonder what is the problem with InsetDrawable usage here, basically use prepared BitmapDrawables that are drawn programatically, you would need to modify your method to accept bitmaps b
Bitmap bc1 = Bitmap.createBitmap(b.getWidth() + ICON_OFFSET, b.getHeight() + ICON_OFFSET, Bitmap.Config.ARGB_8888);
Canvas c1 = new Canvas(bc1);
c1.drawBitmap(b, 0, 0, null);
Bitmap bc2 = Bitmap.createBitmap(b.getWidth() + ICON_OFFSET, b.getHeight() + ICON_OFFSET, Bitmap.Config.ARGB_8888);
Canvas c2 = new Canvas(bc2);
c2.drawBitmap(b, ICON_OFFSET, ICON_OFFSET, null);
mIcon = new StateListDrawable();
mIcon.addState(new int[] { android.R.attr.state_pressed }, new BitmapDrawable(bc2));
mIcon.addState(StateSet.WILD_CARD, new BitmapDrawable(bc1));

I can see the answer is already accepted. I am sharing if you want to assign dynamically colors of buttons from the users for normal as well as pressed state. then you can just call this function :
public static StateListDrawable convertColorIntoBitmap(String pressedColor, String normalColor){
/*Creating bitmap for color which will be used at pressed state*/
Rect rectPressed = new Rect(0, 0, 1, 1);
Bitmap imagePressed = Bitmap.createBitmap(rectPressed.width(), rectPressed.height(), Config.ARGB_8888);
Canvas canvas = new Canvas(imagePressed);
int colorPressed = Color.parseColor(pressedColor);
Paint paintPressed = new Paint();
paintPressed.setColor(colorPressed);
canvas.drawRect(rectPressed, paintPressed);
RectF bounds = new RectF();
bounds.round(rectPressed);
/*Creating bitmap for color which will be used at normal state*/
Rect rectNormal = new Rect(0, 0, 1, 1);
Bitmap imageNormal = Bitmap.createBitmap(rectNormal.width(), rectNormal.height(), Config.ARGB_8888);
Canvas canvasNormal = new Canvas(imageNormal);
int colorNormal = Color.parseColor(normalColor);
Paint paintNormal = new Paint();
paintNormal.setColor(colorNormal);
canvasNormal.drawRect(rectNormal, paintNormal);
/*Now assigning states to StateListDrawable*/
StateListDrawable stateListDrawable= new StateListDrawable();
stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, new BitmapDrawable(imagePressed));
stateListDrawable.addState(StateSet.WILD_CARD, new BitmapDrawable(imageNormal));
return stateListDrawable;
}
Now all you need is to set it as your textview or button background like below :
if(android.os.Build.VERSION.SDK_INT>=16){
yourbutton.setBackground(convertColorIntoBitmap("#CEF6CE00","#4C9D32"));
}else{
yourbutton.setBackgroundDrawable(convertColorIntoBitmap("#CEF6CE00","#4C9D32"));
}
Here you can see all you need to pass the colors dynamically and we're done. hope this will help someone :) You can find it's gist too here :)

I have seen the previous answers, but came up with a much shorter and better solution using ColorDrawable.
/**
* Get {#link StateListDrawable} given the {#code normalColor} and {#code pressedColor}
* for dynamic button coloring
*
* #param normalColor The color in normal state.
* #param pressedColor The color in pressed state.
* #return
*/
public static StateListDrawable getStateListDrawable(int normalColor, int pressedColor) {
StateListDrawable stateListDrawable = new StateListDrawable();
stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, new ColorDrawable(pressedColor));
stateListDrawable.addState(StateSet.WILD_CARD, new ColorDrawable(normalColor));
return stateListDrawable;
}
This accepts resolved colors as integer and uses ColorDrawable to add them in a StateListDrawable.
Once you have the drawable, you can use it simply like this,
if (android.os.Build.VERSION.SDK_INT >= 16) {
mButton.setBackground(Utils.getStateListDrawable(ResourceUtils.getColor(R.color.white),
ResourceUtils.getColor(R.color.pomegranate)));
} else {
mButton.setBackgroundDrawable(Utils.getStateListDrawable(ResourceUtils.getColor(R.color.white),
ResourceUtils.getColor(R.color.pomegranate)));
}

Related

Progress bar with round corners and multiple colors

I've read already similar questions here and here and are good solutions if you only want to show a single progress bar with rounded corners, but in my case I want to show a progress made out of multiple "sub-progress" colors like in the image below:
What I've done so far is to code a LinearGradient implementation like this answer but it looks squared in the corners.
How can I obtain this progress?
After some research I found this class PaintDrawable which I can set as background of any View, and surprisingly I can set a Shape to this Drawable, so if I use the RoudRectShape it seems rounded as I want it to be, my final code is as follows:
// mRatios is a View
ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
#Override
public Shader resize(int i, int i1) {
LinearGradient lg = new LinearGradient(0, 0, mRatios.getWidth(), 0,
barColorsArray,
barRatiosArray,
Shader.TileMode.REPEAT);
return lg;
}
};
PaintDrawable paintDrawable = new PaintDrawable();
// not sure how to calculate the values here, but it works with these constants in my case
paintDrawable.setShape(new RoundRectShape(new float[]{100,100,100,100,100,100,100,100}, null, null));
paintDrawable.setShaderFactory(sf);
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
mRatios.setBackgroundDrawable(paintDrawable);
} else {
mRatios.setBackground(paintDrawable);
}

Android: create a drawable that shows two lines of text one above the other in different fonts and sizes?

I want to create a single drawable that shows two lines of text, one above the other. Each line of text has to be in it's own typeface and textsize and it has to create a single drawable because I want to then set it as the drawable for a floating action button.
private void updateFloatingButtonText(String headlineText, String subHeadlineText, FloatingActionButton floatingActionButton) {
int headlineTextSize = getResources().getDimensionPixelSize(R.dimen.headlineTextSize);
int subheadlineTextSize = getResources().getDimensionPixelSize(R.dimen.subheadlineTextSize);
Spannable spannableStringHeadline = new SpannableString(headlineText);
Spannable spannableStringSubheadline = new SpannableString(subHeadlineText);
CustomTypefaceSpan boldSpan = new CustomTypefaceSpan("FontOne", FontCache.get("FontOne.ttf", this));
CustomTypefaceSpan regularSpan = new CustomTypefaceSpan("FontTwo", FontCache.get("FontTwo.ttf", this));
// set typeface headline
spannableStringHeadline.setSpan(regularSpan, 0,
headlineText.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE
);
// set typeface subtitle
spannableStringSubheadline.setSpan(boldSpan, 0,
subHeadlineText.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE
);
// set text size headline
spannableStringHeadline.setSpan(new AbsoluteSizeSpan(headlineTextSize), 0,
headlineText.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE
);
// set text size subline
spannableStringSubheadline.setSpan(new AbsoluteSizeSpan(subheadlineTextSize), 0,
subHeadlineText.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE
);
String finalString = TextUtils.concat(spannableStringHeadline, "\n", spannableStringSubheadline);
floatingActionButton.setImageDrawable([put the resulting drawable here]);
}
I've written this method that creates a single string formatted exactly the way that I need it, but I still have the issue of creating a drawable out of it.
I've tried to use this third party library, but although it displays the text in the correct typefaces it doesn't change the textsize of the lines of text.
https://github.com/devunwired/textdrawable
Is there a trivial (or nontrivial) way of doing this?
Solved by creating a new class that looks like this:
public class TextToDrawable extends Drawable {
private String headlineText = "";
private String subHeadlineText = "";
private final TextPaint headlinePaint = new TextPaint();
private final TextPaint subHeadlinePaint = new TextPaint();
public TextToDrawable(Context context, String headlineText, String subHeadlineText) {
this.headlineText = headlineText;
headlinePaint.setAntiAlias(true);
headlinePaint.setTypeface(FontCache.get("FontA.ttf", context));
headlinePaint.setTextSize(context.getResources().getDimensionPixelSize(R.dimen.headlineTextSize));
headlinePaint.setColor(ContextCompat.getColor(context, android.R.color.white));
headlinePaint.setStyle(Paint.Style.FILL);
headlinePaint.setTextAlign(Paint.Align.LEFT);
this.subHeadlineText = subHeadlineText;
subHeadlinePaint.setAntiAlias(true);
subHeadlinePaint.setTypeface(FontCache.get("FontB.ttf", context));
subHeadlinePaint.setTextSize(context.getResources().getDimensionPixelSize(R.dimen.subheadlineTextSize));
subHeadlinePaint.setColor(ContextCompat.getColor(context, android.R.color.white));
subHeadlinePaint.setStyle(Paint.Style.FILL);
subHeadlinePaint.setTextAlign(Paint.Align.LEFT);
}
#Override
public void draw(Canvas canvas) {
Rect headlineWidth = new Rect();
Rect subheadlineWidth = new Rect();
headlinePaint.getTextBounds(headlineText, 0, headlineText.length(), headlineWidth);
subHeadlinePaint.getTextBounds(subHeadlineText, 0, subHeadlineText.length(), subheadlineWidth);
Rect bounds = new Rect();
headlinePaint.getTextBounds(headlineText, 0, headlineText.length(), bounds);
int x = getBounds().width() / 2 - (headlineWidth.width()/2);
int y = (getBounds().height() / 2);
canvas.drawText(headlineText, x, y, headlinePaint);
x = getBounds().width()/2 - (subheadlineWidth.width()/2);
y += headlinePaint.getFontSpacing();
canvas.drawText(subHeadlineText, x, y, subHeadlinePaint);
}
#Override
public void setAlpha(int alpha) {
}
#Override
public void setColorFilter(ColorFilter colorFilter) {
}
#Override
public int getOpacity() {
return 0;
}
}
Then using the new class like this:
mFloatingActionButton.setImageDrawable(new TextToDrawable(this, "Headline", "Subheadline"));
This isn't a great solution because it only supports two lines of text - there's nothing dynamic going on here. However, I suppose it would be fairly easy to rewrite to support even more lines and more fonts and it solves the current problem.

StateListDrawable with LayerDrawable created programatically not working on Android 4.0+

I am trying to create an option group with coloured squares for the user to choose one. It is working on a 3.2 device and looking like in this picture:
The code is something like:
for (int i = 0; i < COLORS.length; i++) {
CheckBox box = new CheckBox(context);
box.setBackgroundDrawable(getColorOption(context, COLORS[i]));
box.setButtonDrawable(android.R.color.transparent);
And then, in the getColorOption function I create the StateListDrawable:
StateListDrawable slDrawable = new StateListDrawable();
LayerDrawable checkedDrawable = new LayerDrawable(new Drawable[] {
new SelectFrameShapeDrawable(transparentColor, lightRedColor),
new SquareShapeDrawable(color) });
LayerDrawable uncheckedDrawable = new LayerDrawable(new Drawable[] {
new SelectFrameShapeDrawable(transparentColor, transparentColor),
new SquareShapeDrawable(color) });
slDrawable.addState(new int[] { android.R.attr.state_checked },
checkedDrawable);
slDrawable.addState(new int[] { -android.R.attr.state_checked }, uncheckedDrawable);
return slDrawable;
The SquareShapeDrawable class is a ShapeDrawable:
public class SquareShapeDrawable extends ShapeDrawable {
private final Paint fillpaint;
public SquareShapeDrawable(int color) {
super(new RectShape());
fillpaint = new Paint(this.getPaint());
fillpaint.setColor(color);
}
#Override
protected void onDraw(Shape shape, Canvas canvas, Paint paint) {
shape.draw(canvas, fillpaint);
}
}
And the SelectFrameShapeDrawable is:
private class SelectFrameShapeDrawable extends ShapeDrawable {
private final Paint fillpaint, strokepaint;
public SelectFrameShapeDrawable(int fill, int stroke) {
super(new RectShape());
strokepaint = new Paint(this.getPaint());
strokepaint.setStyle(Paint.Style.STROKE);
strokepaint.setStrokeWidth((int) (getResources()
.getDisplayMetrics().density + 0.5f));
strokepaint.setColor(stroke);
int padding = (int) (4 * getResources().getDisplayMetrics().density + 0.5f);
setPadding(padding, padding, padding, padding);
fillpaint = new Paint(strokepaint);
fillpaint.setColor(fill);
}
#Override
protected void onDraw(Shape shape, Canvas canvas, Paint paint) {
if (strokepaint != null)
shape.draw(canvas, strokepaint);
shape.draw(canvas, fillpaint);
}
}
On a 4.2 device all the squares are black and do not change when checked:
The problem seems to be when adding the drawables to the StateListDrawable...
Any idea how to solve this?
I solved the black squares issue by removing the custom classes that extended ShapeDrawable and replaced them with the code bellow that uses the ShapeDrawable class directly. This code seems to work on all platforms.
It is weird though that the original issue was present on 4.2 and not on 3.2. My original source of inspiration was this: http://www.betaful.com/2012/01/programmatic-shapes-in-android/
ShapeDrawable selectFrame = new ShapeDrawable();
selectFrame.setShape(new RectShape());
selectFrame.getPaint().setColor(lightRedColor);
selectFrame.getPaint().setStyle(Paint.Style.STROKE);
selectFrame.getPaint().setStrokeWidth((int) (getResources().getDisplayMetrics().density + 0.5f));
int padding = (int) (4 * getResources().getDisplayMetrics().density + 0.5f);
selectFrame.setPadding(padding, padding, padding, padding);
ShapeDrawable square = new ShapeDrawable();
square.setShape(new RectShape());
square.getPaint().setColor(color);
LayerDrawable checkedDrawable = new LayerDrawable(new Drawable[] {
selectFrame, square });
...
In my simulator with android 4.2 revision 2 (the lastest update), the checkbox does not appear, and I found the problem is: when setButtonDrawable as null or ColorDrawable, the checkbox measure it's size is 0 of width. This is not cause of the StateListDrawable.
I try to set width, and height of checkbox, and everything seems OK.
Try this: box.setWidth(30); box.setHeight(30);
Or when you add the checkbox to the layout using the layoutparams like"new RelativeLayout.LayoutParams(50, 50));".
Hope this help

Get the background color of a button in android

How do i get the background color of a button.
In the xml i set the background color using ---- android:background = XXXXX
now in the activity class how can i retrieve this value that it has ?
Unfortunately I don't know how to retrieve the actual color.
It's easy to get this as a Drawable
Button button = (Button) findViewById(R.id.my_button);
Drawable buttonBackground = button.getBackground();
If you know this is a color then you can try
ColorDrawable buttonColor = (ColorDrawable) button.getBackground();
And if you're on Android 3.0+ you can get out the resource id of the color.
int colorId = buttonColor.getColor();
And compare this to your assigned colors, ie.
if (colorID == R.color.green) {
log("color is green");
}
private Bitmap mBitmap;
private Canvas mCanvas;
private Rect mBounds;
public void initIfNeeded() {
if(mBitmap == null) {
mBitmap = Bitmap.createBitmap(1,1, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap);
mBounds = new Rect();
}
}
public int getBackgroundColor(View view) {
// The actual color, not the id.
int color = Color.BLACK;
if(view.getBackground() instanceof ColorDrawable) {
if(Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {
initIfNeeded();
// If the ColorDrawable makes use of its bounds in the draw method,
// we may not be able to get the color we want. This is not the usual
// case before Ice Cream Sandwich (4.0.1 r1).
// Yet, we change the bounds temporarily, just to be sure that we are
// successful.
ColorDrawable colorDrawable = (ColorDrawable)view.getBackground();
mBounds.set(colorDrawable.getBounds()); // Save the original bounds.
colorDrawable.setBounds(0, 0, 1, 1); // Change the bounds.
colorDrawable.draw(mCanvas);
color = mBitmap.getPixel(0, 0);
colorDrawable.setBounds(mBounds); // Restore the original bounds.
}
else {
color = ((ColorDrawable)view.getBackground()).getColor();
}
}
return color;
}
You can also try something like set the color value as the tag like
android:tag="#ff0000"
And access it from the code
String colorCode = (String)btn.getTag();
The simpliest way to get the color for me is:
int color = ((ColorDrawable)button.getBackground()).getColor();
Tested and working on Lollipop 5.1.1
To get the background Drawable, you use
public Drawable getBackground();
as defined in the base View class.
Don't forget that the Button can have a background that is an image, a color, a gradient. If you use android:background="#ffffff", the class of the background will be
android.graphics.drawable.ColorDrawable
From there you can simply call
public int getColor()
Try this:
list_view.getChildAt(position).setBackgroundColor(Color.YELLOW);
ColorDrawable corItem = (ColorDrawable) list_view.getChildAt(position).getBackground();
if(corItem.getColor() == Color.YELLOW){
Toast.makeText(NovoProcessoActivity.this,"Right Color!", Toast.LENGTH_SHORT).show();
}else{
Toast.makeText(NovoProcessoActivity.this,"Wrong Color!", Toast.LENGTH_SHORT).show();
}
or
int color =( (ColorDrawable) list_view.getChildAt(position).getBackground()).getColor();
int colornumber=((ColorDrawable)v.getBackground()).getColor();
This is the best and simple way to get the color of a View (Button, TextView...)
To get set color to a View using java we use
v.setBackgroundColor(getColor(R.color.colorname_you_used));

Text with gradient in Android

How would I extend TextView to allow the drawing of text with a gradient effect?
TextView secondTextView = new TextView(this);
Shader textShader=new LinearGradient(0, 0, 0, 20,
new int[]{Color.GREEN,Color.BLUE},
new float[]{0, 1}, TileMode.CLAMP);
secondTextView.getPaint().setShader(textShader);
I have used the top answer(#Taras) with a gradient of 5 colors, but there is a problem: the textView looks like that I have put a white cover on it. Here is my code and the screenshot.
textView = (TextView) findViewById(R.id.main_tv);
textView.setText("Tianjin, China".toUpperCase());
TextPaint paint = textView.getPaint();
float width = paint.measureText("Tianjin, China");
Shader textShader = new LinearGradient(0, 0, width, textView.getTextSize(),
new int[]{
Color.parseColor("#F97C3C"),
Color.parseColor("#FDB54E"),
Color.parseColor("#64B678"),
Color.parseColor("#478AEA"),
Color.parseColor("#8446CC"),
}, null, Shader.TileMode.CLAMP);
textView.getPaint().setShader(textShader);
After many hours, I found out that I need to call textView.setTextColor() with the first color of the gradient. Then the screenshot:
Hope help someone!
It doesn't appear possible to extend TextView to draw text with a gradient. It is, however, possible to achieve this effect by creating a canvas and drawing on it. First we need to declare our custom UI element. In the initiation we need to create a subclass of Layout. In this case, we will use BoringLayout which only supports text with a single line.
Shader textShader=new LinearGradient(0, 0, 0, 20,
new int[]{bottom,top},
new float[]{0, 1}, TileMode.CLAMP);//Assumes bottom and top are colors defined above
textPaint.setTextSize(textSize);
textPaint.setShader(textShader);
BoringLayout.Metrics boringMetrics=BoringLayout.isBoring(text, textPaint);
boringLayout=new BoringLayout(text, textPaint, 0, Layout.Alignment.ALIGN_CENTER,
0.0f, 0.0f, boringMetrics, false);
We then override onMeasure and onDraw:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
setMeasuredDimension((int) textPaint.measureText(text), (int) textPaint.getFontSpacing());
}
#Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
boringLayout.draw(canvas);
}
Our implementation of onDraw is at this point quite lazy (it completely ignores the measurement specs!, but so long as you guarantee that the view is given sufficent space, it should work okay.
Alternatively, it would be possible to inherit from a Canvas and override the onPaint method. If this is done, then unfortunately the anchor for text being drawn will always be on the bottom so we have to add -textPaint.getFontMetricsInt().ascent() to our y coordinate.
Here it is with multiline support as a one liner. This should work for Buttons too.
Shader shader = new LinearGradient(0,0,0,textView.getLineHeight(),
startColor, endColor, Shader.TileMode.REPEAT);
textView.getPaint().setShader(shader);
I've rolled up a library that encompasses both of these methods. You can create GradientTextView in XML or just use GradientTextView.setGradient(TextView textView...) to do it on a regular TextView object.
https://github.com/koush/Widgets
A simple but somewhat limited solution would be to use these attributes:
android:fadingEdge="horizontal"
android:scrollHorizontally="true"
I have used it on textfields where I want them to fade out if they get too long.
Kotlin + coroutines version.
Extension for setting vertical gradient:
private fun TextView.setGradientTextColor(vararg colorRes: Int) {
val floatArray = ArrayList<Float>(colorRes.size)
for (i in colorRes.indices) {
floatArray.add(i, i.toFloat() / (colorRes.size - 1))
}
val textShader: Shader = LinearGradient(
0f,
0f,
0f,
this.height.toFloat(),
colorRes.map { ContextCompat.getColor(requireContext(), it) }.toIntArray(),
floatArray.toFloatArray(),
TileMode.CLAMP
)
this.paint.shader = textShader
}
Suspend extension. You need to wait for the view to change its height.
suspend fun View.awaitLayoutChange() = suspendCancellableCoroutine<Unit> { cont ->
val listener = object : View.OnLayoutChangeListener {
override fun onLayoutChange(
view: View?,
left: Int,
top: Int,
right: Int,
bottom: Int,
oldLeft: Int,
oldTop: Int,
oldRight: Int,
oldBottom: Int
) {
view?.removeOnLayoutChangeListener(this)
cont.resumeWith(Result.success(Unit))
}
}
addOnLayoutChangeListener(listener)
cont.invokeOnCancellation { removeOnLayoutChangeListener(listener) }
}
And usage:
lifecycle.coroutineScope.launch {
binding.tvAmount.text = "Dumb text"
binding.tvAmount.awaitLayoutChange()
binding.tvAmount.setGradientTextColor(
R.color.yellow,
R.color.green
)
}
For Kotlin:
val paint: TextPaint = textView.paint
val width: Float = paint.measureText(holder.langs.text.toString())
val textShader: Shader = LinearGradient(0f, 0f, width, holder.langs.textSize, intArrayOf(
Color.parseColor("#8913FC"),
Color.parseColor("#00BFFC")), null, Shader.TileMode.CLAMP)
holder.langs.paint.shader = textShader
Here's my solved way. Implement with text span.
screenshot
class LinearGradientForegroundSpan extends CharacterStyle implements UpdateAppearance {
private int startColor;
private int endColor;
private int lineHeight;
public LinearGradientForegroundSpan(int startColor, int endColor, int lineHeight) {
this.startColor = startColor;
this.endColor = endColor;
this.lineHeight = lineHeight;
}
#Override
public void updateDrawState(TextPaint tp) {
tp.setShader(new LinearGradient(0, 0, 0, lineHeight,
startColor, endColor, Shader.TileMode.REPEAT));
}
}
Styled your gradient text.
SpannableString gradientText = new SpannableString("Gradient Text");
gradientText.setSpan(new LinearGradientForegroundSpan(Color.RED, Color.LTGRAY, textView.getLineHeight()),
0, gradientText.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
SpannableStringBuilder sb = new SpannableStringBuilder();
sb.append(gradientText);
sb.append(" Normal Text");
textView.setText(sb);
Here's a nice way to do it:
/**
* sets a vertical gradient on the textView's paint, so that on its onDraw method, it will use it.
*
* #param viewAlreadyHasSize
* set to true only if the textView already has a size
*/
public static void setVerticalGradientOnTextView(final TextView tv, final int positionsAndColorsResId,
final boolean viewAlreadyHasSize) {
final String[] positionsAndColors = tv.getContext().getResources().getStringArray(positionsAndColorsResId);
final int[] colors = new int[positionsAndColors.length];
float[] positions = new float[positionsAndColors.length];
for (int i = 0; i < positionsAndColors.length; ++i) {
final String positionAndColors = positionsAndColors[i];
final int delimeterPos = positionAndColors.lastIndexOf(':');
if (delimeterPos == -1 || positions == null) {
positions = null;
colors[i] = Color.parseColor(positionAndColors);
} else {
positions[i] = Float.parseFloat(positionAndColors.substring(0, delimeterPos));
String colorStr = positionAndColors.substring(delimeterPos + 1);
if (colorStr.startsWith("0x"))
colorStr = '#' + colorStr.substring(2);
else if (!colorStr.startsWith("#"))
colorStr = '#' + colorStr;
colors[i] = Color.parseColor(colorStr);
}
}
setVerticalGradientOnTextView(tv, colors, positions, viewAlreadyHasSize);
}
/**
* sets a vertical gradient on the textView's paint, so that on its onDraw method, it will use it. <br/>
*
* #param colors
* the colors to use. at least one should exist.
* #param tv
* the textView to set the gradient on it
* #param positions
* where to put each color (fraction, max is 1). if null, colors are spread evenly .
* #param viewAlreadyHasSize
* set to true only if the textView already has a size
*/
public static void setVerticalGradientOnTextView(final TextView tv, final int[] colors, final float[] positions,
final boolean viewAlreadyHasSize) {
final Runnable runnable = new Runnable() {
#Override
public void run() {
final TileMode tile_mode = TileMode.CLAMP;
final int height = tv.getHeight();
final LinearGradient lin_grad = new LinearGradient(0, 0, 0, height, colors, positions, tile_mode);
final Shader shader_gradient = lin_grad;
tv.getPaint().setShader(shader_gradient);
}
};
if (viewAlreadyHasSize)
runnable.run();
else
runJustBeforeBeingDrawn(tv, runnable);
}
public static void runJustBeforeBeingDrawn(final View view, final Runnable runnable) {
final OnPreDrawListener preDrawListener = new OnPreDrawListener() {
#Override
public boolean onPreDraw() {
view.getViewTreeObserver().removeOnPreDrawListener(this);
runnable.run();
return true;
}
};
view.getViewTreeObserver().addOnPreDrawListener(preDrawListener);
}
Also, if you wish to use a bitmap of the gradient, instead or a real one, use:
/**
* sets an image for the textView <br/>
* NOTE: this function must be called after you have the view have its height figured out <br/>
*/
public static void setBitmapOnTextView(final TextView tv, final Bitmap bitmap) {
final TileMode tile_mode = TileMode.CLAMP;
final int height = tv.getHeight();
final int width = tv.getWidth();
final Bitmap temp = Bitmap.createScaledBitmap(bitmap, width, height, true);
final BitmapShader bitmapShader = new BitmapShader(temp, tile_mode, tile_mode);
tv.getPaint().setShader(bitmapShader);
}
EDIT: Alternative to runJustBeforeBeingDrawn: https://stackoverflow.com/a/28136027/878126
I have combined the answers from this thread and made a lightweight library. You can use it with gradle implementation, or simply use the files needed by adding it to your source.
https://github.com/veeyaarVR/SuperGradientTextView
The solution that worked for me is to apply a text color before applying any shaders. As the author of the question posted:
After many hours, I found out that I need to call textView.setTextColor() with the first color of the gradient. Then the screenshot:
What works is to have, for instance, a white color setup as text color in the first place. Then we can apply the shader, and it will be applied on top of the white so we will get the desired gradient color.
Here is an example for linearlayout, you can use this example for textview too, and in the source code there wont be gradient coding, you get the source code and add the code from that site itself - http://android-codes-examples.blogspot.com/2011/07/design-linearlayout-or-textview-and-any.html
I've found the way to do this without the TextView class extension.
class MainActivity : AppCompatActivity() {
private val textGradientOnGlobalLayoutListener = object: ViewTreeObserver.OnGlobalLayoutListener {
override fun onGlobalLayout() {
textGradient.paint.shader = LinearGradient(0f, 0f,
textGradient.width.toFloat(),
textGradient.height.toFloat(),
color0, color1, Shader.TileMode.CLAMP)
textGradient.viewTreeObserver.removeOnGlobalLayoutListener(this)
}
}
private val textGradient by lazy {
findViewById<TextView>(R.id.text_gradient)
}
private val color0 by lazy {
ContextCompat.getColor(applicationContext, R.color.purple_200)
}
private val color1 by lazy {
ContextCompat.getColor(applicationContext, R.color.teal_200)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
textGradient.viewTreeObserver.addOnGlobalLayoutListener(textGradientOnGlobalLayoutListener)
}
}
Try
import com.sanne.MultiColorTextView;
MultiColorTextView textview= new MultiColorTextView(this);
textview.setText("SOME TEXT");
textview.setTextColor(/*INT ARRAY WITH YOUR COLOURS*/ );
The program sets a gradient colour across the textview and you can also set separate colours for particular text using
multiColorTextView.colorAll("A word");
MutliColorTextView from https://www.github.com/sanneemmanuel/MultiColorTextView

Categories

Resources