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

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>

Related

(Android) White piano key overlap black key when clicked

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>

How to place text view on right side of image view without overlapping it and covering whole width in constraint layout

I am trying to place text view on the right side of image view. While I am able to do that, I am facing problem when I give match parent to text view. I want the text to cover remaining area, but when I use match parent, it overlaps the image view on the left.
Here is my code
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_default"
android:layout_marginTop="12dp"
android:layout_marginEnd="#dimen/margin_default"
android:layout_marginBottom="12dp">
<ImageView
android:id="#+id/effective_warnings_card_icon"
android:layout_width="48dp"
android:layout_height="0dp"
android:focusable="false"
android:importantForAccessibility="no"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="#id/effective_warnings_card_text"
app:srcCompat="#drawable/account_unavailable_image"
tools:src="#tools:sample/avatars" />
<TextView
android:id="#+id/effective_warnings_card_text"
style="#style/TextAppearance.TSBApp20.Body.Regular"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:text="aggfgffh"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/effective_warnings_card_icon"
app:layout_constraintStart_toEndOf="#+id/effective_warnings_card_icon"
app:layout_constraintTop_toTopOf="parent" />
<!-- <ImageView-->
<!-- android:id="#+id/effective_warnings_card_icon"-->
<!-- android:layout_width="48dp"-->
<!-- android:layout_height="48dp"-->
<!-- android:layout_marginStart="#dimen/margin_default"-->
<!-- app:srcCompat="#drawable/account_unavailable_image"-->
<!-- android:importantForAccessibility="no"-->
<!-- android:focusable="false"-->
<!-- app:layout_constraintTop_toTopOf="parent"-->
<!-- app:layout_constraintBottom_toBottomOf="parent"-->
<!-- app:layout_constraintStart_toStartOf="parent"-->
<!-- tools:src="#tools:sample/avatars"-->
<!-- />-->
<!-- <TextView-->
<!-- android:id="#+id/effective_warnings_card_text"-->
<!-- style="#style/TextAppearance.TSBApp20.Body.Regular"-->
<!-- android:layout_width="wrap_content"-->
<!-- android:layout_height="wrap_content"-->
<!--android:text="afafafaffafa"-->
<!-- app:layout_constraintEnd_toEndOf="parent"-->
<!-- app:layout_constraintStart_toEndOf="#+id/effective_warnings_card_icon"-->
<!-- app:layout_constraintBottom_toBottomOf="#+id/effective_warnings_card_icon"-->
<!-- app:layout_constraintTop_toTopOf="#+id/effective_warnings_card_icon"-->
<!-- />-->
</androidx.constraintlayout.widget.ConstraintLayout>
In the added image you can see text covering the image with black layout. How to achieve this ?

You have to set 0dp to your TextView.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_default"
android:layout_marginTop="12dp"
android:layout_marginEnd="#dimen/margin_default"
android:layout_marginBottom="12dp">
<ImageView
android:id="#+id/effective_warnings_card_icon"
android:layout_width="48dp"
android:layout_height="0dp"
android:focusable="false"
android:importantForAccessibility="no"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="#id/effective_warnings_card_text"
app:srcCompat="#drawable/account_unavailable_image"
tools:src="#tools:sample/avatars" />
<TextView
android:id="#+id/effective_warnings_card_text"
style="#style/TextAppearance.TSBApp20.Body.Regular"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#000000"
android:text="aggfgffh"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/effective_warnings_card_icon"
app:layout_constraintStart_toEndOf="#+id/effective_warnings_card_icon"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Remove app:layout_constraintLeft_toRightOf="#+id/effective_warnings_card_icon" from TextView
Also remove app:layout_constraintEnd_toEndOf="#id/effective_warnings_card_text" from ImageView
Set 0dp width to TextView
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_default"
android:layout_marginTop="12dp"
android:layout_marginEnd="#dimen/margin_default"
android:layout_marginBottom="12dp">
<ImageView
android:id="#+id/effective_warnings_card_icon"
android:layout_width="48dp"
android:layout_height="0dp"
android:focusable="false"
android:importantForAccessibility="no"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/account_unavailable_image"
tools:src="#tools:sample/avatars" />
<TextView
android:id="#+id/effective_warnings_card_text"
style="#style/TextAppearance.TSBApp20.Body.Regular"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#000000"
android:text="aggfgffh"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/effective_warnings_card_icon"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Constrain Layout top views get disturbed when keyboard gets opened guideline percent does not works

