Home>

I want to create a screen like smart news using Android tablayout.

mPager = (ViewPager) findViewById (R.id.viewpager);
        mPager.setAdapter (new NewsCategoryPageAdapter (getSupportFragmentManager (), ListnewsActivity.this, ""));
        mPager.addOnPageChangeListener (new ViewPager.OnPageChangeListener () {
            @Override
            public void onPageScrolled (int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected (int position) {
                util.log (TAG, "SelectTab:" + position);
            }
            @Override
            public void onPageScrollStateChanged (int state) {
            }
        });
        TabLayout tabLayout = (TabLayout) findViewById (R.id.tabs);
        tabLayout.setupWithViewPager (mPager);
        mCategory = session.getCategoryList ();
        LinearLayout tabsContainer = (LinearLayout) tabLayout.getChildAt (0);
        for (int i = 0;i<mCategory.size ();i ++) {
            LinearLayout childLayout = (LinearLayout) tabsContainer.getChildAt (i);
            LinearLayout tabView = (LinearLayout) childLayout.getChildAt (0) .getParent ();
            Drawable drawable = tabView.getBackground ();
            String color = mCategory.get (i) .getColor ();
            //drawable.setColorFilter(Color.parseColor(color), PorterDuff.Mode.SRC_ATOP);
            drawable.setTint (Color.parseColor (color));
            tabView.setBackground (drawable);
            util.log (TAG, "TabHeight:" + tabView.getHeight ());
        }
    }
Code


Currently, ViewPager can switch between individual tab colors and pages.
However, when I select a tab, I want to make it higher than an unselected tab, but I can't do it.

Isn't it possible to change the height of individual tabs by using tabLayout in the first place?

I would appreciate it if you could lend me your wisdom.

  • Answer # 1

    Custom layouts can be used for TabLayout items, allowing for flexible customization. This can be achieved by implementing a view that switches the margin size when selected.

    TabLayout tabLayout = (TabLayout) findViewById (R.id.tabs);
    tabLayout.setupWithViewPager (mPager);
    // Set custom layout for each tab
    for (int i = 0;i<tabLayout.getTabCount ();++ i) {
        tabLayout.getTabAt (i) .setCustomView (R.layout.tab_item);
    }

    res/layout/tab_item.xml

    <? xml version = "1.0" encoding = "utf-8"?>
    <xxx.widget.TabItemLayout
        xmlns: android = "http://schemas.android.com/apk/res/android"
        android: layout_width = "match_parent"
        android: layout_height = "match_parent"
        android: orientation = "vertical"
        >
        <TextView
            android: id = "@ android: id/text1"
            android: layout_width = "wrap_content"
            android: layout_height = "match_parent"
            android: layout_gravity = "center"
            android: gravity = "center"
            />
    </xxx.widget.TabItemLayout>

    TabItemLayout.java

    // View implementation example that switches the margin size depending on the selected state
    class TabItemLayout extends LinearLayout {
        // Constructor ...
        @Override
        public void setSelected (boolean selected) {
            super.setSelected (selected);
            LayoutParams params = getLayoutParams ();
            if (params instanceOf MarginLayoutParams) {
                if (selected) {
                    ((MarginLayoutParams) params) .topMargin = 0;
                } else {
                    ((MarginLayoutParams) params) .topMargin = 10;
                }
            }
            setLayoutParams (params);
        }
    }