Which layout should replace LinearLayout in this calculator - android

I've implemented this simple calculator layout using LinearLayout, but faced with "nested weights" warning from Android Studio.
This is my first attempt to do something for android, so I started reading: TableLayout and GridLayout would have the same problem as I understand, and ConstraintLayout is recommended everywhere.
But I can't figure it out, how to achieve the same result using ConstraintLayout.
Is it possible? Is it even worth it to ditch LinearLayout in this case?
My layout:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:paddingRight="0dp"
android:paddingTop="10dp"
android:orientation="vertical"
android:background="#F5F5F6"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="2 + 2"
android:textSize="30sp"
android:gravity="right"
android:layout_marginRight="10dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="4"
android:textSize="30sp"
android:textColor="#000"
android:gravity="right"
android:layout_marginRight="10dp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="horizontal"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent"
android:orientation="horizontal"
>
<Button
android:id="#+id/keyboard_num7"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="7"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num8"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="8"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num9"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="9"
style="#style/Operand"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent"
android:orientation="horizontal"
>
<Button
android:id="#+id/keyboard_num4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="4"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num5"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="5"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num6"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="6"
style="#style/Operand"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent"
android:orientation="horizontal"
>
<Button
android:id="#+id/keyboard_num1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="2"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="3"
style="#style/Operand"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent"
android:orientation="horizontal"
>
<Button
android:id="#+id/keyboard_num_dot"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="."
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num0"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="0"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num_del"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="del"
style="#style/Operand"
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#E1E2E1"
>
<Button
android:id="#+id/keyboard_division"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="÷"
style="#style/Operator"
/>
<Button
android:id="#+id/keyboard_multiplication"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
style="#style/Operator"
android:text="×"
/>
<Button
android:id="#+id/keyboard_minus"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
style="#style/Operator"
android:text="−"
/>
<Button
android:id="#+id/keyboard_plus"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
style="#style/Operator"
android:text="+"
/>
<Button
android:id="#+id/keyboard_equal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
style="#style/Equal"
android:text="="
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>


Well, to answer my own question "how to achieve the same result using ConstraintLayout"
I've made it flat using ConstraintLayout, but still don't know whether it was worth it, and how to decide which layout to use when you can use any.
And is using guidelines with app:layout_constraintGuide_percent and/or chainStyle="spread_inside" with 0 size is somehow better than "nested weights" from performance point of view.
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineH"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.33"
android:orientation="horizontal"
/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.75"
android:orientation="vertical"
/>
<TextView
android:id="#+id/formula"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/result"
app:layout_constraintVertical_chainStyle="packed"
tools:text="2+2"
android:textSize="36sp"
android:gravity="right"
android:layout_marginRight="10dp"
/>
<TextView
android:id="#+id/result"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/formula"
app:layout_constraintBottom_toTopOf="#id/guidelineH"
app:layout_constraintVertical_chainStyle="packed"
tools:text="4"
android:textSize="30sp"
android:textColor="#000"
android:gravity="right"
android:layout_marginRight="10dp"
/>
<Button
android:id="#+id/keyboard_num7"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/keyboard_num8"
app:layout_constraintTop_toBottomOf="#id/guidelineH"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="7"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num8"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num5"
app:layout_constraintLeft_toRightOf="#id/keyboard_num7"
app:layout_constraintRight_toLeftOf="#id/keyboard_num9"
app:layout_constraintTop_toBottomOf="#id/guidelineH"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="8"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num9"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num6"
app:layout_constraintLeft_toRightOf="#id/keyboard_num8"
app:layout_constraintRight_toLeftOf="#id/guidelineV"
app:layout_constraintTop_toBottomOf="#id/guidelineH"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="9"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num4"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/keyboard_num5"
app:layout_constraintTop_toBottomOf="#id/keyboard_num7"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="4"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num5"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num2"
app:layout_constraintLeft_toRightOf="#id/keyboard_num4"
app:layout_constraintRight_toLeftOf="#id/keyboard_num6"
app:layout_constraintTop_toBottomOf="#id/keyboard_num8"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="5"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num6"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num3"
app:layout_constraintLeft_toRightOf="#id/keyboard_num5"
app:layout_constraintRight_toLeftOf="#id/guidelineV"
app:layout_constraintTop_toBottomOf="#id/keyboard_num9"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="6"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num_dot"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/keyboard_num2"
app:layout_constraintTop_toBottomOf="#id/keyboard_num4"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="1"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num0"
app:layout_constraintLeft_toRightOf="#id/keyboard_num1"
app:layout_constraintRight_toLeftOf="#id/keyboard_num3"
app:layout_constraintTop_toBottomOf="#id/keyboard_num5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="2"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num_del"
app:layout_constraintLeft_toRightOf="#id/keyboard_num2"
app:layout_constraintRight_toLeftOf="#id/guidelineV"
app:layout_constraintTop_toBottomOf="#id/keyboard_num6"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="3"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num_dot"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/keyboard_num0"
app:layout_constraintTop_toBottomOf="#id/keyboard_num1"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="."
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num0"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/keyboard_num_dot"
app:layout_constraintRight_toLeftOf="#id/keyboard_num_del"
app:layout_constraintTop_toBottomOf="#id/keyboard_num2"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="0"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num_del"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/keyboard_num0"
app:layout_constraintRight_toLeftOf="#id/guidelineV"
app:layout_constraintTop_toBottomOf="#id/keyboard_num3"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="del"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_division"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_multiplication"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/guidelineH"
app:layout_constraintLeft_toRightOf="#id/guidelineV"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="÷"
style="#style/Operator"
/>
<Button
android:id="#+id/keyboard_multiplication"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_minus"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/keyboard_division"
app:layout_constraintLeft_toRightOf="#id/guidelineV"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
style="#style/Operator"
android:text="×"
/>
<Button
android:id="#+id/keyboard_minus"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_plus"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/keyboard_multiplication"
app:layout_constraintLeft_toRightOf="#id/guidelineV"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
style="#style/Operator"
android:text="−"
/>
<Button
android:id="#+id/keyboard_plus"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_equal"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/keyboard_minus"
app:layout_constraintLeft_toRightOf="#id/guidelineV"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
style="#style/Operator"
android:text="+"
/>
<Button
android:id="#+id/keyboard_equal"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/keyboard_plus"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#id/guidelineV"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
style="#style/Equal"
android:text="="
/>
</androidx.constraintlayout.widget.ConstraintLayout>

