如何按比例缩放活动以完全适应没有图像的图像

Question

I'm facing a very strange problem. Here I have total 8 images in Gridview Style where each image is exactly 392×500 Size. But when I run app, There is alwayas a small space left below the last 8th image.

Here is my code

 public class BooksPage extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener { int images[] = {R.drawable.phy,R.drawable.chem,R.drawable.drawable_logy,R.drawable.drawable_geology,R.drawable.bbs,R.drawable.drawable_chartered,R.drawable.bachelor,R.drawable.bachelor}; String stream[]= {"MSC Physics","MSC Chemistry","MSC Biology", "MSC Geology","BBS|BBA","CA","Bachelor","+2 Science"}; TextView navName,navEmail; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_books_page); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setTitle("पुस्तक किनबेच"); DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); ActionBarDrawerToggle toggle = new ActionBarDrawerToggle( this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); drawer.setDrawerListener(toggle); toggle.syncState(); NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view); View navHeaderView = navigationView.getHeaderView(0); navName = (TextView)navHeaderView.findViewById(R.id.nav_name); navEmail = (TextView)navHeaderView.findViewById(R.id.nav_mail); navigationView.setNavigationItemSelectedListener(this); RecyclerView favPlaces = (RecyclerView) findViewById(R.id.favPlaces); StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL); layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE); favPlaces.setLayoutManager(layoutManager); favPlaces.setHasFixedSize(true); ArrayList<BookDetails> placeList = getPlaces(); if (!isNetworkStatusAvialable(this)) { Toast.makeText(this, "No Internet!", Toast.LENGTH_SHORT).show(); } StaggeredAdapter staggeredAdapter = new StaggeredAdapter(this,placeList); favPlaces.setAdapter(staggeredAdapter); navName.setText(PreferenceManager.getDefaultSharedPreferences(this).getString("name","null")); navEmail.setText(PreferenceManager.getDefaultSharedPreferences(this).getString("email","null")); } private ArrayList<BookDetails> getPlaces() { ArrayList<BookDetails> details = new ArrayList<>(); for (int index=0; index<images.length;index++){ details.add(new BookDetails(images[index],stream[index])); } return details; } } 

My xml code of adapter is

 <?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" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" app:cardUseCompatPadding="true" app:cardCornerRadius="4dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@color/colorPrimaryDark"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/placePic" android:adjustViewBounds="true" android:scaleType="fitXY" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/placeName" android:textStyle="bold" android:textColor="#ffffff" android:fontFamily="sans-serif-condensed" android:textAppearance="@style/Base.TextAppearance.AppCompat.Large" android:gravity="center" android:textSize="16sp"/> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> 

Then I though maybeincrease in size of images will do the trick but whether I make the image size 50×50 or 1000×1000, The image is always same size and space is also constant.

Here is the screenshot

and again same with another image [![enter image description here][2]][2]

But funny part is when I use the same image of 7th poition in 8th position also.....Then space disappers and images fit exactly.

Here is the screenshot

what is the problem here? How can I fix it any help is appreciated

I'm using photoshop to change width and height of my Images by Saving for Web.

Answer 1

The below code will solve the problem. But may require little edit.

Add the below code inside your fragment / Activity onCreate / ocreateView . Here you only need item decorator for your recycler to scale the item

 mRecycler.addItemDecoration(new GridSpacingItemDecoration(2, dpToPx(2), true));

Add create a method dpToPx

 /**
     * Converting dp to pixel
     */
    private int dpToPx(int dp) {
        Resources r = getResources();
        return Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, r.getDisplayMetrics()));
    }

Now create a class for GridSpacingItemDecoration inside your activity/fragment

 /**
     * RecyclerView item decoration - give equal margin around grid item
     */
    public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration {

        private int spanCount;
        private int spacing;
        private boolean includeEdge;

        GridSpacingItemDecoration(int spanCount, int spacing, boolean includeEdge) {
            this.spanCount = spanCount;
            this.spacing = spacing;
            this.includeEdge = includeEdge;
        }

        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            int position = parent.getChildAdapterPosition(view); // item position
            int column = position % spanCount; // item column

            if (includeEdge) {
                outRect.left = spacing - column * spacing / spanCount; // spacing - column * ((1f / spanCount) * spacing)
                outRect.right = (column + 1) * spacing / spanCount; // (column + 1) * ((1f / spanCount) * spacing)

                if (position < spanCount) { // top edge
                    outRect.top = spacing;
                }
                outRect.bottom = spacing; // item bottom
            } else {
                outRect.left = column * spacing / spanCount; // column * ((1f / spanCount) * spacing)
                outRect.right = spacing - (column + 1) * spacing / spanCount; // spacing - (column + 1) * ((1f /    spanCount) * spacing)
                if (position >= spanCount) {
                    outRect.top = spacing; // item top
                }
            }
        }
    }