I tried windowSoftInputMode in manifest nothing worked the views get pushed up when the keyboard is opened I tried different approaches but none of them worked. The recycler view collapses with the edit text but it is below the guide line separator.
Image when keyboard is opened:
Image when the keyboard is not opened:
<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/bg_color_for_screen">
<!--Guide line left-->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guide_line_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="#dimen/padding_margin_15" />
<!--Guide line right-->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guide_line_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="#dimen/padding_margin_15" />
<!--Guide line for separating image-->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guide_line_separator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.17" />
<!--Image for the top header-->
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/guide_line_separator"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/splash_bg" />
<!--back button image-->
<ImageView
android:id="#+id/step_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_margin_15"
android:scaleType="centerCrop"
android:src="#mipmap/ic_back_arrow"
android:tint="#color/white"
android:visibility="visible"
app:layout_constraintStart_toStartOf="#id/guide_line_left"
app:layout_constraintTop_toTopOf="parent" />
<!--title for the screen-->
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/padding_margin_10"
android:layout_marginLeft="#dimen/padding_margin_5"
android:layout_marginTop="#dimen/padding_margin_18"
android:fontFamily="#font/nunito_medium"
android:text="#string/blank"
android:textColor="#color/white"
android:textSize="#dimen/text_size_18"
app:layout_constraintStart_toEndOf="#+id/step_back_button"
app:layout_constraintTop_toTopOf="parent" />
<!--edit text for searching by the keyword-->
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/edit_text_search"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/padding_margin_10"
android:layout_marginTop="#dimen/padding_margin_12"
android:background="#drawable/edit_text_background"
android:drawableStart="#mipmap/ic_search"
android:drawablePadding="#dimen/padding_margin_8"
android:fontFamily="#font/nunito_regular"
android:hint="#string/blank"
android:padding="#dimen/padding_margin_10"
android:textSize="#dimen/text_size_15"
app:layout_constraintEnd_toStartOf="#+id/guide_line_right"
app:layout_constraintStart_toStartOf="#id/guide_line_left"
app:layout_constraintTop_toBottomOf="#+id/label" />
<!--recycler view for the list -->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="#dimen/padding_margin_5"
android:layout_marginBottom="#dimen/padding_margin_5"
android:background="#color/transparent"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="#id/guide_line_right"
app:layout_constraintStart_toStartOf="#id/guide_line_left"
app:layout_constraintTop_toBottomOf="#+id/guide_line_separator" />
</androidx.constraintlayout.widget.ConstraintLayout>

Please try to remove this line from rv and then try it.
app:layout_constraintBottom_toTopOf="parent"

Android ConstraintLayout how do i reuse layout and still constrain the layout

