Develop Reference

setProgressDrawble is filling whole progress bar

I have an progress bar -
<ProgressBar
android:indeterminateOnly="false"
android:progressDrawable="#drawable/progress_anim"
android:minHeight="10dip"
android:layout_width="170dp"
android:layout_height="10dp"
android:maxHeight="10dip"
android:layout_gravity="center_vertical"
android:progress="0"
android:max="100"
android:id="#+id/scoreProgress"/>
and i want to set it's progress color programmatically . I am doing this
scoreProgress.setProgress(unikTopics.getScore());
scoreProgress.getProgressDrawable().getCurrent()
.setColorFilter(getResources().getColor(progressColor[counter])
android.graphics.PorterDuff.Mode.SRC_IN);
and this is progress_anim.xml -
<?xml version="1.0" encoding="utf-8"?>
<item android:id="#android:id/background">
<shape>
<solid android:color="#808080"/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#color/white"/>
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#ff0000"/>
</shape>
</clip>
</item>
The problem is that if I am not setting progressdrawble color programmatically , i am getting fine result with progress being shown in red color and rest part in greyish color but if i set it programmatically whole progress bar is getting flled with that color ?
Please help, Thanks in advance.

You are coloring the entire drawable (all layers). You need to grab the #android:id/progress layer from the drawable and color it specifically.
Try this:
scoreProgress.setProgress(unikTopics.getScore());
LayerDrawable layerDrawable = (LayerDrawable)scoreProgress.getProgressDrawable();
layerDrawable.findDrawableByLayerId(android.R.id.progress).setColorFilter(getResources().getColor(progressColor[counter], android.graphics.PorterDuff.Mode.SRC_IN);

Set remaining progress bar color in android

I'm setting the color of the progress bar using the following style code
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="0dip" />
<gradient
android:angle="0"
android:endColor="#36A19C"
android:startColor="#36A19C" />
</shape>
</clip>
</item>
My progressbar looks like below image
How can I set the color of the grey part shown in my progress bar???

Try looking at some tutorials here and here.
Create a file custom_progressbar.xml in your drawable
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Define the background properties like color etc -->
<item android:id="#android:id/background">
<shape>
<gradient
android:startColor="backgroundColor"
android:endColor="backgroundColor"
android:angle="0"
/>
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<gradient
android:startColor="progressColor"
android:endColor="progressColor"
android:angle="0"
/>
</shape>
</clip>
</item>
</layer-list>
Set this to your progressBar in code
// Get the Drawable custom_progressbar
Drawable customDrawable= res.getDrawable(R.drawable.custom_progressbar);
// set the drawable as progress drawavle
progressBar.setProgressDrawable(customDrawable);

You can try this way:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<shape>
<solid android:color="#color/seekbar_background" />
<stroke
android:width="#dimen/seekbar_background_border"
android:color="#android:color/transparent" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#color/seekbar_progress" />
</shape>
</clip>
</item>
</layer-list>
The progress bar uses a layer list that holds several layers. You need background and progress. Hope this helps you :)

Add this line of code to your progress bar XML.
android:progressBackgroundTint="#ReplaceThisWithYourColor"
It works for me.

Android - make an arrow shape with xml

I want to make a button for my shape like this one
Is there a way to do this with xml ?
Like setting some points, in my case I have 5..