Related

Android Scrollview inside constraint layout is not working. How do i fix this?

Adding a scroll view inside a constraint layout is not working. Can anyone please help me to solve this issue? Here is the layout for your reference. Even after having one child linear layout inside a Scroll view is also not working. It overlaps out of the toolbar. They've also used constraint layout guidelines and it's a bit confusing. Kindly help me out.
<?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=".ui.home.HomeFragment">
<include
android:id="#+id/toolbar_home"
layout="#layout/toolbar" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineleft"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.05" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineright"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.95" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.13" />
<ScrollView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:fillViewport="true"
app:layout_constraintEnd_toStartOf="#+id/guidelineright"
app:layout_constraintStart_toStartOf="#+id/guidelineleft"
app:layout_constraintTop_toBottomOf="#+id/guidelineTop">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="#+id/guidelineleft"
app:layout_constraintTop_toBottomOf="#+id/guidelineTop">
<com.google.android.material.textview.MaterialTextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins_medium"
android:text="Hello, Anderson!"
android:textColor="#color/side_menu_text_color"
android:textSize="30sp"
app:layout_constraintStart_toStartOf="#+id/guidelineleft"
app:layout_constraintTop_toBottomOf="#+id/guidelineTop" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/subTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins_medium"
android:text="Have a nice day!"
android:textColor="#color/side_menu_text_color_gray"
android:textSize="22sp"
app:layout_constraintStart_toStartOf="#+id/guidelineleft"
app:layout_constraintTop_toBottomOf="#+id/title" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_marginTop="40dp"
android:id="#+id/constranTopContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#+id/guidelineright"
app:layout_constraintStart_toStartOf="#+id/guidelineleft"
app:layout_constraintTop_toBottomOf="#+id/subTitle">
<LinearLayout
android:id="#+id/row1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:weightSum="2">
<LinearLayout
android:id="#+id/lnrAssignedItem"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#+id/lnrCompletedItem"
android:layout_width="0dp"
android:layout_weight="1"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:layout_marginEnd="15dp"
android:layout_height="wrap_content"
android:background="#drawable/ic_bg_purblue"
android:gravity="center"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_margin="10dp"
android:src="#drawable/ic_gradiant_purblue" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="10dp"
android:layout_gravity="center"
android:src="#drawable/ic_assigned_icon" />
</FrameLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins_medium"
android:text="Assigned Items"
android:textColor="#color/side_menu_text_color"
android:textSize="15sp"
/>
<com.google.android.material.textview.MaterialTextView
android:id="#+id/assignedItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins_medium"
android:gravity="center"
android:text="124"
android:textColor="#color/side_menu_text_color"
android:textSize="25sp"
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/lnrCompletedItem"
app:layout_constraintStart_toEndOf="#+id/lnrAssignedItem"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="0dp"
android:layout_weight="1"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:layout_marginStart="15dp"
android:layout_height="wrap_content"
android:background="#drawable/ic_bg_green"
android:gravity="center"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_margin="10dp"
android:src="#drawable/ic_gradiant_green" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="10dp"
android:layout_gravity="center"
android:src="#drawable/ic_completed_item_icon" />
</FrameLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins_medium"
android:text="Completed Items"
android:textColor="#color/side_menu_text_color"
android:textSize="15sp" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/completedItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins_medium"
android:gravity="center"
android:text="54"
android:textColor="#color/side_menu_text_color"
android:textSize="25sp"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/row2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/row1"
android:orientation="horizontal"
android:weightSum="2">
<LinearLayout
android:layout_marginTop="20dp"
android:id="#+id/lnrPendingItem"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/lnrNewlyClosedItem"
app:layout_constraintTop_toBottomOf="#+id/row1"
android:layout_width="0dp"
android:layout_weight="1"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:layout_marginEnd="15dp"
android:layout_height="wrap_content"
android:background="#drawable/ic_bg_orange"
android:gravity="center"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_margin="10dp"
android:src="#drawable/ic_gradiant_orange" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="10dp"
android:layout_gravity="center"
android:src="#drawable/ic_pending_icon" />
</FrameLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins_medium"
android:text="Pending Items"
android:textColor="#color/side_menu_text_color"
android:textSize="15sp"
/>
<com.google.android.material.textview.MaterialTextView
android:id="#+id/pendingItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins_medium"
android:gravity="center"
android:text="24"
android:textColor="#color/side_menu_text_color"
android:textSize="25sp"
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/lnrNewlyClosedItem"
app:layout_constraintStart_toEndOf="#+id/lnrPendingItem"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="20dp"
app:layout_constraintTop_toBottomOf="#+id/row1"
android:layout_width="0dp"
android:layout_weight="1"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:layout_marginStart="15dp"
android:layout_height="wrap_content"
android:background="#drawable/ic_bg_blue"
android:gravity="center"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_margin="10dp"
android:src="#drawable/ic_gradiant_blue" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="10dp"
android:layout_gravity="center"
android:src="#drawable/ic_newly_created_icon" />
</FrameLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins_medium"
android:text="Newly Created"
android:textColor="#color/side_menu_text_color"
android:textSize="15sp"
/>
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:id="#+id/newItem"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins_medium"
android:gravity="center"
android:text="14"
android:textColor="#color/side_menu_text_color"
android:textSize="25sp"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:id="#+id/container2"
android:layout_marginTop="40dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toStartOf="#+id/guidelineright"
app:layout_constraintStart_toStartOf="#+id/guidelineleft"
app:layout_constraintTop_toBottomOf="#+id/constranTopContainer">
<LinearLayout
android:id="#+id/physicalverification"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/vector"
android:gravity="center"
android:minHeight="230dp"
android:orientation="vertical">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_margin="10dp"
android:src="#drawable/home_verifcation_icon" />
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:fontFamily="#font/poppins_medium"
android:gravity="center"
android:text="Physical Verification"
android:textColor="#color/side_menu_text_color"
android:textSize="25sp"
app:layout_constraintStart_toStartOf="#+id/guidelineleft"
app:layout_constraintTop_toBottomOf="#+id/guidelineTop" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:minHeight="230dp"
android:layout_height="wrap_content"
android:background="#drawable/vector"
android:gravity="center"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:orientation="vertical">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_margin="10dp"
android:src="#drawable/home_verifcation_icon" />
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:fontFamily="#font/poppins_medium"
android:gravity="center"
android:text="Sync Up"
android:textColor="#color/side_menu_text_color"
android:textSize="25sp"
app:layout_constraintStart_toStartOf="#+id/guidelineleft"
app:layout_constraintTop_toBottomOf="#+id/guidelineTop" />
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:id="#+id/home_report"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/vector"
android:gravity="center"
android:minHeight="230dp"
android:orientation="vertical">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_margin="10dp"
android:src="#drawable/home_report_icon" />
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:fontFamily="#font/poppins_medium"
android:text="Report"
android:textColor="#color/side_menu_text_color"
android:textSize="25sp"
app:layout_constraintStart_toStartOf="#+id/guidelineleft"
app:layout_constraintTop_toBottomOf="#+id/guidelineTop" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_marginTop="40dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toStartOf="#+id/guidelineright"
app:layout_constraintStart_toStartOf="#+id/guidelineleft"
app:layout_constraintTop_toBottomOf="#+id/container2">
<LinearLayout
android:layout_weight="1"
android:id="#+id/home_help"
android:layout_width="0dp"
android:minHeight="230dp"
android:layout_height="wrap_content"
android:background="#drawable/vector"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_margin="10dp"
android:src="#drawable/home_help_icon" />
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:fontFamily="#font/poppins_medium"
android:text="Help"
android:textColor="#color/side_menu_text_color"
android:textSize="25sp"
app:layout_constraintStart_toStartOf="#+id/guidelineleft"
app:layout_constraintTop_toBottomOf="#+id/guidelineTop" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/vector"
android:gravity="center"
android:minHeight="230dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:orientation="vertical">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_margin="10dp"
android:src="#drawable/round_primary" />
<ImageView
android:layout_gravity="center"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_download_icon" />
</FrameLayout>
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:fontFamily="#font/poppins_medium"
android:gravity="center"
android:text="Downloads"
android:textColor="#color/side_menu_text_color"
android:textSize="25sp"
app:layout_constraintStart_toStartOf="#+id/guidelineleft"
app:layout_constraintTop_toBottomOf="#+id/guidelineTop" />
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:id="#+id/home_Profile"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/vector"
android:gravity="center"
android:minHeight="230dp"
android:orientation="vertical">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_margin="10dp"
android:src="#drawable/home_profile_icon" />
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:fontFamily="#font/poppins_medium"
android:text="My Account"
android:textColor="#color/side_menu_text_color"
android:textSize="25sp"
app:layout_constraintStart_toStartOf="#+id/guidelineleft"
app:layout_constraintTop_toBottomOf="#+id/guidelineTop" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