I am struggling to get ConstraintLayout to work for me when I want to refactor common layout code into a separate xml file. I can easily do this with RelativeLayouts but I believe RelativeLayouts are deprecated and we should be using ConstraintLayous now.
I have an app with a screen which has a different layout on portrait and landscape as illustrated in the diagram below.
I have 2 layout files with the same name ("my_layout.xml"), one in "layout" folder and one in "layout-land". Currently i have duplicated all the xml in both the layout files and adjusted the constraints so that in the landscape version the views are placed horizontally.
Portrait version
<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">
<!-- OTHER VIEWS 1 -->
<View
android:id="#+id/OtherViews1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- OTHER VIEWS 2 -->
<View
android:id="#+id/OtherViews2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottom="#+id/OtherViews1"
app:layout_constraintBottom_toTopOf="#+id/scrollbar" />
<!-- SCROLL BAR VIEWS -->
<TextView
android:id="#+id/slow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintTop_toTopOf="#+id/scrollbar"
app:layout_constraintBottom_toBottomOf="#+id/scrollbar"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/scrollbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
...
app:layout_constraintBottom_toTopOf="#+id/OtherViews3"
app:layout_constraintStart_toEndOf="#+id/slow"
app:layout_constraintEnd_toStartOf="#+id/fast"/>
<TextView
android:id="#+id/fast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintTop_toTopOf="#+id/scrollbar"
app:layout_constraintBottom_toBottomOf="#+id/scrollbar"
app:layout_constraintStartEnd_toEndOf="parent" />
<!-- OTHER VIEWS 3 -->
<View
android:id="#+id/OtherViews3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Landscape version
<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">
<!-- OTHER VIEWS 1 -->
<View
android:id="#+id/OtherViews1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- OTHER VIEWS 2 -->
<View
android:id="#+id/OtherViews2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottom="#+id/OtherViews1"
app:layout_constraintBottom_toBottomOf="parent" />
<!-- SCROLL BAR VIEWS -->
<TextView
android:id="#+id/slow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintStart_toEndOf="#+id/OtherViews2"
app:layout_constraintTop_toTopOf="#+id/scrollbar"
app:layout_constraintBottom_toBottomOf="#+id/scrollbar"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/scrollbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
...
app:layout_constraintBottom_toTopOf="#+id/OtherViews3"
app:layout_constraintStart_toEndOf="#+id/slow"
app:layout_constraintEnd_toStartOf="#+id/fast"/>
<TextView
android:id="#+id/fast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintTop_toTopOf="#+id/scrollbar"
app:layout_constraintBottom_toBottomOf="#+id/scrollbar"
app:layout_constraintStartEnd_toEndOf="parent" />
<!-- OTHER VIEWS 3 -->
<View
android:id="#+id/OtherViews3"
android:layout_width="wrap_content"
android:layout_height="wrap_content
app:layout_constraintStart_toEndOf="#+id/OtherViews2""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The xml for the "Slow" textbox, the scrollbar and the "Fast" textbox is duplicated in both files. I would like to move the layout for these 3 elements into a separate file and reference it in both "my_layout.xml" files so its more reusable and no duplication across layout files. I want to keep my hierarchy flat (otherwise i would just use RelativeLayouts). I do not know how to specify the constraints of the new reusable xml layout file for the scrollbar UI.
Portrait version reusing the scrollbar layout
<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">
<!-- OTHER VIEWS 1 -->
<View
android:id="#+id/OtherViews1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- OTHER VIEWS 2 -->
<View
android:id="#+id/OtherViews2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottom="#+id/OtherViews1"
app:layout_constraintBottom_toTopOf="#+id/scrollbar" />
<include
layout="#layout/scrollbar
app:layout_constraintBottom_toTopOf="#+id/OtherViews3"
app:layout_constraintStart_toStartOf="parent" />
<!-- OTHER VIEWS 3 -->
<View
android:id="#+id/OtherViews3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Reusable scrollbar layout
<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="wrap_content"
android:layout_height="wrap_content">
<!-- SCROLL BAR VIEWS -->
<TextView
android:id="#+id/slow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintTop_toTopOf="#+id/scrollbar"
app:layout_constraintBottom_toBottomOf="#+id/scrollbar"
app:layout_constraintStart_toStartOf="parent"/> ******************
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/scrollbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
...
app:layout_constraintBottom_toTopOf="#+id/OtherViews3" ******************
app:layout_constraintStart_toEndOf="#+id/slow"
app:layout_constraintEnd_toStartOf="#+id/fast"/>
<TextView
android:id="#+id/fast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintTop_toTopOf="#+id/scrollbar"
app:layout_constraintBottom_toBottomOf="#+id/scrollbar"
app:layout_constraintStartEnd_toEndOf="parent" /> ******************
</androidx.constraintlayout.widget.ConstraintLayout>
I do not know what to put for the lines marked with ****. If I specify that the "slow" textbox starts at the start of the parent, that will not work for the landscape version. I would like this scrollbar layout to just indicate the slow is to the left, the scrollbar in the middle (taking up all remaining space) and the fast textbox is on the right. How do i do that using Constraint Layout? Also how do i center all 3 views vertically?
RelativeLayout is so much easier, as i would say the slow textbox is alignedParentLeft, the fast is alignedParentRight and the scrollbar is to the right of the slow textbox and to the left of the fast textbox. Finally i would say all 3 views are centered vertically in the parent.

