Develop Reference

Add an item at current progressBar position - Creating a custom progress bar

I am trying to create a custom progress bar that looks like this:
I manage to create the layout, but I don't know how to put that circle at the current progressBar progress position. Does anybody know how to achieve this?
My xml layout looks like this:
<!-- Define the background properties like color etc -->
<item android:id="#android:id/background">
<shape>
<solid android:color="#ffffff" />
<corners android:radius="1dip" />
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#42cbf4"
android:width="40dp"/>
</shape>
</clip>
</item>
I also added a linearLayout for the transparent Background
I tried putting another oval shape in the progress item, or create another shape for secondProgress, but nothing worked.
Right now, it looks like this:

This type of ProgressBar is called "seek bar", and there are many implementations of it online. Maybe you could search for it on The Android Arsenal by typing "seek" in search. By the way, I've found a simple but pretty one on the site; you can find it here.

I found what I was looking for. Instead of the ProgressBar I used the SeekBar, which implements that thumb I needed. For customization I used the same layout, and for the thumb I used this snippet:
thumb.xml:
<?xml version="1.0" encoding="UTF-8"?>
<gradient
android:angle="270"
android:endColor="#026b91"
android:startColor="#026b91" />
<size
android:height="30dp"
android:width="30dp" />
custom_progress_bar.xml:
<!-- Define the background properties like color etc -->
<item android:id="#android:id/background">
<shape>
<solid android:color="#ffffff" />
<corners android:radius="1dip" />
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#42cbf4"
android:width="40dp"/>
</shape>
</clip>
</item>
For adding those customization to my progressBar, I used this code:
<SeekBar
android:id="#+id/seekBar"
android:thumb="#drawable/thumb"
android:progressDrawable="#drawable/custom_progress_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
For more information, I used this thread
Custom seekbar (thumb size, color and background)

How to make a pill shaped button in android?

I am not sure what to call this... pill shaped maybe. Googling for rounded corners turns up lots of posts of people wanting a rectangular button with rounded corners. This is a little different but more like 2 circles and a rectangle which I tried to draw it as.
I would like to make a button shaped something like the first image below but with text and an icon image in it by using an xml drawable background on an android :
I have tried this which looks ok but if the button length varies it does not scale and you end up with a rectangle and some other strange stuff.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="40dp" android:top="0dp" android:bottom="0dp">
<shape android:shape="oval" >
<solid android:color="#666666"/>
<size android:width="40dp" android:height="40dp"></size>
</shape>
</item>
<item android:left="20dp" android:right="20dp">
<shape android:shape="rectangle" >
<solid android:color="#666666"/>
<size android:width="20dp" android:height="20dp"></size>
</shape>
</item>
<item android:right="40dp">
<shape android:shape="oval" >
<solid android:color="#666666"/>
<size android:width="40dp" android:height="40dp"></size>
</shape>
</item>
</layer-list>
I have tried to create my xml drawable like this also:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#666666" />
<corners android:radius="20dp"/>
<size android:height="20dp" android:width="60dp"></size>
</shape>
which looks like this:
I have looked at this persons example but when I do what he does my results are not completely rounded at the corners. They are more like the second image above.

You can try to save the following code to a drawable(e.g. pill_bg.xml):
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="rectangle">
<corners android:radius="120dp" />
<solid android:color="#color/white" />
<stroke
android:width="1dp"
android:color="#efefef" />
<size
android:width="300dp"
android:height="120dp" />
</shape>
Take a look at size part and radius. Then apply the drawable to your view, for example:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="250dp"
android:layout_height="60dp"
android:background="#drawable/pill_bg" />
As you can see, your view can have different sizes, the background will be scaled.

As of v1.1.0-beta01 of the Material Components Android library you can use MaterialButton and a shapeAppearance style to easily define a pill button that doesn't require you to know the height of the button beforehand or rely on guessing a radius value high enough to go halfway down the side of the button.
Simply define a style like this:
<style name="PillShapeAppearance">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
and set it on your MaterialButton like this:
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:shapeAppearanceOverlay="#style/PillShapeAppearance"
/>
The key that every other answer I've looked at leaves out is to set cornerSize with a percent value so that the fraction value it supports is properly applied.

This resizes correctly for any view background.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#android:color/holo_red_dark" />
</shape>

Well you can make that button in any design program, also make one similar make it look like it is pressed then you make a selector drawable and assign it to the button background. That´s the way i do pretty awesome buttons

SeekBar set line thickness and color from code