Make your scroll view fill height and align bottom to parent bottom hopefully it will work.
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guidelineright"
app:layout_constraintStart_toStartOf="#+id/guidelineleft"
app:layout_constraintTop_toBottomOf="#+id/guidelineTop">

Android Studio - I cannot see elements I made inside ScrollView, why?

Well, I made ScrollView and inside it, I put one LinearLayout. Inside that LinearLayout, I put multiple LinearLayouts and it does not show any error. Also, as you can see image, you can see their shape and that they are constrained. But I cannot see source/background of the ImageViews and TextViews neither within Android Studio nor when I buil app, why?
img1
Here is my xml code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background1_1"
tools:context=".MainActivity">
<ImageView
android:id="#+id/stol"
android:layout_width="0dp"
android:layout_height="210dp"
android:layout_marginTop="8dp"
android:background="#drawable/stol"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/naslov" />
<TextView
android:id="#+id/naslov"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:fontFamily="#font/bangers"
android:text="POKER CHANCE CALCULATOR"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="36sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/table_cards"
android:layout_width="0dp"
android:layout_height="58dp"
android:layout_marginStart="50dp"
android:layout_marginTop="50dp"
android:layout_marginEnd="50dp"
android:layout_marginBottom="50dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#+id/stol"
app:layout_constraintEnd_toEndOf="#+id/stol"
app:layout_constraintStart_toStartOf="#+id/stol"
app:layout_constraintTop_toTopOf="#+id/stol">
<ImageView
android:id="#+id/table_card1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_weight="1"
android:background="#drawable/backside" />
<ImageView
android:id="#+id/table_card2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_weight="1"
android:background="#drawable/backside" />
<ImageView
android:id="#+id/table_card3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_weight="1"
android:background="#drawable/backside" />
<ImageView
android:id="#+id/table_card4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_weight="1"
android:background="#drawable/backside" />
<ImageView
android:id="#+id/table_card5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_weight="1"
android:background="#drawable/backside" />
</LinearLayout>
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/stol">
<!--
Početak vanjskog sloja!
-->
<LinearLayout
android:id="#+id/linear_vanjski_sloj"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
android:weightSum="1"
app:layout_constraintBottom_toBottomOf="#+id/scroll_view"
app:layout_constraintEnd_toEndOf="#+id/scroll_view"
app:layout_constraintStart_toStartOf="#+id/scroll_view"
app:layout_constraintTop_toTopOf="#+id/scroll_view">
<LinearLayout
android:id="#+id/linear_first_row"
android:layout_width="410dp"
android:layout_height="194dp"
android:layout_marginTop="32dp"
android:gravity="center_horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/stol">
<LinearLayout
android:id="#+id/linear_player1"
android:layout_width="159dp"
android:layout_height="180dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:background="#drawable/okvir"
android:orientation="vertical"
android:weightSum="1"
tools:layout_editor_absoluteX="50dp"
tools:layout_editor_absoluteY="338dp">
<TextView
android:id="#+id/player1_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elegantTextHeight="true"
android:fontFamily="#font/bangers"
android:gravity="center"
android:text="PLAYER 1"
android:textAlignment="center"
android:textColor="#ffffff"
android:textSize="24sp" />
<LinearLayout
android:id="#+id/linear_player1_2"
android:layout_width="144dp"
android:layout_height="103dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/player2_card1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginEnd="7dp"
android:layout_weight="1"
android:src="#drawable/backside" />
<ImageView
android:id="#+id/player2_card2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginEnd="7dp"
android:layout_weight="1"
android:src="#drawable/backside" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear2_stats"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="5dp"
android:orientation="horizontal">
<TextView
android:id="#+id/win_stats2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="WIN\n00,00%"
android:textColor="#FFFFFF"
android:textSize="10sp" />
<TextView
android:id="#+id/draw_stats2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="TIE\n00,00%"
android:textColor="#FFFFFF"
android:textSize="10sp" />
<TextView
android:id="#+id/lose_stats2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="LOSE\n00,00%"
android:textColor="#FFFFFF"
android:textSize="10sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linear_player2"
android:layout_width="159dp"
android:layout_height="180dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:background="#drawable/okvir"
android:orientation="vertical"
android:weightSum="1"
tools:layout_editor_absoluteX="240dp"
tools:layout_editor_absoluteY="305dp">
<TextView
android:id="#+id/player2_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elegantTextHeight="true"
android:fontFamily="#font/bangers"
android:gravity="center"
android:text="PLAYER 2"
android:textAlignment="center"
android:textColor="#ffffff"
android:textSize="24sp" />
<LinearLayout
android:id="#+id/player2_2"
android:layout_width="144dp"
android:layout_height="103dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/player1_card1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginEnd="7dp"
android:layout_weight="1"
android:src="#drawable/backside" />
<ImageView
android:id="#+id/player1_card2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginEnd="7dp"
android:layout_weight="1"
android:src="#drawable/backside" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear1_stats"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="5dp"
android:orientation="horizontal">
<TextView
android:id="#+id/win_stats1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="WIN\n00,00%"
android:textColor="#FFFFFF"
android:textSize="10sp" />
<TextView
android:id="#+id/draw_stats1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="TIE\n00,00%"
android:textColor="#FFFFFF"
android:textSize="10sp" />
<TextView
android:id="#+id/lose_stats1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="LOSE\n00,00%"
android:textColor="#FFFFFF"
android:textSize="10sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linear_second_row"
android:layout_width="410dp"
android:layout_height="194dp"
android:layout_marginTop="32dp"
android:gravity="center_horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/stol">
<LinearLayout
android:id="#+id/linear_player3"
android:layout_width="159dp"
android:layout_height="180dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:background="#drawable/okvir"
android:orientation="vertical"
android:weightSum="1"
tools:layout_editor_absoluteX="50dp"
tools:layout_editor_absoluteY="338dp">
<TextView
android:id="#+id/player3_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elegantTextHeight="true"
android:fontFamily="#font/bangers"
android:gravity="center"
android:text="PLAYER 3"
android:textAlignment="center"
android:textColor="#ffffff"
android:textSize="24sp" />
<LinearLayout
android:id="#+id/linear_player2_1"
android:layout_width="144dp"
android:layout_height="103dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/player3_card1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginEnd="7dp"
android:layout_weight="1"
android:src="#drawable/backside" />
<ImageView
android:id="#+id/player3_card2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginEnd="7dp"
android:layout_weight="1"
android:src="#drawable/backside" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear3_stats"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="5dp"
android:orientation="horizontal">
<TextView
android:id="#+id/win_stats3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="WIN\n00,00%"
android:textColor="#FFFFFF"
android:textSize="10sp" />
<TextView
android:id="#+id/draw_stats3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="TIE\n00,00%"
android:textColor="#FFFFFF"
android:textSize="10sp" />
<TextView
android:id="#+id/lose_stats3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="LOSE\n00,00%"
android:textColor="#FFFFFF"
android:textSize="10sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linear_player4"
android:layout_width="159dp"
android:layout_height="180dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:background="#drawable/okvir"
android:orientation="vertical"
android:weightSum="1"
tools:layout_editor_absoluteX="240dp"
tools:layout_editor_absoluteY="305dp">
<TextView
android:id="#+id/player4_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elegantTextHeight="true"
android:fontFamily="#font/bangers"
android:gravity="center"
android:text="PLAYER 4"
android:textAlignment="center"
android:textColor="#ffffff"
android:textSize="24sp" />
<LinearLayout
android:id="#+id/player4_2"
android:layout_width="144dp"
android:layout_height="103dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/player4_card1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginEnd="7dp"
android:layout_weight="1"
android:src="#drawable/backside" />
<ImageView
android:id="#+id/player4_card2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginEnd="7dp"
android:layout_weight="1"
android:src="#drawable/backside" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear4_stats"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="5dp"
android:orientation="horizontal">
<TextView
android:id="#+id/win_stats4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="WIN\n00,00%"
android:textColor="#FFFFFF"
android:textSize="10sp" />
<TextView
android:id="#+id/draw_stats4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="TIE\n00,00%"
android:textColor="#FFFFFF"
android:textSize="10sp" />
<TextView
android:id="#+id/lose_stats4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="LOSE\n00,00%"
android:textColor="#FFFFFF"
android:textSize="10sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<!--
Kraj vanjskog sloja!
-->
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