A view in the included layout cannot refer to a view in the layout file in which it is included. You can still use an included layout with a different approach.
Look at the included layout with the fast/slow text and the seek bar as a self-enclosed entity - something like the following:
scrollbar.xml
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/slow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Slow"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/scrollbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/slow"
app:layout_constraintEnd_toStartOf="#+id/fast"
app:layout_constraintStart_toEndOf="#+id/slow"
app:layout_constraintTop_toTopOf="#+id/slow" />
<TextView
android:id="#+id/fast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fast"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can now include this layout in layouts for portrait and landscape orientation:
activity_main.xml (portrait)
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="24dp">
<TextView
android:id="#+id/OtherViews1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FFCCCCCC"
android:gravity="center"
android:text="OtherViews1"
app:layout_constraintBottom_toTopOf="#+id/OtherViews2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1" />
<TextView
android:id="#+id/OtherViews2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="24dp"
android:layout_marginBottom="24dp"
android:background="#FFCCCCCC"
android:gravity="center"
android:text="OtherViews2"
app:layout_constraintBottom_toTopOf="#+id/scrollbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottom="#+id/OtherViews1"
app:layout_constraintTop_toBottomOf="#+id/OtherViews1"
app:layout_constraintVertical_weight="4" />
<include
layout="#layout/scrollbar"
android:id="#+id/scrollbar"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/OtherViews3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/OtherViews2"
app:layout_constraintVertical_weight="0.5" />
<TextView
android:id="#+id/OtherViews3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="24dp"
android:background="#FFCCCCCC"
android:gravity="center"
android:text="OtherViews3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/scrollbar"
app:layout_constraintVertical_weight="1" />
</androidx.constraintlayout.widget.ConstraintLayout>
activity_main.xml (landscape)
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="24dp">
<TextView
android:id="#+id/OtherViews1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FFCCCCCC"
android:gravity="center"
android:text="OtherViews1"
app:layout_constraintBottom_toTopOf="#+id/OtherViews2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1" />
<TextView
android:id="#+id/OtherViews2"
android:layout_width="342dp"
android:layout_height="0dp"
android:layout_marginTop="24dp"
android:background="#FFCCCCCC"
android:gravity="center"
android:text="OtherViews2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottom="#+id/OtherViews1"
app:layout_constraintTop_toBottomOf="#+id/OtherViews1"
app:layout_constraintVertical_weight="8" />
<include
android:id="#+id/scrollbar"
layout="#layout/scrollbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toTopOf="#+id/OtherViews3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/OtherViews3" />
<!-- OTHER VIEWS 3 -->
<TextView
android:id="#+id/OtherViews3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:background="#FFCCCCCC"
android:gravity="center"
android:text="OtherViews3"
app:layout_constraintBottom_toBottomOf="#+id/OtherViews2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/OtherViews2" />
</androidx.constraintlayout.widget.ConstraintLayout>
The included layout file can be treated, in terms of constraints and size, like its own widget. See Re-using layouts with <include/>.

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

Categories

Resources