What you need is to create a shape xml file in your project's drawable-xxx folder and then use this shape as background for a button.
Here is the shape file called arrow_shape.xml:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Colored rectangle-->
<item>
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="40dp" />
<solid android:color="#5EB888" />
<corners android:radius="0dp"/>
</shape>
</item>
<!-- This rectangle for the top arrow edge -->
<!-- Its color should be the same as the layout's background -->
<item
android:top="-40dp"
android:bottom="65dp"
android:right="-30dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<!-- This rectangle for the lower arrow edge -->
<!-- Its color should be the same as the layout's background -->
<item
android:top="65dp"
android:bottom="-40dp"
android:right="-30dp">
<rotate
android:fromDegrees="-45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
Then use it as button's background, for example
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/arrow_shape"/>
Here is the screenshot:
More info on Layer-List you can find here.
EDIT:
Keep in mind though that I used certain values for the shape's width and height. If you change those you might need to change the values of the top, bottom and right attributes. So, in that case consider using different values in your project's values directory.

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:width="50dp" android:height="10dp" android:right="6dp">
<shape>
<solid android:color="#android:color/holo_green_dark"/>
<corners
android:bottomLeftRadius="2dp"
android:topLeftRadius="2dp"/>
</shape>
</item>
<item android:width="7dp" android:height="7dp"
android:left="50dp">
<rotate android:fromDegrees="45"
android:pivotX="0"
android:pivotY="0">
<shape>
<solid android:color="#android:color/holo_green_dark"/>
</shape>
</rotate>
</item>
</layer-list>

With the Material Components library you can just use the standard MaterialButton defining the shapeAppearanceOverlay attribute:
Something like:
<com.google.android.material.button.MaterialButton
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.Button.Triangle"
... />
And in your style define:
<style name="ShapeAppearanceOverlay.Button.Triangle" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
<item name="cornerFamilyTopRight">cut</item>
<item name="cornerFamilyBottomRight">cut</item>
<item name="cornerSizeTopRight">50%</item>
<item name="cornerSizeBottomRight">50%</item>
</style>

Create rectangle progress bar in android

Hello, I want to create progress bar which should look like above image. Here, I have created one like below image.
Below is the xml file which I created in drawable folder under res,
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">
<shape android:shape="rectangle">
<solid android:color="#color/white"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<solid android:color="#color/lightgreen"/>
</shape>
</clip>
</item>
</layer-list>
But I want exactly the same progress bar as image 1 when progress continues, how to implement it?

Customizing a progress bar requires defining the attribute or properties for background and and progress of your progress bar.
create a xml file named customprogressbar.xml in your res-> drawable folder
customprogressbar.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Define the background properties like color etc -->
<item android:id="#android:id/background">
<shape>
<gradient
android:startColor="#000001"
android:centerColor="#0b131e"
android:centerY="1.0"
android:endColor="#0d1522"
android:angle="270"
/>
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<gradient
android:startColor="#007A00"
android:centerColor="#007A00"
android:centerY="1.0"
android:endColor="#06101d"
android:angle="270"
/>
</shape>
</clip>
</item>
Now you need to set the to set the progressDrawable property to customprogressbar.xml(drawable)
you can do it in xml file or in Activity(at run time)
In your xml do like following
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="#drawable/custom_progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
at runtime do the following
// Get the Drawable custom_progressbar
Drawable draw= res.getDrawable(R.drawable.custom_progressbar);
// set the drawable as progress drawavle
progressBar.setProgressDrawable(draw);
For more details check out HERE
Also check How to Customize ProgressBar in Android?

You need to change xml to mention start-color, end-color and center.
Mention color values properly: start-color: left, end-color: right and center.

How to apply stroke to a button specific sides in android

How can I apply stroke to a button's only two sides that is LEFT border and RIGHT border? in android.
I have apply the following code but it's not working
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the main color -->
<item>
<shape>
<solid android:color="#EEEEEE" />
</shape>
</item>
<!-- This is the line -->
<item android:right="1dp">
<shape>
<solid android:color="#333333" />
</shape>
</item>
<item android:left="1dp">
<shape >
<solid android:color="#333333"/>
</shape>
</item>
</layer-list>

You were on the right track. This will do the trick:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#EEEEEE" />
</shape>
</item>
<!-- This is the line -->
<item android:right="1dp" android:left="1dp">
<shape>
<solid android:color="#333333" />
</shape>
</item>
</layer-list>
And use this as the background for your button. Just tested it - works just fine.

I would suggest using a 9-patch drawable that looks like this:
It has the required black border, 1px on each side of the 0x333 color and the rest is filled with 0xeee. 9-patches scale with the size of the view that they are applied to. So you can use it as a background or src