Android: The borders of TableRow of TableLayout are shaken once data is inserted programmatically
I am trying to achieve something like below the below image:
And uptil now I have been able to somewhat achieve this, but after the data is inserted the entire layout is shaken as the borders are not upto the mark as per the requirement. The acheived image is as below:
Can someone please help me on how can I achieve it perfectly? The xml layout is as below :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorGreySolitude"
android:orientation="vertical">
<TextView
android:id="@+id/tv_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/v15dp"
android:layout_marginTop="@dimen/v25dp"
android:fontFamily="@font/futura_pt_demi"
android:text="Reconcile Summary"
android:textColor="@color/colorBokaraGrey"
android:textSize="@dimen/txtSize16" />
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.MaterialComponents.Light"
app:cardCornerRadius="@dimen/v10dp"
app:cardElevation="@dimen/v15dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorRedNew"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorRedNew"
android:orientation="horizontal"
android:paddingLeft="@dimen/v20dp"
android:paddingTop="@dimen/v10dp"
android:paddingRight="@dimen/v12dp"
android:paddingBottom="@dimen/v10dp">
<TextView
android:id="@+id/tv_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="@drawable/ic_calendar"
android:drawablePadding="@dimen/v5dp"
android:fontFamily="@font/futura_pt_demi"
android:text="TextView"
android:textColor="@color/colorWhite"
android:textSize="@dimen/txtSize14" />
<TextView
android:id="@+id/tv_total_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:fontFamily="@font/futura_pt_demi"
android:gravity="end"
android:text="TextView"
android:textColor="@color/colorWhite"
android:textSize="@dimen/txtSize14" />
</LinearLayout>
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="4">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="1dp"
android:layout_marginBottom="1dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_demi"
android:gravity="center"
android:padding="@dimen/v10dp"
android:text="dfvsdf"
android:layout_weight="1"
android:textColor="@color/colorWhite"
android:textSize="@dimen/txtSize16" />
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorTableLayoutDivider"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="1dp"
android:padding="@dimen/v10dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_demi"
android:gravity="center"
android:text="Cash"
android:textColor="@color/colorBlack"
android:textSize="@dimen/txtSize16" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorTableLayoutDivider"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="1dp"
android:padding="@dimen/v10dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_demi"
android:gravity="center"
android:text="Card"
android:textColor="@color/colorBlack"
android:textSize="@dimen/txtSize16" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorTableLayoutDivider"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/v10dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_demi"
android:gravity="center"
android:text="Custom"
android:textColor="@color/colorBlack"
android:textSize="@dimen/txtSize16" />
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="4">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorTableLayoutDivider"
android:layout_marginRight="1dp"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/v10dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_demi"
android:gravity="center"
android:layout_marginBottom="1dp"
android:text="Actual"
android:textColor="@color/colorBlack"
android:textSize="@dimen/txtSize16" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorTableLayoutDivider"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="1dp"
android:padding="@dimen/v10dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_demi"
android:gravity="center"
android:layout_marginBottom="1dp"
android:text="19,800"
android:textColor="@color/colorBlack"
android:textSize="@dimen/txtSize16" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorTableLayoutDivider"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="1dp"
android:padding="@dimen/v10dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_demi"
android:gravity="center"
android:layout_marginBottom="1dp"
android:text="49,800"
android:textColor="@color/colorBlack"
android:textSize="@dimen/txtSize16" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorTableLayoutDivider"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/v10dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_demi"
android:gravity="center"
android:layout_marginBottom="1dp"
android:text="10,000"
android:textColor="@color/colorBlack"
android:textSize="@dimen/txtSize16" />
</LinearLayout> </TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="4">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorTableLayoutDivider"
android:layout_marginRight="1dp"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/v10dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_demi"
android:gravity="center"
android:layout_marginBottom="1dp"
android:text="System"
android:textColor="@color/colorBlack"
android:textSize="@dimen/txtSize16" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorTableLayoutDivider"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="1dp"
android:padding="@dimen/v10dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_light"
android:gravity="center"
android:layout_marginBottom="1dp"
android:text="20,000"
android:textColor="@color/colorBlack"
android:textSize="@dimen/txtSize18" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorTableLayoutDivider"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="1dp"
android:padding="@dimen/v10dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_light"
android:gravity="center"
android:layout_marginBottom="1dp"
android:text="50,000"
android:textColor="@color/colorBlack"
android:textSize="@dimen/txtSize18" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorTableLayoutDivider"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/v10dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_light"
android:gravity="center"
android:layout_marginBottom="1dp"
android:text="10,000"
android:textColor="@color/colorBlack"
android:textSize="@dimen/txtSize18" />
</LinearLayout> </TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="4">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorTableLayoutDivider"
android:layout_marginRight="1dp"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/v10dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_demi"
android:gravity="center"
android:text="Difference"
android:textColor="@color/colorRedNew"
android:textSize="@dimen/txtSize16" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorTableLayoutDivider"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="1dp"
android:padding="@dimen/v10dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_book"
android:gravity="center"
android:text="200"
android:textColor="@color/colorRedNew"
android:textSize="@dimen/txtSize17" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorTableLayoutDivider"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="1dp"
android:padding="@dimen/v10dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_book"
android:gravity="center"
android:text="200"
android:textColor="@color/colorRedNew"
android:textSize="@dimen/txtSize17" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorTableLayoutDivider"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/v10dp"
android:background="@color/colorWhite"
android:fontFamily="@font/futura_pt_book"
android:gravity="center"
android:text="0"
android:textColor="@color/colorRedNew"
android:textSize="@dimen/txtSize17" />
</LinearLayout>
</TableRow>
</TableLayout>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff0000"
android:stretchColumns="*"/>
Any suggestions on what I can use other than TableLayout is welcomed. As applying borders to every cell is a very tedious job with Table Layouts.
Solution
Yes applying borders to TableLayout is tedious.
There are a few tricks to make it slightly less tedious
You can add a divider view between TableRows to get your horizontal dividers (this does not work for all possible border combinations, but seems to work for what you want)
You can use a background drawable to create your cell borders and you only really need to set one side, I usually choose the right side therefore the last cell does not need a background.
So using a combination of above just for the Table part I was able to create:-
Note what you wanted to achieve image is a bit blurry so could not tell the exact colour of the divider over the "Difference" row but it is easy to change.
Also to compact it more using weightSum and layout_weight is redundant as TableRow does it's own space calculations and ignores these values (You can set them because it is derived from a LinearLayout but the stretchColumns etc replaces the division of excess space)
Trimmed down table xml
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="*">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:background="@drawable/right_border_red"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:background="@drawable/right_border_grey"
android:text="Cash" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:background="@drawable/right_border_grey"
android:text="Card" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Custom" />
</TableRow>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/colorRedNew"/>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:background="@drawable/right_border_red"
android:text="Actual" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:background="@drawable/right_border_grey"
android:text="19,800" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:background="@drawable/right_border_grey"
android:text="49,800" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="10,000" />
</TableRow>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/colorTableLayoutDivider"/>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:background="@drawable/right_border_red"
android:text="System" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:background="@drawable/right_border_grey"
android:text="20,000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:background="@drawable/right_border_grey"
android:text="50,000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="10,000" />
</TableRow>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/colorRedNew"/>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:textColor="@color/colorRedNew"
android:background="@drawable/right_border_red"
android:text="Difference" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:textColor="@color/colorRedNew"
android:background="@drawable/right_border_grey"
android:text="20,000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:textColor="@color/colorRedNew"
android:background="@drawable/right_border_grey"
android:text="50,000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:textColor="@color/colorRedNew"
android:text="0" />
</TableRow>
</TableLayout>
Drawables used:-
right_border_grey
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/colorTableLayoutDivider" />
</shape>
</item>
<item android:right="1dp">
<shape android:shape="rectangle">
<solid android:color="@color/white" />
</shape>
</item>
</layer-list>
right_border_red
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/colorRedNew" />
</shape>
</item>
<item android:right="2dp">
<shape android:shape="rectangle">
<solid android:color="@color/white" />
</shape>
</item>
</layer-list>
- Finding Android SDK on Mac and adding to PATH
- Prompt Android App User to Update App if current version <> market version
- How to integrate Stripe Payment in Android Java?
- Type 'TypeVariable(T)' has no method 'getValue(Nothing?, KProperty<*>)' and thus it cannot serve as a delegate
- In version catalog libs I get false errors you can only call the 'from' method a single time
- Android: When app was opened with click on notification, clicking on further notifications only opens the app, not changing activity
- Applying Flutters app_plugin_loader Gradle plugin imperatively using the apply script method which is deprecated, will be removed in a future release
- ContentResolver.takePersistableUriPermission: SecurityException No persistable permission grants found for UID 10434 and Uri content:/
- App crashes when changing activities
- Android Studio emulator does not have internet
- A failure occurred while executing com.android.build.gradle.internal.tasks.FinalizeBundleTask$BundleToolRunnable
- Android Material Text Input Layout End Icon Not Showing
- Is there a way to keep fragment alive when using BottomNavigationView with new NavController?
- Testing a Composable with assertTextEquals() fails with IllegalStateException
- W/ManagedChannelImpl: [{0}] Failed to resolve name. status={1}
- java.lang.IllegalAccessError: class org.jetbrains.kotlin.kapt3.base.KaptContext Android
- build.gradle error: Could not create tastk ':generateLockfiles'. in Flutter project but App is running normal
- Exception during working with external system: java.lang.AssertionError in Android Studio Dolphin | 2021.3.1
- BaseFragment with viewbinding
- How to extract labels.txt file from tflite file?
- Validation allow only number and characters in edit text in android
- X and Y offset, blur, opacity and colour of shadow in Jetpack Compose?
- Can you pass NavHostController to a child Composable in order to allow access to the navController.navigate("Route")?
- Error building Android library: Direct local .aar file dependencies are not supported
- Layout (Cardview) overlapping below Status bar
- adb shell Logcat with Package Name
- How to get rid of the bottom border of the React Native Paper TextInput when focused
- Issues with android minify after Flutter update 3.22
- Flutter build Appbundle Error:* What went wrong: A problem occurred evaluating project ':app'
- Room - Schema export directory is not provided to the annotation processor so we cannot export the schema