Use Relative layout with Scrollable Constraint layout to achieve a freeze panes effect - android-layout

I am pretty new to Android Studio, so please forgive any thing which may have been obvious but I did not pick up.
I would like help in the below situation -
I have setup two layouts:
Relative Layout & a Constraint Layout (which is nested in ScrollView).
I wanted to keep some views to be visible all the time, so I put them in a Relative Layout. I put all other views in a constraint layout which is scrollable, since the number of elements do not fit in the screen.
I am trying to get the same effect which you get when you freeze the top row of an excel worksheet.
I tried to adjust the layout height property of the Constraint Layout but I can't seem to get it right. What I want is to anchor my Constraint Layout below the Relative Layout.
I have attached my code.
Thanks a lot in advance,
Regards,
Ravi.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="#+id/relative_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.android.raviagl.netlandingcostcalculate.MainActivity">
<TextView
android:id="#+id/sap"
android:layout_width="120dp"
android:layout_height="72dp"
android:layout_marginLeft="16dp"
android:layout_toRightOf="#id/nlc"
android:gravity="center_vertical"
android:text="SAP"
android:textColor="#color/colorPrimaryDark"
android:textSize="20sp" />
<Button
android:id="#+id/reset_all"
android:layout_width="120dp"
android:layout_height="72dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="13dp"
android:text="Reset" />
<TextView
android:id="#+id/nlc"
android:layout_width="120dp"
android:layout_height="72dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="8dp"
android:gravity="center_vertical"
android:text="NLC"
android:textColor="#color/colorPrimaryDark"
android:textSize="20sp" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraint_layout_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp">
<EditText
android:id="#+id/dp"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="88dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/allowance"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginRight="16dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dp" />
<EditText
android:id="#+id/gst"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/allowance" />
<EditText
android:id="#+id/slab"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/gst" />
<RadioGroup
android:id="#+id/slab_radio_group"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/slab">
<RadioButton
android:id="#+id/radio_slab_value"
android:layout_width="170dp"
android:layout_height="31dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:checked="true"
android:text="Use Fixed Amount"
android:textColor="#color/colorPrimaryDark"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="248dp" />
<RadioButton
android:id="#+id/radio_slab_percent"
android:layout_width="170dp"
android:layout_height="31dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:text="Use SAP Percent"
android:textColor="#color/colorPrimaryDark"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="248dp" />
</RadioGroup>
<EditText
android:id="#+id/sell_through"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="48dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/slab" />
<EditText
android:id="#+id/sell_out"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/sell_through" />
<EditText
android:id="#+id/display"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/sell_out" />
<RadioGroup
android:id="#+id/display_radio_group"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/display">
<RadioButton
android:id="#+id/radio_display_value"
android:layout_width="170dp"
android:layout_height="31dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:checked="true"
android:text="Use Fixed Amount"
android:textColor="#color/colorPrimaryDark"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="248dp" />
<RadioButton
android:id="#+id/radio_display_percent"
android:layout_width="170dp"
android:layout_height="31dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:text="Use SAP Percent"
android:textColor="#color/colorPrimaryDark"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="248dp" />
</RadioGroup>
<EditText
android:id="#+id/tie_up"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="48dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/display" />
<EditText
android:id="#+id/handling"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tie_up" />
<EditText
android:id="#+id/cash_discount"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/handling" />
<TextView
android:id="#+id/d_dp"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="8dp"
android:text="DP"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_allowance"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Allowance"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/allowance"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_gst"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="GST"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/gst"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_slab"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Slab"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/slab"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_sell_through"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Sell Through"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/sell_through"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_sell_out"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Sell Out"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/sell_out"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_display"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Display"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/display"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_tie_up"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Tie UP"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/tie_up"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_handling"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Handling"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/handling"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_cash_discount"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Cash Discount"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/cash_discount"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</RelativeLayout>

There are a few options to consider here but I think the one that requires the least amount of refactoring your layout is this:
Add android:layout_below attribute to your ScrollView and position it under one the views that are fixed. It doesn't matter which one as long as they are the same height:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/sap">
Decrease (or remove) the top margin from the EditText with the ID android:id="#+id/dp"to eliminate unnecessary space on the top.
All that being said since you are using fixed widths for all the views in your layout you might run into some problems with displaying it on different screen sizes. For example the three fixed views on the top might overlap each other if there is not enough horizontal space. This could possibly be resolved by using other layouts (such as ConstraintLayout or LinearLayout) as root and/or not using fixed widths. However, this would require much more refactoring that the solution above.

Related

How to center text under image

Right now I have 3 image buttons in constraint layout (not in tablelayout or gridlayout) and I want to have text under the image buttons that's centered with regards to the image buttons.
This is what I have right now:
I want to have my layout so that the Textview is centered rather than being right/left aligned with the image button.
Here's my code:
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topNavigationView"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/flFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topNavigationView"
app:layout_constraintVertical_bias="0.0">
<ImageButton
android:id="#+id/button"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
android:background="#xml/round_shape"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_launcher_foreground" />
<ImageButton
android:id="#+id/button2"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginStart="10dp"
android:layout_marginTop="16dp"
android:background="#xml/round_shape"
app:layout_constraintEnd_toStartOf="#+id/button13"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_launcher_foreground" />
<ImageButton
android:id="#+id/button13"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginStart="10dp"
android:layout_marginTop="16dp"
android:background="#xml/round_shape"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button2"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_launcher_foreground" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/button13" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Thanks so much.

Converting an old style tablelayout to a constraint layout

I'm trying to convert this layout made using table layout to a constraint layout.
The second column and the third column could be hidden.
The price should be aligned to right.
The header in the first column should aligned to the left.
It's an exercise to learn constraints better, but I'm failing
<?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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:shrinkColumns="*"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
android:divider="?android:attr/dividerHorizontal"
android:showDividers="middle">
<TableRow android:layout_marginBottom="2dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:gravity="start"
android:text="Price"
android:textColor="#android:color/black"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_marginStart="10dp"
android:gravity="end"
android:text="-"
android:textColor="#android:color/black"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_marginStart="10dp"
android:gravity="end"
android:text="-"
android:textColor="#android:color/black"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_marginStart="10dp"
android:gravity="end"
android:text="2000$"
android:textColor="#android:color/black"
android:textSize="12sp" />
</TableRow>
<TableRow
android:layout_marginTop="2dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:gravity="start"
android:text="Price2\n(test)"
android:textColor="#android:color/black"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_marginStart="10dp"
android:gravity="end"
android:text="8000$"
android:textColor="#android:color/black"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_marginStart="10dp"
android:gravity="end"
android:text="-5000$"
android:textColor="#android:color/black"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_marginStart="10dp"
android:gravity="end"
android:text="3000"
android:textColor="#android:color/black"
android:textSize="12sp" />
</TableRow>
</TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I have try different ways: barriers, flow, but I didn't get the goal.
I find it difficult to vertically align columns 2, 3 and 4 and at the same time align rows 1 and 2 horizontally
I think you are looking for Barriers to complete your exercise. You would set a barrier to the left of each column and constrain each column to the barrier to the right.
Here is an example of using ConstraintLayout in place of a TableLayout. It is complex enough that I think staying with TableLayout for its functionality is warranted. Here is the result followed by the code. The code has some comments that explain what is going on.
<!--
This LinearLayout is here just to provide a means to center the ConstraintLayout.
-->
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingTop="32dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!--
A barrier is set at the start of each column.
-->
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="r1c1,r2c1" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="r1c2,r2c2" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="r1c3,r2c3" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="r1c4,r2c4" />
<!--
Each cell is constrained horizontally to the barrier to the right and to its own barrier to
the left. app:layout_constraintWidth_min="wrap" is specified to stop the cells from collapsing.
This is a hack IMO but effective.
-->
<TextView
android:id="#+id/r1c1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="start"
android:text="Price"
android:textColor="#android:color/black"
android:textSize="12sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#id/barrier2"
app:layout_constraintStart_toStartOf="#id/barrier1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_min="wrap" />
<TextView
android:id="#+id/r2c1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="start"
android:text="Price2\n(test)"
android:textColor="#android:color/black"
android:textSize="12sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#id/barrier2"
app:layout_constraintStart_toStartOf="#id/barrier1"
app:layout_constraintTop_toBottomOf="#id/divider"
app:layout_constraintWidth_min="wrap" />
<TextView
android:id="#+id/r1c2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="end"
android:text="-"
android:textColor="#android:color/black"
android:textSize="12sp"
android:visibility="visible"
app:layout_constraintEnd_toStartOf="#id/barrier3"
app:layout_constraintStart_toStartOf="#id/barrier2"
app:layout_constraintTop_toTopOf="#id/r1c1"
app:layout_constraintWidth_min="wrap" />
<TextView
android:id="#+id/r2c2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="end"
android:text="8000$"
android:textColor="#android:color/black"
android:textSize="12sp"
android:visibility="visible"
app:layout_constraintEnd_toStartOf="#id/barrier3"
app:layout_constraintStart_toStartOf="#id/barrier2"
app:layout_constraintTop_toBottomOf="#id/divider"
app:layout_constraintWidth_min="wrap" />
<TextView
android:id="#+id/r1c3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="end"
android:text="-"
android:textColor="#android:color/black"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#id/barrier4"
app:layout_constraintStart_toStartOf="#id/barrier3"
app:layout_constraintTop_toTopOf="#id/r1c1"
app:layout_constraintWidth_min="wrap" />
<TextView
android:id="#+id/r2c3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="end"
android:text="-5000$"
android:textColor="#android:color/black"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#id/barrier4"
app:layout_constraintStart_toStartOf="#id/barrier3"
app:layout_constraintTop_toBottomOf="#id/divider"
app:layout_constraintWidth_min="wrap" />
<TextView
android:id="#+id/r1c4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="end"
android:text="2000$"
android:textColor="#android:color/black"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#id/r1c1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/barrier4"
app:layout_constraintWidth_min="wrap" />
<TextView
android:id="#+id/r2c4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="end"
android:text="3000"
android:textColor="#android:color/black"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/barrier4"
app:layout_constraintTop_toBottomOf="#id/divider"
app:layout_constraintWidth_min="wrap" />
<View
android:id="#+id/divider"
android:layout_width="0dp"
android:layout_height="1dp"
android:background="#android:color/black"
app:layout_constraintEnd_toEndOf="#id/r1c4"
app:layout_constraintStart_toStartOf="#id/r1c1"
app:layout_constraintTop_toBottomOf="#id/r1c1" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.LinearLayoutCompat>
TableLayout will make the width of each cell in a column the width of the widest cell content. This is tricky to do with ConstraintLayout and is accomplished by setting the width of each cell to 0dp and constraining the start and end to the barriers that bracket the column. See this Stack Overflow question for an explanation. I consider this a hack, but it works.
The other difference between this implementation and TableLayout is how the table behaves when a single cell is collapsed. TableLayout will shift the remaining cells over while this implementation will maintain the original columns. If all the cells in a column are collapsed (made gone) then this works the same as TableLayout.

App shows a different activity layout when launched for the first time

I'm sorry for the confusion for the title but this is what happens
This is what the app looks like and it works fine.
HOWEVER...
When the app is launched everytime it shows this.
For some weird reason the card view stretches. This only happens everytime you open the app. It goes back to normal when you tap on assessment then go back.
I don't know what to do because my xml codes is all working as intended on the first photo and I don't know what causes this problem.
CODE:
<TextView
android:id="#+id/title_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_margin="12dp"
android:text=" "
android:textColor="#fff"
android:fontFamily="#font/ness"
android:textSize="30sp"
android:textStyle="bold" />
<TextView
android:id="#+id/title_view2"
android:layout_width="294dp"
android:layout_height="58dp"
android:layout_below="#+id/title_view"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="65dp"
android:layout_marginTop="45dp"
android:layout_marginEnd="52dp"
android:layout_marginBottom="112dp"
android:fontFamily="#font/ness"
android:text="What do you want to do today?"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold" />
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/title_view"
android:layout_margin="100dp"
android:columnCount="2"
android:rowCount="3">
<androidx.cardview.widget.CardView
android:id="#+id/assess_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/asses" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Assessment"
android:textAlignment="center"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/profile_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/profile" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile"
android:textAlignment="center"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
Do you need grid layout in this ui? And your android:columnCount="2" and android:rowCount="3" it's can be reason. Maybe you should use constraintlayout.
UPDATED
Try code below, maybe it can solve your problem.
Also I have seen you used RelativeLayout, for now day it's deprecated and google recommend to use constraintlayout.
<?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">
<TextView
android:id="#+id/title_view2"
android:layout_width="294dp"
android:layout_height="58dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/ness"
android:text="What do you want to do today?"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="#+id/assess_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true"
app:layout_constraintEnd_toEndOf="#+id/title_view2"
app:layout_constraintStart_toStartOf="#+id/title_view2"
app:layout_constraintTop_toBottomOf="#+id/title_view2">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/asses" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Assessment"
android:textAlignment="center"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/profile_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_marginTop="8dp"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true"
app:layout_constraintEnd_toEndOf="#+id/assess_menu"
app:layout_constraintStart_toStartOf="#+id/assess_menu"
app:layout_constraintTop_toBottomOf="#+id/assess_menu">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/profile" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile"
android:textAlignment="center"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

Nested textview not visible on device, but visible in Design mode

The apps top component has 4 TableRows under a TableLayout and each has a nested TextView and a Switch.
Each of these is set to Visibility:visible
And they show as expected in the Design mode for all available resolutions say NexusS(4.0,480x800,hdpi)
but when started on my Marshmallow device of the same resolution and size, only the switches show up and in their correct positions, those 4 textviews dissappear..
(http://i.stack.imgur.com/xmPqk.png)
(http://i.stack.imgur.com/6UNBo.png)![on device]
Heres the relevant xml
<?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:id="#+id/MainPage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bb"
android:hapticFeedbackEnabled="false"
android:minHeight="320dp"
android:minWidth="240dp"
android:visibility="visible"
tools:context=".MainActivity">
<Button
android:id="#+id/play"
android:layout_width="120dp"
android:layout_height="34dp"
android:layout_marginBottom="188dp"
android:layout_marginEnd="205dp"
android:layout_marginStart="24dp"
android:background="#ad000000"
android:hapticFeedbackEnabled="false"
android:text="#string/playBtn"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textStyle="bold"
android:typeface="monospace"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.272"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/settings"
android:layout_width="120dp"
android:layout_height="38dp"
android:layout_marginTop="8dp"
android:background="#ad000000"
android:hapticFeedbackEnabled="false"
android:text="#string/setBtn"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textStyle="bold"
android:typeface="monospace"
android:visibility="visible"
app:layout_constraintStart_toStartOf="#+id/play"
app:layout_constraintTop_toBottomOf="#+id/play" />
<Button
android:id="#+id/quit"
android:layout_width="120dp"
android:layout_height="38dp"
android:layout_marginTop="8dp"
android:background="#ad000000"
android:hapticFeedbackEnabled="false"
android:text="#string/quitBtn"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textStyle="bold"
android:typeface="monospace"
android:visibility="visible"
app:layout_constraintStart_toStartOf="#+id/settings"
app:layout_constraintTop_toBottomOf="#+id/settings" />
<TextView
android:id="#+id/Title"
android:layout_width="wrap_content"
android:layout_height="178dp"
android:layout_marginBottom="20dp"
android:layout_marginTop="20dp"
android:fontFamily="#font/owaw"
android:textColor="#android:color/white"
android:textSize="120sp"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/play"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.418"
tools:text="#string/app_name" />
<TableLayout
android:id="#+id/OptionsLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:gravity="center_vertical|start"
android:orientation="vertical"
android:paddingEnd="0dp"
android:paddingStart="100dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Title"
app:layout_constraintVertical_bias="0.0">
<TableRow
android:id="#+id/Option1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="24dp"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/Option2"
app:layout_constraintEnd_toEndOf="#+id/Option2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/Option2"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
tools:text="#string/opt1" />
<Switch
android:id="#+id/tutorialSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:allowUndo="true"
android:alpha="0.8"
android:background="#android:color/black"
android:checked="true"
android:hapticFeedbackEnabled="false"
android:padding="0dp"
android:showText="false"
android:splitTrack="false"
android:switchMinWidth="20dp" />
</TableRow>
<TableRow
android:id="#+id/Option2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/Option3"
app:layout_constraintEnd_toEndOf="#+id/Option3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/Option3"
app:layout_constraintTop_toBottomOf="#+id/Option1">
<TextView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
tools:text="#string/opt2" />
<Switch
android:id="#+id/musicSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:layout_marginEnd="-70dp"
android:allowUndo="true"
android:alpha="0.8"
android:background="#android:color/black"
android:checked="true"
android:hapticFeedbackEnabled="false"
android:padding="0dp"
android:showText="false"
android:splitTrack="false"
android:switchMinWidth="20dp" />
</TableRow>
<TableRow
android:id="#+id/Option3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/Option4"
app:layout_constraintEnd_toEndOf="#+id/Option4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/Option4"
app:layout_constraintTop_toBottomOf="#+id/Option2">
<TextView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
tools:text="#string/opt3" />
<Switch
android:id="#+id/hapticSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:allowUndo="true"
android:alpha="0.8"
android:background="#android:color/black"
android:checked="false"
android:hapticFeedbackEnabled="false"
android:padding="0dp"
android:showText="false"
android:splitTrack="false"
android:switchMinWidth="20dp" />
</TableRow>
<TableRow
android:id="#+id/Option4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/Option5"
app:layout_constraintEnd_toEndOf="#+id/Option5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/Option5"
app:layout_constraintTop_toBottomOf="#+id/Option3">
<TextView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
tools:text="#string/opt4" />
<Switch
android:id="#+id/sfxSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:allowUndo="true"
android:alpha="0.8"
android:background="#android:color/black"
android:checked="true"
android:hapticFeedbackEnabled="true"
android:padding="0dp"
android:showText="false"
android:splitTrack="false"
android:switchMinWidth="20dp" />
</TableRow>
<TableRow
android:id="#+id/Option5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Option4">
<TextView
android:id="#+id/saveOption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="60dp"
android:layout_marginTop="20dp"
android:clickable="true"
android:focusable="true"
android:hapticFeedbackEnabled="false"
android:paddingBottom="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
tools:text="#string/opt5" />
</TableRow>
</TableLayout>
</android.support.constraint.ConstraintLayout>
UPDATE:
I added the font family property to each of those and now the text is visible on device but I dont understand how it matters, since there is already a default option there.

How to resize table of buttons to work fine with all phones

Hello i'am trying to make a Tictactoy game my problem is in the layout design how to make it when the screen grows bigger the table and buttons inside become grow bigger and When the screen is smaller, the table and buttons inside become smaller not only the table
There is any way to fix this ?
The Correct one(my sccren)
The wrong one(when i change it to a smaller sccren)
,
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:orientation="vertical"
tools:context="com.example.pc.tictactoyv1.act11">
<TableLayout
android:id="#+id/Table"
android:layout_width="357dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.42"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout2"
app:layout_constraintVertical_bias="0.356">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:id="#+id/Btn1"
android:layout_width="110dp"
android:layout_height="128dp"
android:layout_marginRight="5dp"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
tools:ignore="ButtonStyle" />
<Button
android:id="#+id/Btn2"
android:layout_width="110dp"
android:layout_height="128dp"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
android:textStyle="bold" />
<Button
android:id="#+id/Btn3"
android:layout_width="110dp"
android:layout_height="128dp"
android:layout_marginLeft="5dp"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp" />
android:textSize="24sp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:gravity="center"
android:weightSum="3">
<Button
android:id="#+id/Btn4"
android:layout_width="90dp"
android:layout_height="128dp"
android:layout_marginRight="5dp"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp" />
<Button
android:id="#+id/Btn5"
android:layout_width="110dp"
android:layout_height="128dp"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp" />
<Button
android:id="#+id/Btn6"
android:layout_width="110dp"
android:layout_height="128dp"
android:layout_marginLeft="5dp"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp" />
</TableRow>
</TableLayout>
You have several options:
ConstraintLayout with percentage guidelines
nested vertical and horizontal LinearLayouts with weights
creating a CustomView that handles the sizes in onMeasure
ImageViews with white rectangular background, set to fitXY and adjustViewBounds = true
These are just some options I came up with at the top of my head, there are many more. Pick whatever suits your needs best. For beginners probably the way with the ConstraintLayout is the easiest.
I still don't exactly know what you want, but I added an example, that scales evenly, using ConstraintLayout and chains. Also checkout the constraintDimensionRatio whick makes everything square. You might want to checkout Constraint Layout How To
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:orientation="vertical">
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
</LinearLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/linearLayout2">
<Button
android:id="#+id/Btn4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/Btn7"
app:layout_constraintEnd_toStartOf="#+id/Btn5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Btn1" />
<Button
android:id="#+id/Btn9"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/Btn8"
app:layout_constraintTop_toBottomOf="#+id/Btn6" />
<Button
android:id="#+id/Btn2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/Btn5"
app:layout_constraintEnd_toStartOf="#+id/Btn3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/Btn1"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/Btn1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/Btn4"
app:layout_constraintEnd_toStartOf="#+id/Btn2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ButtonStyle" />
<Button
android:id="#+id/Btn6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/Btn9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/Btn5"
app:layout_constraintTop_toBottomOf="#+id/Btn3" />
<Button
android:id="#+id/Btn5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/Btn8"
app:layout_constraintEnd_toStartOf="#+id/Btn6"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/Btn4"
app:layout_constraintTop_toBottomOf="#+id/Btn2" />
<Button
android:id="#+id/Btn7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/Btn8"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Btn4" />
<Button
android:id="#+id/Btn8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/Btn9"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/Btn7"
app:layout_constraintTop_toBottomOf="#+id/Btn5" />
<Button
android:id="#+id/Btn3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/Btn6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/Btn2"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Resources