Develop Reference

How to create a custom ProgressBar with drawables, without programming?

This is my custom white-transparent wheel ProgressBar
progressbar_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="2.5"
android:thickness="4dp"
android:useLevel="false">
<gradient
android:type="sweep"
android:startColor="#android:color/white"
android:centerColor="#android:color/white"
android:endColor="#android:color/transparent"
/>
</shape>
In the preview window of Android studio, this element has showed correctly.
But after debug testing in both emulator (Android 9) and device (Android 6), ProgressBar showed as #color/colorAccent wheel Progressbar.
I have tried to change android:shape, android:innerRadiusRatio, android:thickness, even change gradient to solid color. Nothing changed.
Here is my progress_task_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/correct_icon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/correct_icon"
android:padding="#dimen/padding_large"
android:visibility="gone" />
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:padding="#dimen/padding_large"
android:progressDrawable="#drawable/progressbar_circle"
android:visibility="gone" />
</RelativeLayout>
How to accomplish custom android ProgressBar on xml without dynamically programming in java?

Create progress.xml file in drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="8"
android:useLevel="false">
<size
android:width="76dip"
android:height="76dip" />
<gradient
android:angle="0"
android:endColor="#1672B6"
android:startColor="#android:color/transparent"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
Then use it like this:
<ProgressBar
android:id="#+id/pbarLoading"
android:layout_width="36dp"
android:layout_height="36dp"
android:indeterminateDrawable="#drawable/progress"/>

Android view pager with tab layout

i have implemented viewpager for image slider with tablayouts as indicator but it seems that i can't make any padding between the dots ,this the layout for pager
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="220dp"
android:layout_below="#id/PlacesPageBanner">
<android.support.v4.view.ViewPager
android:id="#+id/placesPager"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_margin="10dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabDots"
android:layout_width="match_parent"
android:layout_height="7dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
app:tabBackground="#drawable/tab_selector"
app:tabIndicatorHeight="0dp"
app:tabMaxWidth="7dp" />
</RelativeLayout>
code for layout containing the dots(tab_selector)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/tab_indicator_selected"
android:state_selected="true"/>
<item android:drawable="#drawable/tab_indicator_default"/>

I think the issue is in your #drawable/tab_indicator_selected and #drawable/tab_indicator_default. Providing the xml code for those would be helpful to find your issue.
Here's how I did it:
Tab indicator selected
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="8dp"
android:useLevel="false">
<solid android:color="#color/colorAccent"/>
</shape>
</item>
</layer-list>
Tab indicator default
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="5dp"
android:useLevel="false">
<solid android:color="#android:color/darker_gray"/>
</shape>
</item>

Half circle shape not work

I try to create half circle background, in development IDE preview it works, but when I launch in emulator it doesn't work.
Here is my shape code :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:height="50dp">
<shape>
<solid android:color="#color/colorAccentDark" />
</shape>
</item>
<item android:top="-500dp" android:bottom="0dp" android:left="-100dp" android:right="-100dp">
<shape>
<corners android:radius="500dp" />
<solid android:color="#color/colorAccentDark" />
</shape>
</item>
</layer-list>
And here is my layout code :
<?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:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_profile"
android:layout_weight="1">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_avatar"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_default_avatar"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"/>
<TextView
android:id="#+id/profile_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/profile_avatar"
android:layout_marginTop="20dp"
android:textColor="#color/neutralWhite"
android:textStyle="bold"
android:textSize="18sp"
android:text="Avatar Ang"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="4.04">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello Android!"/>
</RelativeLayout>
</LinearLayout>
Maybe any other tweak to handle that?
Thank you

you can try this :
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#900021df"/>
<size
android:width="10dp"
android:height="5dp"/>
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"/>
</shape>
it gives this shape:

curve_toolbar_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"/>
</item>
<item
android:bottom="0dp"
android:left="-100dp"
android:right="-100dp"
android:top="-80dp">
<shape android:shape="oval">
<solid android:color="#color/colorPrimary" />
</shape>
</item>
</layer-list>
activity_main.xml
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/rounded_corner"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
</android.support.v7.widget.Toolbar>
</android.support.constraint.ConstraintLayout>

You cannot create a semicircle from xml. but you could achieve what you are looking for using a circle with appropriate margin & padding.
You can use a circle shape .xml file.
Create a fixed sized circle like this:
Example:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false" >
<solid android:color="#006AC5" />
<size
android:height="50dp"
android:width="50dp" />
</shape>