I want to create a seek bar totally programmatically. All formatting is to be done from code itself. I cant even use a drawable from xml files.
Everything is working fine except the drawable for seek bar line. I can change the color of the line / change it to some drawable etc. but can't change the thickness of the line.
I am getting the following output:
But I want to achieve somewhat like the below thin line:

You can change the size/thickness of your seek-bar by just using two attributes of seekbar. Which are:
android:minHeight="2dip"
android:maxHeight="2dip"
For example:
<SeekBar
android:progressDrawable="#drawable/seek_progress"
android:thumb="#drawable/thumb"
android:id="#+id/seekDistance"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:max="80"
android:minHeight="2dip"
android:maxHeight="2dip"
/>

for that you have to make a new drawable shape in xml, right click on drawable folder and create new resource file name it "progress_drawable", paste this xml style.
<?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="#bababa"/>
<size
android:height="13dp"
android:width="13dp" />
<corners android:radius="7dp" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<solid
android:color="#color/colorAccent"/>
<corners android:radius="7dp" />
</shape>
</clip>
</item>
</layer-list>
now apply this drawable to your seekbar, also set android:maxHeight
<SeekBar
android:id="#+id/sb"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="10"
android:maxHeight="10dp"
android:minHeight="10dp"
android:progressDrawable="#drawable/progress_drawable"/>

Programmatically change startColor of a border.xml that is used as a background in another xml?

I have an xml file called border.xml in the drawable folder.
In this xml I have
<!-- +++++++++++++++++++++ BORDER +++++++++++++++++++ -->
<item>
<shape android:shape="rectangle">
<solid
android:id="#+id/shape_border_color"
android:color="#color/black" />
<gradient
android:id="#+id/shapre_border_gradient"
android:startColor="#color/BurlyWood"
android:endColor="#color/Blue"
android:angle="270"
/>
<!-- ++++++++++++++++++++ ROUND CORNERS ++++++++++++++++++++++++++++ -->
<corners
android:id="#+id/shape_border_corners"
android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp"
/>
</shape>
</item>
<!-- +++++++++++++++++++++++ BACKGROUND ++++++++++++++++++++++++++ -->
<item
android:left="5dp"
android:right="5dp"
android:top="5dp" >
<shape android:shape="rectangle">
<gradient
android:id="#+id/shape_background"
android:id="#+id/hr_design_background_gradient"
android:startColor="#color/DarkOrchid"
android:endColor="#color/LawnGreen"
android:angle="270"/>
</shape>
</item>
I use the above xml file as a background for a LinearLayout in my main.xml file using the following code
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="0dp"
android:background="#drawable/border_o2">
In my Main.java activity I am interested to change the border's start and end colors as well as the background and Radius of corners
I know how to change a background of a certain id if i am using the a TextView for example. But I am unsure of how to approach changing the Item/Shape/Gradiant values.
Thanks

One approach would be to define a 2nd drawable resource, called drawable/alternate_background.xml. In this file you can code the alternate colors, radius values, etc.
Then you programatically load the alternate resource.
linearLayout.setBackgroundResource(R.drawable.alternate_background);
FWIW, one advantage of this approach is that your view is still externalized. Thus you can use the Eclipse layout editor to preview changes, rather than wait until runtime to see the effects of your changes.

How can I build such button?

I need to implement such button for my Android app. It would be great to do this without using full image as button.
I've done almost the same button using <shape> with <gradient>. The only thing I need is to add bottom blue button shadow and include image.
Is it possible?
Thanks in advance.

You can do this by combining Shape Drawables inside a Layered Drawable. To do so, you'll have 3 xml files as below:
button.xml (the one you already have i guess)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="16dp" />
<gradient
android:angle="270"
android:centerColor="#FFFFFF"
android:endColor="#CAEBF8"
android:startColor="#FFFFFF"
android:type="linear" />
<padding
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
<stroke
android:width="2dp"
android:color="#FFFFFF" />
</shape>
button_bg.xml (to add the blue border below the button)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="16dp" />
<solid android:color="#6FC8F1" />
</shape>
layered_button.xml (to combine the previous xml, and the drawable to use as background on your button)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_bg"/>
<item
android:bottom="2dp"
android:drawable="#drawable/button"/>
</layer-list>
You'll find more information on the Layer List in the Drawables Documentation

Make your button's android:background attribute to point your desired image. Create your image with the text and the little person icon. It's not possible to put a text and an image at the same time inside a button.
For the blue shadow, you can either include it in your image or achieve the same result with the gradient attribute as you already said in your question.

For the image, you should use
android:drawableRight
As for the shadow I'm not sure how this is achieved.