Devlight / NavigationTabBar

Navigation tab bar with colorful interactions.
Apache License 2.0
4.95k stars 861 forks source link

Implementing fragments #139

Open ghost opened 5 years ago

ghost commented 5 years ago

Could someone provide a sample code on how I can insert fragment I have seen issue #107 but didn't help I get tons of errors, so can someone make for me an example file with horizontal bottom nav bar with those 5 fragments? I know that this is like begging but I am quite new to this stuff.

IckycHIk commented 5 years ago

I dont know why.Bec. idont se your error.But this code work for me

private void initUI() { final ViewPager viewPager = (ViewPager) findViewById(R.id.vp_vertical_ntb); viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { // Returns total number of pages @Override public int getCount() { return 8; }

        // Returns the fragment to display for that page
        @Override
        public Fragment getItem(int position) {

            switch (position) {
                default:
                    return new Fragment();///Your FRAGMENTS
            }
        }

        // Returns the page title for the top indicator
        @Override
        public CharSequence getPageTitle(int position) {
            return "Page" + position;
        }

    });

    final String[] colors = getResources().getStringArray(R.array.vertical_ntb);

    final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb_vertical);
    final ArrayList<NavigationTabBar.Model> models = new ArrayList<>();
    models.add(
            new NavigationTabBar.Model.Builder(
                    getResources().getDrawable(R.drawable.ic_first),
                    Color.parseColor(colors[0]))
                    .title("ic_first")
                    .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))
                    .build()
    );
    models.add(
            new NavigationTabBar.Model.Builder(
                    getResources().getDrawable(R.drawable.ic_second),
                    Color.parseColor(colors[1]))
                    .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))
                    .title("ic_second")
                    .build()
   );
    models.add(
            new NavigationTabBar.Model.Builder(
                    getResources().getDrawable(R.drawable.ic_third),
                    Color.parseColor(colors[2]))
                    .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))
                    .title("ic_third")
                    .build()
    );
    models.add(
            new NavigationTabBar.Model.Builder(
                    getResources().getDrawable(R.drawable.ic_fourth),
                    Color.parseColor(colors[3]))
                    .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))
                    .title("ic_fourth")
                    .build()
    );
    models.add(
            new NavigationTabBar.Model.Builder(
                    getResources().getDrawable(R.drawable.ic_fifth),
                    Color.parseColor(colors[4]))
                    .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))
                    .title("ic_fifth")
                    .build()
    );
    models.add(
            new NavigationTabBar.Model.Builder(
                    getResources().getDrawable(R.drawable.ic_sixth),
                    Color.parseColor(colors[5]))
                    .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))
                    .title("ic_sixth")
                    .build()
    );
    models.add(
            new NavigationTabBar.Model.Builder(
                    getResources().getDrawable(R.drawable.ic_seventh),
                    Color.parseColor(colors[6]))
                    .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))
                    .title("ic_seventh")
                    .build()
    );
    models.add(
            new NavigationTabBar.Model.Builder(
                    getResources().getDrawable(R.drawable.ic_eighth),
                    Color.parseColor(colors[7]))
                    .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))
                    .title("ic_eighth")
                    .build()
    );

    navigationTabBar.setModels(models);
    navigationTabBar.setViewPager(viewPager, 4);
IckycHIk commented 5 years ago

AND i have some idea. But i think that is very bad code but why not... I create view fragment_container <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/containerFragment"

/>

And than add Fragment in this view. By position you can add Fragment

final ViewPager viewPager = (ViewPager) findViewById(R.id.vp_vertical_ntb); viewPager.setAdapter(new PagerAdapter() { @Override public int getCount() { return 8; }

        @Override
        public boolean isViewFromObject(final View view, final Object object) {
            return view.equals(object);
        }

        @Override
        public void destroyItem(final View container, final int position, final Object object) {
            ((ViewPager) container).removeView((View) object);
        }

        @Override
        public Object instantiateItem(final ViewGroup container, final int position) {
            final View view = LayoutInflater.from(
                    getBaseContext()).inflate(R.layout.fragment_container, null, false);

                FragmentManager fragmentManager = getSupportFragmentManager();
                fragmentManager.beginTransaction()
                        .replace(R.id.containerFragment,new ListFragment()//Your Fragment)
                        .commit();
            container.addView(view);
            return view;
        }
    });
ghost commented 5 years ago

@IckycHIk Can you just open up android studio and quickly type the code with some placeholder fragments and post it on Mega or Google Drive? Or the harder way I will post the errors and you correct me 👍 xD

ghost commented 5 years ago

@IckycHIk Here is My error LOG:

  java.lang.IllegalArgumentException: width and height must be > 0
        at android.graphics.Bitmap.createBitmap(Bitmap.java:1033)
        at android.graphics.Bitmap.createBitmap(Bitmap.java:1000)
        at android.graphics.Bitmap.createBitmap(Bitmap.java:950)
        at android.graphics.Bitmap.createBitmap(Bitmap.java:911)
        at devlight.io.library.ntb.NavigationTabBar.onDraw(NavigationTabBar.java:1077)
        at android.view.View.draw(View.java:20207)
        at android.view.View.buildDrawingCacheImpl(View.java:19478)
        at android.view.View.buildDrawingCache(View.java:19338)
        at android.view.View.draw(View.java:19927)
        at android.view.ViewGroup.drawChild(ViewGroup.java:4333)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4112)
        at android.view.View.updateDisplayListIfDirty(View.java:19073)
        at android.view.View.draw(View.java:19935)
        at android.view.ViewGroup.drawChild(ViewGroup.java:4333)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4112)
        at android.view.View.updateDisplayListIfDirty(View.java:19073)
        at android.view.View.draw(View.java:19935)
        at android.view.ViewGroup.drawChild(ViewGroup.java:4333)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4112)
        at android.view.View.updateDisplayListIfDirty(View.java:19073)
        at android.view.View.draw(View.java:19935)
        at android.view.ViewGroup.drawChild(ViewGroup.java:4333)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4112)
        at android.view.View.updateDisplayListIfDirty(View.java:19073)
        at android.view.View.draw(View.java:19935)
        at android.view.ViewGroup.drawChild(ViewGroup.java:4333)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4112)
        at android.view.View.updateDisplayListIfDirty(View.java:19073)
        at android.view.View.draw(View.java:19935)
        at android.view.ViewGroup.drawChild(ViewGroup.java:4333)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4112)
        at android.view.View.draw(View.java:20210)
        at com.android.internal.policy.DecorView.draw(DecorView.java:780)
        at android.view.View.updateDisplayListIfDirty(View.java:19082)
        at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:686)
        at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:692)
        at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:801)
        at android.view.ViewRootImpl.draw(ViewRootImpl.java:3311)
        at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:3115)
        at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2484)
        at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1460)
        at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7183)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:949)
        at android.view.Choreographer.doCallbacks(Choreographer.java:761)
        at android.view.Choreographer.doFrame(Choreographer.java:696)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:935)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:193)
        at android.app.ActivityThread.main(ActivityThread.java:6669)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

