Develop Reference

Set SeekBar's progress color to transparent

Here is a picture of what I want to accomplish, where there is no progress color (transparent), with a solid grey background bar:
I tried
android:progressTint="#00000000"
But that sets the whole bar (progress bar AND the back bar) to transparent.
I also tried:
android:progressDrawable="#drawable/customseekbar"
where customseekbar.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/seekbar_background" />
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/seekbar_background" />
</item>
and seekbar_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#FF555555" />
</shape>
but then I get this fat and ugly:
What am I doing wrong here? Thanks

How to Style a Seekbar in Android
Here you go, you need to do the following
Step 1:
In drawable, put "progress_bg.png" (find attached)
Step 2:
In drawable, create "myprogessbar_style.xml", and insert the following
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#drawable/progress_bg" />
<item
android:id="#android:id/secondaryProgress"
>
<scale
android:drawable="#drawable/progress_bg"
android:scaleWidth="100%"/>
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/progress_bg"/>
</layer-list>
Step 3:
Your seekbar
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_margin="10dp"
android:indeterminate="false"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:progressDrawable="#drawable/myprogessbar_style"/>
Result
Attachment
P.S. Yes, it's not a transparency but the expected result

This seems to work:
<SeekBar
...
android:progressTint="#android:color/transparent"
... />

seekbar_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:height="1px" android:color="#FF555555" />
</shape>
1px line shape

android:maxHeight="3dp" add this to your layout xml where you have mentioned the seekbar. You can change the dp if you wish to decrease the height

That's much easier to solve. In your seekbar_background.xml:
Instead of:
android:color="FF555555"
Try:
android:color="#android:color/transparent"

If you want to do it programatically:
seekBar.progressTintList = ColorStateList.valueOf(Color.TRANSPARENT)

android:background="#android:color/transparent"
This set my SeekBar in Android Studio background to transparent. Pretty straight forward.

My styled seekBar in android studio is not working as it should

I have a seek bar with the following xml file
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="50"
android:layout_margin="10dp"
android:progressDrawable="#drawable/styled_progress"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:thumb="#drawable/thumbler_small"
android:indeterminate="false" />
and in styled_progress I have
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/progress"
android:drawable="#drawable/progress_cyan"/>
<item
android:id="#+id/secondaryProgress"
android:drawable="#drawable/progress_red"/>
</layer-list>
but I can see only the red part everywhere, the cyan part is not appearing.

Update your styled_progress.xml as, Because you are using wrong ids, you have to use
For Background
android:id="#android:id/background"
For Progress
android:id="#android:id/progress"
For secondaryProgress
android:id="#android:id/secondaryProgress"
and check yours.
<?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/progress_red"/>
<item
android:id="#android:id/progress"
android:drawable="#drawable/progress_cyan"/>
<item
android:id="#android:id/secondaryProgress"
android:drawable="#drawable/progress_red"/>
</layer-list>

How to add number scale inside android seekbar?

I'm trying with the custom seekbar inside have number scale, But is not working. This seekbar must support all screen resolutions. how can i make like this. Please give your valuable idea.
My custom_seekbar.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/unselect"/>
<item
android:id="#android:id/secondaryProgress"
android:drawable="#drawable/select">
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/select">
</item>
activity_main.xml
<LinearLayout 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:background="#color/default_screen_bg"
android:orientation="vertical"
tools:context=".MainActivity" >
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:indeterminate="false"
android:max="10"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:progressDrawable="#drawable/custom_seekbar" />
</LinearLayout>
Unselesct.png
select.png
myresult screen like this
I'm expecting like this

