Develop Reference

how to set items when soft keyboard is shown with using guideLine in constraint layout?

I am using ConstraintLayout in my application.
When soft keyboard is shown, I want to only button move above that And other items do not move up. I did this with using a scrollView.
Now I used guideLine to support all screen sizes, but after soft keyboard is shown, all items move to up again.
How should I use guideLine for this?
Manifest :
<activity
android:name=".RegisterActivity"
android:exported="false"
android:windowSoftInputMode="adjustResize" />
<activity
Xml :
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ScrollView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/button_register_sendVerification"
android:layout_width="0dp"
android:layout_height="0dp"
android:fillViewport="true"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_register_topParent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.04" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_register_bottomParent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.96" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_register_leftParent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.08" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_register_rightParent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.92" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_register_topMobileNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.4"/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_register_bottomMobileNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.49"/>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout_register_mobileNumber"
style="#style/TextInputLayout.All"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintLeft_toRightOf="#id/guideline_register_leftParent"
app:layout_constraintRight_toLeftOf="#id/guideline_register_rightParent"
app:layout_constraintTop_toTopOf="#+id/guideline_register_topMobileNumber"
app:layout_constraintBottom_toBottomOf="#id/guideline_register_bottomMobileNumber">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/textInputEditText_register_mobileNumber"
style="#style/TextInputEditText.All"
android:hint="#string/text_all_enterPhoneNumber"
android:inputType="phone"
android:maxLength="11"
android:textAlignment="center" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<Button
android:id="#+id/button_register_sendVerification"
style="#style/Button.all"
android:layout_width="0dp"
android:layout_height="48dp"
android:text="#string/text_button_registerActivity_sendVerification"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Unfortunately, all windowSoftInputModes will either shift the text view or hide the button.
If you want to use a windowSoftInputMode of adjustResize, you will have to accommodate a ConstraintLayout that will change it's height when the soft keyboard is shown and hidden. Since a percentage Guideline specifies its position as a percentage of the ConstraintLayout's height (not the screen height), the Guideline's position will shift as the layout's height changes.
In your case, the easiest way around this problem is to specify Guideline positions using an offset from the top of the ConstraintLayout. Since this offset will remain a constant distance from the top of the ConstraintLayout even as the ConstraintLayout's height changes, it will behave as you want.
You can also leave the percent Guidelines in and convert them programmatically to fixed Guidelines. That way you can get the 40% offset regardless of the device.
The following code will replace a percentage Guideline with a fixed offset Guideline.
private fun replaceGuideline(layout: ConstraintLayout, oldGuideline: Guideline) {
require(layout.height > 0) { "ConstraintLayout must have gone through a layout pass." }
Guideline(layout.context).apply {
val lp = ConstraintLayout.LayoutParams(
ConstraintLayout.LayoutParams.WRAP_CONTENT,
ConstraintLayout.LayoutParams.WRAP_CONTENT
)
lp.orientation = ConstraintLayout.LayoutParams.HORIZONTAL
layoutParams = lp
id = oldGuideline.id
setGuidelineBegin(oldGuideline.top)
layout.removeView(oldGuideline)
layout.addView(this)
}
}
You could also specify a windowSoftInputMode of adjustNothing (which is strangely missing from the docs). You can then detect when the soft keyboard is opened and closed to adjust the position of the button, although detecting soft keyboard status is oddly tricky.

Android MaterialCardView's drop shadow/elevation disappears when rotating it 180 degrees

