androidandroid-layoutandroid-linearlayoutandroid-gridlayout
Row span and column span best layout for design
How to implement design like this i am not sure how to do that sorry for the blurry image.
I have three options
Linear Layout with weightsum (Hard)
TableLayout (Not support column span)
GridLayout (Don't know)
I tried this table layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="@+id/space1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="3dp"
android:text="Fir 08 Jul 10:44GMT +01 " />
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:shrinkColumns="*"
android:stretchColumns="*">
<TableRow
android:id="@+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:layout_span="4"
android:background="#FFFFFF"
android:gravity="center"
android:padding="3dp"
android:text="ATP Singles Winmbeldon"
android:textColor="#000000" />
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="A"
android:textColor="#000000" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="B"
android:textColor="#000000" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="C"
android:textColor="#000000" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="D"
android:textColor="#000000" />
</TableRow>
<TableRow
android:id="@+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="E"
android:textColor="#000000" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="F"
android:textColor="#000000" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="G"
android:textColor="#000000" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="H"
android:textColor="#000000" />
</TableRow>
<TableRow
android:id="@+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="I"
android:textColor="#000000" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="J"
android:textColor="#000000" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="K"
android:textColor="#000000" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="L"
android:textColor="#000000" />
</TableRow>
</TableLayout>
</LinearLayout>
Solution
android.support.v7.widget.GridLayout fits your situation.
In your build.gradle (any versions may be ok):
compile "com.android.support:gridlayout-v7:24.1.1"
In your layout xml file:
<?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="@android:color/white"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="3dp"
android:paddingBottom="3dp"
android:text="Fir 08 Jul 10:44GMT +01"/>
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
app:columnCount="8">
<!--
Header Row
-->
<TextView
style="@style/CellStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_columnSpan="7"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:padding="3dp"
android:background="@android:color/darker_gray"
android:text="ATP Singles Winmbeldon"
android:textColor="@android:color/white"/>
<!-- Spacer for green -->
<View
style="@style/CellSpacerStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"/>
<!--
First Row SF 13:00
-->
<!-- Title -->
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_rowSpan="2"
android:text="SF\n13:00"/>
<!-- Sore 1 -->
<TextView
style="@style/CellStyle"
android:layout_height="@dimen/row_height"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_rowSpan="1"
android:text="Raonic M. (6)"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="6"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="4"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="3"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="4"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="5"/>
<!-- GreenView -->
<FrameLayout
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="@dimen/border_size"
android:paddingTop="@dimen/border_size"
android:background="@android:color/white">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/green_circle"/>
</FrameLayout>
<!-- Sore 2 -->
<TextView
style="@style/CellStyle"
android:layout_height="@dimen/row_height"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_rowSpan="1"
android:text="Federer R. (3)"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="4"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="6"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="7"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="7"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="5"/>
<!-- GreenView -->
<FrameLayout
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="@dimen/border_size"
android:paddingTop="@dimen/border_size"
android:background="@android:color/white">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/green_circle"/>
</FrameLayout>
<!--
Second Row SF 15:00
-->
<!-- Title -->
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_rowSpan="2"
android:text="SF\n15:00"/>
<!-- Sore 1 -->
<TextView
style="@style/CellStyle"
android:layout_height="@dimen/row_height"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_rowSpan="1"
android:text="Berdych T.(10)"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="6"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="4"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="3"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="4"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="5"/>
<!-- GreenView -->
<FrameLayout
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="@dimen/border_size"
android:paddingTop="@dimen/border_size"
android:background="@android:color/white">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/green_circle"/>
</FrameLayout>
<!-- Sore 2 -->
<TextView
style="@style/CellStyle"
android:layout_height="@dimen/row_height"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_rowSpan="1"
android:text="Murray A (2)"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="4"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="6"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="7"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="7"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="5"/>
<!-- GreenView -->
<FrameLayout
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="@dimen/border_size"
android:paddingTop="@dimen/border_size"
android:background="@android:color/white">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/green_circle"/>
</FrameLayout>
<!--
Bottom Brders
-->
<View
android:layout_width="0dp"
android:layout_height="@dimen/border_size"
app:layout_columnSpan="7"
app:layout_columnWeight="1"
app:layout_rowWeight="1"/>
<View
android:layout_width="0dp"
android:layout_height="@dimen/border_size"
android:layout_marginLeft="@dimen/border_size"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:background="@android:color/white"/>
</android.support.v7.widget.GridLayout>
</LinearLayout>
In your style.xml:
<resources>
...
<style name="CellStyle">
<item name="android:layout_marginTop">@dimen/border_size</item>
<item name="android:layout_marginLeft">@dimen/border_size</item>
<item name="android:background">@android:color/white</item>
<item name="android:gravity">center</item>
</style>
<style name="CellSpacerStyle">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">0dp</item>
<item name="android:layout_marginLeft">@dimen/border_size</item>
<item name="android:background">@android:color/white</item>
</style>
...
</resources>
In your dimens.xml:
<resources>
...
<dimen name="border_size">1px</dimen>
<dimen name="row_height">54dp</dimen>
...
</resources>
The result is below:
Attributes of GridLayout [document]
app:columnCountis the number of columns of Gridlayout.app:rowCountis the number of rows of Gridlayout.
Attributes of GridLayout' children [document]
app:layout_columnSpanis the number of column occupied by this view.app:layout_rowSpanis the number of span occupied by this view.
- Jetpack Compose Vertical Grid single item span size
- Android 15. Edge to edge mode hide a top View
- MapView inside custom RecyclerViewAdapter
- base64 file to be downloaded in capacitor iOS and Android
- OpenApi Client Kotlin Jar Dependency build with Gradle is not recognized in my Android Kotlin Jetpack Compose Project
- Should We use Handler for long delay Android
- Flutter : How to change Android minSdkVersion in Flutter Project?
- Align one string on the left and second one on the right side of textView
- How to add a dictionary for spell check in Android Studio / IntelliJ Idea
- React Native: SyntaxError in node_module -> EventEmitter.js: Unexpected Token, Expected "]"
- Failed to load 'libmain.so' java.lang.UnsatisfiedLinkError: dlopen failed: library "libmain.so" not found
- Jetpack compose new source is not working
- WRITE_EXTERNAL_STORAGE when targeting Android 10
- My Music Player App is crashing again and again
- Jetpack Compose, custom cursor position in TextField
- OkHTTP (v3.0.0-RC1) Post Request with Parameters
- Cannot create an instance of class ViewModel
- How to set release name when using fastlane upload_to_play_store?
- AdMob ad showing the developing ad on some devices
- java.lang.NoClassDefFoundError: Failed resolution of: Lcom/facebook/drawee/backends/pipeline/info/ImagePerfDataListener;
- Get Android Device Name
- Android Studio 3.1: Erroneous unresolved references in editor
- java.util.NoSuchElementException: Flow is empty
- Make Text tab open by default in Android Studio
- Failed to resolve: com.facebook.android:facebook-android-sdk:[4,5)
- Ionic Capacitor hardware back button is automatically closing the app
- adb pull multiple files
- How to turn on bluetooth of mobile by using react-native-ble-plx?
- The method 'isScheduledByUniqueName' isn't defined for the type 'Workmanager'. Flutter
- InflateException: Binary XML file line #1: Error inflating class <unknown> caused by OutOfMemoryError