I need to customize a seekbar. To achieve this I'm using a layer-list XML file, and then set it as background to seekbar.
For the #android:id/background I'm using a bitmap, for secondaryProgress and progress, I'm using a shape.
This is the XML background file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<bitmap
android:src="#drawable/progressbar_bg"
android:tileMode="repeat" />
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#B2B2B2" />
<corners android:radius="5dp" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#E00072" />
<corners android:radius="5dp" />
</shape>
</clip>
</item>
</layer-list>
And here's how I declare the SeekBar:
<SeekBar
android:id="#+id/seekBar1"
android:thumb="#drawable/progressbar_thumb"
android:progressDrawable="#drawable/custom_seek_bar"
android:background="#drawable/progressbar_bg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_toLeftOf="#id/video_total_time"
android:layout_toRightOf="#id/video_time_played" />
The problem is that the SeekBar height does not shrink to new height, which I'm expecting to be equal with height of the background image. Instead, I see a area filled with white space.
Do you know where does the white space come from, and how to git rid of it?
The issue was solved by using a 9-patch instead of a Bitmap, for the #android:id/background item.
<item android:id="#android:id/background">
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:src="#drawable/progressbar_backg" />
</item>
Related
I want to create horizontal indeterminate progress drawable with round corners for progress bar in android. How to create that using xml?
Edit 1: I am using following 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>
<solid android:color="?attr/dividerAndProgressColor" />
<corners android:radius="20dp" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="?attr/secondaryText" />
<corners android:radius="20dp" />
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
>
<clip>
<shape>
<solid android:color="?attr/secondaryText" />
<corners android:radius="20dp" />
</shape>
</clip>
</item>
</layer-list>
android:indeterminateDrawable="#drawable/progress_drawable_start_end_indeterminate"
But there is one problem, animation starts from 0 reaches 100 and then restarts. This is not desired in case of indeterminate progressbar.
round corner
lookout this, https://stackoverflow.com/a/42646939/12709358
<ProgressBar
android:id="#+id/progressbar_horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:indeterminateOnly="true"
android:indeterminateDrawable="#drawable/progressbar_indeterminate_horizontal"
android:progressDrawable="#drawable/progressbar_horizontal"
android:minHeight="24dip"
android:maxHeight="24dip"
/>
also see this, https://stackoverflow.com/a/63463786/12709358
This is waht I need to achieve with xml drawable for SeekBar:
I tried many different variations and this is best I could make.
This is seekbar_thumb_drawable.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#color/accent_color"/>
<size
android:height="20dp"
android:width="20dp" />
</shape>
This is seekbar_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"
android:height="5dp"
android:top="7.5dp">
<shape
android:shape="rectangle">
<solid android:color="#color/seekbar_background" />
<corners android:radius="2.5dp" />
</shape>
</item>
<item
android:id="#android:id/progress"
android:height="10dp"
android:top="5dp">
<clip>
<shape
android:shape="rectangle">
<solid android:color="#color/seekbar_progress" />
<corners android:radius="5dp" />
</shape>
</clip>
</item>
</layer-list>
Result on API 18:
Problem is that lines are not verticaly centered.
Result on API 24:
This display exactly how I want it to display.
Is there any possible solution to make this appear as on first picture on all devices from API 16?
I do not want to use nine-patch, because I need to use color from resources.
I tried padding, gravity, top, bottom, inter-shape, line, rectangle but I could not find solution...
This is because the android:height and android:width for <item> are only available for API 23 and above. If you use these attributes for API below 23, it will not give you an error, but simply ignore it.
In your case, android:height="5dp", and android:height="10dp" are not being applied.
If you look at the relevant docs or , it says that these were added in API level 23.
Make update in your drawable files.
In seekbar_thumb_drawable.xml :
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center">
<shape android:shape="oval">
<solid android:color="#color/accent_color" />
<size
android:width="20dp"
android:height="20dp" />
</shape>
</item>
</layer-list>
seekbar_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"
android:height="5dp"
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#color/seekbar_background" />
<corners android:radius="2.5dp" />
</shape>
</item>
<item
android:id="#android:id/progress"
android:height="10dp"
android:gravity="center">
<clip>
<shape android:shape="rectangle">
<solid android:color="#color/seekbar_progress" />
<corners android:radius="5dp" />
</shape>
</clip>
</item>
</layer-list>
I m using gravity in item, So that drawable item draw in center.
You probably faced with already known issue, here is the solution for it. You should define maxHeight and minHeight of the SeekBar the same as the height of it. Or you can even set maxHeight to some big value like 1000dp, if you exepect your height to be wrap_content, like mentioned below the suggested answer in the same thread.
<SeekBar
android:thumb="#drawable/seekbar_thumb_drawable"
android:progressDrawable="#drawable/seekbar_drawable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="1000dp"
<!-- OR -->
android:maxHeight="16dp"
android:minHeight="16dp"/>
<SeekBar
android:id="#+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="3dp"
android:minHeight="3dp"
android:progressDrawable="#drawable/nnl_bg_seek_bar_progress"
android:splitTrack="false"
android:thumb="#drawable/nnl_sel_seek_bar_thumb"
tools:ignore="UnusedAttribute"
/>
The code above is my way. You may need to pay attention to these attributes: maxHeight / minHeight / splitTrack.
I am also facing same issue in Low API of thumb drawable come above the line So what I did for it.
<SeekBar
android:id="#+id/seekbar_transparency"
android:layout_width="match_parent"
android:layout_height="40dp"
android:paddingTop="#dimen/seekbar_thumb_size_space"
android:paddingBottom="#dimen/seekbar_thumb_size_space"
android:progress="100"
android:theme="#style/SeekbarTheme"
android:thumb="#drawable/thumb_drawable" />
style.xml
<!--Seekbar background change-->
<style name="SeekbarTheme" parent="Theme.AppCompat.Light">
<!-- active seekbar progress track color -->
<item name="colorControlActivated">#color/colorSeekBar</item>
<!-- inactive seekbar progress track color -->
<item name="colorControlNormal">#color/colorGray</item>
</style>
thumb_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="2.5dp"
android:left="2.5dp"
android:right="2.5dp"
android:top="2.5dp">
<shape android:shape="rectangle">
<size
android:width="#dimen/seekbar_thumb_size"
android:height="#dimen/seekbar_thumb_size" />
<corners android:radius="20dp" />
<solid android:color="#201DE9B6" />
</shape>
</item>
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle">
<size
android:width="#dimen/seekbar_thumb_size"
android:height="#dimen/seekbar_thumb_size" />
<corners android:radius="20dp" />
<solid android:color="#AA1DE9B6" />
</shape>
</item>
</layer-list>
dimes.xml
<!--Seeckbar thumb size-->
<dimen name="seekbar_thumb_size">10dp</dimen>
<dimen name="seekbar_thumb_size_space">5dp</dimen>
I´m working on an app wich uses different progress bars, and I want them to look as the ones in Google fit, with rounded cornes.
I have a custom drawable for each bar with different colors, and it rounds the outside corners but not the inside corners, as you can see here:
My custom 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/progress_bar_rounded" />
<solid android:color="#color/progressbarBackground" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="#dimen/progress_bar_rounded" />
<solid android:color="#color/progressbarGreen" />
</shape>
</clip>
</item>
</layer-list>
An the progress bars code is:
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="#dimen/progress_bar_high"
android:id="#+id/GreenProgressBar"
android:indeterminate="false"
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:progressDrawable="#drawable/custom_green_progressbar" />
I could use some libraries as https://github.com/akexorcist/Android-RoundCornerProgressBar , but as it is such a simple thing i think it´s not worth it.
I also have been looking on different threads, but nothing has worked for me.
Any idea, without having to work with .9.png images, if possible?
Thanks a lot!
Use the scale tag rather than clip:
<?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/progress_bar_rounded" />
<solid android:color="#color/progressbarBackground" />
</shape>
</item>
<item android:id="#android:id/progress">
<scale android:scaleWidth="100%" android:useIntrinsicSizeAsMinimum="true">
<shape>
<corners android:radius="#dimen/progress_bar_rounded" />
<solid android:color="#color/progressbarGreen" />
<size android:width="#dimen/progress_bar_rounded"/>
</shape>
</scale>
</item>
</layer-list>
I want to make drawable like below,
I am able to make the Rectangle and Triange shape in two different xml files. But i want to joint them to make the drawable like this.
Use layer-list to make this custom shape drawable.
/res/drawable/custom_shape.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Transparent Rectangle -->
<item>
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="60dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<!-- Colored Rectangle -->
<item
android:bottom="20dp">
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="60dp" />
<solid android:color="#9A8585" />
</shape>
</item>
<!-- Bottom Triangle -->
<item
android:left="80dp"
android:right="120dp"
android:top="0dp"
android:bottom="30dp">
<rotate android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#9A8585" />
</shape>
</rotate>
</item>
<!-- Top Border -->
<item
android:bottom="75dp">
<shape android:shape="rectangle">
<solid android:color="#EFC1B3" />
</shape>
</item>
</layer-list>
USE:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_shape"/>
OUTPUT:
Hope this will help~
Use <layer-list/> for that.
Here is an example for instance.
in Drawable folder of resin project directory,
make xml file and name it as layerlist.xml and paste it below code as your requirement.
you can also add your shape drawable instead of drawable in the <item/> tag in the example. and use this xml as a background of ImageView.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="#drawable/android_red"
android:gravity="center" />
</item>
<item android:top="10dp" android:left="10dp">
<bitmap android:src="#drawable/android_green"
android:gravity="center" />
</item>
<item android:top="20dp" android:left="20dp">
<bitmap android:src="#drawable/android_blue"
android:gravity="center" />
</item>
</layer-list>
Here is the result of the use of <layer-list/>.
I hope it helps you...
I expect that you need it for a a Tabular navigator or a ViewPager. My suggestion is that
1)Use the rectangle as your background for all the cases.
2)Create the same triangle drawable but with the background color (White or transparent) for the unselected item.
3)Create a view with the triangle background for all the items
4)Manually setVisibility of the triangle view according to the selection state
I am trying to create a custom SeekBar with a triangle shape background. There is no thumb icon. Below are some images of what I want to achieve
Below is my code so far
Res/Drawable/segment_bg
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<clip>
<shape>
<gradient
android:startColor="#FF5e8ea3"
android:centerColor="#FF32a0d2"
android:centerY="0.1"
android:endColor="#FF13729e"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
Res/Drawable/segment
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/slider"
android:dither="true"
/>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:startColor="#80028ac8"
android:centerColor="#80127fb1"
android:centerY="0.75"
android:endColor="#a004638f"
android:angle="270"
/>
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/segment_bg"
/>
</layer-list>
activity.xml
<SeekBar
android:id="#+id/frequency_slider"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:max="20"
android:progress="0"
android:secondaryProgress="0"
android:progressDrawable="#drawable/segment"
/>
The 9-patch image used is
The result looks like this
My questions are how do I have the seekbar cater for the triangle shape? Then how do I remove the thumb icon, one isn't needed.
Thanks