I have the mic icon and surrounding the mic icon, I need to place the Progress Bar to handle some running process like below:
<ImageView
android:id="#+id/iv_mic_movable"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="68dp"
android:src="#drawable/record" />
<ProgressBar
android:id="#+id/pb_assist"
style="?android:attr/progressBarStyleLarge"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="53dp"
android:visibility="gone" />
The above code shows the UI as follows:
I want to show the progress bar like this, But this progress is very Thick. How to make it somewhat thinner with only 1dp?
None of the above answers worked for me. Struggling around found a below working solution.
progressbar_circular.xml. Use android:thicknessRatio for thickness of the circle. More the value will be, thinner it will be.
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="0"
android:toDegrees="360" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="40"
android:useLevel="false" >
<size
android:height="48dip"
android:width="48dip" />
<gradient
android:centerColor="#color/colorPrimary"
android:centerY="0.50"
android:endColor="#color/color_black"
android:startColor="#color/colorPrimary"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
Progress bar layout will be like below:
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="?android:attr/progressBarStyleLarge"
android:indeterminateDrawable="#drawable/progressbar_circular"
android:layout_gravity="center_horizontal"
android:visibility="visible"/>
Here is custom ProgressBar. You can set thickness of progress inside shape.
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="172dp"
android:layout_height="172dp"
android:indeterminate="false"
android:max="100"
android:visibility="visible"
android:progress="0"
android:layout_gravity="center_horizontal" //updated line
android:layout_marginTop="53dp" //updated line
android:background="#drawable/circle_shape"
android:progressDrawable="#drawable/circle_progress_foreground"
/>
circle_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="2.2"
android:thickness="5dp"
android:useLevel="false">
<solid android:color="#ABBAC2" />
</shape>
circle_progress_foreground.xml
Change android:thickness as per your requirement
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:innerRadiusRatio="2.7"
android:shape="ring"
android:thickness="2dp"
android:useLevel="true">
<solid android:color="#fbcb09" />
</shape>
</rotate>
You can also achieve this by adding mimimum width and height
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="23dp"
android:layout_marginTop="20dp"
android:indeterminate="false"
android:max="100"
android:minHeight="5dp"
android:minWidth="200dp"
android:progress="1" />
try to add this below style on your xml progessBar layout,
style="#android:style/Widget.ProgressBar.Large.Inverse"
Update
try to add this property:
android:progressDrawable="#android:drawable/progress_horizontal"
Related
I am trying to create a circular ripple effect on a CircularProgressIndicator but ripple effect goes outside over the View.
I want it to be on the CircularProgressIndicator and not going outside it. An help will be appreciated.
Here is my code:
<RelativeLayout
android:id="#+id/play_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/play_prev"
android:background="#drawable/btn_ripple_circular">
<com.google.android.material.progressindicator.CircularProgressIndicator
android:id="#+id/progress_circular"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:indeterminate="false"
android:max="100"
app:indicatorColor="#color/colorAccent"
app:indicatorSize="44dp"
app:trackColor="#color/colorAccentOpacity"
tools:progress="50" />
<ImageButton
android:id="#+id/btn_play"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_centerInParent="true"
android:background="#color/colorTransparent"
android:clickable="false"
android:contentDescription="#string/cover"
android:focusable="false"
android:src="#drawable/ic_play"
app:tint="#color/colorAccent" />
</RelativeLayout>
btn_ripple_circular.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorAccentOpacity"
android:radius="36dp">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#color/colorAccentOpacity" />
<corners android:radius="36dp" />
</shape>
</item>
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<corners android:radius="36dp" />
<solid android:color="#color/colorTransparent" />
</shape>
</item>
</ripple>
app:tabRippleColor="#color/transparent"
I have a default progress bar
For me it's very large border. How can I make a progress bar like this (with thin border)?
I have a simple layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ProgressBar
android:id="#+id/hello_progress_bar"
android:layout_width="210dp"
android:layout_height="210dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Create a file with shape drawable for your progress
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="8"
android:useLevel="false">
<solid
android:color="#F3A523"/>
</shape>
</rotate>
Use it inside your ProgressBar
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="24dp"
android:layout_height="24dp"
android:indeterminate="true"
android:progressDrawable="#drawable/progress_bar"
android:indeterminateDrawable="#drawable/progress_bar"
/>
This way you can control width of your border via thicknessRatio property of the drawable
1> Create a Drawable for Ring Progressbar progressbar.xml and put
into drawabal folder.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/progress">
<rotate android:toDegrees="360">
<shape
android:shape="ring"
android:thickness="4dp"
android:innerRadiusRatio="3"
android:thicknessRatio="20.0">
<solid android:color="#FF4081" />
</shape>
</rotate>
</item>
</layer-list>
2> Set above Drawable into your progressbar
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ProgressBar
android:id="#+id/hello_progress_bar"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:progressDrawable="#drawable/progressbar"
android:indeterminateDrawable="#drawable/progressbar"
/>
</android.support.constraint.ConstraintLayout>
Set below properties in drawable file
android:innerRadiusRatio="3"
android:thicknessRatio="20.0
Hope this may help you
layout file
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="270dp"
android:layout_height="270dp"
android:layout_gravity="center"
android:indeterminate="false"
android:max="200"
android:progress="100"
android:progressDrawable="#drawable/progress" />
drawable/progress.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="2.3"
android:shape="ring"
android:thickness="10dp"
android:useLevel="true">
<solid android:color="#05b61c" />
</shape>
I have a circular progress bar and it is working properly when it show 60%. But it does not show any progress for 10% result.The progress is shown with the help of adapter. Can you please help me?
My code is:
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="10dp"
android:max="100"
android:indeterminate="false"
android:progressBackgroundTint="#D3D3D3"
android:progress="50"
android:progressDrawable="#drawable/progressbar"
android:layout_centerVertical="true" />
Try this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<ProgressBar
android:id="#+id/cmll_progrssbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="70dp"
android:layout_height="70dp"
android:indeterminate="false"
android:layoutDirection="rtl"
android:max="100"
android:progress="100"
android:progressDrawable="#drawable/circle_progress_uncomplete" />
<TextView
android:id="#+id/cmll_completed_per"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/cmll_progrssbar"
android:layout_alignLeft="#id/cmll_progrssbar"
android:layout_alignRight="#id/cmll_progrssbar"
android:layout_alignTop="#id/cmll_progrssbar"
android:layout_gravity="center"
android:gravity="center"
android:padding="10dp"
android:text="100%" />
</RelativeLayout>
Now Create #drawable/circle_progress_uncomplete like this
<?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:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="20.0"
android:useLevel="false">
<solid android:color="#color/colorLightOrange" />
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="20.0"
android:useLevel="true">
<solid android:color="#color/colorOrange" />
</shape>
</rotate>
</item>
</layer-list>
OUTPUT WITH 10% PROGRESS
OUTPUT WITH 100% PROGRESS
this is my code from layout...
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rotate"
android:layout_centerInParent="true"
android:progressDrawable="#drawable/b"
android:visibility="gone" />
(b is a PNG)
android still showing default one
then tried this
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rotate"
android:layout_centerInParent="true"
android:progressDrawable="#drawable/rotate"
android:visibility="gone" />
as you can see I set progressDrawable to an drawable XML which I tried to copy from everywhere so I think the problem cant be there.
but anyway I will post it
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="7.0">
<gradient
android:centerColor="#007DD6"
android:endColor="#007DD6"
android:startColor="#007DD6"
android:angle="0"
android:type="sweep"
android:useLevel="false" />
</shape>
this is an extract from tutorials point
but android still showing the default one
also I made this but I have a suspicion that is a terrible mistake
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360">
<bitmap android:src="#drawable/b"/>
</rotate>
but there is no way...
I am stuck no matter what I do Android still showing default one. anyone can help?
Use indeterminateDrawable , not progressDrawable.
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rotate"
android:layout_centerInParent="true"
android:indeterminateDrawable="#drawable/b"
android:visibility="gone" />
You cant use android:progressDrawable="some value" for animation.
1)Assign some id to rotate tag
2)write this in your activity.java file
Animation anim=AnimationUtils.loadAnimation(this,R.anim.id_of_your_rotate)
3)Retrieve the reference of ProgressBar
ProgressBar demo=new ProgressBar(this);
demo.setAnimation(anim);
I want to put a progress bar to imageview. I tried with following code:
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/image"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="3dp"
android:src="#drawable/defaultprofile" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="64dp"
android:layout_height="64dp"
android:indeterminate="false"
android:progressDrawable="#drawable/circular_progress_bar"
android:background="#drawable/circle_shape"
style="?android:attr/progressBarStyleHorizontal"
android:max="100"
android:progress="65"
android:layout_alignParentTop="true"
android:layout_alignLeft="#+id/image"
android:layout_alignStart="#+id/image" />
circular_progress_bar.xml:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thickness="1dp"
android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->
<gradient
android:angle="0"
android:endColor="#007DD6"
android:startColor="#007DD6"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
circle_shape.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="2.5"
android:thickness="1dp"
android:useLevel="false">
<solid android:color="#CCC" />
</shape>
Result:
How can I fix it? The progress bar should look like border of imageview. I have to remove the padding.
so your view looks now like that:
All you need not to do is changing height and weight of both views - the're different
EDIT: Now you're have this:
According to http://developer.android.com/intl/es/guide/topics/resources/drawable-resource.html
delete this line
android:innerRadiusRatio="2.5"
SOLUTION: I've already changed some files:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000"
android:padding="10dp"
android:id="#+id/mainLayout">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/image"
android:layout_width="65dp"
android:layout_height="65dp"
android:src="#color/colorAccent"/>
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="65dp"
android:layout_height="65dp"
android:padding="1dp"
android:progressDrawable="#drawable/circular_progress_bar"
android:background="#drawable/circle_shape"
android:style="?android:attr/progressBarStyleHorizontal"
android:max="100"
android:progress="65"
android:layout_alignLeft="#+id/image"
android:layout_alignTop="#+id/image" />
</RelativeLayout>
Circular Progress bar:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:innerRadius="32dp"
android:shape="ring"
android:thickness="1dp"
android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->
<gradient
android:angle="0"
android:endColor="#007DD6"
android:startColor="#007DD6"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
Circular shape
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:thickness="1dp"
android:innerRadius="32dp"
android:useLevel="false">
<solid android:color="#CCC" />
</shape>
And it looks like:
Hope it help