Develop Reference

Unable to start an activity with shared element transition in Android

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">

Android AppCompatButton does look crazy in lower part of the screen

Con somebody explain the following behaviour in viepager2 und why the angle of the pressed button changes like this?
In the first image the first button is pressed.
In the second the 6th button (that looks crazy).
In the code there you can see my layout and below the style for the buttons.
I did change the buttons to material buttons, but this didn't solve the problem.
I don't know where this change of point of view/angle comes from.
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="17">
<com.google.android.material.textview.MaterialTextView
android:gravity="center"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="#string/app_name"
android:layout_weight="1" />
<androidx.appcompat.widget.AppCompatTextView
style="#style/rv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAlignment="center"
android:gravity="center" />
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7"
android:orientation="vertical"
android:layout_marginHorizontal="8dp">
<androidx.appcompat.widget.AppCompatButton
style="#style/style" />
<androidx.appcompat.widget.AppCompatButton
style="#style/style" />
<androidx.appcompat.widget.AppCompatButton
style="#style/style" />
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.AppCompatTextView
style="#style/rv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAlignment="center"
android:gravity="center" />
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7"
android:orientation="vertical"
android:layout_marginHorizontal="8dp">
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/isearch_button0"
style="#style/style" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/isearch_button1"
style="#style/style" />
<androidx.appcompat.widget.AppCompatButton
style="#style/style" />
<androidx.appcompat.widget.AppCompatButton
style="#style/style" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.LinearLayoutCompat>
<style name="style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#android:color/black</item>
<item name="android:text">#string/templateTypeAnswer_male</item>
<item name="android:backgroundTint">#android:color/transparent</item>
</style>

in your style you have set backgroundTint as transparent, thats not supported with shadow added by default to every AppCompatButton, thus you can see some glitches. if you need really transparent Button then use background attribute, but you will lose shadow (as there is no shadow under transparent objects in "material" world). if you need gray fuzzed background (aka. "only shadow") then use some custom drawable for this purpose, also set as background attribute. and then you may also set StateListAnimator as null - this attribute is "adding" shadow (not background or backgroundTint) and also an animation with elevation change when pressed. null will remove this feature (put below in your style)
<item name="android:stateListAnimator">#null</item>

How to stack button views to make a piano style keyboard?

I'm trying to make a piano style keyboard with buttons. I have put the bottom buttons (usually white on a piano) at one third height. Now I want to add the upper buttons (usually black on a piano). I want to achieve something like:
This my layout XML: https://drive.google.com/file/d/13sQNbnxCIjDqENbUY17gQStqzASnOwdJ/view

