I have a custom SeekBar with a specific style:
<SeekBar
android:id="#+id/mediacontroller_progress"
style="#style/MediaSeekBar"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content" />
MediaSeekBar style:
<style name="MediaSeekBar" parent="android:Widget.SeekBar">
<item name="android:progressDrawable">#drawable/media_seek_bar</item>
<item name="android:minHeight">2dp</item>
<item name="android:maxHeight">2dp</item>
<item name="android:thumb">#drawable/media_seek_bar_thumb</item>
<item name="android:progress">0</item>
</style>
media_seek_bar drawable:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="0dip" />
<solid android:color="#20ffffff" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="0dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="0dip" />
<solid android:color="#color/theme_accent_1" />
</shape>
</clip>
</item>
</layer-list>
media_seek_bar_thumb drawable:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/control_pressed" />
<item android:state_focused="true"
android:drawable="#drawable/control_pressed" />
<item android:state_selected="true"
android:drawable="#drawable/control_pressed" />
<item android:drawable="#drawable/control_normal" />
</selector>
And the result:
without press
when I press thumb
So the problem is the area arround the yellow circle: it's translucent in my png files but not in App.
Problem is in your images inside selector. Probably images have extra space. I have tried to run your code with custom drawable inside selector and it works fine. Here my circle drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#ffe600"/>
<size
android:width="15dp"
android:height="15dp"/>
</shape>
<SeekBar
android:splitTrack="false"
....
/>
Will be ok.
just set this code and work
android:thumbTint="#android:color/transparent" // this code for hide thumb
android:splitTrack="false" // this code for show correctly
Related
I am trying to achieve this progress bar design:
The current code that I have produces this:
This is the code:
<item android:id="#android:id/background">
<shape>
<corners android:radius="8dp"/>
<solid android:color="#color/dirtyWhite"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="8dp"/>
<solid android:color="#color/colorPrimaryDark"/>
</shape>
</clip>
</item>
My progress bar:
<ProgressBar
android:id="#+id/activeProgress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:progress="10"
android:progressDrawable="#drawable/rounded_corners_progress_bar"/>
I tried adding <size> attribute on the <shape> in <clip to make the progress shape a bit smaller but it did not work. Also, the progress bar is flat and I want to be curved as per design. What I need to change in order to achieve the design?
How to make the progress shape a bit smaller?
You need to give the progress item a little padding, like so:
<item android:id="#android:id/progress"
android:top="2dp"
android:bottom="2dp"
android:left="2dp"
android:right="2dp">
How to make the progress bar to be curved as per design?
Replace the <clip></clip> element, with <scale android:scaleWidth="100%"></scale>. That will make the shape keep its form as it grows - and not cut off.
Unfortunately, it will have a little unwanted visual effect at the beginning - as the shape corners don't have enough space to draw. But it might be good enough for most cases.
Full code:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="8dp"/>
<solid android:color="#color/dirtyWhite"/>
</shape>
</item>
<item android:id="#android:id/progress"
android:top="1dp"
android:bottom="1dp"
android:left="1dp"
android:right="1dp">
<scale android:scaleWidth="100%">
<shape>
<corners android:radius="8dp"/>
<solid android:color="#color/colorPrimaryDark"/>
</shape>
</scale>
</item>
</layer-list>
With the Material Components Library you can use the LinearProgressIndicator and the app:trackCornerRadius attribute.
Something like:
<com.google.android.material.progressindicator.LinearProgressIndicator
android:indeterminate="true"
app:trackThickness="xxdp"
app:trackCornerRadius="xdp"/>
It works also for the determinate progress indicator removing the android:indeterminate="true" or using android:indeterminate="false"
Note: it requires at least the version 1.3.0.
Thanks to Georgi Koemdzhiev for a nice question and images. For those who want to make similar to his, do the following.
1) Create a background for a ProgressBar.
progress_bar_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<corners android:radius="3dp" />
<stroke android:color="#color/white" android:width="1dp" />
</shape>
2) Create a scale for the ProgressBar.
curved_progress_bar.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="2dp" />
<solid android:color="#color/transparent" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="2dp" />
<solid android:color="#ffff00" />
</shape>
</clip>
</item>
</layer-list>
3) In layout file add the ProgressBar.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="6dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:background="#drawable/progress_bar_background"
>
<ProgressBar
android:id="#+id/progress_bar"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_margin="1dp"
android:indeterminate="false"
android:progressDrawable="#drawable/curved_progress_bar"
/>
</FrameLayout>
You can achieve progress bar with both inner progress color ,border
color,empty progress with transparent color.
<?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="15dip" />
<stroke android:width="1dp" android:color="#color/black" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#color/black"
android:centerColor="#color/trans"
android:centerY="0.75"
android:endColor="#color/black"
android:angle="270"
/>
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
>
<clip>
<shape>
<corners
android:radius="5dip" />
<gradient
android:startColor="#color/black"
android:endColor="#color/black"
android:angle="270" />
</shape>
</clip>
</item>
</layer-list>
<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="#+id/pb_team2"
android:layout_width="0dp"
android:layout_height="8dp"
android:layout_marginStart="55dp"
android:layout_marginEnd="15dp"
app:trackColor="#E0E0E0"
app:trackCornerRadius="6dp"
app:trackThickness="8dp"
android:progress="2"
app:indicatorColor="#color/red"
android:scaleX="-1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/tv_versus"
app:layout_constraintTop_toBottomOf="#id/tv_team2_score" />
add material dependencies in build.gradle(Module)
implementation 'com.google.android.material:material:1.6.0'
come back at activity_main.xml. Add
<com.google.android.material.progressindicator.LinearProgressIndicator>
...
app:trackCornerRadius="3dp"
</com.google.android.material.progressindicator.LinearProgressIndicator>
Hope it will do your work.
You can create a custom progressbar with Drawable.
1) create first drawable as a custom_progress_bar_horizontal.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>
<padding
android:bottom="2dip"
android:left="2dip"
android:right="2dip"
android:top="2dip" />
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#80385682"
android:centerY="0.50"
android:endColor="#80577AAF"
android:startColor="#80222F44" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="90"
android:endColor="#FF1997E1"
android:startColor="#FF0E75AF" />
</shape>
</clip>
</item>
</layer-list>
2) Create style in style.xml file.
<style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">#drawable/custom_progress_bar_horizontal</item>
<item name="android:minHeight">10dip</item>
<item name="android:maxHeight">20dip</item>
</style>
3) Use anywhere in your project.
<ProgressBar
android:id="#+id/mProgressBar"
style="#style/CustomProgressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Output:-
I've got problem with Android SeekBar.
When I use standard thumb (blue) it's OK, but when I use own theme like scrubber_control.xml there is problem - button is narrowed. I've tried setting minimal height, padding, adding height / width to scrubber_control item, but can't fix that strange issue.
layout
<SeekBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/question_seekbar"
android:thumb="#drawable/scrubber_control"
/>
scrubber_control.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/scrubber_control_disabled_holo" />
<item android:state_pressed="true" android:drawable="#drawable/scrubber_control_pressed_holo" />
<item android:state_selected="true" android:drawable="#drawable/scrubber_control_focused_holo" />
<item android:drawable="#drawable/scrubber_control_normal_holo" />
</selector>
Create custom shape xmls in drawables which define the height and width of thumb
that is used for all three shapes used in scrubber_control.xml
For Example :
In drawable folder add these xmls
custom_scrubber_control_pressed_holo.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/scrubber_control_pressed_holo"/>
</layer-list>
custom_scrubber_control_focused_holo.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/scrubber_control_focused_holo"/>
</layer-list>
custom_scrubber_control_disabled_holo.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/scrubber_control_disabled_holo"/>
</layer-list>
custom_scrubber_control_normal_holo.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/scrubber_control_normal_holo"/>
</layer-list>
After that you just need to change your selector like this.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/custom_scrubber_control_disabled_holo" />
<item android:state_pressed="true" android:drawable="#drawable/custom_scrubber_control_pressed_holo" />
<item android:state_selected="true" android:drawable="#drawable/custom_scrubber_control_focused_holo" />
<item android:drawable="#drawable/custom_scrubber_control_normal_holo" />
</selector>
I am creating a custom style for a seek bar using xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<solid android:color="#00FF00" />
<corners android:radius="0dp" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#FF0000" />
<corners android:radius="0dp" />
</shape>
</clip>
</item>
</layer-list>
<style name="Widget.MySeekBar" parent="android:Widget.SeekBar">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">#drawable/seek_bar_progress</item>
<item name="android:minHeight">3dp</item>
<item name="android:maxHeight">3dp</item>
<item name="android:thumb">#drawable/image_seek_bar_thumb</item>
<item name="android:thumbOffset">8dp</item>
<item name="android:focusable">true</item>
</style>
I want the background to be thinner than the progress similar to the standard jelly bean style seek bars. Is there any way to do this?
Thanks
I have used this in xml:
<SeekBar
android:id="#+id/seekID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/linearLayoutComponentTopRow"
android:layout_marginTop="1px"
android:background="#drawable/slide_bar"
android:progress="0"
android:secondaryProgress="0"
android:thumb="#drawable/bt_slider" />
It sets the background and the thumbnail too.
I hope it helps!
I need a seek bar which color need this
I made an xml file in drawable and its gradient is set below
<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="#808080"
android:centerY="0.75"
android:endColor="#808080"
android:startColor="#808080" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="2dip" />
<gradient
android:angle="270"
android:centerColor="#09488D"
android:centerY="0.75"
android:endColor="#09488D"
android:startColor="#09488D" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#09488D"
android:centerY="0.75"
android:endColor="#09488D"
android:startColor="#09488D" />
</shape>
</clip>
</item>
</layer-list>
Then this xml use it in seekbar's background
But the color does not change :(
Include this in seek bar:
<SeekBar
android:progressDrawable="#drawable/progress"
android:thumb="#drawable/thumb"/>
where 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"
android:drawable="#drawable/background_fill" />
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/progress_fill" />
</item>
</layer-list>
and thumb.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/thumb_fill" />
</selector>
Also you can refer this link - http://www.mokasocial.com/2011/02/create-a-custom-styled-ui-slider-seekbar-in-android/ and http://www.anddev.org/seekbar_progressbar_customizing-t6083.html
If you want to change the color of the progress you have to provide a 9patch drawable for your progressDrawable.
You can find the one currently being used in android-sdk/platforms/(the-api-your-app-is-targeting)/data/res/drawable/scrubber_primary_holo.9
(that's for api 15)
Ive found that the easiest way is to simple open that image, edit the colors, save the image as a 9patch image and put in your applications /drawable folder.
I ran into some weird problem..I implemented a seekbar with custom thumb..and when I ran my app on HTC Desire, it all works fine..but, when I ran it on Samsung Galaxy, the thumb becomes clipped!
Here are the screenshots..
Desire:
Samsung Galaxy:
I would be grateful for any thoughts..tnx
myprogress.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners
android:radius="10dp" />
<gradient
android:startColor="#color/gray"
android:centerColor="#color/gray"
android:centerY="0.75"
android:endColor="#color/gray"
android:angle="270"
/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners
android:radius="10dp" />
<gradient
android:startColor="#color/white"
android:centerColor="#color/white"
android:centerY="0.75"
android:endColor="#color/white"
android:angle="270"
/>
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners
android:radius="10dp" />
<gradient
android:startColor="#FFA500"
android:centerColor="#color/yellow"
android:centerY="0.75"
android:endColor="#color/yellow"
android:angle="270"
/>
</shape>
</clip>
</item>
style:
<style name="mySeekBar">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">#drawable/myprogress</item>
<item name="android:indeterminateDrawable">#android:drawable/progress_horizontal</item>
<item name="android:minHeight">10dip</item>
<item name="android:maxHeight">10dip</item>
<item name="android:thumb">#drawable/thumb</item>
<item name="android:thumbOffset">4dp</item>
<item name="android:focusable">true</item>
seekbar xml:
<SeekBar android:id="#+id/player_seek_horizontal"
android:layout_gravity="center_vertical"
android:max="100"
android:layout_marginLeft="50dp"
android:layout_width="180dp"
android:thumb="#drawable/thumb"
android:layout_height="wrap_content"
style="#style/mySeekBar"
android:background="#drawable/background_transparent_rounded"
android:paddingRight="4dp" android:paddingLeft="4dp"/>
Adjust the android:paddingLeft, android:paddingRight and android:thumbOffset properties of your SeekBar to achieve desired results.
Padding right and left should be half of thumb's width.
<SeekBar
...
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:thumbOffset="0px" />
It worked for me.
add following attributes to your parent layout
android:clipChildren="false"
android:clipToPadding="false"