Summarize the problem:
I am working on a paint app, and in this app, the user has the option to rotate the canvas, this feature can be useful in some scenarios.
The problem I am having, is that when I rotate the CardView, which hosts the canvas/bitmap, 180 degrees -- the drop shadow gets lost. I do not get this problem when I rotate the CardView 90 degrees, only 180 degrees.
Describe what you've tried
I've tried many things, such as giving the CardView more space so that the drop shadow will show, or manually applying drop shadow from the code after rotating it 180 degrees, but it hasn't worked.
Show some code
Here is the code responsible for rotating the CardView (it's really simple):
fun CanvasActivity.rotate(rotationValue: RotationValue, animate: Boolean = false) {
rotate(rotationValue.degrees, rotationValue.clockwise, animate)
}
fun CanvasActivity.rotate(degrees: Int, clockwise: Boolean = true, animate: Boolean = false) {
val rotationAmount = if (clockwise) {
(binding.activityCanvasCardView.rotation + degrees)
} else {
(binding.activityCanvasCardView.rotation - degrees)
}
if (animate) {
binding.activityCanvasCardView
.animate()
.rotation(rotationAmount)
} else {
binding.activityCanvasCardView.rotation = rotationAmount
}
}
activity_canvas:
<?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"
android:background="#color/fragment_background_color_daynight"
tools:context=".activities.canvas.CanvasActivity">
<!-- This view is here to ensure that when the user zooms in, there is no overlap -->
<View
android:elevation="20dp"
android:outlineProvider="none"
android:id="#+id/activityCanvas_topView"
android:layout_width="0dp"
android:layout_height="90dp"
android:background="#color/fragment_background_color_daynight"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- The ColorSwitcherView is a view I created which helps
simplify the code for controlling the user's primary/secondary color -->
<com.therealbluepandabear.pixapencil.customviews.colorswitcherview.ColorSwitcherView
android:id="#+id/activityCanvas_colorSwitcherView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:elevation="20dp"
android:outlineProvider="none"
app:isPrimarySelected="true"
app:layout_constraintEnd_toEndOf="#+id/activityCanvas_topView"
app:layout_constraintTop_toTopOf="#+id/activityCanvas_colorPickerRecyclerView" />
<!-- The user's color palette data will be displayed in this RecyclerView -->
<androidx.recyclerview.widget.RecyclerView
android:elevation="20dp"
android:outlineProvider="none"
android:id="#+id/activityCanvas_colorPickerRecyclerView"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:orientation="horizontal"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="#+id/activityCanvas_topView"
app:layout_constraintEnd_toStartOf="#+id/activityCanvas_colorSwitcherView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/activityCanvas_primaryFragmentHost"
tools:listitem="#layout/color_picker_layout" />
<!-- This FrameLayout is crucial when it comes to the calculation of the TransparentBackgroundView and PixelGridView -->
<FrameLayout
android:id="#+id/activityCanvas_distanceContainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/activityCanvas_tabLayout"
app:layout_constraintEnd_toEndOf="#+id/activityCanvas_primaryFragmentHost"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/activityCanvas_topView" />
<!-- This gives both views (the PixelGridView and TransparentBackgroundView) a nice drop shadow -->
<com.google.android.material.card.MaterialCardView
android:id="#+id/activityCanvas_cardView"
style="#style/activityCanvas_canvasFragmentHostCardViewParent_style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/activityCanvas_tabLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/activityCanvas_topView">
<!-- At runtime, the width and height of the TransparentBackgroundView and PixelGridView will be calculated -->
<com.therealbluepandabear.pixapencil.customviews.transparentbackgroundview.TransparentBackgroundView
android:id="#+id/activityCanvas_transparentBackgroundView"
android:layout_width="0dp"
android:layout_height="0dp" />
<com.therealbluepandabear.pixapencil.customviews.pixelgridview.PixelGridView
android:id="#+id/activityCanvas_pixelGridView"
android:layout_width="0dp"
android:layout_height="0dp" />
</com.google.android.material.card.MaterialCardView>
<!-- The primary tab layout -->
<com.google.android.material.tabs.TabLayout
android:elevation="20dp"
android:outlineProvider="none"
android:id="#+id/activityCanvas_tabLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:tabStripEnabled="false"
app:layout_constraintBottom_toTopOf="#+id/activityCanvas_viewPager2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/activityCanvas_tab_tools_str" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/activityCanvas_tab_filters_str" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/activityCanvas_tab_color_palettes_str" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/activityCanvas_tab_brushes_str" />
</com.google.android.material.tabs.TabLayout>
<!-- This view allows move functionality -->
<View
android:elevation="20dp"
android:outlineProvider="none"
android:id="#+id/activityCanvas_moveView"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="#+id/activityCanvas_distanceContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/activityCanvas_topView" />
<!-- The tools, palettes, brushes, and filters fragment will be displayed inside this ViewPager -->
<androidx.viewpager2.widget.ViewPager2
android:elevation="20dp"
android:outlineProvider="none"
android:id="#+id/activityCanvas_viewPager2"
android:layout_width="0dp"
android:layout_height="110dp"
app:layout_constraintBottom_toBottomOf="#+id/activityCanvas_primaryFragmentHost"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<!-- This CoordinatorLayout is responsible for ensuring that the app's snackbars can be swiped -->
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:elevation="20dp"
android:outlineProvider="none"
android:id="#+id/activityCanvas_coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<!-- All of the full page fragments will be displayed in this fragment host -->
<FrameLayout
android:elevation="20dp"
android:outlineProvider="none"
android:id="#+id/activityCanvas_primaryFragmentHost"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
0 degrees:
90 degrees:
180 degrees:
As you can see, no drop shadow when it's rotated 180 degrees (when the origin is 0 degrees).
This problem is not major but it makes the UI of my app inconsistent.
Note: for some reason, I only get the issue on phones but not tablet devices.

It's a curious thing, actually. I've tried to rotate a simple shadowed View and it seems that it cuts off the shadow when it has 180/-180 rotation angle without any logical reason. I also tried to play with outline providers, buut no. So it's not about CardView, it rather comes from the implementation of drawing a shadow in the View class.
I've searched a bit, and it was already reported directly to Google and fixed, but probably some compat libraries still have this issue that's why you're facing it.
https://issuetracker.google.com/issues/173730323
https://issuetracker.google.com/issues/137454913
I can suggest you creating a crutch (yeap, I know, that it's not a solution) with leaving a comment. If your rotation is about -180/180, you can "normalize" it with "-179.9/179.9". In terms of the user experience it won't be visible, in terms of beautiful code - meh, but I don't see any other ways here.

You're setting android:outlineProvider="none" on most items ...
while the drop-shadow being used might have the wrong offset coordinates - you'd need to substract instead of adding the offset. There's too little code provided to answer this more accurately - but with high probability, the shadow is just hidden underneath the canvas, due to the stated cause. I'd suggest to provide your own implementation of ViewOutlineProvider and then pass this instead of none.

You need to set total (left, right, bottom and top) of 16dp on each side android:layout_margin="16dp" and set app:cardElevation="4dp", it will work.

ConstraintLayout: center view on full screen but limit width to not overlap with side views

I have a toolbar like component implementation, that I'm having trouble with the layout in all situations. It has a left icon, a title and a right menu/button. I need the title to be centered on the full screen (or at least the full width of the layout) but also to not overlap with the other components. So the width of the title would have to be constrained by the left icon and the right button.
I have two intermediary solutions but can't seem to find a way to combine them.
One is to center the title on the screen. The problem here is that the title overlaps with the right button (and would overlap with the left icon too, if large enough ...). Here is the layout XML:
<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="wrap_content">
<ImageView
android:id="#+id/bottomSheetHeaderIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/bottomSheetHeaderTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textAlignment="center"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="My also very very very very very long title" />
<TextView
android:id="#+id/right_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Really long string longer"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The other is to center the title between the left icon and the right button. Now there is no overlap, but the title is not centered correctly. Since the two side elements have very different sizes, the title is only centered between them, which is no good. Here is the same layout with the constraints for this case:
<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="wrap_content">
<ImageView
android:id="#+id/bottomSheetHeaderIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/bottomSheetHeaderTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textAlignment="center"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/right_action"
app:layout_constraintStart_toEndOf="#+id/bottomSheetHeaderIcon"
app:layout_constraintTop_toTopOf="parent"
tools:text="My also very very very very very long title" />
<TextView
android:id="#+id/right_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Really long string longer"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I'm trying to get away with just a XML layout solution, without having to do programmatically detect overlaps and change the layout.
Solutions with other layouts would also work, if they exist.
The problem is the same as the questions here and here, but I'm hoping that by giving more detail, this one gets an accepted solution.

Here is a programatic answer to this question, that is what I'm using for now, but I'd really like a layout solution ...
I use the first layout, centered on the screen, and, as this is part of a custom view for me, add the following code to the constructor (title is a reference to bottomSheetHeaderTitle and rightAction is right_action, the left icon is assumed to always be smaller than the right action text).
viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
override fun onGlobalLayout() {
if (title.width > 0) {
if (title.right > rightAction.x) {
title.maxWidth = (2.0 * (width / 2.0 - (width - rightAction.x))).toInt()
}
viewTreeObserver.removeOnGlobalLayoutListener(this)
}
}
})
This code detects if the title overlaps the right action, and, if it does, adds a max width to it. The max width is the double of the distance between the center of the screen and the beginning of the right action.

