In an upcoming app update, I decided to transition from a ListView to a GridView for presenting months in a year. That way, there would be less scrolling to access the months and therefore, it should be easier to use and present a format more in line with the look of a calendar. Perhaps somewhat spoiled by the ease of CSS styling, it was disconcerting how much research and tinkering it took to get the GridView centered on the screen. Initially, following the Android Gridview doc example functionality was fine, but appearance was another matter. Spending the majority of time trying to manipulate the GridView element itself, it was discovered that aligning the individual grid item achieved the desired effect.
month_gridview.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFF" > <GridView android:id="@+id/gridview" android:layout_width="match_parent" android:layout_height="match_parent" android:numColumns="4" android:columnWidth="90dp" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:stretchMode="columnWidth" android:gravity="center" android:listSelector="#F7EB42" android:layout_marginBottom="10dp" android:layout_marginTop="0dp" /> </LinearLayout> month_grid_item.xml <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:padding="5dp" android:background="@drawable/list_noborder" > <ImageView android:id="@+id/grid_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" /> <TextView android:id="@+id/grid_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="2dp" android:textSize="14sp" android:layout_below="@+id/grid_image" android:layout_centerHorizontal="true" android:layout_alignLeft="@id/grid_image" android:layout_alignRight="@id/grid_image" android:gravity="center" /> </RelativeLayout> Note the various layout elements required in the TextView to get the text below and center-aligned with its corresponding ImageView, another feat that took some experimentation to achieve. |
AuthorExploring Android and mobile web design, security, and development. Archives
March 2021
Categories |