Develop Reference

Custom indicator in Android

I need to do a custom tab indicator for my tab layout. It will be linked to a ViewPager with a TabLayoutMediator. The layout that I need is this:
And I am currently getting this:
Anyone knows why? You can see my XML code below.
Layout where TabLayout is:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/whiteCandy"
android:fitsSystemWindows="true">
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/onBoardingViewPager"
android:layout_width="match_parent"
android:layout_height="#dimen/dimen_0"
android:layout_marginStart="#dimen/tablet_default_margin"
android:layout_marginTop="#dimen/dimen_40"
android:layout_marginEnd="#dimen/tablet_default_margin"
android:layout_marginBottom="#dimen/dimen_75"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabDots"
android:layout_width="wrap_content"
android:layout_height="#dimen/dimen_6"
android:layout_marginStart="#dimen/dimen_30"
android:layout_marginBottom="#dimen/dimen_75"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/onBoardingViewPager"
app:tabBackground="#drawable/tab_selector"
app:tabIndicatorHeight="#dimen/dimen_0"
app:tabPaddingEnd="#dimen/dimen_6" />
</androidx.constraintlayout.widget.ConstraintLayout>
Tab Selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/selected_dot" android:state_selected="true" />
<item android:drawable="#drawable/default_dot" />
</selector>
Selected state drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="#dimen/dimen_3"/>
<solid android:color="#FFFF0000"/>
<size android:height="#dimen/dimen_6" android:width="#dimen/dimen_20"/>
</shape>
Unselected state drawable:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadius="#dimen/dimen_0"
android:shape="ring"
android:thickness="#dimen/dimen_6"
android:useLevel="false">
<solid android:color="#80FF0000" />
</shape>
</item>
</layer-list>

for unselected:
<shape android:shape="oval">
<solid android:color="#80FF0000" />
<size
android:width="4dp"
android:height="4dp" />
</shape>

How to define gradient to circular progressBar

I have added a progress bar like following in my layout, i also added a color to it, and it works fine.
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="50dp"
android:layout_height="50dp"
android:indeterminate="true"
android:indeterminateTintMode="src_atop"
android:indeterminateTint="#color/color"
android:layout_gravity="center_vertical|center_horizontal"
android:visibility="visible"
/>
But i need to add a gradient color on it. I added a gradient in colors folder like following.
<gradient android:type="linear"
android:angle="0"
android:startColor="#dc0336"
android:endColor="#ff7f00"
xmlns:android="http://schemas.android.com/apk/res/android" />
and then i assigned this color to the Progressbar
android:indeterminateTint="#color/gradientColor"
But this does not work, I need to know a way to add a gradient to the progressBar

This is a late answer but I think this will help other people. Just Try Following the code.
drawable/loading_progressbar
<?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="1440">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="false">
<size
android:width="60dp"
android:height="60dp" />
<gradient
android:centerColor="#b43787"
android:centerY="0.50"
android:endColor="#7036a3"
android:startColor="#f0376f"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
activity_main.xml
<ProgressBar
android:id="#+id/loading_progress"
android:layout_width="130dp"
android:layout_height="130dp"
android:indeterminateDrawable="#drawable/loading_progressbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
Result

You should use android:progressDrawable instead of android:indeterminateTint.
Your code should look like below:
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="50dp"
android:layout_height="50dp"
android:indeterminate="true"
android:indeterminateTintMode="src_atop"
android:progressDrawable="#drawable/gradientDrawable"
android:layout_gravity="center_vertical|center_horizontal"
android:visibility="visible"
/>
Use the following as your gradient Drawable. Name the file as gradientDrawable.xml and place it under your drawable directory.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="3.5"
android:shape="ring"
android:thickness="2.5dp"
android:useLevel="false">
<gradient
android:angle="0"
android:endColor="#ff7f00"
android:startColor="#dc0336"
android:type="linear" />
</shape>
I have tested your gradient and it looked like this:

You can set gradient background to progress-bar as below:
<ProgressBar
android:layout_width="75dp"
android:layout_height="75dp"
**android:progressDrawable="#drawable/circular"** />
**circular.xml**
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="false">
<solid android:color="#FA969C" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="true">
<gradient
android:centerColor="#CC3037"
android:endColor="#ED4A52"
android:startColor="#A11210"
android:type="sweep" />
</shape>
</rotate>
</item>
</layer-list>

custom button on android studio 4.2

I am new on android studio and trying to customise my buttons, I created a new xml file in the folder drawable but solid and padding properties doesn't work...
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#69EA64"/>
<size android:height="100dp"
android:width="150dp"/>
<corners android:radius="50dp"/>
<padding android:bottom="60dp"/>
<stroke android:color="#FF0"
android:width="5dp"
android:dashGap="3dp"
android:dashWidth="15dp"/>
<gradient android:angle="45"
android:startColor="#FF00"
android:centerColor="#49A530"
android:endColor="#FF0"/>
</shape>
And this is my XML code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/button"
android:background="#drawable/custom_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Please help...

to make working solid, remove gradient
to make padding use inset instead. Whole code to use:
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="60dp">
<shape
android:shape="rectangle">
<solid android:color="#69EA64" />
<size
android:width="150dp"
android:height="100dp" />
<corners android:radius="50dp" />
<stroke
android:width="5dp"
android:color="#FF0"
android:dashWidth="15dp"
android:dashGap="3dp" />
</shape>
</inset>

How to show a circle tab indicator along Viewpager?

I want to show a tabindicator as in the image below.
I am using viewpager. I already tried TabLayout with viewpager, in which we can only adjust tab indicator color and height. How can I implement this.

when seleted 'tab_selected.xml'
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="ring"
android:useLevel="false"
android:thickness="4dp"
android:innerRadius="0dp">
<solid android:color="#000"/>
</shape>
</item>
</selector>
when not selected 'tab_unselected'
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="ring"
android:useLevel="false"
android:thickness="4dp"
android:innerRadius="0dp">
<solid android:color="#3b000000"/>
</shape>
</item>
</selector>
now when state_presses is true or not 'tab'
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/tab_selected"
android:state_selected="true"/>
<item android:drawable="#drawable/tab_unseleted"/>
</selector>
now in tablayout
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tablayout"
android:layout_alignParentBottom="true"
app:tabIndicatorHeight="0dp"
app:tabGravity="center"
app:tabBackground="#drawable/tab"/>

Keep it simple and just use one XML file.
tab_indicator_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thickness="4dp"
android:useLevel="false">
<size
android:width="4dp"
android:height="4dp" />
<solid android:color="#color/colorAccent" />
</shape>
Usage:
<com.google.android.material.tabs.TabLayout
android:id="#+id/myTabLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:tabIndicator="#drawable/tab_indicator_circle"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicatorHeight="10dp"
app:tabGravity="center" />
Note that I'm using TabLayout from
implementation "com.google.android.material:material:1.1.0-alpha10"

Here's how I achieved it
tab_indicator.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="8dp"
android:height="8dp"
android:bottom="16dp"
android:end="8dp"
android:gravity="center"
android:start="8dp"
android:top="8dp">
<shape android:shape="rectangle">
<size android:width="8dp" android:height="8dp" />
<corners android:radius="4dp" />
<solid android:color="?attr/colorAccent" />
</shape>
</item>
</layer-list>
Important thing is to have fixed width and height.
Usage:
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="8dp"
app:tabIndicator="#drawable/tab_indicator" />

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