There's number to solutions to the problem:
Use 9patch image for backgorund (which is basically should be used as background for seekbar). Like the following:
(name should be unselect_patch.9.png) and slightly modify custom_seekbar.xml to look like the following:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#android:id/background"
android:drawable="#drawable/unselect_patch"/>
<item android:id="#android:id/secondaryProgress">
<clip>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/select"
android:tileMode="disabled" />
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/select"
android:tileMode="disabled" />
</clip>
</item>
</layer-list>
Just provide exact size of the image in layout (e.g. layout_width="#dimen/select_image_width");
To support all resolutions - provide images for different resolutions, as described in Supporting Multiple Screens. The same images will not work fine for all resolutions and here's better just follow best practices described in detail at the link above.

Selector in Custom View With 9 Patch Image Background

I have problem with implementing selector in custom view. I have searched it for the last 1 hour but I could not find the solution. I have custom view with imageview, some textviews and nine patch background but the problem is when it's on pressed state, the color of selector doesn't cover the image view.
For the implementation, I'm using background selector for the layout and I just change the 9 patch image on pressed and un-pressed state, then disable default selector in listview.
Do you have any better solution? I see in google play, the blue selector covers all of the views and that is what I want.
For the xml,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/touch_selector"
android:orientation="horizontal"
android:padding="16dp" >
<ImageView />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView />
<TextView />
</LinearLayout>
</LinearLayout>
And for the touch selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/card_background_pressed" android:state_focused="true"/>
<item android:drawable="#drawable/card_background_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/card_background_white" android:state_focused="false" android:state_pressed="false"/>
</selector>
where card_background is 9 patch image.
EDIT :
This is the example from google play,

The accepted is not correct.
It's possible to use a nine-path in the selector, you just need to use the <nine-patch>. Something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<nine-patch
android:src="#drawable/marker"/>
</item>
<item>
<shape>
<solid android:color="#000000" />
</shape>
</item>
</selector>

customize toggle button on Android

I customized the Toggle button by using a drawable defined by using a selector. I use this drawable as background for the Toggle button.
<ToggleButton
android:id="#+id/mailbox:toggle_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:background="#drawable/toggle_background"
android:gravity="center_horizontal|center_vertical" />
The toggle_background is defined here:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/img1"
android:state_checked="true" />
<item
android:drawable="#drawable/img2"
android:state_checked="false" />
</selector>
The problem is that the image is always stretched. Is there a way to define an image for the two states that is not stretched?
What I need is a background that will be stretched and in the center of the button an icon that must not be stretched.
Is it possible?

This is my final solution.
In the layout:
<ToggleButton
android:id="#+id/mailbox:toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/toggle_drawable_layers"/>
in the toggle_drawable_layers.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/toggle_drawable_bkg"></item>
<item android:left="10dp" android:drawable="#drawable/toggle_drawable_left"
android:gravity="center_vertical|center_horizontal" />
</layer-list>
in the toggle_drawable_left.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<bitmap android:src="#drawable/bitmap_checked"
android:gravity="center_vertical|center_horizontal" />
</item>
<item android:state_checked="false">
<bitmap android:src="#drawable/bitmap_unchecked"
android:gravity="center_vertical|center_horizontal" />
</item>
</selector>

I did the same task this way, the button:
<ToggleButton android:id="#+id/mlAbout"
android:textOn="#string/about"
android:textOff="#string/about"
android:background="#drawable/ml_about" />
#drawable/ml_about:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/list_bg_top"></item>
<item android:left="10dp">
<bitmap android:src="#drawable/waiting_status_btn"
android:gravity="center_vertical|left" />
</item>
</layer-list>
#drawable/list_bg_top background image that will be stretched and #drawable/waiting_status_btn is the icon the will not be stretched with the widget

Just use bitmaps instead of drawables in your selector like so (no need to use layers):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/img1"
android:state_checked="true" />
<item
android:drawable="#drawable/img2"
android:state_checked="false" />
</selector>
Also, don't forget to declare
android:textOff=""
android:textOn=""
in your ToggleButton declaration

There is another way to overcome the issue of stretching:
Just convert the image into a Nine-Patch image, where the stretchable areas are just on all sides of the image.
Then Android will stretch the image only in invisible areas, and keep the visible image unchanged.