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>
Related
I have a shape drawable resource file.
it's the drawable.xml code below.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="-2dp"
android:bottom="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke android:width="#dimen/px02"
android:color="#color/white" />
</shape>
</item>
</layer-list>
and this is layout xml code.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray333"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!!!"
android:textColor="#color/black"
android:background="#drawable/bg_category_border"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
and the result is this.
you can see the white bar on the left side.
and i want to make the bar size shorter top and bottom as high as the TextView's text.(the red line)
i tried to give a padding and size in the drawable.xml.
and i set android:includeFontPadding on the TextView.
but it didn't work.
how can i make it??
i was able to do it like this
It was little bit tricky to remove padding from bottom and top, but you can try the following xml and do some adjustments as u like.
bg_category_border.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/white" />
</shape>
</item>
</layer-list>
layout xml
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#3C3C3C"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/bg_category_border"
>
<TextView
android:textSize="50sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!!!"
android:includeFontPadding="false"
android:layout_marginBottom="-8dp"
android:layout_marginTop="-10dp"
android:textColor="#color/black"
/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I have a progress bar, that I show to the user until loading is complete. It's good but there is a white rectangle in the middle of the layout, which I want to remove.
I want only the rotating ProgressBar in the middle of the layout.
How to remove this white rectangle?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<ProgressBar
android:id="#+id/progress_bar"
android:paddingTop="5sp"
android:paddingBottom="5sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:indeterminateDrawable="#drawable/progress_bar"
android:max="100"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
and this the progress_bar drawable
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="200"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="1080" >
<shape
android:innerRadius="18dp"
android:shape="ring"
android:thickness="4dp"
android:useLevel="false" >
<size
android:height="48dp"
android:width="48dp" />
<gradient
android:centerColor="#color/colorPrimary"
android:endColor="#ffffff"
android:startColor="#color/colorPrimary"
android:centerY="0.5"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
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"
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
Have tried many ways to design a thermometer in android but they are all suck.
The last work is using a vertical progress plus a circle.xml:
drawable\verticalprogressbar.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>
</shape>
</item>
<item android:id="#android:id/progress">
<clip
android:clipOrientation="vertical"
android:gravity="bottom">
<shape>
<corners android:radius="50dip"/>
<solid android:color="#FF0000"/>
<stroke
android:width="1dp"
android:color="#000000" />
</shape>
<shape>
<solid android:color="#FF0000"/>
</shape>
</clip>
</item>
</layer-list>
drawable\circle.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<solid android:color="#FF0000" />
</shape>
layout\activity_main.xml:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ProgressBar
android:id="#+id/tempGauge"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="10dp"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:max="50"
android:progress="25"
android:progressDrawable="#drawable/verticalprogressbar" />
<View
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="bottom"
android:layout_marginBottom="10dp"
android:background="#drawable/circle" />
</LinearLayout>
What is the best way to draw a real mercury-like meter with this background:
http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Thermometer_CF.svg/345px-Thermometer_CF.svg.png
Change the layout from linear to relative:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.myview.MainActivity" >
<View
android:id="#+id/view1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignBottom="#+id/tempGauge"
android:layout_marginLeft="0dp"
android:background="#drawable/circle" />
<ProgressBar
android:id="#+id/tempGauge"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="10dp"
android:layout_height="fill_parent"
android:layout_alignRight="#+id/view1"
android:layout_marginRight="10dp"
android:max="50"
android:progress="25"
android:progressDrawable="#drawable/verticalprogressbar" />
</RelativeLayout>
Although it is not perfect, but finally looks better.
Now I need to add scales to it.