I have a layout containing a thumbnail for a video with a ShapeableImageView and an ImageView that serves as a play button. I am using ConstraintLayout to position these views. The ShapeableImageView and the ImageView have the same transition name of "lets_play_it". I also have a view for the video that contains a VideoView wrapped in a FrameLayout.
When the thumbnail is clicked, I am trying to start an activity named CheatVideoPlaying and animate the transition to the video view using shared element transition.
Here's the code I am using to start the activity and animate the transition:
holder.videoChatViewBinding.chatVideoThumbNail.setOnClickListener(v -> {
Intent intent = new Intent(ChatActivity.this, CheatVideoPlaying.class);
ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(ChatActivity.this, v, "lets_play_it");
intent.putExtra("videoURL", newURL);
startActivity(intent, optionsCompat.toBundle());
});
here is my xml
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline15"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.13"/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline16"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.85" />
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/chatVideoThumbNail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
app:shapeAppearanceOverlay="#style/roundedImageView"
android:src="#drawable/ic_image"
android:transitionName="lets_play_it"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/guideline16"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline15"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"/>
<ImageView
android:id="#+id/PlayVideo"
android:layout_width="75dp"
android:layout_height="75dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/guideline16"
app:layout_constraintHorizontal_bias="0.50"
app:layout_constraintStart_toStartOf="#+id/guideline15"
app:layout_constraintTop_toTopOf="parent"
android:src="#drawable/ic_outline_play_circle_24"
app:layout_constraintVertical_bias="0.50" />
</androidx.constraintlayout.widget.ConstraintLayout>
and than the view for the video
<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/black"
tools:context=".controller.dashboard.CheatVideoPlaying">
<FrameLayout
android:layout_width="0dp"
android:layout_height="500dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<VideoView
android:id="#+id/chat_video"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:transitionName="lets_play_it"
android:scaleType="fitXY" />
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
However, when I click on the thumbnail, the activity does not start and the transition animation is not working.
Can someone help me figure out why the activity is not starting and how to animate the transition using shared element?
and i had make sure to put true
<style name="AppTheme.OpenMMSImage" parent="AppTheme">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowActivityTransitions">true</item>
<item name="colorPrimaryDark">#android:color/black</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="colorPrimary">#color/mms_primary_color</item>
</style>
the is AppTheme this
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
Related
I made piano keyboard with ConstraintLayout and it looks good until i press white key. It overlap black key and turn back if press black key. The onClick works as expected, the keys play their own sounds. How to solve the problem? Tried android:translationZ, android:elevation - no effect. Maybe i need to change ui button reaction on click? But i don't know how to. And one more newbie question: Can i do buttons with no <Button> tag, maybe <View> etc.?
<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="#drawable/gradient"
tools:context=".PianoKeyboard">
<!-- Guidelines -->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/activity_piano_leftKeysguideline"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.15" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/activity_piano_blackKeysguideline"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.42" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/activity_piano_topKeysguideline"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/activity_piano_botKeysguideline"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.8" />
<!-- Piano white keys -->
<Button
android:id="#+id/activity_piano_c2_button"
android:onClick="onClickC2"
style="#style/white_keys"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/activity_piano_d2_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/activity_piano_leftKeysguideline"
app:layout_constraintTop_toTopOf="#id/activity_piano_topKeysguideline"
app:layout_constraintVertical_chainStyle="packed" />
<Button
android:id="#+id/activity_piano_d2_button"
android:onClick="onClickD2"
style="#style/white_keys"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/activity_piano_e2_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/activity_piano_leftKeysguideline"
app:layout_constraintTop_toBottomOf="#id/activity_piano_c2_button" />
<Button
android:id="#+id/activity_piano_e2_button"
android:onClick="onClickE2"
style="#style/white_keys"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/activity_piano_botKeysguideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/activity_piano_leftKeysguideline"
app:layout_constraintTop_toBottomOf="#id/activity_piano_d2_button" />
<!-- Piano black keys -->
<Button
android:id="#+id/activity_piano_c2d_button"
style="#style/black_keys"
android:layout_width="0dp"
android:layout_height="0dp"
android:onClick="onClickC2D"
android:soundEffectsEnabled="false"
app:layout_constraintBottom_toTopOf="#id/activity_piano_d2_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/activity_piano_blackKeysguideline"
app:layout_constraintTop_toBottomOf="#id/activity_piano_c2_button"
app:layout_constraintVertical_chainStyle="packed" />
<Button
android:id="#+id/activity_piano_d2d_button"
android:onClick="onClickD2D"
style="#style/black_keys"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/activity_piano_e2_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/activity_piano_blackKeysguideline"
app:layout_constraintTop_toBottomOf="#id/activity_piano_d2_button" />
</androidx.constraintlayout.widget.ConstraintLayout>
<style name="white_keys" parent="">
<item name="android:insetBottom">2dp</item>
<item name="android:insetTop">2dp</item>
<item name="backgroundTint">#color/white_keys</item>
</style>
<style name="black_keys" parent="">
<item name="android:insetBottom">2dp</item>
<item name="android:insetTop">2dp</item>
<item name="backgroundTint">#color/black_keys</item>
<item name="layout_constraintHeight_percent">0.06</item>
</style>
I'm using a BottomSheetDialogFragment however when I show it, part of it is being cut off at the bottom.
Why isn't it fully inflating and how can I fix this?
Heres the full layout and usage:
<?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="wrap_content">
<TextView
android:id="#+id/fragplaces_app_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="12dp"
android:paddingTop="16dp"
android:paddingEnd="12dp"
android:paddingBottom="16dp"
android:text="test"
android:textColor="#color/colorWhite"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/background_top_round_corners_blue"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/fragnearme_recycler"
android:layout_width="match_parent"
android:layout_height="350dp"
android:background="#color/backgroundColor"
android:paddingBottom="8dp"
android:scrollbars="vertical"
app:layout_constraintTop_toBottomOf="#+id/fragplaces_app_name"
app:layout_constraintBottom_toTopOf="#+id/send_msg_layout"/>
<RelativeLayout
android:id="#+id/send_msg_layout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/backgroundColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:paddingBottom="8dp">
<ImageView
android:id="#+id/btn_emoji"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:srcCompat="#drawable/ic_grey_smiley_24dp"
android:paddingStart="16dp"
android:paddingEnd="16dp"/>
<EditText
android:id="#+id/challengeroom_et_sendmessage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toEndOf="#id/btn_emoji"
android:background="#drawable/background_chat_send_message"
android:gravity="center_vertical"
android:hint="Type a message"
android:inputType="text"
android:maxLines="1"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:textColorHint="#color/defaultTextColor"
android:textSize="14sp" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Usage:
BottomSheetDialogFragment chatFragment = new ChatFragment();
chatFragment.show(getSupportFragmentManager(), Constants.FRAGMENT_CHAT);
I've tried changing the parent constraint layout height to match_parent and have also tried setting it to a defined height like 500dp, however it still doesn't work.
Adding <item name="behavior_peekHeight">500dp</item> in my BottomSheetDialog's style fixed the issue.
<style name="BottomSheetRoundedCorners" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">#drawable/background_top_round_corners</item>
<item name="behavior_peekHeight">500dp</item>
</style>
<style name="AppBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/BottomSheetRoundedCorners</item>
<item name="behavior_draggable">false</item>
</style>
and using it in my main app theme:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="bottomSheetDialogTheme">#style/AppBottomSheetDialogTheme</item>
</style>
Credits to this answer:
https://stackoverflow.com/a/35720641/11110509
The layout in a full screen dialog is not rendered properly.
This is my dialog code:
val mDialogView = LayoutInflater.from(this).inflate(R.layout.alertdialog_info, null)
val mBuilder = AlertDialog.Builder(this, R.style.FullScreenDialog)
.setView(mDialogView)
val mAlertDialog = mBuilder.show()
mDialogView.titleTv.text = getString(R.string.title)
mDialogView.descriptionTv.text = getString(R.string.description)
mAlertDialog.show()
in style.xml this is my FullScreenDialog:
<style name="FullScreenDialog" parent="android:Theme.Dialog">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:windowBackground">#color/md_white_1000</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowIsFloating">false</item>
</style>
And this is my layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:paddingTop="16dp"
android:gravity="bottom"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/md_white_1000">
<ImageView
android:id="#+id/iconIv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp"
android:src="#drawable/ic_success"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/titleTv" />
<TextView
android:id="#+id/titleTv"
style="#style/FontLocalizedBold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="#string/payment_success"
android:textColor="#color/colorTextPrimary"
android:textSize="24sp"
android:layout_marginStart="24dp"
android:gravity="center"
android:layout_marginEnd="24dp"
android:maxLines="2"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<TextView
android:id="#+id/descriptionTv"
style="#style/FontLocalizedMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="24dp"
android:gravity="center"
tools:text="#string/payment_success_description"
android:textSize="17sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/titleTv" />
<TextView
android:id="#+id/okTv"
style="#style/ButtonTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:paddingBottom="16dp"
android:background="#drawable/save_button_active"
android:text="#string/done"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have tried with LinearLayout instead of ConstraintLayout, but same result.
I have attached pictures with how my xml file look, and how it looks rendered on emulator, ignore please different string values.
emulator:
xml:
Any idea what can cause the difference in rendering?
Sounds like you need to update the preview style in the xml viewer. I highlighted the drop down box to use in the current release of AndroidStudio.
I want to show the mentioned things center in the dialog, for example, now one of them is showing like this:
And it should show like this:
I mean, the same space above the bitmap and under the button.
The same should apply to the width of the bitmap, the same space should be left to the left and to the right, my current code seems to achieve that.
This is how I call the dialog:
private fun showFullScreenDialog()
{
val vacationDialog = AlertDialog.Builder(fragment.context,R.style.DialogTheme)
val factory = LayoutInflater.from(fragment.context);
var view = factory.inflate(R.layout.sample, null)
view.dialog_imageview.setImageBitmap(bitmap)
vacationDialog.setView(view)
vacationDialog.setPositiveButton("Cerrar"){dialog, which ->
dialog.dismiss()
}
vacationDialog.show()
}
This is sample.xml layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:background="#color/white"
>
<ImageView
android:id="#+id/dialog_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:foregroundGravity="center_vertical"
/>
</LinearLayout>
And this the defined DialogTheme style:
<style name="DialogTheme" parent="android:Theme.Dialog">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">fill_parent</item>
<!-- No backgrounds, titles or window float -->
<item name="android:windowBackground">#color/colorPrimary</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>
</style>
Any idea on how to solve this issue?
use relative layout instead of linear layout-:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:background="#color/white"
>
<ImageView
android:id="#+id/dialog_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:foregroundGravity="center_vertical"
/>
</LinearLayout>
If none of other solutions work, try to delete the xml layout and create a new one. The android studio sometimes gets buggy.
I use Constraint Layout to centre anything:
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".YourActivity">
<ImageView
android:id="#+id/dialog_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</android.support.constraint.ConstraintLayout>
I have a problem with bottom app bar, because I want the icons to be displayed to me in the first picture
Instead I got this:
You can place a custom layout inside your BottomAppBar.
The only thing is that you will need to align items in your custom layout manually.
<com.google.android.material.bottomappbar.BottomAppBar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="#style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#android:color/white"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/first_menu_item"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:src="#drawable/ic_first_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/second_menu_item"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/second_menu_item"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/ic_second_icon"
app:layout_constraintBottom_toBottomOf="#+id/first_menu_item"
app:layout_constraintEnd_toStartOf="#+id/placeholder"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#+id/first_menu_item" />
<View
android:id="#+id/placeholder"
android:layout_width="70dp"
android:layout_height="0dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/first_menu_item"
app:layout_constraintEnd_toStartOf="#+id/third_menu_item"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#+id/second_menu_item"
app:layout_constraintTop_toTopOf="#+id/first_menu_item" />
<ImageButton
android:id="#+id/third_menu_item"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/ic_third_icon"
app:layout_constraintBottom_toBottomOf="#+id/first_menu_item"
app:layout_constraintEnd_toStartOf="#+id/fourth_menu_item"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#+id/placeholder" />
<ImageButton
android:id="#+id/fourth_menu_item"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/ic_fourth_icon"
app:layout_constraintBottom_toBottomOf="#+id/first_menu_item"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#+id/third_menu_item"
app:layout_constraintTop_toTopOf="#+id/first_menu_item" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.bottomappbar.BottomAppBar>
You will have something like this:
The icons in the your BottomAppBar are regular action icons just like the ones in a regular Toolbar. So, you can't really position them like the one in the first picture as they will align to the right.
However, I managed to achieve something that is visually similar by nesting a BottomNavigationView inside a BottomAppBar like this:
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:fabAlignmentMode="center"
app:fabAnimationMode="scale"
app:hideOnScroll="true"
app:layout_scrollFlags="scroll|enterAlways">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
app:menu="#menu/bottom_navigation_menu" />
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/fab_icon"
app:layout_anchor="#id/bottom_app_bar" />
You might notice that there's an extra android:layout_marginRight="16dp" attribute in the BottomNavigationView. Try to remove it and you will notice that the BottomNavigationView is pushed to the right and it is not aligned properly in the middle. So, by adding the right margin, it will be aligned perfectly.
Here's a tutorial to guide you on implementing the BottomNavigationView: https://code.tutsplus.com/tutorials/how-to-code-a-bottom-navigation-bar-for-an-android-app--cms-30305
Not sure whether this is the right way but it works. Happy coding!
Based on #amatkivskiy response i made a version with ConstraintLayout, guideline and style. I really appreciate what you did #amatkivskiy.
First, create your xml
<?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">
<androidx.coordinatorlayout.widget.CoordinatorLayout
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">
<!-- Note: A RecyclerView can also be used -->
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="100dp">
<!-- Scrollable content -->
</androidx.core.widget.NestedScrollView>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
android:backgroundTint="#color/colorPrimary">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<!--region GuideLine-->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/first_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.20" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/second_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.40" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/third_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.60" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/last_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.80" />
<!--endregion-->
<!--region icon 1-->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/first_guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/first_icon_title"
style="#style/Menu.Icon.Title"
android:layout_width="0dp"
android:layout_height="0dp"
android:textColor="#android:color/white"
android:text="#string/menu_icon_shop"
app:layout_constraintTop_toBottomOf="#id/second_icon_image"
tools:ignore="MissingConstraints" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/second_icon_image"
style="#style/Menu.Icon.Image"
app:layout_constraintBottom_toTopOf="#+id/first_icon_title"
tools:ignore="MissingConstraints"
app:srcCompat="#drawable/ic_food_selected" />
</androidx.constraintlayout.widget.ConstraintLayout>
<!--endregion-->
<!--region icon 2-->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/second_guideline"
app:layout_constraintStart_toEndOf="#+id/first_guideline"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/second_icon_title"
style="#style/Menu.Icon.Title"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="#string/menu_icon_shop"
app:layout_constraintTop_toBottomOf="#id/imageView"
tools:ignore="MissingConstraints" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/imageView"
style="#style/Menu.Icon.Image"
app:layout_constraintBottom_toTopOf="#+id/second_icon_title"
app:layout_constraintVertical_chainStyle="packed"
tools:ignore="MissingConstraints"
app:srcCompat="#drawable/ic_food" />
</androidx.constraintlayout.widget.ConstraintLayout>
<!--endregion-->
<!--region icon 3-->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/last_guideline"
app:layout_constraintStart_toStartOf="#+id/third_guideline"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/third_icon_title"
style="#style/Menu.Icon.Title"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="#string/menu_icon_shop"
app:layout_constraintTop_toBottomOf="#id/third_icon_image"
tools:ignore="MissingConstraints" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/third_icon_image"
style="#style/Menu.Icon.Image"
app:layout_constraintBottom_toTopOf="#+id/third_icon_title"
app:layout_constraintVertical_chainStyle="packed"
app:srcCompat="#drawable/ic_food"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<!--endregion-->
<!--region icon 4-->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/last_guideline"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/last_icon_title"
style="#style/Menu.Icon.Title"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="#string/menu_icon_shop"
app:layout_constraintTop_toBottomOf="#id/last_icon_image"
tools:ignore="MissingConstraints" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/last_icon_image"
style="#style/Menu.Icon.Image"
app:layout_constraintBottom_toTopOf="#+id/last_icon_title"
app:layout_constraintVertical_chainStyle="packed"
app:srcCompat="#drawable/ic_food"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<!--endregion-->
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bar"
app:srcCompat="#drawable/ic_food" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Note that in order to change size or position, change the Style so all of them will have the same modification.
Next, you need to add those in your style. Put your theme instead of mine
parent="Theme.ChefJeff"
<style name="Menu.Icon.Title" parent="Theme.ChefJeff">
<item name="android:gravity">center</item>
<item name="android:textSize">12sp</item>
<item name="layout_constraintVertical_chainStyle">packed</item>
<item name="layout_constraintBottom_toBottomOf">parent</item>
<item name="layout_constraintEnd_toEndOf">parent</item>
<item name="layout_constraintStart_toStartOf">parent</item>
</style>
<style name="Menu.Icon.Image" parent="Theme.ChefJeff">
<item name="android:layout_width">24dp</item>
<item name="android:layout_height">24dp</item>
<item name="android:layout_marginTop">3dp</item>
<item name="layout_constraintEnd_toEndOf">parent</item>
<item name="layout_constraintStart_toStartOf">parent</item>
<item name="layout_constraintTop_toTopOf">parent</item>
<item name="layout_constraintVertical_chainStyle">packed</item>
</style>
For more details : I used the guideline in order to align my icons and text. You can play with that in order to the percentage that you like. You can even make icon more bigger, remove the text. I feel like with an imageview and a Textview we have more control and it s more easy to custom it.
I did not put the code to control the color when you clic on a item as it depends on your architecture and code style. But you can modify all in kotlin or java at runtime =)