Here is my Activity Main.xml

<?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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:tools="http://schemas.android.com/tools"
        android:orientation="vertical">

        <android.support.v4.view.ViewPager
            android:id="@+id/main_view_pager"

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

        <devlight.io.library.ntb.NavigationTabBar
            android:id="@+id/ntb_horizontal"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            app:ntb_badge_gravity="top"
            app:ntb_badge_position="right"
            app:ntb_badged="true"
            app:ntb_scaled="true"
            app:ntb_tinted="true"
            app:ntb_title_mode="all"
            app:ntb_titled="true"
            app:ntb_swiped="true"/>

    </LinearLayout>

My MainActivity

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
        initUI();
        setupFirebaseAuth();
        initImageLoader();
        viewPager = findViewById(R.id.main_view_pager);
        TypefaceProvider.registerDefaultIconSets();
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

    }

More from Main Activity:

 private void initUI() {
        final ViewPager viewPager = (ViewPager) findViewById(R.id.main_view_pager);
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            // Returns total number of pages
            public int getCount() {
                return 8;
            }
        // Returns the fragment to display for that page
        @Override
        public Fragment getItem(int position) {
        switch (position) {
            case 1:
                return new FeedsFragment();
            case 2:
                return new FeedsFragment();
            case 3:
                return new CommunityFragment();
            case 4:
                return new ProfileFragment();
            case 5:
                return new FeedsFragment();
            case 6:
                return new FeedsFragment();
            case 7:
                return new FeedsFragment();
            case 8:
                return new FeedsFragment();
            default:
                return new FeedsFragment();///Your FRAGMENTS
        }
    }

    // Returns the page title for the top indicator
    @Override
    public CharSequence getPageTitle(int position) {
        return "Page" + position;
    }

});

final String[] colors = getResources().getStringArray(R.array.vertical_ntb);

final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb_horizontal);
final ArrayList<NavigationTabBar.Model> models = new ArrayList<>();
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_first),
                Color.parseColor(colors[0]))
                .title("ic_first")
                .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))
                .build()
);
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_second),
                Color.parseColor(colors[1]))
                .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))
                .title("ic_second")
                .build()

); models.add( new NavigationTabBar.Model.Builder( getResources().getDrawable(R.drawable.ic_third), Color.parseColor(colors[2])) .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth)) .title("ic_third") .build() ); models.add( new NavigationTabBar.Model.Builder( getResources().getDrawable(R.drawable.ic_fourth), Color.parseColor(colors[3])) .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth)) .title("ic_fourth") .build() ); models.add( new NavigationTabBar.Model.Builder( getResources().getDrawable(R.drawable.ic_fifth), Color.parseColor(colors[4])) .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth)) .title("ic_fifth") .build() ); models.add( new NavigationTabBar.Model.Builder( getResources().getDrawable(R.drawable.ic_sixth), Color.parseColor(colors[5])) .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth)) .title("ic_sixth") .build() ); models.add( new NavigationTabBar.Model.Builder( getResources().getDrawable(R.drawable.ic_seventh), Color.parseColor(colors[6])) .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth)) .title("ic_seventh") .build() ); models.add( new NavigationTabBar.Model.Builder( getResources().getDrawable(R.drawable.ic_eighth), Color.parseColor(colors[7])) .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth)) .title("ic_eighth") .build() );

navigationTabBar.setModels(models);
navigationTabBar.setViewPager(viewPager, 4);

}}

IckycHIk commented 5 years ago

Can you Add to your gid project? If its not posible . I have 1 question .What type of NavTab Bar you want use.I make some example for you

ghost commented 5 years ago

@IckycHIk I made it work thanks mate