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>

Set an xml background for linear layout and show its press effect

I want to set following xml shape as my linear layout background:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#D50000">
</stroke>
<solid
android:color="#android:color/transparent">
</solid>
</shape>
And I also want to show the press effect by these lines of code:
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
android:background="?android:selectableItemBackground"
But as you know, it is impossible to have two background for a view. So, What is the solution?

Try this:
<LinearLayout
android:layout_margin="16dp"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/ll_background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:onClick="doSomething"
android:padding="8dp"
android:weightSum="3">
<TextView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Greeting" />
<TextView
android:layout_weight="2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Hello World!" />
</LinearLayout>
Then in drawable/ folder add:
button_normal.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#D50000">
</stroke>
</shape>
button_pressed.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid
android:color="#D50000">
</solid>
<stroke android:color="#D50000" android:width="2dp"/>
</shape>
Then create ll_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/button_pressed"/>
<item android:drawable="#drawable/button_normal"/>
</selector>
Finally for ripple create drawable-v21 folder and add ll_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#D50000">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
<stroke
android:color="#D50000"
android:width="1dp" />
</shape>
</item>
</ripple>
The first three files (button_normal.xml, button_pressed.xml & ll_background.xml) will be for api < 21 and the 4th (ll_background.xml) ripple will be on all other devices including api 21 and above.

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

Android shape drawable xml not drawn on device nor emulator

I just can't figure it out. I have this shape in res/drawable/start_light.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="20dp"
android:thickness="0dp"
android:useLevel="false">
<solid android:color="#FF0000" />
</shape>
In res/values/styles.xml I have:
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<style name="StartLight">
<item name="android:layout_height">50dp</item>
<item name="android:layout_width">50dp</item>
<item name="android:background">#drawable/start_light</item>
</style>
</resources>
And in main layout I have:
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:gravity="center_vertical" android:layout_height="150dp">
<ImageView android:src="#drawable/start_light" android:id="#+id/light5" android:layout_width="50dp" android:layout_height="50dp"></ImageView>
<View style="#style/StartLight" android:id="#+id/light4"></View>
<View style="#style/StartLight" android:id="#+id/light3"></View>
<View style="#style/StartLight" android:id="#+id/light2"></View>
<View style="#style/StartLight" android:id="#+id/light1"></View>
</LinearLayout>
In ether way, using View or ImageView I dont see any red circles in my layout on emulator nor device. On xml graphical designer they are there. What am I missing here?

Replace your shape drawable with
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="0dp"
android:thickness="20dp"
android:useLevel="false">
<solid android:color="#FF0000"/>
</shape>
Setting the thickness as 0 made it not visible on the emulator.
Here i set the innerRadius as 0.