style the Material tab layout

I'm working with material design in my android app using kotlin. I wanna know how can I style my tab layout just like the way it's in the image shown below. Thanks!
<com.google.android.material.tabs.TabLayout
android:id="#+id/profileFreelancerTabLayoutCu"
style="#style/Widget.AppCompat.Light.ActionBar.TabBar"
android:layout_width="wrap_content"
android:layout_height="60dp"
app:tabTextColor="#color/colorPrimary"
android:layout_marginVertical="20dp"
android:layout_marginHorizontal="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/registeredOnValueProfileFreelancerCu"
/>
SOLVED:
<com.google.android.material.tabs.TabLayout
android:id="#+id/profileFreelancerTabLayoutCu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#color/colorPrimary"
android:layout_marginVertical="20dp"
android:layout_marginHorizontal="60dp"
app:tabIndicatorGravity="stretch"
app:tabIndicator="#drawable/tab_indicator_shape"
android:background="#drawable/thicker_stroke_tab_layout"
app:tabSelectedTextColor="#color/colorWhite"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginBottom="10dp"
app:layout_constraintTop_toBottomOf="#+id/registeredOnValueProfileFreelancerCu"
/>

Just use the app:tabIndicatorGravity="stretch" attribute to stretch the indicator to match the height and width of a tab item in this layout.
Also you can set the background color using the app:tabIndicatorColor attribute:
<com.google.android.material.tabs.TabLayout
app:tabIndicatorGravity="stretch"
app:tabIndicatorColor="#color/...."
...>
Remove the style="#style/Widget.AppCompat.Light.ActionBar.TabBar".

