Search code examples
androidandroid-fragmentsandroid-viewpager

Reduce an empty vertical height in ViewPager

This is my fragment. The blue images on the upper part are swipable (implemented using ViewPager). Below it is a circle indicator. The vertical gap shown by the red mark seems too much for me. How to reduce it as much as possible?

On a glance, I think the answer might be in android:padding in vp_item.xml. Turns out it didn't achieve what I want.

enter image description here

Some relevent codes attached.

NewsFragment.java

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.Toast;

import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
import com.aurelhubert.ahbottomnavigation.AHBottomNavigationAdapter;

import net.devbyzero.app.pascatrisakti.NewsListAdapter;
import net.devbyzero.app.pascatrisakti.R;
import net.devbyzero.app.pascatrisakti.ViewPagerAdapter;
import net.devbyzero.app.pascatrisakti.WrapContentViewPager;
import net.devbyzero.app.pascatrisakti.data.NewsProvider;

import java.util.ArrayList;
import me.relex.circleindicator.CircleIndicator;


public class NewsFragment extends Fragment {

    private RecyclerView recView;
    private NewsListAdapter adapter;
    private WrapContentViewPager vPager;
    private PagerAdapter pAdapter;
    private AHBottomNavigation bottomNavigation;
    private AHBottomNavigationAdapter bottomAdapter;
    private CircleIndicator llDots;

    public static NewsFragment newInstance(String param1, String param2){
        NewsFragment fragment = new NewsFragment();
        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_news, container, false);
        recView = (RecyclerView) view.findViewById(R.id.news_list);
        recView.setLayoutManager(new LinearLayoutManager(getActivity()));

        vPager = (WrapContentViewPager) view.findViewById(R.id.view_pager);
        llDots = (CircleIndicator) view.findViewById(R.id.lldots);
        int[] banners = new int[]{R.drawable.spmb, R.drawable.spmb, R.drawable.spmb};
        pAdapter = new ViewPagerAdapter(getActivity(), banners);
        vPager.setAdapter(pAdapter);
        llDots.setViewPager(vPager);

        bottomNavigation = (AHBottomNavigation) view.findViewById(R.id.bottom_navigation);
        bottomNavigation.setTitleState(AHBottomNavigation.TitleState.SHOW_WHEN_ACTIVE);
        bottomAdapter = new AHBottomNavigationAdapter(getActivity(), R.menu.bottom_menu);
        int[] tabColors = getResources().getIntArray(R.array.tab_colors);
        bottomAdapter.setupWithBottomNavigation(bottomNavigation, tabColors);
        final String[] msgs = new String[]{"Berita", "Profil", "KRS"};

        bottomNavigation.setOnTabSelectedListener(new AHBottomNavigation.OnTabSelectedListener() {
            @Override
            public boolean onTabSelected(int position, boolean wasSelected) {
                Toast.makeText(getActivity(), "Pilihan: "+msgs[position], Toast.LENGTH_SHORT).show();
                return true;
            }
        });

        ((AppCompatActivity)getActivity()).getSupportActionBar().setTitle("News");

        adapter = new NewsListAdapter(new NewsProvider().getNews());
        recView.setAdapter(adapter);
        return view;
    }
}

WrapContentViewPager.java

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;

public class WrapContentViewPager extends ViewPager {
    public WrapContentViewPager(Context context) {
        super(context);
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int height = 0;
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
            int h = child.getMeasuredHeight();
            if (h > height) height = h;
        }

        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
}

ViewPagerAdapter.java

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import net.devbyzero.app.pascatrisakti.R;

public class ViewPagerAdapter extends PagerAdapter {

    Context context;
    int[] flag;
    LayoutInflater inflater;

    public ViewPagerAdapter(Context context, int[] flag){
        this.context = context;
        this.flag = flag;
    }

    @Override
    public int getCount() {
        return flag.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return (view == (RelativeLayout) object);
    }

    @Override
    public float getPageWidth(int position) {
        return 0.7f;
    }


    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView imgflag;

        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View itemView = inflater.inflate(R.layout.vp_item, container,false);

        // Locate the ImageView in vp_item.xml
        imgflag = (ImageView) itemView.findViewById(R.id.flag);

        // Capture position and set to the ImageView
        imgflag.setImageResource(flag[position]);

        // Add viewpager_item.xml to ViewPager
        ((ViewPager) container).addView(itemView);

        return itemView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // Remove viewpager_item.xml from ViewPager
        ((ViewPager) container).removeView((RelativeLayout) object);
    }
}

vp_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:padding="0.5dp" >

    <ImageView
        android:id="@+id/flag"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:scaleType="fitXY"
        android:padding="0.25dp" />

</RelativeLayout>

fragment_news.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        >

        <!-- for displaying ads -->
        <net.devbyzero.app.pascatrisakti.WrapContentViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </net.devbyzero.app.pascatrisakti.WrapContentViewPager>

        <me.relex.circleindicator.CircleIndicator
            android:id="@+id/lldots"
            android:layout_width="match_parent"
            android:layout_height="48dp"/>


        <!-- for displaying news -->
        <android.support.v7.widget.RecyclerView
            android:id="@+id/news_list"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            />
    </LinearLayout>

    <!-- bottom navigation -->
    <com.aurelhubert.ahbottomnavigation.AHBottomNavigation
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>
Solution

  • It's not a gap. It's your CircleIndicator view which has 48dp height.

    <me.relex.circleindicator.CircleIndicator
    android:id="@+id/lldots"
    android:layout_width="match_parent"
    android:layout_height="48dp"/>

    Modify this accordingly. Better to use a frame or relative layout to show this dots on your WrapContentViewPager with transparent background. These dots are hardly visible with that background anyway.