I need to design a dashed progressbar as shown in attached.
This is what I have done so far, It displays a normal progressbar with two different colors, one for progress and another for other.
<ProgressBar
android:id="#+id/progress_bar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="3dp"
android:progressDrawable="#drawable/bg_progress_bar_green"
/>
And bg_progress_bar_green is here
<?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="#E0E1EA" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#66BA6B" />
</shape>
</clip>
</item>
And this is how I update the progressbar :
progressBar.setProgress(numOfHours);
How do I get dashed line of bar as shown?
You can use this library for your work Step Progress Bar. I'm providing code in case of link changed.
Gradle
dependencies {
...
compile 'com.marcok.stepprogressbar:stepprogressbar:1.0.1'
}
Usage
<com.marcok.stepprogressbar.StepProgressBar
android:layout_centerVertical="true"
android:layout_height="0dp"
android:layout_width="wrap_content"
android:id="#+id/stepProgressBar"
app:cumulativeDots="false"
app:activeDotIndex="0"
app:activeDotColor="#color/material_deep_teal_500"
app:inactiveDotColor="#color/material_blue_grey_800"
app:activeDotIcon="#drawable/active_dot.png"
app:inactiveDotIcon="#drawable/inactive_dot.png"
app:numberDots="6"
app:dotSize="20dp"
app:spacing="20dp"/>
If dot icons are provided, they override dot colors
Layout height is irrelevant and determined by the dotSize
Java Code
To move to the next dot or previous dot:
StepProgressBar mStepProgressBar =(StepProgressBar)findViewById(R.id.stepProgressBar);
mStepProgressBar.next();
mStepProgressBar.previous();
To set the dots to be cumulative (all dots <= the specified index will show as active), call setCumulativeDots(true)
Calling setCurrentProgressDot(-1) will prevent any dots from showing as active. Any lower values will throw IndexOutOfBoundsExeption.
Other methods:
setCurrentProgressDot();
setNumDots();
setActiveColor();
setInactiveColor();
setActiveDrawable();
setInactiveDrawable();
DRAWABLES FOR RECTANGLE PROGRESS
use these two drawbles..
inactive_dot.png
active_dot.png
Related
I am trying make a simple music player. When I try to use the android's default seek bar in my music playback controls section, there is a default padding at the top and bottom of the seekbar. The effect I am trying to achieve is similar to the seekbar used in shuttle music player.
But this the effect I'm getting. I would be grateful if any would tell me how to achieve the desired result.I'm using linear layout as the root container.
Because the option of specifying
android:background="#color/your_colour"
will not work because you have two colors there one for the Top and one for the Bottom.
The working solution is by using a layerlist as follows:
Go to your drawable folder create a file call it lets say
back_ground_seek_bar.xml and add the following code inside it:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="10dp">
<shape android:shape="rectangle" >
<size android:height="10dp" />
<solid android:color="#colour/your_top_color" />
</shape>
</item>
<item android:top="10dp">
<shape android:shape="rectangle" >
<size android:height="10dp" />
<solid android:color="#color/your_bottom_color" />
</shape>
</item>
</layer-list>
Replace the colours with your own colors when you paste this.
Remember we have added top and height of as 10.But because we want our SeekBar to have colour then we have to set the height of seekbar to twice the value so It should be twice and thats 20dp. So we should add our new height of the seekbar to be 20dp as well set the background as the xml we have defined as follows. Go to your SeekBar and paste this:
android:layout_height="20dp"
android:background="#drawable/back_ground_seek_bar"
For customization you can also change the values of height and whatsoever in the drawable/back_ground_seek_bar.xml but it should always be twice. The given height set in SeekBaraim is to divide it equally.
I've just discovered the seekbar discrete widget in android studio, i found it very usefull but i can't figure out how to remove the step indicators, or changing them with more appropriate drawables.
Did someone managed to do it?
Here's a screen of my current seekbar:
I'd like to change all the current step indicators, thank you.
EDIT:
Here's my current progress drawable:
<item android:id="#android:id/background" >
<shape >
<corners android:radius="20dp" />
<gradient
android:startColor="#color/Trasparente"
android:centerColor="#color/Trasparente"
android:centerX="1"
android:endColor="#color/Trasparente"
android:angle="0"
/>
</shape>
</item>
<item android:id="#android:id/progress" >
<clip android:clipOrientation="horizontal" android:gravity="left" >
<shape>
<corners android:radius="20dp" />
<gradient
android:startColor="#color/colorBluClima"
android:centerColor="#color/colorGreenServizi"
android:centerX="0.35"
android:endColor="#color/colorRossoErrore"
android:angle="0"
/>
</shape>
</clip>
</item>
and here's my seekbar in the layout:
<SeekBar
android:maxHeight="12dp"
style="#style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="812dp"
android:layout_height="100dp"
android:max="19"
android:id="#+id/SeekBarStufa220"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="90dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginEnd="90dp"
app:layout_constraintRight_toRightOf="parent"
android:paddingEnd="85dp"
android:paddingStart="85dp"
android:progressDrawable="#drawable/progress_seek_clima"
android:thumb="#drawable/ic_temprature"
app:layout_constraintVertical_bias="0.79"
android:progress="10" />
The thumb is a simple drawable
I solved it creating a new style with SeekBar.Discrete as parent.
<style name="SeekBarWithoutSteps" parent="Base.Widget.AppCompat.SeekBar.Discrete">
<item name="tickMark">#null</item>
</style>
if you want want to use style, you can use below xml attribute for material sliders to hide the dots
app:tickColor="#00000000"
I was searching for same solution, but for Material Design Slider (com.google.android.material.slider.Slider)
.
I don't know since this option is available (currently i'm using 'com.google.android.material:material:1.3.0' ), but if you use code below in your layout XML, ticks will disappear.
app:tickVisible="false"
I was also searching for an answer to this but didn't find anything. I tried some things and found a style included in Android Studio (I am sure it will be also available in Eclipse and other IDEs) within the Discrete SeekBar options which is #android:style/Widget.DeviceDefault.Light.SeekBar.
I tried it with an Android 5.1 device and it worked perfectly, but be careful cause there's one which could seem to be the same (called #android:style/Widget.Material.SeekBar.Discrete) but it leaves the dots.
So I think that if the first one removes the dots from the SeekBar, it's the one you were looking for.
I was given a design for a custom ProgressBar that looks like this:
The way it works is that the bar is completely blue at 0 progress, and as progress is incremented, each side fills in equally white toward the center until the entire bar is white at max progress.
I've got the bar set up just fine. I'm using two ProgressBar objects, one that moves left-to-right, and the other rotated so that it moves right-to-left.
The part I'm stuck at is how to draw those extra circle shapes that move toward the center along with the white progress <clip>. I tried just adding an extra <shape> to my <clip> item in the XML, but that stretched the circle out as if it was using the circles to fill in the bar.
Is there a way I can add these extra shapes to the ProgressBar XML itself, or do I need to create another drawable for these shapes and then update their position manually in code? I'm not sure what the correct approach is here and I haven't been able to find any similar examples in my research. Any help is appreciated!
Here's the XML I'm using for the progressDrawable:
<?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>
<corners
android:topLeftRadius="12dp"
android:bottomLeftRadius="12dp"/>
<solid android:color="#29A4DD"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners
android:topLeftRadius="12dp"
android:bottomLeftRadius="12dp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"/>
<solid android:color="#F05926"/>
</shape>
</clip>
</item>
</layer-list>
I have created the following progressbar style and set the corner radius to both shapes (background, and pogress). But it seems that when I animate / set progress below 90 my progressbar current progress shows rectangle shaped borders, without any radius. I would like to know if it is possible to have the corner radius all the time, even if the progress is 30 or less than 90,95. Can anyone explain why this is not working?
Also I need this to work with the API LEVEL 8
<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>
<corners android:radius="25dp" />
<solid android:color="#00000000"></solid>
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="25dp" />
<gradient
android:startColor="#fff"
android:centerColor="#fff"
android:centerY="1.0"
android:endColor="#0d1522"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
Update: I've added the right code that explains my problem
Ok. After researching and doing some more tries to accomplish this I only got to the solution of using a 9patched PNG file to make this work.
It is definately possible to have corner radius all the time. I did it by adding this line before setcontentview method of your custom progress bar.
customProgressDialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
This will make your whole view transparent. So fill the boundary inside your corners with some color.
I'm trying to make a custom list divider. It has one horizontal line that's a subtle gradient, and a second horizontal white line immediately below it as a sort of "drop shadow".
I'm trying to use <layer-list> to accomplish what I want, but it's not working out the way I expect.
Here's the code:
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#ccd0d3"
android:centerColor="#b6babd"
android:endColor="#ccd0d3"
android:height="1px"
android:angle="0" />
</shape>
</item>
<item android:top="2px">
<shape
android:color="#android:color/white"
android:height="1px" />
</item>
</layer-list>
If I use android:divider to assign this to a ListView and set the android:dividerHeight="2", I get a grey gradient that's two pixels high. The white line is nowhere to be seen.
If I set the white line's android:top="1px", I see a one pixel grey gradient and a one pixel black line below it.
Any ideas what I'm doing wrong?
You should set dividerHeight to 3 or avoid setting it altogether.