Placing icon over tablayout

I am trying to place an icon to my tablayout. My tablayout have fixed 6 tabs. And my icon should place next to second tab icon. I tried following code and it worked well on simulator but not on real device.
My code:
Tablayout.xml and icon
<android.support.design.widget.TabLayout
android:id="#+id/tabs2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#40436F"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="60dp"
android:layout_marginBottom="15dp"
android:background="#drawable/tab_bar_bg"
android:visibility="visible"
app:tabPaddingEnd="0dp"
app:tabPaddingStart="0dp"
app:tabIndicatorHeight="2dp"
app:tabMode="fixed"
app:tabMinWidth="58dp"
app:tabGravity="center"/>
<RelativeLayout
android:id="#+id/notification_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="0dp"
android:layout_marginStart="0dp"
android:layout_marginTop="63dp"
android:visibility="gone">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/notification_bg"
/>
<TextView
android:id="#+id/textView32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="12sp"
android:textColor="#fff"
android:textStyle="bold"
android:layout_centerInParent="true"/>
</RelativeLayout>
And code:
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
int marginDp=(pxToDp(tabLayout.getWidth()))/6*2;
RelativeLayout.LayoutParams relativeParams = (RelativeLayout.LayoutParams)badgeView.getLayoutParams();
relativeParams.setMargins(Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, marginDp, getResources().getDisplayMetrics())), Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 63, getResources().getDisplayMetrics())), 0, 0); // left, top, right, bottom
badgeView.setLayoutParams(relativeParams);
}
On simulator (This is what i want):
And this is on device (it is placing wrong)
How can i fix this?
Also i don't know if this way is best to achive this thing. You can suggest me another way to do this thing. :)

I would suggest using a custom view for your tabs, where you could specify a RelativeLayout containing your tab image, the red notification indicator, and a textview that you could use to set the number inside the notification indicator. Here's one example of a way to use custom layouts for tabs: https://mobikul.com/make-custom-tabs-icons-android/

You can have a horizontal linear layout with tab images acting as tab layout. You can handle each clicks of the added imageviews on their own by getting the viewpager's position or vice versa.
That way .. you get to design any tab layout you want.
Hope that helps