Try to use a NestedScrollView instead of the ScrollView ...that usually this is only required for CoordinatorLayout, but it eventually may also be the case within a ConstraintLayout.

How to make buttons responsive in ConstraintLayout?

I am a beginner in Android and want to build 4 buttons on the bottom like in the picture. One button in the middle is not possible because I tried to set it responsive and it disappeared. Can you explain to me how I set those buttons next to each other with the same distance and make it responsive the right way?
Here is my 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"
android:background="#f4f4f4"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:gravity="center_horizontal"
android:shadowColor="#000000"
android:text="This app has 50000 downloads!"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.70"
app:layout_constraintHorizontal_bias="0.50"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent="0.9" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.86" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.77" />
<Button
android:id="#+id/button12"
app:layout_constraintWidth_percent="0.2"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button13"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button13" />
<Button
android:id="#+id/button13"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="#+id/button14"
app:layout_constraintTop_toTopOf="#+id/guideline2"
app:layout_constraintHeigth_percent="0.1"
app:layout_constraintWidth_percent="0.2" />
<Button
android:id="#+id/button14"
app:layout_constraintWidth_percent="0.2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button15"
app:layout_constraintTop_toTopOf="#+id/button13" />
<Button
android:id="#+id/button15"
app:layout_constraintWidth_percent="0.2"
android:layout_height="wrap_content"
android:text="Button"
android:layout_width="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/button13" />
</androidx.constraintlayout.widget.ConstraintLayout>