Try this. Remove the gradient part then it will look like same as you want.
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#00B0EA" />
</shape>
</item>
<item
android:bottom="400dp"
android:left="-100dp"
android:right="-100dp"
android:top="-200dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:angle="90"
android:endColor="#65FFFFFF"
android:startColor="#65FFFFFF" />
</shape>
</item>
<item
android:bottom="402dp"
android:left="-100dp"
android:right="-100dp"
android:top="-280dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#FFFFFF" />
</shape>
</item>

Background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
<item
android:bottom="410dp"
android:left="-100dp"
android:right="-100dp"
android:top="-300dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#7181A1" />
</shape>
</item>
</layer-list>
Output like

You can try to use ShapeOfView.
<io.github.florent37.shapeofview.shapes.ArcView
android:layout_width="match_parent"
android:layout_height="300dp"
android:elevation="4dp"
app:shape_arc_height="20dp"
app:shape_arc_position="bottom">
<!-- YOUR CONTENT -->
</io.github.florent37.shapeofview.shapes.ArcView>
Image result

Using progress bar as border of imageview

I want to put a progress bar to imageview. I tried with following code:
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/image"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="3dp"
android:src="#drawable/defaultprofile" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="64dp"
android:layout_height="64dp"
android:indeterminate="false"
android:progressDrawable="#drawable/circular_progress_bar"
android:background="#drawable/circle_shape"
style="?android:attr/progressBarStyleHorizontal"
android:max="100"
android:progress="65"
android:layout_alignParentTop="true"
android:layout_alignLeft="#+id/image"
android:layout_alignStart="#+id/image" />
circular_progress_bar.xml:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thickness="1dp"
android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->
<gradient
android:angle="0"
android:endColor="#007DD6"
android:startColor="#007DD6"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
circle_shape.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="2.5"
android:thickness="1dp"
android:useLevel="false">
<solid android:color="#CCC" />
</shape>
Result:
How can I fix it? The progress bar should look like border of imageview. I have to remove the padding.

so your view looks now like that:
All you need not to do is changing height and weight of both views - the're different
EDIT: Now you're have this:
According to http://developer.android.com/intl/es/guide/topics/resources/drawable-resource.html
delete this line
android:innerRadiusRatio="2.5"
SOLUTION: I've already changed some files:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000"
android:padding="10dp"
android:id="#+id/mainLayout">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/image"
android:layout_width="65dp"
android:layout_height="65dp"
android:src="#color/colorAccent"/>
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="65dp"
android:layout_height="65dp"
android:padding="1dp"
android:progressDrawable="#drawable/circular_progress_bar"
android:background="#drawable/circle_shape"
android:style="?android:attr/progressBarStyleHorizontal"
android:max="100"
android:progress="65"
android:layout_alignLeft="#+id/image"
android:layout_alignTop="#+id/image" />
</RelativeLayout>
Circular Progress bar:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:innerRadius="32dp"
android:shape="ring"
android:thickness="1dp"
android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->
<gradient
android:angle="0"
android:endColor="#007DD6"
android:startColor="#007DD6"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
Circular shape
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:thickness="1dp"
android:innerRadius="32dp"
android:useLevel="false">
<solid android:color="#CCC" />
</shape>
And it looks like:
Hope it help

How To Give Shape to LinearLayout's Background image?

i want to give shape toLinearLayout's backgroundimage. i am using following xml.
but it is not displaying image while displaying only curve.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners android:radius="7dp" />
<stroke android:width="1dp"/>
<item>
<bitmap android:src="#drawable/locationlable" />
</item>
</shape>

you can use a layer-list drawable :
like this :
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#[package:]drawable/drawable_resource"
android:id="#[+][package:]id/resource_name"
android:top="dimension"
android:right="dimension"
android:bottom="dimension"
android:left="dimension" />
</layer-list>

Try this
In your layout
<FrameLayout 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:orientation="vertical"
android:background="#FFF">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dip"
android:background="#drawable/background"
android:orientation="vertical" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#xml/shape_round_rect"
android:orientation="vertical" />
</FrameLayout>
& in your xml for shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="15dip" />
<stroke
android:width="5dip"
android:color="#FFF" />
</shape>

if you want to draw circular then you would use a different shape:
android:shape="ring"
and if you want to draw a rectangle, then use below code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ffffff" />
<stroke
android:width="2dp"
android:color="#000000" />
</shape>
for more info visit this link http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape