Gridlayout changes widths - android-layout

I've been trying to get a gridlayout to work using:
<GridLayout
android:layout_width="match_parent"
android:layout_height="70dp">
<TextView
android:text="sdfgh"
android:layout_height="wrap_content"
android:id="#+id/AvgGrade"
android:layout_row="2"
android:layout_column="1"
android:layout_rowWeight="0.2"
android:layout_columnWeight="0.5"
android:layout_gravity="fill"
android:textAlignment="gravity"
android:layout_columnSpan="1" />
<TextView
android:text="words"
android:layout_height="wrap_content"
android:id="#+id/Totals"
android:layout_row="1"
android:layout_column="1"
android:textAlignment="gravity"
android:layout_rowWeight="0.2"
android:layout_columnWeight="0.5"
android:layout_gravity="fill"
android:layout_columnSpan="1" />
<TextView
android:text="words"
android:layout_height="wrap_content"
android:id="#+id/textView3"
android:layout_row="2"
android:layout_column="0"
android:textAlignment="center"
android:layout_rowWeight="0.2"
android:layout_columnWeight="0.5"
android:layout_gravity="fill"
android:layout_columnSpan="1" />
<TextView
android:text="words"
android:layout_height="wrap_content"
android:id="#+id/textView4"
android:layout_row="1"
android:layout_column="0"
android:layout_rowWeight="0.2"
android:layout_columnWeight="0.5"
android:layout_gravity="fill"
android:textAlignment="center"
android:layout_columnSpan="1" />
<TextView
android:text="words"
android:layout_height="wrap_content"
android:id="#+id/TotalAvg"
android:layout_row="0"
android:layout_column="1"
android:textAlignment="gravity"
android:layout_rowWeight="0.2"
android:layout_columnWeight="0.5"
android:layout_gravity="fill"
android:layout_columnSpan="1" />
<TextView
android:text="words"
android:layout_height="wrap_content"
android:id="#+id/textView6"
android:layout_row="0"
android:layout_column="0"
android:textAlignment="center"
android:layout_columnWeight="0.5"
android:layout_gravity="fill"
android:layout_columnSpan="1" />
</GridLayout>
My issue is that what the data is loads in the second column the size of the columns changes ever so slightly. I've tried left and center alignment and nothing seems stop the columns from changing. The user will be updating these values repeatedly and the slight 'jiggle' of the columns shifting looks really bad.

After much frustration I was unable to find a solution in the XML layout. However I did find a solution that seems to be working fairly well programatically.
I added a method called at the end of my OnCreate
public void ResizeTexts(){
Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics ();
display.getMetrics(outMetrics);
float density = getResources().getDisplayMetrics().density;
float dpWidth = (outMetrics.widthPixels / density);
text1.getLayoutParams().width = (int)dpWidth;
text2.getLayoutParams().width = (int)dpWidth;
text3.getLayoutParams().width = (int)dpWidth;
text4.getLayoutParams().width = (int)dpWidth;
text5.getLayoutParams().width = (int)dpWidth;
text6.getLayoutParams().width = (int)dpWidth;
}
Which i adapted from this link re-setting a TextView height programmatically
then in my XML layout I set it up with:
<GridLayout
android:layout_width="match_parent"
android:layout_height="70dp">
<TextView
android:text="points"
android:layout_height="wrap_content"
android:layout_width="10dp"
android:id="#+id/text1"
android:layout_row="0"
android:layout_column="0"
android:textAlignment="textEnd"
/>
<TextView
android:text="totals"
android:layout_height="wrap_content"
android:layout_width="10dp"
android:id="#+id/text2"
android:layout_row="1"
android:layout_column="0"
android:textAlignment="textEnd"/>
<TextView
android:text="score"
android:layout_height="wrap_content"
android:id="#+id/text3"
android:layout_width="10dp"
android:layout_row="2"
android:layout_column="0"
android:textAlignment="textEnd"/>
<TextView
android:text="123.4"
android:layout_height="wrap_content"
android:id="#+id/text4"
android:layout_width="10dp"
android:layout_row="1"
android:layout_column="1"
android:textAlignment="textEnd"/>
<TextView
android:text="1.23"
android:layout_height="wrap_content"
android:id="#+id/text5"
android:layout_width="10dp"
android:layout_row="2"
android:layout_column="1"
android:textAlignment="textEnd"/>
<TextView
android:text="1234 "
android:layout_height="wrap_content"
android:id="#+id/text6"
android:layout_width="10dp"
android:layout_row="0"
android:layout_column="1"
android:textAlignment="textEnd"/>
</GridLayout>
*the layout widths in the xml layout I was using to try and 'break' it, not actually used.
Admittedly, i'm not sure if this is the 'best' way to do this. Personally I feel like the GridLayout XML should be able to do this on it's own. But, I couldn't figure it out.

Related

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>

My last of column of gridlayout going out of screen

I created gridlayout of 3 columns and it's doing great with large screen phone but with small screen phone there is problem last column going out of screen.
I also tried to set column_weight="1" but it's even worse.
Please help me I stuck here for many of days and tried so many things but it doesn't help.
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alignmentMode="alignMargins"
android:columnCount="3"
android:rowCount="8">
<TextView
android:layout_row="0"
android:layout_column="0"
android:padding="10dp"
android:text="#string/sub"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_row="0"
android:layout_column="1"
android:layout_marginStart="50dp"
android:padding="10dp"
android:text="#string/credit"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_row="0"
android:layout_column="2"
android:layout_marginStart="50dp"
android:padding="10dp"
android:text="#string/grade"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_row="1"
android:layout_column="0"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:padding="10dp"
android:text="#string/m2"
android:textColor="#4C4C4C"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:layout_row="2"
android:layout_column="0"
android:layout_marginStart="10dp"
android:padding="10dp"
android:text="#string/dsa"
android:textColor="#4C4C4C"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:layout_row="3"
android:layout_column="0"
android:layout_marginStart="10dp"
android:padding="10dp"
android:text="#string/dsalab"
android:textColor="#4C4C4C"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:layout_row="4"
android:layout_column="0"
android:layout_marginStart="10dp"
android:padding="10dp"
android:text="#string/vee"
android:textColor="#4C4C4C"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:layout_row="5"
android:layout_column="0"
android:layout_marginStart="10dp"
android:padding="10dp"
android:text="#string/eeb"
android:textColor="#4C4C4C"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:layout_row="6"
android:layout_column="0"
android:layout_marginStart="10dp"
android:padding="10dp"
android:text="#string/dms"
android:textColor="#4C4C4C"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:layout_row="7"
android:layout_column="0"
android:layout_marginStart="10dp"
android:padding="10dp"
android:text="#string/anel"
android:textColor="#4C4C4C"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:layout_row="1"
android:layout_column="1"
android:layout_marginStart="70dp"
android:layout_marginTop="10dp"
android:padding="10dp"
android:text="4"
android:textColor="#4C4C4C"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:layout_row="2"
android:layout_column="1"
android:layout_marginStart="70dp"
android:padding="10dp"
android:text="3"
android:textColor="#4C4C4C"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:layout_row="3"
android:layout_column="1"
android:layout_marginStart="70dp"
android:padding="10dp"
android:text="1"
android:textColor="#4C4C4C"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:layout_row="4"
android:layout_column="1"
android:layout_marginStart="70dp"
android:padding="10dp"
android:text="3"
android:textColor="#4C4C4C"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:layout_row="5"
android:layout_column="1"
android:layout_marginStart="70dp"
android:padding="10dp"
android:text="3"
android:textColor="#4C4C4C"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:layout_row="6"
android:layout_column="1"
android:layout_marginStart="70dp"
android:padding="10dp"
android:text="3"
android:textColor="#4C4C4C"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:layout_row="7"
android:layout_column="1"
android:layout_marginStart="70dp"
android:padding="10dp"
android:text="3"
android:textColor="#4C4C4C"
android:textSize="24sp"
android:textStyle="bold" />
<EditText
android:layout_row="1"
android:layout_column="2"
android:layout_width="60dp"
android:background="#drawable/round_box"
android:layout_marginStart="63dp"
android:layout_marginTop="10dp"
android:padding="10dp"
android:inputType="text"
android:textColor="#color/colorPrimary"
android:textSize="24sp"
android:textStyle="bold" />
<EditText
android:layout_row="2"
android:layout_column="2"
android:layout_width="60dp"
android:background="#drawable/round_box"
android:layout_marginStart="63dp"
android:layout_marginTop="10dp"
android:padding="10dp"
android:inputType="text"
android:textColor="#color/colorPrimary"
android:textSize="24sp"
android:textStyle="bold" />
<EditText
android:layout_row="3"
android:layout_column="2"
android:layout_width="60dp"
android:background="#drawable/round_box"
android:layout_marginStart="63dp"
android:layout_marginTop="10dp"
android:padding="10dp"
android:inputType="text"
android:textColor="#color/colorPrimary"
android:textSize="24sp"
android:textStyle="bold" />
<EditText
android:layout_row="4"
android:layout_column="2"
android:layout_width="60dp"
android:background="#drawable/round_box"
android:layout_marginStart="63dp"
android:layout_marginTop="10dp"
android:padding="10dp"
android:inputType="text"
android:textColor="#color/colorPrimary"
android:textSize="24sp"
android:textStyle="bold" />
<EditText
android:layout_row="5"
android:layout_column="2"
android:layout_width="60dp"
android:background="#drawable/round_box"
android:layout_marginStart="63dp"
android:layout_marginTop="10dp"
android:padding="10dp"
android:inputType="text"
android:textColor="#color/colorPrimary"
android:textSize="24sp"
android:textStyle="bold" />
<EditText
android:layout_row="6"
android:layout_column="2"
android:layout_width="60dp"
android:background="#drawable/round_box"
android:layout_marginStart="63dp"
android:layout_marginTop="10dp"
android:padding="10dp"
android:inputType="text"
android:textColor="#color/colorPrimary"
android:textSize="24sp"
android:textStyle="bold" />
<EditText
android:layout_row="7"
android:layout_column="2"
android:layout_width="60dp"
android:background="#drawable/round_box"
android:layout_marginStart="63dp"
android:layout_marginTop="10dp"
android:padding="10dp"
android:inputType="text"
android:textColor="#color/colorPrimary"
android:textSize="24sp"
android:textStyle="bold" />
</GridLayout>

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

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.

How to do horizontal scrolling,vertical scrolling and tab box textview horizontal scrolling in an activity

I am facing some problem in designing one screen in which vertical page scrolling, horizontal page scrolling and tab box textview horizontal scrolling work(if textView bigger than box).
I have attach a required image. please give me some idea, so that i can design this screen.
See required design:
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/horizontalScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="#+id/scrollView"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0"
android:padding="5dp"
android:text="Sr. no"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="0"
android:padding="5dp"
android:text="Name owner address"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_row="0"
android:padding="5dp"
android:text="Sizes"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="4"
android:layout_row="0"
android:padding="5dp"
android:text="BHkk"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="5"
android:layout_row="0"
android:padding="5dp"
android:text="Call et.c."
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView6"
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="2"
android:text="1" />
<TextView
android:id="#+id/textView7"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="2"
android:text="#string/dummyText" />
<TextView
android:id="#+id/textView8"
android:layout_width="39dp"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_row="2"
android:text="New Text" />
<TextView
android:id="#+id/textView9"
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_column="4"
android:layout_row="2"
android:text="10dp" />
<TextView
android:id="#+id/textView10"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_column="5"
android:layout_row="2"
android:text="New Text" />
</GridLayout>
</ScrollView>
</HorizontalScrollView>

Resources