Try this
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f4f4f4"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:gravity="center_horizontal"
android:shadowColor="#000000"
android:text="This app has 50000 downloads!"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.70"
app:layout_constraintHorizontal_bias="0.50"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent="0.9" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.86" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.77" />
<Button
android:id="#+id/btnOne"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="One"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/btnTwo"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btnTwo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Two"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/btnThree"
app:layout_constraintStart_toEndOf="#id/btnOne" />
<Button
android:id="#+id/btnThree"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Three"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/btnFour"
app:layout_constraintStart_toEndOf="#id/btnTwo" />
<Button
android:id="#+id/btnFour"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Four"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/btnThree" />
</androidx.constraintlayout.widget.ConstraintLayout>
OUTPUT
.

Adding to Nilesh Rathod answer you can do something like this if you want to control the button height your :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f4f4f4"
tools:context="MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:gravity="center_horizontal"
android:shadowColor="#000000"
android:text="This app has 50000 downloads!"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.70"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent="0.9" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.77" />
<Button
android:id="#+id/btnOne"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="One"
android:layout_marginBottom="10dp"
android:layout_margin="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnTwo"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btnTwo"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Two"
app:layout_constraintBottom_toBottomOf="#+id/btnOne"
app:layout_constraintEnd_toStartOf="#+id/btnThree"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btnOne"
app:layout_constraintTop_toTopOf="#+id/btnOne" />
<Button
android:id="#+id/btnThree"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Three"
android:layout_margin="10dp"
app:layout_constraintBottom_toBottomOf="#+id/btnOne"
app:layout_constraintEnd_toStartOf="#+id/btnFour"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btnTwo"
app:layout_constraintTop_toTopOf="#+id/btnOne" />
<Button
android:id="#+id/btnFour"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Four"
android:layout_margin="10dp"
app:layout_constraintBottom_toBottomOf="#+id/btnOne"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/btnThree"
app:layout_constraintTop_toTopOf="#+id/btnOne" />
</androidx.constraintlayout.widget.ConstraintLayout>
now btnOne got the height of 10% of the screen height, all other buttons are constrained to top of btnOne and have the android:layout_height="0dp" attribute, making them all the same size.
And if you want to change your button size just change the value of app:layout_constraintHeight_percent="0.1" on btnOne
Here is how it will look like