This seems like a good task for ConstraintLayout. With it, you can achieve a flat layout, where you have no nesting. The main concepts in the layout are constraints. You can read more about them at https://developer.android.com/training/constraint-layout.
In the ConstraintLayout, you organise the views around with constraints. That is, you can say that the white keys should all be constrained to the parent's bottom and their top to a guideline at 2/3 the screen height. Then you can say that the first button should be most to the start of the screen, next to the second button, which is next to the third button and so on. The layout will automatically evenly spread them out.
After that, you put the black keys on top. You can specify their width by using a percent value (percent of parent width, that is). At the end, you get something like this:
// Layout
<?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="#android:color/darker_gray">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/topGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.67" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/blackKeysGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.85" />
<!-- White buttons -->
<Button
android:id="#+id/button1"
style="#style/KeyboardKeyWhite"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/button2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/topGuideline" />
<Button
android:id="#+id/button2"
style="#style/KeyboardKeyWhite"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/button3"
app:layout_constraintStart_toEndOf="#id/button1"
app:layout_constraintTop_toTopOf="#id/topGuideline" />
<Button
android:id="#+id/button3"
style="#style/KeyboardKeyWhite"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/button4"
app:layout_constraintStart_toEndOf="#id/button2"
app:layout_constraintTop_toTopOf="#id/topGuideline" />
<Button
android:id="#+id/button4"
style="#style/KeyboardKeyWhite"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/button5"
app:layout_constraintStart_toEndOf="#id/button3"
app:layout_constraintTop_toTopOf="#id/topGuideline" />
<Button
android:id="#+id/button5"
style="#style/KeyboardKeyWhite"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/button6"
app:layout_constraintStart_toEndOf="#id/button4"
app:layout_constraintTop_toTopOf="#id/topGuideline" />
<Button
android:id="#+id/button6"
style="#style/KeyboardKeyWhite"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/button7"
app:layout_constraintStart_toEndOf="#id/button5"
app:layout_constraintTop_toTopOf="#id/topGuideline" />
<Button
android:id="#+id/button7"
style="#style/KeyboardKeyWhite"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/button6"
app:layout_constraintTop_toTopOf="#id/topGuideline" />
<!-- Black buttons -->
<Button
android:id="#+id/blackButton1"
style="#style/KeyboardKeyBlack"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/blackKeysGuideline"
app:layout_constraintEnd_toEndOf="#id/button2"
app:layout_constraintStart_toStartOf="#id/button1"
app:layout_constraintTop_toTopOf="#id/topGuideline" />
<Button
android:id="#+id/blackButton2"
style="#style/KeyboardKeyBlack"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/blackKeysGuideline"
app:layout_constraintEnd_toEndOf="#id/button3"
app:layout_constraintStart_toStartOf="#id/button2"
app:layout_constraintTop_toTopOf="#id/topGuideline" />
<Button
android:id="#+id/blackButton3"
style="#style/KeyboardKeyBlack"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/blackKeysGuideline"
app:layout_constraintEnd_toEndOf="#id/button5"
app:layout_constraintStart_toStartOf="#id/button4"
app:layout_constraintTop_toTopOf="#id/topGuideline" />
<Button
android:id="#+id/blackButton4"
style="#style/KeyboardKeyBlack"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/blackKeysGuideline"
app:layout_constraintEnd_toEndOf="#id/button6"
app:layout_constraintStart_toStartOf="#id/button5"
app:layout_constraintTop_toTopOf="#id/topGuideline" />
<Button
android:id="#+id/blackButton5"
style="#style/KeyboardKeyBlack"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/blackKeysGuideline"
app:layout_constraintEnd_toEndOf="#id/button7"
app:layout_constraintStart_toStartOf="#id/button6"
app:layout_constraintTop_toTopOf="#id/topGuideline" />
</androidx.constraintlayout.widget.ConstraintLayout>
// Styles
<style name="KeyboardKeyWhite" parent="Widget.AppCompat.Button">
<item name="android:background">#android:color/white</item>
<item name="android:layout_margin">2dp</item>
</style>
<style name="KeyboardKeyBlack" parent="Widget.AppCompat.Button">
<item name="android:background">#android:color/black</item>
<item name="android:layout_margin">2dp</item>
<item name="layout_constraintWidth_percent">0.08</item>
</style>

Bottom app bar problem with placing icons

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 =)

Custom dialog becomes the size of the first control in android

I have the following layout for my custom log in dialog
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/padding_large">
<ImageButton android:src="#drawable/ic_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/dialog.login.settings"
android:padding="#dimen/margin_medium" />
<TextView android:text="#string/dialog.login.text.user_name"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<EditText android:id="#+id/dialog.login.user_name"
android:layout_width="match_parent"
android:gravity="center"
android:ems="20"
android:layout_height="wrap_content"
android:inputType="text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView android:text="#string/dialog.login.text.password"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<EditText android:id="#+id/dialog.login.password"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:textAppearance="?android:attr/textAppearanceMedium" />
<CheckBox android:id="#+id/dialog.login.show_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/dialog.login.check.show_password"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_margin="#dimen/margin_medium"
android:checked="false" />
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button android:id="#+id/dialog.login.cancel"
android:drawableStart="#drawable/ic_exit_black"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_medium"
android:text="#string/dialog.login.button.cancel" />
<Button android:id="#+id/dialog.login.connect"
android:text="#string/dialog.login.button.connect"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_marginStart="#dimen/margin_medium"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
when I create the dialog and setcontentview the width of the dialog becomes equal to that of the image button on the first row
if I remove that , it becomes the size of the EditText (dialog.login.user_name) whose ems is 20
when I make the dialog's constructor call the base dialog constructor with a theme of R.style.Theme.Material.Dialog it does get the correct (about 3/4 of the screen) but the problem is that it ignores my primary and accent colours (which is normal)
Is there a way to have the dialog have the Theme.Material.Dialog size but still keep my own primary/accent colours?
thanks in advance for any help you can provide

After a lot of searching it seems that the solution is to actually replace the dialogTheme attribute of my main theme, so the solution was:
<style name="app.theme"
parent="android:Theme.Material.Light.NoActionBar.Fullscreen">
<item name="android:dialogTheme">#style/app.dialog</item>
......
</style>
<style name="app.dialog"
parent="android:Theme.Material.Light.Dialog">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary.dark</item>
<item name="android:colorAccent">#color/accent</item>
</style>