How can i achieve this type of vertical progress bar?The progress bar's progress also has round corner
I tried to find solution but can not find any.I tried to set a custom drawable as follow`
<?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>
<gradient
android:angle="180"
android:centerColor="#ffffffff"
android:centerY="0.75"
android:endColor="#ffffffff"
android:startColor="#ffffffff" />
<corners android:radius="#dimen/xxs" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip
android:clipOrientation="vertical"
android:gravity="bottom">
<shape>
<gradient
android:centerColor="#E9E9E9"
android:centerY="0.75"
android:endColor="#E9E9E9"
android:startColor="#E9E9E9" />
<corners android:radius="#dimen/xxs" />
</shape>
</clip>
</item>
</layer-list>
I think you need to go with the some chart library that would be great solution but if you want to go with customisation your chart then go with below code.
veritcal_progressbar.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>
<corners android:radius="5dip"/>
<solid android:color="#FFFFFF"/>
<stroke
android:width="1dp"
android:color="#FF000000" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip
android:clipOrientation="vertical"
android:gravity="bottom">
<shape>
<corners android:radius="5dip"/>
<solid android:color="#FFBE00"/>
<stroke
android:width="1dp"
android:color="#FF000000" />
</shape>
</clip>
</item>
</layer-list>
Use in layout file.
<ProgressBar
android:id="#+id/vprogressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:progressDrawable="#drawable/veritcal_progressbar"/>
You can achieve this using below code
<RelativeLayout 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"
android:gravity="center"
tools:context=".MainActivity">
<com.google.android.material.slider.Slider
android:id="#+id/slider"
android:layout_width="300dp"
android:layout_height="50dp"
android:valueFrom="0.0"
android:valueTo="100.0"
android:value="60.0"
android:rotation="270"
android:scaleY="15"
app:thumbRadius="0dp"
app:haloRadius="0dp"
android:layout_centerInParent="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#color/white"
android:textSize="16dp"
android:text="60%"/>
</RelativeLayout>
Output
Related
This is the Progress indicator I need.
I took help from this answer. Gradient color Progress Indicator
This is what I achieved so far.
My Progressbar background drawable is:
<?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:radius="#dimen/_11sdp" />
<solid android:color="#color/cultured" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip android:clipOrientation="horizontal">
<shape android:shape="rectangle">
<corners android:radius="#dimen/_11sdp" />
<gradient
android:endColor="#color/colorPrimary"
android:startColor="#color/deep_peach" />
</shape>
</clip>
</item>
</layer-list>
My Progressbar code is:
<ProgressBar
android:id="#+id/viewLinearProgress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_height="4dp"
android:layout_marginStart="#dimen/_6sdp"
android:layout_marginTop="#dimen/_19sdp"
android:layout_marginEnd="#dimen/_14sdp"
android:progress="60"
android:progressDrawable="#drawable/gradient_progressbar"
app:layout_constraintEnd_toStartOf="#id/tvProgress"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvMessage" />
The only problem is that - only the Progressbar indicator right side rounded corner is not resolved. The track is ok.
This is working
<?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:top="#dimen/size_6" android:bottom="#dimen/size_6">
<shape>
<solid android:color="#B5B6B5"/>
<corners android:radius="100dp" />
</shape>
</item>
<item android:id="#android:id/progress"
android:top="#dimen/size_4" android:bottom="#dimen/size_4">
<clip>
<scale android:scaleWidth="100%" android:scaleHeight="20">
<shape>
<gradient android:endColor="#FF7400" android:startColor="#FFA119" android:angle="180"/>
<corners android:radius="100dp" />
</shape>
</scale>
</clip>
</item>
</layer-list>
Use
<ProgressBar
android:id="#+id/progressbar_insurance"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="#dimen/_14sdp"
android:layout_marginTop="#dimen/_4sdp"
android:indeterminate="false" />
Hope this work for you, let me know if doesn't work... :)
I have this image of the seekbar that I want to build:
But my seekbar is looking like this:
My seekbar has no transparency and I can not make it thinner.
How can I do this?
Here are the codes:
Seekbar:
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alpha="0.75"
android:max="25"
android:min="7"
android:progress="1"
android:splitTrack="false"
android:progressDrawable="#drawable/progress_seek_bar_settings"
android:thumb="#drawable/thumb_seekbar_settins" />
Thumb:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval">
<size
android:height="20dp"
android:width="20dp" />
<solid android:color="#color/color_primary_dark" />
</shape>
</item>
</layer-list>
Progress:
<?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>
<gradient
android:startColor="#color/color_primary"
android:endColor="#color/color_primary"/>
<size
android:width="1dp"
android:height="2dp"
/>
<corners android:radius="3dp" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<gradient
android:startColor="#color/color_primary"
android:endColor="#color/color_primary" />
<size
android:width="1dp"
android:height="2dp"
/>
<corners android:radius="3dp" />
</shape>
</clip>
</item>
</layer-list>
I need help getting it as close to the first image as possible. Thank you!!
Hello in drawable/progress_seek_bar_settings transform
<item android:id="#android:id/background">
in
<item android:id="#android:id/background"
android:height="3dp"
android:gravity="center_vertical"
>
UPDATE
drawable/thumb_seekbar_settins.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval">
<size
android:height="20dp"
android:width="20dp" />
<solid android:color="#ebeb" />
</shape>
</item>
</layer-list>
drawable/progress_seek_bar_settings.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:height="3dp"
android:gravity="center_vertical"
>
<shape>
<gradient
android:startColor="#ebeb"
android:endColor="#ebeb"/>
<size
android:width="1dp"
android:height="2dp"
/>
<corners android:radius="3dp" />
</shape>
</item>
<item android:id="#android:id/progress"
android:height="3dp"
android:gravity="center_vertical"
>
<clip>
<shape>
<gradient
android:startColor="#ebeb"
android:endColor="#ebeb" />
<size
android:width="1dp"
android:height="2dp"
/>
<corners android:radius="3dp" />
</shape>
</clip>
</item>
</layer-list>
activity
<?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"
android:paddingTop="40dp"
android:background="#android:color/black"
>
<SeekBar
android:layout_marginTop="40dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alpha="0.75"
android:max="100"
android:min="7"
android:progress="1"
android:splitTrack="false"
android:progressDrawable="#drawable/progress_seek_bar_settings"
android:thumb="#drawable/thumb_seekbar_settins" />
</android.support.constraint.ConstraintLayout>
looks like this:
I want to make a shape for my view like this one.
Is there any way to do that with xml?
Thanks
Here is your custom drawable custom_shape_down_arrow.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Background -->
<item>
<shape android:shape="rectangle">
<size
android:width="250dp"
android:height="20dp" />
<solid android:color="#cdcdcd" />
</shape>
</item>
<!-- Top-Left Line -->
<item
android:right="150dp"
android:bottom="18.7dp">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</item>
<!-- Top-Right Line -->
<item
android:left="150dp"
android:bottom="18.7dp">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</item>
<!-- Left-Diagonal Line -->
<item
android:right="25dp">
<rotate android:fromDegrees="36">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</rotate>
</item>
<!-- Right-Diagonal Line -->
<item
android:left="27dp">
<rotate android:fromDegrees="322">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</rotate>
</item>
</layer-list>
USE:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="24dp"
android:gravity="center_horizontal">
<!-- Custom shape -->
<LinearLayout
android:id="#+id/layout_custom_shape"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:paddingTop="10dp"
android:background="#cdcdcd">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/custom_shape_down_arrow">
</LinearLayout>
</LinearLayout>
</LinearLayout>
OUTPUT:
Hope this will help~
I have a custom seekbar that's not quite working.
I want the seekbar to look like this:
But this is as close as I have been able to get
Ignoring the slight coloring and size issues, the problem I'm having is with the green progress size. Is there some way to make this smaller than the background? I've tried size and padding tags in the XML, and even tried fiddling with two rectangles on top of each other with clip gravity, but no luck yet.
Here is my Seekbar drawable
<?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">
<corners android:radius="20dp" />
<solid android:color="#color/fofo_grey" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#color/signup_green" />
</shape>
</clip>
</item>
</layer-list>
And the Seekbar in the layout fragment
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/seekBar"
android:layout_below="#+id/textView6"
android:layout_centerHorizontal="true"
android:splitTrack="false"
android:progressDrawable="#drawable/custom_seekbar"
android:thumb="#drawable/thumb_seekbar"
android:max="100"
android:progress="50"
android:indeterminate="false" />
for change height progress drawble just add android:minHeight="2dp" and android:maxHeight="2dp" to layout.
UPDATE:
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:max="100"
android:minHeight="2dp"
android:maxHeight="2dp"
android:background="#android:color/transparent"
android:progressDrawable="#drawable/sb_progress_drawable"
android:progress="0"
android:secondaryProgress="0"
android:thumbOffset="0dp"
android:thumb="#drawable/sb_thumb" />
sb_progress_drawable.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="#26FFFFFF"/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<scale
android:scaleWidth="100%" >
<shape android:shape="rectangle">
<solid android:color="#26FFFFFF"/>
</shape>
</scale>
</item>
<item android:id="#android:id/progress">
<scale
android:scaleWidth="100%" >
<shape android:shape="rectangle">
<solid android:color="#FFFFFF"/>
</shape>
</scale>
</item>
</layer-list>
sb_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<size android:width="20dp" android:height="20dp" />
<solid android:color="#FFFFFF" />
</shape>
<?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">
<corners android:radius="20dp"/>
<solid android:color="#color/fofo_grey" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners android:radius="20dp"/>
<solid android:color="#color/signup_green" />
<stroke android:width="6dp"
android:color="#color/fofo_grey" />
</shape>
</clip>
</item>
</layer-list>
just add stroke attribute in seekbar drawable
Managed to fix this. Can't believe it took me so long to think of the solution...
<clip>
<shape android:shape="rectangle">
<stroke android:color="#color/fofo_grey" android:width="6dp"/>
<corners android:radius="20dp" />
<solid android:color="#color/signup_green" />
</shape>
</clip>
Added a stroke with the same colour as the background element, and tweaked the stroke width to achieve the desired effect.
I'm curious why the seekbar isn't progressing smoothly once I started messing with its background and replaced the normal slider image with a different image (the ball you click to move).
The seekbar looks exactly how I want it but its not smooth, it jumps rather than smoothly flowing as the standard seekbar does.
Here are the 3 xml files:
seekbar_progress_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#FF32a0d2"
android:centerY="0.1"
android:endColor="#FF13729e"
android:startColor="#FF5e8ea3" />
</shape>
</clip>
</item>
</layer-list>
seekbar_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>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#FFFFFF"
android:centerY="0.75"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:angle="270"
android:centerColor="#80127fb1"
android:centerY="0.75"
android:endColor="#a004638f"
android:startColor="#80028ac8" />
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/seekbar_progress_bg"/>
</layer-list>
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.64" >
<SeekBar
android:id="#+id/frequency_slider"
android:layout_width="919dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="136dp"
android:max="20"
android:progress="0"
android:progressDrawable="#drawable/seekbar_progress"
android:secondaryProgress="0"
android:thumb="#drawable/triton_slider_handle" />
</RelativeLayout>
</LinearLayout>