Try adding all the buttons inside a linear layout with it's orientation set to horizontal and the buttons will take i
Equal distance. To make buttons responsive use the onclicklistener(); to get the response

Displaced elements with LinearLayout

I am making a simple calculator using LinearLayout.
The problem is that it looks like this :
Instead of like this:
I simply want it to look like in the second image. I don't get why it doesn't.
Please, can someone help me with this?
Here's the pastie with the xml.

It's the android:baselineAligned="false" that you have to apply to all of your nested LinearLayouts.
See enhanced layout here.

use this layout:
use layout weightSum and layout_weight properly in your child buttons to align them with required space:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:orientation="vertical"
tools:context="com.example.tsvetan.exercise_4_calculator.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/clear"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="50dp"
android:layout_height="48dp"
android:layout_marginEnd="11dp"
android:layout_marginRight="11dp"
android:onClick="clear"
android:text="C"
android:textAlignment="center"
android:textSize="24sp"
android:textStyle="bold" />
<EditText
android:id="#+id/number"
android:layout_width="306dp"
android:layout_height="56dp"
android:layout_gravity="end"
android:ems="10"
android:inputType="numberSigned|numberDecimal"
android:text="0"
android:textAlignment="viewEnd"
android:textSize="30sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:weightSum="5">
<Button
android:id="#+id/but7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="seven"
android:text="7" />
<Button
android:id="#+id/but8"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="eight"
android:text="8" />
<Button
android:id="#+id/but9"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="nine"
android:text="9" />
<Button
android:id="#+id/plus"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:elevation="0dp"
android:onClick="onOperatorClick"
android:padding="0px"
android:text="+"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold" />
<Button
android:id="#+id/multiply"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:onClick="onOperatorClick"
android:text="*"
android:textAlignment="center"
android:textSize="36sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:weightSum="5">
<Button
android:id="#+id/but4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="four"
android:text="4" />
<Button
android:id="#+id/but5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="five"
android:text="5" />
<Button
android:id="#+id/but6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="six"
android:text="6" />
<Button
android:id="#+id/minus"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:onClick="onOperatorClick"
android:padding="0px"
android:text="-"
android:textAlignment="center"
android:textSize="36sp"
android:textStyle="bold" />
<Button
android:id="#+id/division"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:onClick="onOperatorClick"
android:text="/"
android:textAlignment="center"
android:textSize="36sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:weightSum="5">
<Button
android:id="#+id/but1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="one"
android:text="1" />
<Button
android:id="#+id/but2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="two"
android:text="2" />
<Button
android:id="#+id/but3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="three"
android:text="3" />
<Button
android:id="#+id/equals"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2.4"
android:onClick="onOperatorClick"
android:padding="0px"
android:text="="
android:textAlignment="center"
android:textColorLink="#android:color/holo_orange_dark"
android:textSize="36sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:weightSum="5">
<Button
android:id="#+id/but0"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.6"
android:onClick="zero"
android:text="0" />
<Button
android:id="#+id/butMult"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="point"
android:text="."
android:textAlignment="center"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
output:

You don't need to put height to all of your buttons. Just put the height of linear layout and the rest will be match_parent. You will get what you want:

How to build layout as shown in image

