In Android, how can I keep verticalSpacing always equal to the horizontalSpacing in GridView?

Question

I have declared GirdView in xml layout as shown below.

<GridView
    android:id="@+id/movies_gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:drawSelectorOnTop="true"
    android:columnWidth="92dp"
    android:numColumns="auto_fit"
    android:stretchMode="spacingWidthUniform"
    android:gravity="center_horizontal" />

I intend to show fixed size images(vertical rectangle not square) in this GridView. I have set the columnWidth to auto_fit so that horizontal space can be used optimally by the GridView. as per the available screen size. I have set the stretchMode to spacingWidthUniform so that columns will be placed at equal distance from all sides.

I want to set the verticalSpacing equal to the horizontalSpacing. I can't do it in xml here because at runtime the horizontalSpacing will depend on the space available on the screen. Also, when device orientation is changed, the horizontalSpacing will change.

My questions are:

1. How can I make sure that verticalSpacing will always be equal to the horizontalSpacing?

2. How can make the GridView start layouting its first column from the beginning plus padding and end layouting last column to the end of GridView minus padding?

EDIT 1

I tried @simas solution to use the mentioned custom grid view. For that,

1. I copied this class to my source directory.

2. Included this grid view in layout xml as shown below.

<com.aviras.ashish.popularmoviesapp.widgets.CustomGridView
    android:id="@+id/movies_gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="@dimen/grid_item_width"
    android:drawSelectorOnTop="true"
    android:gravity="center_horizontal"
    android:numColumns="auto_fit"
    android:stretchMode="spacingWidthUniform"
    tools:listitem="@layout/grid_item_movie_poster" />

3. Set the adapter to this gridview as shown below

   
   CustomGridView moviesGridView = (CustomGridView) rootView.findViewById(R.id.movies_gridview);
   moviesGridView.setAdapter(new MoviesAdapter(rootView.getContext().getApplicationContext(), mMovies));
   

It still shows the different spacing for the columns and rows as shown below.

EDIT 2

@simas in the second question by 'start layouting' I mean that the GridView should start drawing the first column at the start of the GridView and last column of the GridView should end at the end of the GridView. Also, the columns and rows should have the equal spacing. Let me know if that clarifies my question some more.

Answer 1

You can create a custom GridView class and modify the functionality of setHorizontalSpacing and setVerticalSpacing like this:

public class CustomGridView extends GridView {

    public CustomGridView(Context context) {
        super(context);
    }

    public CustomGridView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomGridView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public CustomGridView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    public void setHorizontalSpacing(int horizontalSpacing) {
        super.setHorizontalSpacing(horizontalSpacing);
        // Call parent class to set the vertical spacing to be equal to the horizontal spacing
        super.setVerticalSpacing(horizontalSpacing);
    }

    @Override
    public void setVerticalSpacing(int verticalSpacing) {
        // Prevent the derived class from modifying the vertical spacing
        /*super.setVerticalSpacing(verticalSpacing);*/
    }

}

Then use the custom class in xml like this:

As for your second question: I couldn't really understand what you meant by "start layouting".

An image example of your desired result would help a lot.