Dynamically resizing grid item

Question

I am trying to create a menu screen which has a couple of grid items that contains image view and text boxes. My intention is to get same scale for different screen resolutions/dimentions.

For example; below image is what I am trying to create. As you can see, depending on the size of the screen, grid item dimentions are changing, but they still cover the same proportion on the screen.

enter image description here

Getting screen dimentions, and creating an approximate size for each grid item for different screen size is not a big deal. However setting proper margin and putting grid view center of the screen is tedious.

Is there an easier or more practical way of doing this?

grid_item.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:layout_margin="5dp"
android:orientation="vertical" >

<ImageView
    android:id="@+id/menu_item_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="2"
    android:contentDescription="@string/menu_item" />

<TextView
    android:id="@+id/menu_item_text"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:layout_weight="8"
    android:gravity="center" />

</LinearLayout>

activity_main_menu.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainMenuActivity" >

<GridView
    android:id="@+id/mainGridView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical|center_horizontal"
    android:layout_margin="20dp"
    android:numColumns="2" >

</GridView>

</LinearLayout>

score 0 · Answer 1 · answered Oct 01 '13 at 11:22

The most easiest way is to create different dimens.xml in values folder.

Steps:

Create dimens.xml in values folder for particular resolution like values, values-sw600dp, values-sw720dp
Define dimension values for the ImageView and for whatever views you want. (dimention variable names must be the same in all the dimens.xml files)
Now just refer these dimens.xml wherever you want, it will take dimension values based on the size and density of the screen.

Dynamically resizing grid item

1 Answers1