i am using linear layout with weight but it is not looking consistent on different screen sizes(only handsets). i need the text should be exactly below the image icon. so is there any way to create this layout in android
here is my xml code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/progress_count_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="23.5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.5"/>
<ImageView
android:id="#+id/one_ic_iv"
android:layout_width="48dp"
android:layout_height="48dp"
android:scaleType="fitCenter"
android:gravity="center_vertical"
android:src="#drawable/ic_wizard_5step_step01c_active_incomplete"/>
<View
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_weight="9.5"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"/>
<ImageView
android:id="#+id/two_ic_iv"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_wizard_5step_step02a_inactive_incomplete"/>
<View
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_weight="12"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"/>
<ImageView
android:id="#+id/three_ic_iv"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_wizard_5step_step03a_inactive_incomplete"/>
<View
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_weight="12"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"/>
<ImageView
android:id="#+id/four_ic_iv"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_wizard_5step_step04a_inactive_incomplete"/>
<View
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_weight="12"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"/>
<ImageView
android:id="#+id/five_ic_iv"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_wizard_5step_step05a_inactive_incomplete"/>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"/>
</LinearLayout>
<LinearLayout
android:id="#+id/progress_text_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:weightSum="10"
android:orientation="horizontal">
<TextView
android:id="#+id/create_acc_progress_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:text="Create\nAccount"
android:textSize="14sp"
android:textColor="#color/CelestialBlue"
android:gravity="center"
fontPath="HVD Fonts - BrandonText-Light.otf"/>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<TextView
android:id="#+id/accept_terms_progress_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:text="Verify\nPhone"
android:textSize="14sp"
android:textColor="#color/CelestialBlue"
android:gravity="center"
fontPath="HVD Fonts - BrandonText-Light.otf"/>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<TextView
android:id="#+id/verify_phone_progress_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:text="Accept\nTerms"
android:textSize="14sp"
android:textColor="#color/CelestialBlue"
android:gravity="center"
fontPath="HVD Fonts - BrandonText-Light.otf"/>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<TextView
android:id="#+id/link_bank_progress_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:text="Link\nBank"
android:textSize="14sp"
android:textColor="#color/CelestialBlue"
android:gravity="center"
fontPath="HVD Fonts - BrandonText-Light.otf"/>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<TextView
android:id="#+id/get_approved_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:text="Get\nApproved"
android:textSize="14sp"
android:textColor="#color/CelestialBlue"
android:gravity="center"
fontPath="HVD Fonts - BrandonText-Light.otf"/>
</LinearLayout>
</LinearLayout>

If your text is coming up out of sync with the images, you might try to include a vertical LinearLayout for each component (image and text).
So use one big horizontal LinearLayout with 5 vertical LinearLayouts inside it. Rather than two horizontal LinearLayouts like you have now.
As another option, you could try to build this with ConstraintLayout. It will allow you to align things such that they don't get out of sync.
https://developer.android.com/training/constraint-layout/index.html

try to do like this :
<?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">
enter code here
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_margin="10dp"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_gravity="center"
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Create Account"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_margin="10dp"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_gravity="center"
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Create Account"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_margin="10dp"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_gravity="center"
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Create Account"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>[layout should look like this ][1]
[1]: https://i.stack.imgur.com/lim80.png

Try this library it will give you result
https://github.com/baoyachi/StepView
https://github.com/anton46/Android-StepsView
https://github.com/oli107/material-range-bar
Java Code
HorizontalStepView setpview5 = (HorizontalStepView) mView.findViewById(R.id.step_view5);
List<StepBean> stepsBeanList = new ArrayList<>();
StepBean stepBean0 = new StepBean("接单",1);
StepBean stepBean1 = new StepBean("打包",1);
StepBean stepBean2 = new StepBean("出发",1);
StepBean stepBean3 = new StepBean("送单",0);
StepBean stepBean4 = new StepBean("完成",-1);
stepsBeanList.add(stepBean0);
stepsBeanList.add(stepBean1);
stepsBeanList.add(stepBean2);
stepsBeanList.add(stepBean3);
stepsBeanList.add(stepBean4);
setpview5
.setStepViewTexts(stepsBeanList)//总步骤
.setTextSize(12)//set textSize
.setStepsViewIndicatorCompletedLineColor(ContextCompat.getColor(getActivity(), android.R.color.white))//设置StepsViewIndicator完成线的颜色
.setStepsViewIndicatorUnCompletedLineColor(ContextCompat.getColor(getActivity(), R.color.uncompleted_text_color))//设置StepsViewIndicator未完成线的颜色
.setStepViewComplectedTextColor(ContextCompat.getColor(getActivity(), android.R.color.white))//设置StepsView text完成线的颜色
.setStepViewUnComplectedTextColor(ContextCompat.getColor(getActivity(), R.color.uncompleted_text_color))//设置StepsView text未完成线的颜色
.setStepsViewIndicatorCompleteIcon(ContextCompat.getDrawable(getActivity(), R.drawable.complted))//设置StepsViewIndicator CompleteIcon
.setStepsViewIndicatorDefaultIcon(ContextCompat.getDrawable(getActivity(), R.drawable.default_icon))//设置StepsViewIndicator DefaultIcon
.setStepsViewIndicatorAttentionIcon(ContextCompat.getDrawable(getActivity(), R.drawable.attention));//设置StepsViewIndicator AttentionIcon
OUTPUT

you can use like this as per your requirement.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Space
android:layout_width="10dp"
android:layout_height="wrap_content"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/one_ic_iv"
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center_vertical"
android:scaleType="fitCenter"
android:src="#drawable/circle_crop" />
<TextView
android:id="#+id/create_acc_progress_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/one_ic_iv"
android:gravity="center"
android:text="Create\nAccount"
android:textColor="#color/colorPrimary"
android:textSize="14sp" />
</RelativeLayout>
<View
android:layout_width="30dp"
android:layout_height="3dp"
android:layout_gravity="center"
android:background="#color/colorAccent"
android:gravity="center_horizontal" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/one_ic_iv1"
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center_vertical"
android:scaleType="fitCenter"
android:src="#drawable/circle_crop" />
<TextView
android:id="#+id/create_acc_progress_tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/one_ic_iv1"
android:gravity="center"
android:text="Create\nAccount"
android:textColor="#color/colorPrimary"
android:textSize="14sp" />
</RelativeLayout>

