androidandroid-support-libraryandroid-gridlayout
android.support.v7.widget.GridLayout distorts on smaller screen devices android
I am using Grid Layout from v7 support library to create a Grid Layout in android. The Layout builds perfectly fine on larger screen devices(screen sizes > 4"), which I confirmed from previewing screens in android studio. But the layout distorts badly on smaller screen devices (checked on a real device too) with only the first row being visible till the end the screen. Following are the screenshots:
On a small screen device (Galaxy S in this case)
On a larger screen device (5.1" in this case)
Below is the code for the same:
<android.support.v7.widget.GridLayout
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="#BDBDBD"
android:padding="3dp"
app:columnCount="3"
app:rowCount="2"
android:layout_below="@+id/pager"
android:layout_marginLeft="0dp"
>
<LinearLayout
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu1"
android:clickable="true"
app:layout_row="0"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu11"
android:background="#FFF"
android:layout_gravity="center"
android:id="@+id/menu1_img"
android:onClick="buttonActions"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu1"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:id="@+id/menu1_txt"
android:onClick="buttonActions"
/>
</LinearLayout>
<LinearLayout
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:id="@+id/menu2"
android:onClick="buttonActions"
app:layout_row="0"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu12"
android:background="#FFF"
android:layout_gravity="center"
android:id="@+id/menu2_img"
android:onClick="buttonActions"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu2"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:id="@+id/menu2_txt"
android:onClick="buttonActions"
/>
</LinearLayout>
<LinearLayout
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu3"
app:layout_row="0"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu13"
android:background="#FFF"
android:layout_gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu3_img"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu3"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:onClick="buttonActions"
android:id="@+id/menu3_txt"
/>
</LinearLayout>
<LinearLayout
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:id="@+id/menu4"
android:onClick="buttonActions"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu14"
android:background="#FFF"
android:layout_gravity="center"
android:id="@+id/menu4_img"
android:onClick="buttonActions"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu4"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:id="@+id/menu4_txt"
android:onClick="buttonActions"
/>
</LinearLayout>
<LinearLayout
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:id="@+id/menu5"
android:onClick="buttonActions"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu15"
android:background="#FFF"
android:layout_gravity="center"
android:id="@+id/menu5_img"
android:onClick="buttonActions"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu5"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:id="@+id/menu5_txt"
android:onClick="buttonActions"
/>
</LinearLayout>
<LinearLayout
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu6"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu16"
android:background="#FFF"
android:layout_gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu6_img"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu6"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:onClick="buttonActions"
android:id="@+id/menu6_txt"
/>
</LinearLayout>
<LinearLayout
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:id="@+id/menu7"
android:onClick="buttonActions"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu17"
android:background="#FFF"
android:layout_gravity="center"
android:id="@+id/menu7_img"
android:onClick="buttonActions"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu7"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:onClick="buttonActions"
android:id="@+id/menu7_txt"
/>
</LinearLayout>
<LinearLayout
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu8"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu18"
android:background="#FFF"
android:layout_gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu8_img"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu8"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:onClick="buttonActions"
android:id="@+id/menu8_txt"
/>
</LinearLayout>
<LinearLayout
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu9"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu19"
android:background="#FFF"
android:layout_gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu9_img"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu9"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:onClick="buttonActions"
android:id="@+id/menu9_txt"
/>
</LinearLayout>
</android.support.v7.widget.GridLayout>
Help in this regard, to solve compatibility issue on small devices would be appreciated. Thanks in advance.
Solution
This is my approach using LinearLayouts with weights
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context="com.ttl.thetravellerslounge.TopNavigation">
<include
layout="@layout/toolbar"
android:id="@+id/toolbar"></include>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="TTL Immigration"
android:id="@+id/textView"
android:textColor="#fff"
android:padding="7dp"
android:layout_centerHorizontal="true"
android:textSize="35sp"
/>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="170dp"
android:layout_below="@+id/toolbar"
>
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_below="@+id/pager"
android:layout_marginTop="2dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu1"
android:clickable="true"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu11"
android:background="#FFF"
android:layout_gravity="center"
android:id="@+id/menu1_img"
android:onClick="buttonActions"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu1"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:id="@+id/menu1_txt"
android:onClick="buttonActions"
/>
</LinearLayout>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:id="@+id/menu2"
android:onClick="buttonActions"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu12"
android:background="#FFF"
android:layout_gravity="center"
android:id="@+id/menu2_img"
android:onClick="buttonActions"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu2"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:id="@+id/menu2_txt"
android:onClick="buttonActions"
/>
</LinearLayout>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu3"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu13"
android:background="#FFF"
android:layout_gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu3_img"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu3"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:onClick="buttonActions"
android:id="@+id/menu3_txt"
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:id="@+id/menu4"
android:onClick="buttonActions"
android:paddingLeft="1dp"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu14"
android:background="#FFF"
android:layout_gravity="center"
android:id="@+id/menu4_img"
android:onClick="buttonActions"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu4"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:id="@+id/menu4_txt"
android:onClick="buttonActions"
/>
</LinearLayout>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:id="@+id/menu5"
android:onClick="buttonActions"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu15"
android:background="#FFF"
android:layout_gravity="center"
android:id="@+id/menu5_img"
android:onClick="buttonActions"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu5"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:id="@+id/menu5_txt"
android:onClick="buttonActions"
/>
</LinearLayout>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu6"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu16"
android:background="#FFF"
android:layout_gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu6_img"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu6"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:onClick="buttonActions"
android:id="@+id/menu6_txt"
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:id="@+id/menu7"
android:onClick="buttonActions"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu17"
android:background="#FFF"
android:layout_gravity="center"
android:id="@+id/menu7_img"
android:onClick="buttonActions"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu7"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:onClick="buttonActions"
android:id="@+id/menu7_txt"
/>
</LinearLayout>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu8"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu18"
android:background="#FFF"
android:layout_gravity="center"
android:onClick="buttonActions"
android:id="@+id/menu8_img"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu8"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:onClick="buttonActions"
android:id="@+id/menu8_txt"
/>
</LinearLayout>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginLeft="0dp"
android:background="#FFF"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:gravity="center"
android:onClick="socialDialog"
android:id="@+id/menu9"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu19"
android:background="#FFF"
android:layout_gravity="center"
android:onClick="socialDialog"
android:id="@+id/menu9_img"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/menu9"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:onClick="socialDialog"
android:id="@+id/menu9_txt"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
- 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