Following suggestions in few other posts, I implemented a circular button to be used in the app:
It is implemented using XML selector:
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states
-->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false"
android:drawable="#drawable/big_ring_button_unfocused" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false"
android:drawable="#drawable/big_ring_button_unfocused" />
<!-- Focused states
-->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false"
android:drawable="#drawable/big_ring_button_focused" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false"
android:drawable="#drawable/big_ring_button_focused" />
<!-- Pressed
-->
<item android:state_pressed="true" android:drawable="#drawable/big_ring_button_pressed" />
</selector>
The contents of the ..._unfocused file (the others just change colors):
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="#dimen/big_ring_button_inner_radius"
android:thickness="#dimen/big_ring_button_thickness"
android:useLevel="false">
<solid android:color="#color/white" />
</shape>
I'd like to use this template for all rounded buttons in my app, but since the text inside the buttons change, the size of the button itself should change.
I thought that I might be able to accomplish this programmatically, so I checked the documentation of GradientDrawable - there is no method there to change innerRadius attribute.
Currently I have 4 XML files per each round button (selector, unfocused, focused and pressed) which is extremely ugly and will become a pain in the neck to maintain.
How could I make this button configurable in size (either XML or programmatically)?
Thanks
You cannot change the innerRadius attribute programmatically, as it's only read from XML attributes when inflating (see for example this answer).
However, you could achieve more or less the same effect programmatically, by using a custom drawable to draw the ring. For example:
public class RoundBorderDrawable extends GradientDrawable
{
private static final int RING_THICKNESS = 20;
private static final int PADDING = 8;
private static final int NORMAL_COLOR = Color.BLUE;
private static final int PRESSED_COLOR = Color.RED;
private Paint mPaint;
public RoundBorderDrawable()
{
mPaint = new Paint();
mPaint.setStyle(Style.STROKE);
mPaint.setStrokeWidth(RING_THICKNESS);
mPaint.setColor(NORMAL_COLOR);
}
#Override
public boolean isStateful()
{
return true;
}
#Override
protected boolean onStateChange(int[] stateSet)
{
boolean result = super.onStateChange(stateSet);
int color = NORMAL_COLOR;
for (int i = 0; i < stateSet.length; i++)
{
if (stateSet[i] == android.R.attr.state_pressed)
color = PRESSED_COLOR;
}
if (color != mPaint.getColor())
{
mPaint.setColor(color);
invalidateSelf();
result = true;
}
return result;
}
#Override
public void draw(Canvas canvas)
{
super.draw(canvas);
int diameter = Math.min(canvas.getWidth(), canvas.getHeight()) - RING_THICKNESS - 2 * PADDING;
canvas.drawCircle(canvas.getWidth() / 2, canvas.getHeight() / 2, diameter / 2, mPaint);
}
}
This will draw a circle that fits inside the Button dimensions (I assumed you wanted to draw a circle even for non-square buttons).
Then just set a new instance of RoundBorderDrawable as the background of your button (the properties that are constants in this example could, of course, be supplied via the constructor or with setter methods).
I have a better approach for doing this. Instead of Ring use Oval and give stroke with color white and width #dimen/big_ring_button_thickness
but this doesn't give you circular shape. To achieve circular shape your button should be square, I mean width and height of the button should be same.
Related
I am trying to have a layout background drawable, which will be only gradient underline with 1-2 dp height and rest is transparent, so the upper part will have the parent's background.
Here is what I have.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android>
<!-- underline color -->
<item>
<shape>
<gradient
android:startColor="#color/colorPrimaryDark"
android:endColor="#FFFFFFFF"
android:centerY="0.5"
android:angle="0"/>
</shape>
</item>
<!-- main color -->
<item android:bottom="2.5dp">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
<padding
android:top="4dp"
android:bottom="4dp" />
</shape>
</item>
If I change the solid color in "main color" to transparent, whole background will be using "underline color" settings.
The technique you use to create a line on the bottom of the view works if the color of the layer overlaying the gradient layer is opaque. What you are trying to do is to apply a transparent layer that replaces (erases) the underlying gradient. That is not how it works: A transparent overlay leaves the underlying color, here a gradient, untouched.
Here is an alternate layer-list drawable that you can use for API 23+:
underline_drawable.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="bottom">
<shape>
<size android:height="2dp" />
<gradient
android:angle="0"
android:centerY="0.5"
android:endColor="#FFFFFFFF"
android:startColor="#color/colorPrimaryDark" />
</shape>
</item>
</layer-list>
Here is what it looks like:
Prior to API 23, you can use the following custom drawable, but it must be set in code.
GradientUnderline.java
public class GradientUnderline extends Drawable {
private Shader mShader;
private final Paint mPaint;
private int mHeight = -1;
private int mStartColor = Color.BLACK;
private int mEndColor = Color.WHITE;
private int mLastWidth;
public GradientUnderline() {
mPaint = new Paint();
}
public GradientUnderline(int lineHeight, int startColor, int endColor) {
mPaint = new Paint();
mHeight = lineHeight;
mStartColor = startColor;
mEndColor = endColor;
}
#Override
public void draw(#NonNull Canvas canvas) {
if (mShader == null || getBounds().width() != mLastWidth) {
mLastWidth = getBounds().width();
mShader = new LinearGradient(0, 0, getBounds().width(), mHeight, mStartColor,
mEndColor, Shader.TileMode.CLAMP);
mPaint.setShader(mShader);
}
canvas.drawRect(0, getBounds().height() - mHeight, getBounds().width(),
getBounds().height(), mPaint);
}
#Override
public void setAlpha(int alpha) {
}
#Override
public void setColorFilter(#Nullable ColorFilter colorFilter) {
}
#Override
public int getOpacity() {
return PixelFormat.OPAQUE;
}
}
I missed the availability of android:gravity initially because it is not mentioned on the "Drawable Resources" page. It is mentioned, however, in the LayerDrawable documentation.
Why problem occurs: Shape at first item will draw the gradient in entire region. After setting colour to second item will hide the top item region except ay 2.5dp at bottom. So whenever you set transparent colour to second item it automatically show the top level item that is gradient region..
Here i suggest the way to use but you can set to fixed height in view.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="47dp">
<shape>
<gradient
android:startColor="#color/colorPrimaryDark"
android:endColor="#FFFFFFFF"
android:centerY="0.5"
android:angle="0"/>
</shape>
</item>
</layer-list>
View.xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/bottom_line">
</RelativeLayout>
Change size according to your needs..!
OUTPUT
I am currently trying to implement tinting on some ImageButtons with currently pure white Drawables. The Tint Color should be provided by a StateList and should change depending on the buttons current state. The state list does look like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#FF0000"/>
<item android:color="#00FF00" android:state_enabled="false"/>
<item android:color="#0000FF" android:state_pressed="true" android:state_enabled="true"/>
</selector>
And the layout XML snippet for the button is:
<ImageButton
android:id="#+id/btnNext"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/vertical_content_padding"
android:layout_marginEnd="#dimen/horizontal_content_padding"
android:contentDescription="#string/next"
android:src="#drawable/ic_chevron_right_white_24dp"
android:tint="#color/state_btn_tint_light"/>
The default tint from the Color State List is selected and correctly displayed. But disabling the button or pressing it doesn't trigger any color change at all of the Icon. I tried setting it pragmatically too with setImageTintList.
Your code should work. However, there is one mistake:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#FF0000"/>
<item android:color="#00FF00" android:state_enabled="false"/>
<item android:color="#0000FF" android:state_pressed="true" android:state_enabled="true"/>
</selector>
You need to reverse the order of the states.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#0000FF" android:state_pressed="true" android:state_enabled="true"/>
<item android:color="#00FF00" android:state_enabled="false"/>
<item android:color="#FF0000"/>
</selector>
I am not entirely sure how it works internally but it seems to function like If/Else statements. If the first condition fails, then it goes to the second. Since your first item has no conditions, it will always be picked and the others will be ignored, giving the impression that the color state list is not working at all. Hence, always put the color state with the most restrictive conditions first.
I'm going to simplify my answer. hopefully, it helps.
You can always enter any color you want in colors.xml right? so let's use it.
you can create an integer array list of the color you want like this
integer[] colors = new integer[]{R.color.white, R.color.black, ...};
Now imageButtons can take background tint like this for example:
imagebutton.setImageTintList(ColorStateList.valueOf(ContextCompat.getColor(mContext,R.color.white)));
Now let's put them together with an animation, create animation method:
public ValueAnimator ColorAnimation(ImageButton imagebutton, int colorFrom, int colorTo){
ValueAnimator anim = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
anim .addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
imagebutton.setImageTintList(ColorStateList.valueOf((int) animation.getAnimatedValue()));
}
});
anim.setInterpolator(new DecelerateInterpolator());
anim.setDuration(300); // -- Whatever time
return anim;
};
Now, in your activity, you can implement it like this:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout);
mContext = this;
...
ImageButton myButton = (ImageButton) findViewById(R.id.imagebutton);
//-- Define All the Colors You want
integer[] listOfColors = new integer[]{R.color.white, R.color.black, R.color.yellow, R.color.red, R.color.blue};
//-- With this you can randomly get a color from the list
int aColor = (int)(Math.random()*listOfColors.length);
//-- Your Default imageButton Color
int DefaultColor = ContextCompat.getColor(mContext,R.color.white);
myButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
ColorAnimation(myButton, DefaultColor, listOfColors[aColor]).start;
//-- You can even enter whatever color want directly for "colorTo"
//-- You can Reverse this animation as well
}
});
...
I want to get a CardView with the top-right corner like you can see in the image below, but I have no idea how to do so. It is like a folded paper (with no animation). I don't know if I should make a custom background drawable or how to manage the corner radius to get the desired result. Any help will be greatly appreciated, thanks
Also you can create such a drawable programmatically like this:
public static final class FoldCornerCard extends Shape {
private final float foldPart;
private final Path cardPath = new Path();
private final Path foldPath = new Path();
private final Paint foldPaint;
public FoldCornerCard(int foldColor, float foldPart) {
if (foldPart <= 0 || foldPart >= 1) {
throw new IllegalArgumentException("Fold part must be in (0,1)");
}
this.foldPart = foldPart;
this.foldPaint = new Paint();
foldPaint.setAntiAlias(true);
foldPaint.setColor(foldColor);
}
#Override
protected void onResize(float width, float height) {
super.onResize(width, height);
this.cardPath.reset();
final float leftFold = width - width * foldPart;
final float bottomFold = height * foldPart;
cardPath.lineTo(leftFold, 0);
cardPath.lineTo(width, bottomFold);
cardPath.lineTo(width, height);
cardPath.lineTo(0, height);
cardPath.close();
foldPath.reset();
foldPath.moveTo(leftFold, 0);
foldPath.lineTo(leftFold, bottomFold);
foldPath.lineTo(width, bottomFold);
foldPath.close();
}
#Override
public void draw(Canvas canvas, Paint paint) {
canvas.drawPath(cardPath, paint);
canvas.drawPath(foldPath, foldPaint);
}
}
And usage example:
final ShapeDrawable shapeDrawable = new ShapeDrawable(
new FoldCornerCard(Color.GREEN, 0.1f));
shapeDrawable.getPaint().setColor(Color.WHITE);
shapeDrawable.setIntrinsicHeight(-1);
shapeDrawable.setIntrinsicWidth(-1);
You just need to modify my snippet a bit to add round corners.
Look at here https://developer.android.com/studio/write/draw9patch.html
I think this is righ way to use custom layout. You could draw it on xml, or use 9-patch png.
Also you can create own class MyCardView and extends from CardView, then override method onDraw and draw CardView like you want, but it is not good idea.
I would reccomend you use 9-patch image
You can achieve this using your xml:
Lets Assume our xml shape is called shape.xml
In shape.xml(Which you have to create in your drawable folder..drawable/shape.xml)..
Create your layer list element with its square shape as the background of your xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Paper-Back-->
<item
android:bottom="30dp"
android:left="18dp"
android:right="1dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#color/paperBack"/>
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="78dp"/>
</shape>
</item>
<!--Paper-Back End-->
<!--Fold-->
<item
android:bottom="650dp"
android:top="0dp"
android:left="300dp"
android:right="1dp">
<shape android:shape="rectangle">
<solid android:color="#color/paperFold"/>
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="0dp"
android:topRightRadius="100dp"
/>
</shape>
</item>
<!--Fold End-->
</layer-list>
Then in your colours.xml resource:
Add your colours:
color.xml
<color name="PaperBack">#A6F5F5F5</color>
<color name="paperFold">#A6DDDDDD</color>
In order to achieve the best results:The opacity of your colours as well as the type of colour combination for your paper background and fold colours will have to be taken into great consideration.
Now to apply the paper fold shape..in your main xml, use the shape.xml as the background in your main.xml.
using shape.xml as the background
android:background="#drawable/shape.xml"
main.xml
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shape.xml"
android:orientation="vertical"
android:weightSum="4">
.....................
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 for the first 40% of the line, the other 60% being grey.
I have managed to do that with a drawable :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="line" >
<size android:height="3dp" android:width="40dp"/>
<stroke
android:width="1dp"
android:color="#FFFC10" />
</shape>
</item>
<item android:left="40dp">
<shape android:shape="line" >
<size android:height="3dp" android:width="60dp" />
<stroke
android:width="1dp"
android:color="#DDDDDD" />
</shape>
</item>
</layer-list>
And then I display it with an ImageView :
<ImageView
android:id="#+id/row_completion_bar"
android:src="#drawable/completion_bar"
android:layout_width="100dp"
android:layout_height="3dp" />
... but now, I must of course be able to change this 40%/60% ration depending of the actuel user completion.
First question: what is the best most efficient way to do it ? Change the drawable at runtime ? or create a new drawable at runtime in Java ?
Second question: how to do it ? I tried both ways (recreate this drawable in java code / alter the xml drawable at runtime) and didn't succeeded :-(
Any help will be greatly appreciated.
so this is a custom Drawable you can use:
class LineDrawable extends Drawable {
private Paint mPaint;
public LineDrawable() {
mPaint = new Paint();
mPaint.setStrokeWidth(3);
}
#Override
public void draw(Canvas canvas) {
int lvl = getLevel();
Rect b = getBounds();
float x = b.width() * lvl / 10000.0f;
float y = (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);
}
#Override
protected boolean onLevelChange(int level) {
invalidateSelf();
return true;
}
#Override
public void setAlpha(int alpha) {
}
#Override
public void setColorFilter(ColorFilter cf) {
}
#Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
}
and the test code:
View v = new View(this);
final LineDrawable d = new LineDrawable();
d.setLevel(4000);
v.setBackgroundDrawable(d);
setContentView(v);
OnTouchListener l = new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
int lvl = (int) (10000 * event.getX() / v.getWidth());
d.setLevel(lvl);
return true;
}
};
v.setOnTouchListener(l);
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.:
ProgressBar bar = (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-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#ff5a5d5a"
android:centerY="0.5"
android:endColor="#ff747674"
android:startColor="#ff9d9e9d" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android: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.
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:
<RelativeLayout style="#style/CompletionBar">
<ImageView
android:id="#+id/row_completion_bar_0"
style="#style/CompletionBar0" />
<ImageView
android:id="#+id/row_completion_bar_1"
style="#style/CompletionBar1" />
</RelativeLayout>
in styles.xml:
<!-- Completion Bar (Relative Layout) -->
<style name="CompletionBar">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
<!-- Completion Bar 0 (ImageView) -->
<style name="CompletionBar0">
<item name="android:layout_width">100dp</item>
<item name="android:layout_height">2dp</item>
<item name="android:background">#CCCCCC</item>
</style>
<!-- Completion Bar 1 (ImageView) -->
<style name="CompletionBar1">
<item name="android:layout_width">40dp</item>
<item name="android:layout_height">2dp</item>
<item name="android:background">#555555</item>
</style>
in java file:
ImageView cb1 = (ImageView)row.findViewById(R.id.row_completion_bar_1);
cb1.getLayoutParams().width = 40; /* Value in pixels, must convert to dp */
This snippet will work for all api
Use this:
Drawable drawable = editText.getBackground();
drawable.setColorFilter(editTextColor, PorterDuff.Mode.SRC_ATOP);
if(Build.VERSION.SDK_INT > 16) {
editText.setBackground(drawable);
}else{
editText.setBackgroundDrawable(drawable);
}
I have a problem with programmatically setting the progress drawable of a SeekBar.
When I set it in the .xml file everything is working fine.
<SeekBar
android:id="#+id/sb"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
.....
android:progressDrawable="#drawable/seek_bar"/>
But, I have a problem when I try to set it from code like this:
seekBar.setProgressDrawable(getResources().getDrawable(R.drawable.seek_bar));
Background drawable then takes the whole seek bar, and I'm not able to modify the progress at all later on - the thumb moves but the progress drawable still fills whole seekbar. Also, seekbar looses its rounded corners. It seems that progress drawable is on top of the seekbar.
I tried the solution provided on android progressBar does not update progress view/drawable, but it doesn't work for me.
I solved the problem by using .xml shape as background for my SeekBar.
The complete SeekBar solution that can be used via setProgressDrawable() method should be like this:
//seek_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#android:id/background"
android:drawable="#drawable/seek_bar_background"/>
<item android:id="#android:id/progress"
android:drawable="#drawable/seek_bar_progress" />
</layer-list>
//seek_bar_background.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="270"
android:startColor="#8a8c8f"
android:endColor="#58595b" />
<corners android:radius="5dip" />
</shape>
//seek_bar_progress.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#android:id/background"
android:drawable="#drawable/seek_bar_background"/>
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/seek_bar_progress_fill" />
</item>
</layer-list>
//seek_bar_progress_fill.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:startColor="#b3d27e"
android:endColor="#93c044"
android:angle="270"
/>
<corners android:radius="5dip" />
</shape>
In the code, you can use it like this:
progressBar.setProgressDrawable(getResources().getDrawable(R.drawable.seek_bar));
The answer given above is for using xml, but just in case someone wanted to do this programmatically I have it below.
public class SeekBarBackgroundDrawable extends Drawable {
private Paint mPaint = new Paint();
private float dy;
public SeekBarBackgroundDrawable(Context ctx) {
mPaint.setColor(Color.WHITE);
dy = ctx.getResources().getDimension(R.dimen.one_dp);
}
#Override
public void draw(Canvas canvas) {
canvas.drawRect(getBounds().left,getBounds().centerY()-dy/2,getBounds().right,getBounds().centerY()+dy/2,mPaint);
}
#Override
public void setAlpha(int i) {
mPaint.setAlpha(i);
}
#Override
public void setColorFilter(ColorFilter colorFilter) {
}
#Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
}
Above class is for the background of the seekbar (the part that always exists under the progress drawable)
public class SeekBarProgressDrawable extends ClipDrawable {
private Paint mPaint = new Paint();
private float dy;
private Rect mRect;
public SeekBarProgressDrawable(Drawable drawable, int gravity, int orientation, Context ctx) {
super(drawable, gravity, orientation);
mPaint.setColor(Color.WHITE);
dy = ctx.getResources().getDimension(R.dimen.two_dp);
}
#Override
public void draw(Canvas canvas) {
if (mRect==null) {
mRect = new Rect(getBounds().left, (int)(getBounds().centerY() - dy / 2), getBounds().right, (int)(getBounds().centerY() + dy / 2));
setBounds(mRect);
}
super.draw(canvas);
}
#Override
public void setAlpha(int i) {
mPaint.setAlpha(i);
}
#Override
public void setColorFilter(ColorFilter colorFilter) {
}
#Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
}
Above is the progress drawable. Notice it's a clip drawable. The cool part here is I am setting the bounds to be whatever I want, along with color. This allows for fine tuned customization of your drawable.
//Custom background drawable allows you to draw how you want it to look if needed
SeekBarBackgroundDrawable backgroundDrawable = new SeekBarBackgroundDrawable(mContext);
ColorDrawable progressDrawable = new ColorDrawable(Color.BLUE);
//Custom seek bar progress drawable. Also allows you to modify appearance.
SeekBarProgressDrawable clipProgressDrawable = new SeekBarProgressDrawable(progressDrawable,Gravity.LEFT,ClipDrawable.HORIZONTAL,mContext);
Drawable[] drawables = new Drawable[]{backgroundDrawable,clipProgressDrawable};
//Create layer drawables with android pre-defined ids
LayerDrawable layerDrawable = new LayerDrawable(drawables);
layerDrawable.setId(0,android.R.id.background);
layerDrawable.setId(1,android.R.id.progress);
//Set to seek bar
seekBar.setProgressDrawable(layerDrawable);
Above code uses custom drawables to edit seek bar. My main reason for doing this is I will be editing the look of the background drawable, so it has "notches" (although not implemented yet). You can't do that with a xml defined drawable (at-least not easily).
Another thing I noticed is that this process prevents the SeekBar's from getting as wide as the thumb drawable. It sets the bounds of the drawables so they never get to tall.
I've had issues changing seek and progress bars from code before. Once I actually had to load the drawable twice before it took effect properly. I think it was related to padding after changing the image.
I'm just guessing here, but try setting the padding afterwards with
getResources().getDrawable(R.drawable.seek_bar) // once
seekBar.setProgressDrawable(getResources().getDrawable(R.drawable.seek_bar)); //twice
seekBar.setPadding(int,int,int,int)
and also couldn't hurt to invalidate it.
seekBar.postInvalidate()
Very hacky and I dont like it, but it solved something similar for me before
you can use android: maxHeight in you XML, to limit background height
<SeekBar
android:id="#+id/original_volume"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:maxHeight="2dp"/>
and it will not clip the thumb