I would suggest you to use LinearLayout with orientation: horizontal and then put separate RelativeLayouts for each progresses. I am suggesting RelativeLayout because then you can use its positional tags like android:layout_toLeftOf to align your textvies or imageviews.

here is the solution of my question , i used constraint layout for this
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/top_margin_wizard_bar"
android:layout_marginBottom="#dimen/bottom_margin_wizard_bar">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline1"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.06" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintDimensionRatio="H, 1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/guideline1"
app:layout_constraintRight_toLeftOf="#+id/guideline2"
app:srcCompat="#drawable/ic_wizard_5step_step01c_active_incomplete"
app:layout_constraintTop_toTopOf="#+id/imageView2"
app:layout_constraintBottom_toBottomOf="#+id/imageView2" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:gravity="center_horizontal"
android:text="Create\nAccount"
android:textColor="#color/CelestialBlue"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="#+id/imageView"
app:layout_constraintRight_toRightOf="#+id/imageView"
android:textSize="#dimen/font_size_small_14sp"
app:layout_constraintBaseline_toBaselineOf="#+id/textView2" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline2"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1506666" />
<View
android:id="#+id/view_1"
android:layout_width="0dp"
android:layout_height="#dimen/height_wizard_line"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline2"
app:layout_constraintRight_toLeftOf="#+id/guideline3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/imageView"
app:layout_constraintVertical_bias="0.5" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline3"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2573333" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
app:layout_constraintDimensionRatio="H, 1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/guideline3"
app:layout_constraintRight_toLeftOf="#+id/guideline4"
app:srcCompat="#drawable/ic_wizard_5step_step02a_inactive_incomplete"
app:layout_constraintTop_toTopOf="#+id/imageView3"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:gravity="center_horizontal"
android:text="Verify\nMobile"
android:textColor="#color/CelestialBlue"
app:layout_constraintLeft_toLeftOf="#+id/imageView2"
app:layout_constraintRight_toLeftOf="#+id/guideline4"
android:textSize="#dimen/font_size_small_14sp"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintBaseline_toBaselineOf="#+id/textView3" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline4"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.348" />
<View
android:id="#+id/view_2"
android:layout_width="0dp"
android:layout_height="#dimen/height_wizard_line"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toLeftOf="#+id/guideline5"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2"
app:layout_constraintVertical_bias="0.5" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline5"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.4333333" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
app:layout_constraintDimensionRatio="H, 1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/guideline5"
app:layout_constraintRight_toLeftOf="#+id/guideline6"
app:srcCompat="#drawable/ic_wizard_5step_step03c_active_incomplete"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:gravity="center_horizontal"
android:text="Accept\nTerms"
android:textColor="#color/CelestialBlue"
app:layout_constraintLeft_toLeftOf="#+id/imageView3"
app:layout_constraintRight_toRightOf="#+id/imageView3"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:layout_constraintHorizontal_bias="0.5"
android:textSize="#dimen/font_size_small_14sp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline6"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5666666" />
<View
android:id="#+id/view_3"
android:layout_width="0dp"
android:layout_height="#dimen/height_wizard_line"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline6"
app:layout_constraintRight_toLeftOf="#+id/guideline7"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3"
app:layout_constraintVertical_bias="0.5" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline7"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.652" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
app:layout_constraintDimensionRatio="H, 1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/guideline7"
app:layout_constraintRight_toLeftOf="#+id/guideline8"
app:srcCompat="#drawable/ic_wizard_5step_step04a_inactive_incomplete"
app:layout_constraintTop_toTopOf="#+id/imageView3"
app:layout_constraintBottom_toBottomOf="#+id/imageView3" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:gravity="center_horizontal"
android:text="Link\nBank"
android:textColor="#color/CelestialBlue"
app:layout_constraintBaseline_toBaselineOf="#+id/textView3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="#+id/imageView4"
app:layout_constraintRight_toRightOf="#+id/imageView4"
android:textSize="#dimen/font_size_small_14sp"/>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline8"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.7426666" />
<View
android:id="#+id/view_4"
android:layout_width="0dp"
android:layout_height="#dimen/height_wizard_line"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline8"
app:layout_constraintRight_toLeftOf="#+id/guideline9"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintBottom_toBottomOf="#+id/imageView4"
app:layout_constraintTop_toTopOf="#+id/imageView4"
app:layout_constraintVertical_bias="0.5" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline9"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8493333" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
app:layout_constraintDimensionRatio="H, 1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/guideline9"
app:layout_constraintRight_toLeftOf="#+id/guideline10"
app:srcCompat="#drawable/ic_wizard_5step_step05a_inactive_incomplete"
app:layout_constraintTop_toTopOf="#+id/imageView4"
app:layout_constraintBottom_toBottomOf="#+id/imageView4" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:gravity="center_horizontal"
android:text="Get\nApproved"
android:textColor="#color/CelestialBlue"
app:layout_constraintBaseline_toBaselineOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="#+id/imageView5"
app:layout_constraintRight_toRightOf="#+id/imageView5"
android:textSize="#dimen/font_size_small_14sp"/>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline10"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.94" />
</android.support.constraint.ConstraintLayout>

Categories

Resources