{"id":5679,"date":"2016-12-09T09:37:38","date_gmt":"2016-12-09T07:37:38","guid":{"rendered":"http:\/\/www.fandroid.info\/?p=5679"},"modified":"2019-03-04T17:53:15","modified_gmt":"2019-03-04T15:53:15","slug":"obzor-biblioteki-navigationtabbar-dlya-android-ot-komandy-devlight","status":"publish","type":"post","link":"https:\/\/www.fandroid.info\/obzor-biblioteki-navigationtabbar-dlya-android-ot-komandy-devlight\/","title":{"rendered":"\u041e\u0431\u0437\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 NavigationTabBar \u0434\u043b\u044f Android \u043e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b DevLight Overview of the NavigationTabBar for Android from DevLight"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<p>[:ru]\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u043c \u0432\u044b\u043f\u0443\u0441\u043a\u0435 \u0414\u0438\u0437\u0430\u0439\u043d\u0430 \u0430\u043d\u0434\u0440\u043e\u0438\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b DevLight. \u041a\u0442\u043e \u043d\u0435 \u0432 \u043a\u0443\u0440\u0441\u0435, \u044d\u0442\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u0438 \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0441 \u0443\u0440\u043e\u043a\u043e\u0432 \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u043a\u0430\u043d\u0430\u043b\u0435. \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0438\u0445 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0444\u0438\u0440\u043c\u0430 \u0438 \u043a\u0440\u0443\u0442\u044b\u0435 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0438. \u0418\u043d\u0442\u0435\u0440\u0432\u044c\u044e \u0441 \u0440\u0435\u0431\u044f\u0442\u0430\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u043e <a href=\"\/devlight-istoriya-uspeha-android-razrabotchikov\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u0441\u0441\u044b\u043b\u043a\u0435<\/a>. \u0420\u0435\u0431\u044f\u0442\u0430 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043e \u0442\u043e\u043c, \u0447\u0435\u0433\u043e \u0434\u043e\u0441\u0442\u0438\u0433\u043b\u0438 \u0438 \u0434\u0435\u043b\u044f\u0442\u0441\u044f \u0441\u0435\u043a\u0440\u0435\u0442\u0430\u043c\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u0443\u0441\u043f\u0435\u0445\u0430 \u0441 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438.<\/p>\n<p><a href=\"https:\/\/github.com\/DevLight-Mobile-Agency\" target=\"_blank\" rel=\"noopener noreferrer\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 <\/a>\u043a\u043e\u043c\u0430\u043d\u0434\u044b DevLight \u043d\u0430 Github \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041e\u0434\u043d\u0443 \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u043c\u044b \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0435\u0433\u043e\u0434\u043d\u044f. \u042d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 NavigationTabBar. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0430\u043d\u0435\u043b\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 &#8212; \u0432\u043d\u0438\u0437\u0443, \u0432\u0432\u0435\u0440\u0445\u0443 \u0438\u043b\u0438 \u0441\u0431\u043e\u043a\u0443. NavigationTabBar \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 SDK API 11, \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0438 \u043b\u0435\u0433\u043a\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u043c\u0430\u043a\u0435\u0442\u0430 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<p><iframe loading=\"lazy\" width=\"700\" height=\"394\" src=\"https:\/\/www.youtube.com\/embed\/nGikO-tbSsg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>\u041d\u0430 <a href=\"https:\/\/github.com\/DevLight-Mobile-Agency\/NavigationTabBar\" target=\"_blank\" rel=\"noopener noreferrer\">\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 <\/a>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 GitHub \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442, \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u044b \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0437\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u042f \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 Android Studio. \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0435\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e.<\/p>\n<p>\u0412 MainActivity \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u0437\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 Activity.\n<\/p><pre class=\"lang:default decode:true\" title=\"MainActivity.java\">package devlight.io.sample;\n\nimport android.app.Activity;\nimport android.content.Intent;\nimport android.os.Bundle;\nimport android.support.v4.view.ViewCompat;\nimport android.support.v4.view.ViewPropertyAnimatorListener;\nimport android.view.View;\n\npublic class MainActivity extends Activity implements View.OnClickListener {\n\n    @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_main);\n        initUI();\n    }\n\n    private void initUI() {\n        final View btnHorizontalNtb = findViewById(R.id.btn_horizontal_ntb);\n        btnHorizontalNtb.setOnClickListener(this);\n        final View btnHorizontalCoordinatorNtb = findViewById(R.id.btn_horizontal_coordinator_ntb);\n        btnHorizontalCoordinatorNtb.setOnClickListener(this);\n        final View btnTopHorizontalNtb = findViewById(R.id.btn_horizontal_top_ntb);\n        btnTopHorizontalNtb.setOnClickListener(this);\n        final View btnVerticalNtb = findViewById(R.id.btn_vertical_ntb);\n        btnVerticalNtb.setOnClickListener(this);\n        final View btnSamplesNtb = findViewById(R.id.btn_samples_ntb);\n        btnSamplesNtb.setOnClickListener(this);\n    }\n\n    @Override\n    public void onClick(final View v) {\n        ViewCompat.animate(v)\n                .setDuration(200)\n                .scaleX(0.9f)\n                .scaleY(0.9f)\n                .setInterpolator(new CycleInterpolator())\n                .setListener(new ViewPropertyAnimatorListener() {\n                    @Override\n                    public void onAnimationStart(final View view) {\n\n                    }\n\n                    @Override\n                    public void onAnimationEnd(final View view) {\n                        switch (v.getId()) {\n                            case R.id.btn_horizontal_ntb:\n                                startActivity(\n                                        new Intent(MainActivity.this, HorizontalNtbActivity.class)\n                                );\n                                break;\n                            case R.id.btn_horizontal_top_ntb:\n                                startActivity(\n                                        new Intent(MainActivity.this, TopHorizontalNtbActivity.class)\n                                );\n                                break;\n                            case R.id.btn_horizontal_coordinator_ntb:\n                                startActivity(\n                                        new Intent(MainActivity.this, HorizontalCoordinatorNtbActivity.class)\n                                );\n                                break;\n                            case R.id.btn_vertical_ntb:\n                                startActivity(\n                                        new Intent(MainActivity.this, VerticalNtbActivity.class)\n                                );\n                                break;\n                            case R.id.btn_samples_ntb:\n                                startActivity(\n                                        new Intent(MainActivity.this, SamplesNtbActivity.class)\n                                );\n                                break;\n                            default:\n                                break;\n                        }\n                    }\n\n                    @Override\n                    public void onAnimationCancel(final View view) {\n\n                    }\n                })\n                .withLayer()\n                .start();\n    }\n\n    private class CycleInterpolator implements android.view.animation.Interpolator {\n\n        private final float mCycles = 0.5f;\n\n        @Override\n        public float getInterpolation(final float input) {\n            return (float) Math.sin(2.0f * mCycles * Math.PI * input);\n        }\n    }\n}\n<\/pre>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 NavigationTabBar.<a href=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-231449.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" class=\"aligncenter wp-image-5681 size-medium\" src=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-231449-153x300.png\" width=\"153\" height=\"300\"\/><\/a><\/p>\n<p>\u0415\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 activity_horizontal_ntb.xml.\n<\/p><pre class=\"lang:default decode:true\" title=\"activity_horizontal_ntb.xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;LinearLayout\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:background=\"#423752\"\n    android:orientation=\"vertical\"&gt;\n\n    &lt;android.support.v4.view.ViewPager\n        android:id=\"@+id\/vp_horizontal_ntb\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"0dp\"\n        android:layout_weight=\"1\"\/&gt;\n\n    &lt;devlight.io.library.ntb.NavigationTabBar\n        android:id=\"@+id\/ntb_horizontal\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"60dp\"\n        app:ntb_badge_gravity=\"top\"\n        app:ntb_badge_position=\"right\"\n        app:ntb_badged=\"true\"\n        app:ntb_scaled=\"true\"\n        app:ntb_tinted=\"true\"\n        app:ntb_title_mode=\"all\"\n        app:ntb_titled=\"true\"\n        app:ntb_swiped=\"true\"\/&gt;\n\n&lt;\/LinearLayout&gt;\n<\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c LinearLayout \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 ViewPager \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0432\u043a\u043b\u0430\u0434\u043e\u043a.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0437\u0434\u0435\u0441\u044c NavigationTabBar \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Devlight. \u041a\u0440\u043e\u043c\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0437\u0434\u0435\u0441\u044c \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0435\u0439\u0434\u0436\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043d\u043e\u043f\u043a\u0438, \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u0435\u0439\u0434\u0436\u0430, \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0442\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 ntb_swiped &#8212; \u044f \u043d\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0441\u044f, \u0437\u0430 \u0447\u0442\u043e \u043e\u043d \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442. \u041a\u0442\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u0442\u0441\u044f &#8212; \u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/p>\n<p>\u0412\u0435\u0441\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 NavigationTabBar \u0437\u0434\u0435\u0441\u044c:\n<\/p><pre class=\"lang:default decode:true\">&lt;devlight.io.library.ntb.NavigationTabBar\n   android:id=\"@+id\/ntb\"\n   android:layout_width=\"match_parent\"\n   android:layout_height=\"50dp\"\n   app:ntb_animation_duration=\"400\"\n   app:ntb_preview_colors=\"@array\/colors\"\n   app:ntb_corners_radius=\"10dp\"\n   app:ntb_active_color=\"#fff\"\n   app:ntb_inactive_color=\"#000\"\n   app:ntb_badged=\"true\"\n   app:ntb_titled=\"true\"\n   app:ntb_scaled=\"true\"\n   app:ntb_tinted=\"true\"\n   app:ntb_title_mode=\"all\"\n   app:ntb_badge_position=\"right\"\n   app:ntb_badge_gravity=\"top\"\n   app:ntb_badge_bg_color=\"#ffff0000\"\n   app:ntb_badge_title_color=\"#ffffffff\"\n   app:ntb_typeface=\"fonts\/custom_typeface.ttf\"\n   app:ntb_badge_use_typeface=\"true\"\n   app:ntb_swiped=\"true\"\n   app:ntb_bg_color=\"#000\"\n   app:ntb_icon_size_fraction=\"0.5\"\n   app:ntb_badge_size=\"10sp\"\n   app:ntb_title_size=\"10sp\"\/&gt;<\/pre>\n<p>\u0421\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u043e\u0434 HorisontalNtbActivity. \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 initUI \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f viewPager \u0438 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0430\u0434\u0430\u043f\u0442\u0435\u0440 \u0441 \u043f\u044f\u0442\u044c\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0414\u0430\u043b\u0435\u0435 \u0438\u0434\u0443\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u0430\u043a\u0435\u0442\u0430 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 TextView\n<\/p><pre class=\"lang:default decode:true\">import android.app.Activity;\nimport android.graphics.Color;\nimport android.os.Bundle;\nimport android.support.v4.view.PagerAdapter;\nimport android.support.v4.view.ViewPager;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\nimport android.widget.TextView;\n\nimport java.util.ArrayList;\n\nimport devlight.io.library.ntb.NavigationTabBar;\n\n\/**\n * Created by GIGAMOLE on 28.03.2016.\n *\/\npublic class HorizontalNtbActivity extends Activity {\n\n    @Override\n    protected void onCreate(final Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_horizontal_ntb);\n        initUI();\n    }\n\n    private void initUI() {\n        final ViewPager viewPager = (ViewPager) findViewById(R.id.vp_horizontal_ntb);\n        viewPager.setAdapter(new PagerAdapter() {\n            @Override\n            public int getCount() {\n                return 5;\n            }\n\n            @Override\n            public boolean isViewFromObject(final View view, final Object object) {\n                return view.equals(object);\n            }\n\n            @Override\n            public void destroyItem(final View container, final int position, final Object object) {\n                ((ViewPager) container).removeView((View) object);\n            }\n\n            @Override\n            public Object instantiateItem(final ViewGroup container, final int position) {\n                final View view = LayoutInflater.from(\n                        getBaseContext()).inflate(R.layout.item_vp, null, false);\n\n                final TextView txtPage = (TextView) view.findViewById(R.id.txt_vp_item_page);\n                txtPage.setText(String.format(\"Page #%d\", position));\n\n                container.addView(view);\n                return view;\n            }\n        });<\/pre>\n<p>\u0421\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0438\u0436\u0435. \u0417\u0434\u0435\u0441\u044c \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432 \u0446\u0432\u0435\u0442\u043e\u0432 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043f\u0430\u043d\u0435\u043b\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438.\n<\/p><pre class=\"\">final String[] colors = getResources().getStringArray(R.array.default_preview);<\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 NavigationTabBar.<br \/>\n\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043f\u0430\u043d\u0435\u043b\u0438 NavigationTabBar.\n<\/p><pre class=\"\">final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb_horizontal);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models = new ArrayList&lt;&gt;();\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first),\n                        Color.parseColor(colors[0]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_sixth))\n                        .title(\"Heart\")\n                        .badgeTitle(\"NTB\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_second),\n                        Color.parseColor(colors[1]))\n\/\/                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .title(\"Cup\")\n                        .badgeTitle(\"with\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_third),\n                        Color.parseColor(colors[2]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_seventh))\n                        .title(\"Diploma\")\n                        .badgeTitle(\"state\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth),\n                        Color.parseColor(colors[3]))\n\/\/                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .title(\"Flag\")\n                        .badgeTitle(\"icon\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth),\n                        Color.parseColor(colors[4]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .title(\"Medal\")\n                        .badgeTitle(\"777\")\n                        .build()\n        );<\/pre>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u043a\u043e\u043d\u043a\u0430, \u0446\u0432\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0438\u043a\u043e\u043d\u043a\u0438 (\u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0446\u0432\u0435\u0442\u043e\u0432 \u0432\u044b\u0448\u0435), \u0438\u043a\u043e\u043d\u043a\u0430 \u0434\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438, \u0442\u0435\u043a\u0441\u0442 \u043a\u043d\u043e\u043f\u043a\u0438, \u0438 \u0442\u0435\u043a\u0441\u0442 \u0431\u0435\u0439\u0434\u0436\u0430.<\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043d\u043e\u043f\u043e\u043a \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0443 navigationTabBar \u043c\u0435\u0442\u043e\u0434\u043e\u043c setModels. \u0422\u0430\u043a\u0436\u0435 \u0435\u043c\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f ViewPager \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u0435\u043d\u044b \u0432\u043a\u043b\u0430\u0434\u043e\u043a. \u0414\u0430\u043b\u0435\u0435 \u0438\u0434\u0443\u0442 \u043f\u0443\u0441\u0442\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f. \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 onPageSelected \u0434\u043b\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u0435\u0439\u0434\u0436.\n<\/p><pre class=\"\">navigationTabBar.setModels(models);\nnavigationTabBar.setViewPager(viewPager, 2);\nnavigationTabBar.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {\n    @Override\n    public void onPageScrolled(final int position, final float positionOffset, final int positionOffsetPixels) {\n\n    }\n\n    @Override\n    public void onPageSelected(final int position) {\n        navigationTabBar.getModels().get(position).hideBadge();\n    }\n\n    @Override\n    public void onPageScrollStateChanged(final int state) {\n\n    }\n});<\/pre>\n<p>\u041d\u0438\u0436\u0435 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043c\u0435\u0442\u043e\u0434 navigationTabBar.postDelayed, \u0433\u0434\u0435 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u043d\u043e\u0435 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u0435\u0439\u0434\u0436\u0435\u0439 \u043d\u0430\u0434 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 Activity.\n<\/p><pre class=\"\">navigationTabBar.postDelayed(new Runnable() {\n            @Override\n            public void run() {\n                for (int i = 0; i &lt; navigationTabBar.getModels().size(); i++) {\n                    final NavigationTabBar.Model model = navigationTabBar.getModels().get(i);\n                    navigationTabBar.postDelayed(new Runnable() {\n                        @Override\n                        public void run() {\n                            model.showBadge();\n                        }\n                    }, i * 100);\n                }\n            }\n        }, 500);\n    }\n}<\/pre>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 NavigationTabBar.<\/p>\n<p><a href=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-231734.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" class=\"aligncenter wp-image-5682 size-medium\" src=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-231734-153x300.png\" width=\"153\" height=\"300\"\/><\/a><\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0435 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0437\u0434\u0435\u0441\u044c NavigationTabBar \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438, \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u0430\u043a AppBarLayout, CollapsingToolbarLayout, Toolbar \u0438 FloatingActionButton. \u0417\u0430 \u0441\u043b\u0430\u0436\u0435\u043d\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 CoordinatorLayout.\n<\/p><pre class=\"lang:default decode:true\" title=\"activity_horizontal_coordinator_ntb.xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;android.support.design.widget.CoordinatorLayout\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    android:id=\"@+id\/parent\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:background=\"#423752\"\n    android:fitsSystemWindows=\"true\"\n    android:orientation=\"vertical\"&gt;\n\n    &lt;android.support.design.widget.AppBarLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"180dp\"\n        android:fitsSystemWindows=\"true\"\n        android:theme=\"@style\/AppTheme.AppBarOverlay\"&gt;\n\n        &lt;android.support.design.widget.CollapsingToolbarLayout\n            android:id=\"@+id\/toolbar\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"match_parent\"\n            android:fitsSystemWindows=\"true\"\n            app:title=\"@string\/app_name\"\n            app:expandedTitleTextAppearance=\"@null\"\n            app:contentScrim=\"#605271\"\n            app:layout_scrollFlags=\"scroll|exitUntilCollapsed\"&gt;\n\n            &lt;ImageView\n                android:id=\"@+id\/backdrop\"\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"match_parent\"\n                android:fitsSystemWindows=\"true\"\n                android:background=\"#605271\"\n                android:src=\"@drawable\/ic_eighth\"\n                android:tint=\"#9f90af\"\n                android:padding=\"32dp\"\n                app:layout_collapseMode=\"pin\"\/&gt;\n\n            &lt;android.support.v7.widget.Toolbar\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"?attr\/actionBarSize\"\n                android:fitsSystemWindows=\"true\"\n                app:layout_collapseMode=\"parallax\"\n                app:title=\"@string\/app_name\"\n                app:popupTheme=\"@style\/AppTheme.AppBarOverlay\"\/&gt;\n\n        &lt;\/android.support.design.widget.CollapsingToolbarLayout&gt;\n    &lt;\/android.support.design.widget.AppBarLayout&gt;\n\n    &lt;android.support.v4.view.ViewPager\n        android:id=\"@+id\/vp_horizontal_ntb\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        app:layout_behavior=\"@string\/appbar_scrolling_view_behavior\"\/&gt;\n\n    &lt;devlight.io.library.ntb.NavigationTabBar\n        android:id=\"@+id\/ntb_horizontal\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"60dp\"\n        android:layout_gravity=\"bottom\"\n        app:ntb_badge_size=\"12sp\"\n        app:ntb_badge_bg_color=\"#ffff0000\"\n        app:ntb_badge_gravity=\"top\"\n        app:ntb_badge_position=\"left\"\n        app:ntb_badge_title_color=\"#ffffffff\"\n        app:ntb_badge_use_typeface=\"true\"\n        app:ntb_badged=\"true\"\n        app:ntb_typeface=\"fonts\/agency.ttf\"\/&gt;\n\n    &lt;android.support.design.widget.FloatingActionButton\n        android:id=\"@+id\/fab\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_gravity=\"bottom|end\"\n        android:layout_marginBottom=\"76dp\"\n        android:layout_marginRight=\"16dp\"\n        android:layout_marginEnd=\"16dp\"\n        android:tint=\"#9f90af\"\n        android:src=\"@drawable\/ic_first\"\n        app:backgroundTint=\"#605271\"\/&gt;\n\n&lt;\/android.support.design.widget.CoordinatorLayout&gt;\n<\/pre>\n<p>\u041a\u043e\u0434 \u0432 Activity \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0437\u0430 \u0441\u0447\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.\n<\/p><pre class=\"lang:default decode:true\" title=\"HorizontalCoordinatorNtbActivity.java\">package devlight.io.sample;\n\nimport android.app.Activity;\nimport android.graphics.Color;\nimport android.os.Bundle;\nimport android.support.design.widget.CollapsingToolbarLayout;\nimport android.support.design.widget.CoordinatorLayout;\nimport android.support.design.widget.Snackbar;\nimport android.support.v4.view.PagerAdapter;\nimport android.support.v4.view.ViewPager;\nimport android.support.v7.widget.LinearLayoutManager;\nimport android.support.v7.widget.RecyclerView;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\nimport android.widget.TextView;\n\nimport devlight.io.library.ntb.NavigationTabBar;\n\nimport java.util.ArrayList;\nimport java.util.Random;\n\n\/**\n * Created by GIGAMOLE on 28.03.2016.\n *\/\npublic class HorizontalCoordinatorNtbActivity extends Activity {\n\n    @Override\n    protected void onCreate(final Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_horizontal_coordinator_ntb);\n        initUI();\n    }\n\n    private void initUI() {\n        final ViewPager viewPager = (ViewPager) findViewById(R.id.vp_horizontal_ntb);\n        viewPager.setAdapter(new PagerAdapter() {\n            @Override\n            public int getCount() {\n                return 5;\n            }\n\n            @Override\n            public boolean isViewFromObject(final View view, final Object object) {\n                return view.equals(object);\n            }\n\n            @Override\n            public void destroyItem(final View container, final int position, final Object object) {\n                ((ViewPager) container).removeView((View) object);\n            }\n\n            @Override\n            public Object instantiateItem(final ViewGroup container, final int position) {\n                final View view = LayoutInflater.from(\n                        getBaseContext()).inflate(R.layout.item_vp_list, null, false);\n\n                final RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.rv);\n                recyclerView.setHasFixedSize(true);\n                recyclerView.setLayoutManager(new LinearLayoutManager(\n                                getBaseContext(), LinearLayoutManager.VERTICAL, false\n                        )\n                );\n                recyclerView.setAdapter(new RecycleAdapter());\n\n                container.addView(view);\n                return view;\n            }\n        });\n\n<\/pre>\n<p>ViewPager \u0437\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 RecyclerView \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430.\n<\/p><pre class=\"lang:default decode:true\" title=\"HorizontalCoordinatorNtbActivity.java\"> final String[] colors = getResources().getStringArray(R.array.default_preview);\n\n        final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb_horizontal);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models = new ArrayList&lt;&gt;();\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first),\n                        Color.parseColor(colors[0]))\n                        .title(\"Heart\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_second),\n                        Color.parseColor(colors[1]))\n                        .title(\"Cup\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_third),\n                        Color.parseColor(colors[2]))\n                        .title(\"Diploma\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth),\n                        Color.parseColor(colors[3]))\n                        .title(\"Flag\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth),\n                        Color.parseColor(colors[4]))\n                        .title(\"Medal\")\n                        .build()\n        );\n\n        navigationTabBar.setModels(models);\n        navigationTabBar.setViewPager(viewPager, 2);<\/pre>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f NavigationTabBar \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0430 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0432\u044b\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0431\u0435\u0439\u0434\u0436\u0438.\n<\/p><pre class=\"\">\/\/IMPORTANT: ENABLE SCROLL BEHAVIOUR IN COORDINATOR LAYOUT\nnavigationTabBar.setBehaviorEnabled(true);<\/pre>\n<p>\u0410 \u0432\u043e\u0442 \u0438 \u0432\u0430\u0436\u043d\u044b\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u044f. \u041c\u0435\u0442\u043e\u0434 navigationTabBar.setBehaviorEnabled \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435 \u0441 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438 \u0432 CoordinatorLayout.\n<\/p><pre class=\"\">navigationTabBar.setOnTabBarSelectedIndexListener(new NavigationTabBar.OnTabBarSelectedIndexListener() {\n    @Override\n    public void onStartTabSelected(final NavigationTabBar.Model model, final int index) {\n    }\n\n    @Override\n    public void onEndTabSelected(final NavigationTabBar.Model model, final int index) {\n        model.hideBadge();\n    }\n});\nnavigationTabBar.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {\n    @Override\n    public void onPageScrolled(final int position, final float positionOffset, final int positionOffsetPixels) {\n\n    }\n\n    @Override\n    public void onPageSelected(final int position) {\n\n    }\n\n    @Override\n    public void onPageScrollStateChanged(final int state) {\n\n    }\n});<\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432\u0438\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443.\n<\/p><pre class=\"\">final CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.parent);\nfindViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {\n    @Override\n    public void onClick(final View v) {\n        for (int i = 0; i &lt; navigationTabBar.getModels().size(); i++) {\n            final NavigationTabBar.Model model = navigationTabBar.getModels().get(i);\n            navigationTabBar.postDelayed(new Runnable() {\n                @Override\n                public void run() {\n                    final String title = String.valueOf(new Random().nextInt(15));\n                    if (!model.isBadgeShowed()) {\n                        model.setBadgeTitle(title);\n                        model.showBadge();\n                    } else model.updateBadgeTitle(title);\n                }\n            }, i * 100);\n        }<\/pre>\n<p>\u0415\u0449\u0435 \u043d\u0438\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 CoordinatorLayout. \u0417\u0430\u0442\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f FAB \u0438 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u043d\u0435\u0439 \u043d\u0430\u0434 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u043f\u0430\u043d\u0435\u043b\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0431\u0435\u0439\u0434\u0436\u0438, \u0430 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 coordinatorLayout.postDelayed \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f Snackbar \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c.\n<\/p><pre class=\"\"> coordinatorLayout.postDelayed(new Runnable() {\n            @Override\n            public void run() {\n                final Snackbar snackbar = Snackbar.make(navigationTabBar, \"Coordinator NTB\", Snackbar.LENGTH_SHORT);\n                snackbar.getView().setBackgroundColor(Color.parseColor(\"#9b92b3\"));\n                ((TextView) snackbar.getView().findViewById(R.id.snackbar_text))\n                        .setTextColor(Color.parseColor(\"#423752\"));\n                snackbar.show();\n            }\n        }, 1000);\n    }\n});<\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f CollapsingToolbarLayout &#8212; \u044d\u0442\u043e \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u0434\u043b\u044f \u0442\u0443\u043b\u0431\u0430\u0440\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0430\u044f \u044d\u0444\u0444\u0435\u043a\u0442 \u043a\u043e\u043b\u043b\u0430\u043f\u0441\u0438\u043d\u0433\u0430 &#8212; \u0440\u0430\u0437\u0440\u0443\u0448\u0435\u043d\u0438\u044f, \u0438\u043b\u0438 \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0442\u0443\u043b\u0431\u0430\u0440\u0430 \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435. \u0417\u0434\u0435\u0441\u044c \u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043f\u0440\u0438 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0430 \u0438 \u043f\u0440\u0438 \u043a\u043e\u043b\u043b\u0430\u043f\u0441\u0438\u043d\u0433\u0435.\n<\/p><pre class=\"\">final CollapsingToolbarLayout collapsingToolbarLayout =\n            (CollapsingToolbarLayout) findViewById(R.id.toolbar);\n    collapsingToolbarLayout.setExpandedTitleColor(Color.parseColor(\"#009F90AF\"));\n    collapsingToolbarLayout.setCollapsedTitleTextColor(Color.parseColor(\"#9f90af\"));\n}<\/pre>\n<p>\u0418 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u0430\u0434\u0430\u043f\u0442\u0435\u0440\u0430 \u0434\u043b\u044f RecyclerView, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0430 20 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.\n<\/p><pre class=\"\">public class RecycleAdapter extends RecyclerView.Adapter&lt;RecycleAdapter.ViewHolder&gt; {\n\n        @Override\n        public ViewHolder onCreateViewHolder(final ViewGroup parent, final int viewType) {\n            final View view = LayoutInflater.from(getBaseContext()).inflate(R.layout.item_list, parent, false);\n            return new ViewHolder(view);\n        }\n\n        @Override\n        public void onBindViewHolder(final ViewHolder holder, final int position) {\n            holder.txt.setText(String.format(\"Navigation Item #%d\", position));\n        }\n\n        @Override\n        public int getItemCount() {\n            return 20;\n        }\n\n        public class ViewHolder extends RecyclerView.ViewHolder {\n\n            public TextView txt;\n\n            public ViewHolder(final View itemView) {\n                super(itemView);\n                txt = (TextView) itemView.findViewById(R.id.txt_vp_item_list);\n            }\n        }\n    }\n}<\/pre>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 &#8212; \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 NavigationTabBar \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<p><a href=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-232523.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" class=\"aligncenter wp-image-5683 size-medium\" src=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-232523-153x300.png\" width=\"153\" height=\"300\"\/><\/a><br \/>\n\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 NavigationTabBar \u0432\u0441\u0442\u0440\u043e\u0435\u043d \u0432 AppBarLayout.\n<\/p><pre class=\"lang:default decode:true\" title=\"activity_horizontal_top_ntb.xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;android.support.design.widget.CoordinatorLayout\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:background=\"#423752\"\n    android:orientation=\"vertical\"&gt;\n\n    &lt;android.support.v4.view.ViewPager\n        android:id=\"@+id\/vp_horizontal_ntb\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        app:layout_behavior=\"@string\/appbar_scrolling_view_behavior\"\/&gt;\n\n    &lt;android.support.design.widget.AppBarLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:background=\"#00000000\"&gt;\n\n        &lt;FrameLayout\n            android:id=\"@+id\/wrapper_ntb_horizontal\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"wrap_content\"\n            app:layout_scrollFlags=\"scroll|enterAlways\"&gt;\n\n            &lt;devlight.io.library.ntb.NavigationTabBar\n                android:id=\"@+id\/ntb_horizontal\"\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"60dp\"\n                app:ntb_bg_color=\"#605271\"\n                app:ntb_title_size=\"12sp\"\n                app:ntb_badge_bg_color=\"#ffff0000\"\n                app:ntb_badge_gravity=\"bottom\"\n                app:ntb_badge_position=\"left\"\n                app:ntb_badge_title_color=\"#ffffffff\"\n                app:ntb_badge_use_typeface=\"true\"\n                app:ntb_badged=\"true\"\n                app:ntb_title_mode=\"active\"\n                app:ntb_titled=\"true\"\n                app:ntb_scaled=\"false\"\n                app:ntb_typeface=\"fonts\/agency.ttf\"\/&gt;\n\n        &lt;\/FrameLayout&gt;\n\n    &lt;\/android.support.design.widget.AppBarLayout&gt;\n\n    &lt;View\n        android:id=\"@+id\/mask\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"150dp\"\n        android:layout_gravity=\"bottom\"\/&gt;\n\n&lt;\/android.support.design.widget.CoordinatorLayout&gt;\n<\/pre>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 Activity \u043f\u043e\u0447\u0442\u0438 \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f FAB \u0438 CollapsingToolbarLayout.\n<\/p><pre class=\"lang:default decode:true\" title=\"TopHorizontalNtbActivity.java\">package devlight.io.sample;\n\nimport android.app.Activity;\nimport android.graphics.Color;\nimport android.os.Bundle;\nimport android.support.v4.view.PagerAdapter;\nimport android.support.v4.view.ViewPager;\nimport android.support.v7.widget.LinearLayoutManager;\nimport android.support.v7.widget.RecyclerView;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\nimport android.widget.TextView;\n\nimport devlight.io.library.ntb.NavigationTabBar;\n\nimport java.util.ArrayList;\nimport java.util.Random;\n\n\/**\n * Created by GIGAMOLE on 28.03.2016.\n *\/\npublic class TopHorizontalNtbActivity extends Activity {\n\n    @Override\n    protected void onCreate(final Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_horizontal_top_ntb);\n        initUI();\n    }\n\n    private void initUI() {\n        final ViewPager viewPager = (ViewPager) findViewById(R.id.vp_horizontal_ntb);\n        viewPager.setAdapter(new PagerAdapter() {\n            @Override\n            public int getCount() {\n                return 5;\n            }\n\n            @Override\n            public boolean isViewFromObject(final View view, final Object object) {\n                return view.equals(object);\n            }\n\n            @Override\n            public void destroyItem(final View container, final int position, final Object object) {\n                ((ViewPager) container).removeView((View) object);\n            }\n\n            @Override\n            public Object instantiateItem(final ViewGroup container, final int position) {\n                final View view = LayoutInflater.from(\n                        getBaseContext()).inflate(R.layout.item_vp_list, null, false);\n\n                final RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.rv);\n                recyclerView.setHasFixedSize(true);\n                recyclerView.setLayoutManager(new LinearLayoutManager(\n                                getBaseContext(), LinearLayoutManager.VERTICAL, false\n                        )\n                );\n                recyclerView.setAdapter(new RecycleAdapter());\n\n                container.addView(view);\n                return view;\n            }\n        });\n\n        final String[] colors = getResources().getStringArray(R.array.default_preview);\n\n        final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb_horizontal);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models = new ArrayList&lt;&gt;();\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first),\n                        Color.parseColor(colors[0]))\n                        .title(\"Heart\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_second),\n                        Color.parseColor(colors[1]))\n                        .title(\"Cup\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_third),\n                        Color.parseColor(colors[2]))\n                        .title(\"Diploma\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth),\n                        Color.parseColor(colors[3]))\n                        .title(\"Flag\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth),\n                        Color.parseColor(colors[4]))\n                        .title(\"Medal\")\n                        .build()\n        );\n        navigationTabBar.setModels(models);\n        navigationTabBar.setViewPager(viewPager, 2);\n\n        navigationTabBar.post(new Runnable() {\n            @Override\n            public void run() {\n                final View viewPager = findViewById(R.id.vp_horizontal_ntb);\n                ((ViewGroup.MarginLayoutParams) viewPager.getLayoutParams()).topMargin =\n                        (int) -navigationTabBar.getBadgeMargin();\n                viewPager.requestLayout();\n            }\n        });\n\n        navigationTabBar.setOnTabBarSelectedIndexListener(new NavigationTabBar.OnTabBarSelectedIndexListener() {\n            @Override\n            public void onStartTabSelected(final NavigationTabBar.Model model, final int index) {\n\n            }\n\n            @Override\n            public void onEndTabSelected(final NavigationTabBar.Model model, final int index) {\n                model.hideBadge();\n            }\n        });\n\n        findViewById(R.id.mask).setOnClickListener(new View.OnClickListener() {\n            @Override\n            public void onClick(final View v) {\n                for (int i = 0; i &lt; navigationTabBar.getModels().size(); i++) {\n                    final NavigationTabBar.Model model = navigationTabBar.getModels().get(i);\n                    navigationTabBar.postDelayed(new Runnable() {\n                        @Override\n                        public void run() {\n                            final String title = String.valueOf(new Random().nextInt(15));\n                            if (!model.isBadgeShowed()) {\n                                model.setBadgeTitle(title);\n                                model.showBadge();\n                            } else model.updateBadgeTitle(title);\n                        }\n                    }, i * 100);\n                }\n            }\n        });\n    }\n\n    public class RecycleAdapter extends RecyclerView.Adapter&lt;RecycleAdapter.ViewHolder&gt; {\n\n        @Override\n        public ViewHolder onCreateViewHolder(final ViewGroup parent, final int viewType) {\n            final View view = LayoutInflater.from(getBaseContext()).inflate(R.layout.item_list, parent, false);\n            return new ViewHolder(view);\n        }\n\n        @Override\n        public void onBindViewHolder(final ViewHolder holder, final int position) {\n            holder.txt.setText(String.format(\"Navigation Item #%d\", position));\n        }\n\n        @Override\n        public int getItemCount() {\n            return 20;\n        }\n\n        public class ViewHolder extends RecyclerView.ViewHolder {\n\n            public TextView txt;\n\n            public ViewHolder(final View itemView) {\n                super(itemView);\n                txt = (TextView) itemView.findViewById(R.id.txt_vp_item_list);\n            }\n        }\n    }\n}\n<\/pre>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e NavigationTabBar.<\/p>\n<p><a href=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-232859.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" class=\"aligncenter wp-image-5684 size-medium\" src=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-232859-153x300.png\" width=\"153\" height=\"300\"\/><\/a><\/p>\n<p>\u0424\u0430\u0439\u043b \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0441\u0430\u043c\u044b\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 LinearLayout \u0438\u043c\u0435\u0435\u0442 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u044e.\n<\/p><pre class=\"lang:default decode:true\" title=\"activity_vertical_ntb.xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;LinearLayout\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:orientation=\"horizontal\"\n    android:background=\"#423752\"&gt;\n\n    &lt;devlight.io.library.ntb.NavigationTabBar\n        android:id=\"@+id\/ntb_vertical\"\n        android:layout_width=\"50dp\"\n        android:layout_height=\"match_parent\"\n        app:ntb_preview_colors=\"@array\/vertical_ntb\"\/&gt;\n\n    &lt;android.support.v4.view.ViewPager\n        android:id=\"@+id\/vp_vertical_ntb\"\n        android:layout_width=\"0dp\"\n        android:layout_height=\"match_parent\"\n        android:layout_weight=\"1\"\/&gt;\n\n&lt;\/LinearLayout&gt;\n<\/pre>\n<p>\u041a\u043e\u0434 \u043a\u043b\u0430\u0441\u0441\u0430 Activity \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430.\n<\/p><pre class=\"lang:default decode:true\" title=\"VerticalNtbActivity.java\">package devlight.io.sample;\n\nimport android.app.Activity;\nimport android.graphics.Color;\nimport android.os.Bundle;\nimport android.support.v4.view.PagerAdapter;\nimport android.support.v4.view.ViewPager;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\nimport android.widget.TextView;\n\nimport devlight.io.library.ntb.NavigationTabBar;\n\nimport java.util.ArrayList;\n\n\/**\n * Created by GIGAMOLE on 28.03.2016.\n *\/\npublic class VerticalNtbActivity extends Activity {\n\n    @Override\n    protected void onCreate(final Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_vertical_ntb);\n        initUI();\n    }\n\n    private void initUI() {\n        final ViewPager viewPager = (ViewPager) findViewById(R.id.vp_vertical_ntb);\n        viewPager.setAdapter(new PagerAdapter() {\n            @Override\n            public int getCount() {\n                return 8;\n            }\n\n            @Override\n            public boolean isViewFromObject(final View view, final Object object) {\n                return view.equals(object);\n            }\n\n            @Override\n            public void destroyItem(final View container, final int position, final Object object) {\n                ((ViewPager) container).removeView((View) object);\n            }\n\n            @Override\n            public Object instantiateItem(final ViewGroup container, final int position) {\n                final View view = LayoutInflater.from(\n                        getBaseContext()).inflate(R.layout.item_vp, null, false);\n\n                final TextView txtPage = (TextView) view.findViewById(R.id.txt_vp_item_page);\n                txtPage.setText(String.format(\"Page #%d\", position));\n\n                container.addView(view);\n                return view;\n            }\n        });\n\n        final String[] colors = getResources().getStringArray(R.array.vertical_ntb);\n\n        final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb_vertical);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models = new ArrayList&lt;&gt;();\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first),\n                        Color.parseColor(colors[0]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_second),\n                        Color.parseColor(colors[1]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_third),\n                        Color.parseColor(colors[2]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth),\n                        Color.parseColor(colors[3]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth),\n                        Color.parseColor(colors[4]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_sixth),\n                        Color.parseColor(colors[5]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_seventh),\n                        Color.parseColor(colors[6]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_eighth),\n                        Color.parseColor(colors[7]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n\n        navigationTabBar.setModels(models);\n        navigationTabBar.setViewPager(viewPager, 4);\n    }\n}\n<\/pre>\n<p>\u0418 \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440.<\/p>\n<p><a href=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-233230.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" class=\"aligncenter wp-image-5685 size-medium\" src=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-233230-153x300.png\" width=\"153\" height=\"300\"\/><\/a><\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 NavigationTabBar \u0432\u043e \u0444\u0440\u0435\u0439\u043c\u0430\u0445. \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0437\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0430\u043d\u0435\u043b\u0438 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.\n<\/p><pre class=\"lang:default decode:true\" title=\"activity_samples_ntb.xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;LinearLayout\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:background=\"#423752\"\n    android:orientation=\"vertical\"\n    android:weightSum=\"2\"&gt;\n\n    &lt;LinearLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"0dp\"\n        android:layout_weight=\"1\"\n        android:orientation=\"horizontal\"\n        android:weightSum=\"3\"&gt;\n\n        &lt;FrameLayout\n            android:layout_width=\"0dp\"\n            android:layout_height=\"match_parent\"\n            android:layout_weight=\"1\"\n            android:padding=\"10dp\"&gt;\n\n            &lt;devlight.io.library.ntb.NavigationTabBar\n                android:id=\"@+id\/ntb_sample_1\"\n                android:layout_width=\"80dp\"\n                android:layout_height=\"match_parent\"\n                android:layout_gravity=\"center\"\n                app:ntb_bg_color=\"#605271\"\n                app:ntb_active_color=\"#000\"\n                app:ntb_scaled=\"false\"\n                app:ntb_inactive_color=\"#fff\"\n                app:ntb_animation_duration=\"1000\"\/&gt;\n\n        &lt;\/FrameLayout&gt;\n\n        &lt;FrameLayout\n            android:layout_width=\"0dp\"\n            android:layout_height=\"match_parent\"\n            android:layout_weight=\"1\"\n            android:padding=\"10dp\"&gt;\n\n            &lt;devlight.io.library.ntb.NavigationTabBar\n                android:id=\"@+id\/ntb_sample_2\"\n                android:layout_width=\"50dp\"\n                android:layout_height=\"match_parent\"\n                android:layout_gravity=\"center\"\n                app:ntb_bg_color=\"#d78cd3\"\n                app:ntb_active_color=\"#d78cd3\"\n                app:ntb_inactive_color=\"#d78cd3\"\/&gt;\n\n        &lt;\/FrameLayout&gt;\n\n        &lt;FrameLayout\n            android:layout_width=\"0dp\"\n            android:layout_height=\"match_parent\"\n            android:layout_weight=\"1\"\n            android:padding=\"10dp\"&gt;\n\n            &lt;devlight.io.library.ntb.NavigationTabBar\n                android:id=\"@+id\/ntb_sample_3\"\n                android:layout_width=\"60dp\"\n                android:layout_height=\"match_parent\"\n                android:layout_gravity=\"center\"\n                app:ntb_bg_color=\"#00000000\"\n                app:ntb_corners_radius=\"10dp\"\n                app:ntb_inactive_color=\"#000\"\n                app:ntb_preview_colors=\"@array\/red_wine\"\/&gt;\n\n        &lt;\/FrameLayout&gt;\n\n    &lt;\/LinearLayout&gt;\n\n    &lt;LinearLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"0dp\"\n        android:layout_weight=\"1\"\n        android:orientation=\"vertical\"\n        android:weightSum=\"3\"&gt;\n\n        &lt;FrameLayout\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"0dp\"\n            android:layout_weight=\"1\"\n            android:padding=\"10dp\"&gt;\n\n            &lt;devlight.io.library.ntb.NavigationTabBar\n                android:id=\"@+id\/ntb_sample_4\"\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"80dp\"\n                android:layout_gravity=\"center\"\n                app:ntb_bg_color=\"#00FFFFFF\"\n                app:ntb_active_color=\"#be7818\"\n                app:ntb_inactive_color=\"#be7818\"\n                app:ntb_animation_duration=\"1000\"\/&gt;\n\n        &lt;\/FrameLayout&gt;\n\n        &lt;FrameLayout\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"0dp\"\n            android:layout_weight=\"1\"\n            android:padding=\"10dp\"&gt;\n\n            &lt;devlight.io.library.ntb.NavigationTabBar\n                android:id=\"@+id\/ntb_sample_5\"\n                android:layout_width=\"200dp\"\n                android:layout_height=\"50dp\"\n                android:layout_gravity=\"center\"\n                app:ntb_animation_duration=\"400\"\n                app:ntb_preview_colors=\"@array\/red_wine\"\n                app:ntb_corners_radius=\"25dp\"\n                app:ntb_scaled=\"false\"\n                app:ntb_active_color=\"#8d88e4\"\n                app:ntb_inactive_color=\"#dddfec\"\n                app:ntb_bg_color=\"#8d88e4\"\/&gt;\n\n        &lt;\/FrameLayout&gt;\n\n        &lt;FrameLayout\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"0dp\"\n            android:layout_weight=\"1\"\n            android:padding=\"10dp\"&gt;\n\n            &lt;devlight.io.library.ntb.NavigationTabBar\n                android:id=\"@+id\/ntb_sample_6\"\n                android:layout_width=\"240dp\"\n                android:layout_height=\"60dp\"\n                android:layout_gravity=\"center\"\n                app:ntb_bg_color=\"#4b405c\"\n                app:ntb_corners_radius=\"4dp\"\n                app:ntb_preview_colors=\"@array\/polluted_waves\"\/&gt;\n\n        &lt;\/FrameLayout&gt;\n\n    &lt;\/LinearLayout&gt;\n\n&lt;\/LinearLayout&gt;\n<\/pre>\n<p>\u0412 \u043a\u043b\u0430\u0441\u0441\u0435 Activity \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043a\u043e\u0434 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 NavigationTabBar.\n<\/p><pre class=\"lang:default decode:true\" title=\"SamplesNtbActivity.java\">package devlight.io.sample;\n\nimport android.app.Activity;\nimport android.graphics.Color;\nimport android.os.Bundle;\nimport android.support.v4.graphics.ColorUtils;\nimport android.widget.Toast;\n\nimport devlight.io.library.ntb.NavigationTabBar;\n\nimport java.util.ArrayList;\n\n\/**\n * Created by GIGAMOLE on 28.03.2016.\n *\/\npublic class SamplesNtbActivity extends Activity {\n\n    @Override\n    protected void onCreate(final Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_samples_ntb);\n        initUI();\n    }\n\n    private void initUI() {\n        final NavigationTabBar ntbSample1 = (NavigationTabBar) findViewById(R.id.ntb_sample_1);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models1 = new ArrayList&lt;&gt;();\n        models1.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first), Color.WHITE\n                ).build()\n        );\n        models1.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_second), Color.LTGRAY\n                ).build()\n        );\n        models1.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_third), Color.GRAY\n                ).build()\n        );\n        models1.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth), Color.DKGRAY\n                ).build()\n        );\n        ntbSample1.setModels(models1);\n\n        final NavigationTabBar ntbSample2 = (NavigationTabBar) findViewById(R.id.ntb_sample_2);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models2 = new ArrayList&lt;&gt;();\n        models2.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_seventh), Color.YELLOW\n                ).build()\n        );\n        models2.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_sixth), Color.YELLOW\n                ).build()\n        );\n        models2.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth), Color.YELLOW\n                ).build()\n        );\n        models2.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_eighth), Color.YELLOW\n                ).build()\n        );\n        models2.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_second), Color.YELLOW\n                ).build()\n        );\n        ntbSample2.setModels(models2);\n        ntbSample2.setModelIndex(3, true);\n\n        final NavigationTabBar ntbSample3 = (NavigationTabBar) findViewById(R.id.ntb_sample_3);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models3 = new ArrayList&lt;&gt;();\n        models3.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_seventh), Color.RED\n                ).build()\n        );\n        models3.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_seventh), Color.RED\n                ).build()\n        );\n        models3.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_seventh), Color.RED\n                ).build()\n        );\n        ntbSample3.setModels(models3);\n        ntbSample3.setModelIndex(1, true);\n\n        final NavigationTabBar ntbSample4 = (NavigationTabBar) findViewById(R.id.ntb_sample_4);\n        final int bgColor = Color.parseColor(\"#423752\");\n        final ArrayList&lt;NavigationTabBar.Model&gt; models4 = new ArrayList&lt;&gt;();\n        models4.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth), bgColor\n                ).build()\n        );\n        models4.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first), bgColor\n                ).build()\n        );\n        models4.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth), bgColor\n                ).build()\n        );\n        models4.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_sixth), bgColor\n                ).build()\n        );\n        models4.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_third), bgColor\n                ).build()\n        );\n        ntbSample4.setModels(models4);\n        ntbSample4.setModelIndex(2, true);\n\n        final NavigationTabBar ntbSample5 = (NavigationTabBar) findViewById(R.id.ntb_sample_5);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models5 = new ArrayList&lt;&gt;();\n        models5.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth), Color.WHITE\n                ).build()\n        );\n        models5.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first), Color.WHITE\n                ).build()\n        );\n        models5.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth), Color.WHITE\n                ).build()\n        );\n        models5.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_sixth), Color.WHITE\n                ).build()\n        );\n        ntbSample5.setModels(models5);\n        ntbSample5.setModelIndex(2, true);\n        ntbSample5.setOnTabBarSelectedIndexListener(new NavigationTabBar.OnTabBarSelectedIndexListener() {\n            @Override\n            public void onStartTabSelected(final NavigationTabBar.Model model, final int index) {\n\n            }\n\n            @Override\n            public void onEndTabSelected(final NavigationTabBar.Model model, final int index) {\n                Toast.makeText(SamplesNtbActivity.this, String.format(\"onEndTabSelected #%d\", index), Toast.LENGTH_SHORT).show();\n            }\n        });\n\n        final NavigationTabBar ntbSample6 = (NavigationTabBar) findViewById(R.id.ntb_sample_6);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models6 = new ArrayList&lt;&gt;();\n        models6.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth), randomColor()\n                ).build()\n        );\n        models6.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first), randomColor()\n                ).build()\n        );\n        models6.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth), randomColor()\n                ).build()\n        );\n        models6.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_sixth), randomColor()\n                ).build()\n        );\n        ntbSample6.setModels(models6);\n    }\n\n    private int randomColor() {\n        float[] TEMP_HSL = new float[]{0, 0, 0};\n        float[] hsl = TEMP_HSL;\n        hsl[0] = (float) (Math.random() * 360);\n        hsl[1] = (float) (40 + (Math.random() * 60));\n        hsl[2] = (float) (40 + (Math.random() * 60));\n        return ColorUtils.HSLToColor(hsl);\n    }\n}\n<\/pre>\n<p>\u042d\u0442\u043e \u0431\u044b\u043b \u043e\u0431\u0437\u043e\u0440 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 NavigationTabBar \u043e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 Devlight.[:en]Today in the next release of the Design android application overview of an interesting library from the team DevLight. Who does not know, these are successful developers who started once with lessons on our channel. Now they have a big company and tough customers. Interviews with the guys can be viewed on the <a href=\"\/devlight-istoriya-uspeha-android-razrabotchikov\/\" target=\"_blank\" rel=\"noopener noreferrer\">link<\/a>. The guys talk about what they achieved and share the secrets of their success with the budding developers.<\/p>\n<p>The <a href=\"https:\/\/github.com\/DevLight-Mobile-Agency\" target=\"_blank\" rel=\"noopener noreferrer\">repository<\/a> of DevLight on Github contains many interesting libraries for application design. One of these we will consider today. This is the NavigationTabBar library. It allows you to create and place on the application screen the navigation bar &#8212; at the bottom, at the top or side. NavigationTabBar is supported with the SDK version 11 API, has many settings and is easily integrated with all standard components of the screen layout.<\/p>\n<p><iframe loading=\"lazy\" width=\"700\" height=\"394\" src=\"https:\/\/www.youtube.com\/embed\/nGikO-tbSsg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>The library <a href=\"https:\/\/github.com\/DevLight-Mobile-Agency\/NavigationTabBar\" target=\"_blank\" rel=\"noopener noreferrer\">page<\/a> in GitHub describes how to add a library to the project, lists the parameters, and shows an implementation example in the project.<\/p>\n<p>Also, there is a link to the application code, which demonstrates several ways to use this library. I imported this example into Android Studio. Let&#8217;s examine it in more detail.<\/p>\n<p>In the MainActivity, just the buttons for navigating between screens. For each screen there is a separate Activity.\n<\/p><pre class=\"lang:default decode:true\" title=\"MainActivity.java\">package devlight.io.sample;\n\nimport android.app.Activity;\nimport android.content.Intent;\nimport android.os.Bundle;\nimport android.support.v4.view.ViewCompat;\nimport android.support.v4.view.ViewPropertyAnimatorListener;\nimport android.view.View;\n\npublic class MainActivity extends Activity implements View.OnClickListener {\n\n    @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_main);\n        initUI();\n    }\n\n    private void initUI() {\n        final View btnHorizontalNtb = findViewById(R.id.btn_horizontal_ntb);\n        btnHorizontalNtb.setOnClickListener(this);\n        final View btnHorizontalCoordinatorNtb = findViewById(R.id.btn_horizontal_coordinator_ntb);\n        btnHorizontalCoordinatorNtb.setOnClickListener(this);\n        final View btnTopHorizontalNtb = findViewById(R.id.btn_horizontal_top_ntb);\n        btnTopHorizontalNtb.setOnClickListener(this);\n        final View btnVerticalNtb = findViewById(R.id.btn_vertical_ntb);\n        btnVerticalNtb.setOnClickListener(this);\n        final View btnSamplesNtb = findViewById(R.id.btn_samples_ntb);\n        btnSamplesNtb.setOnClickListener(this);\n    }\n\n    @Override\n    public void onClick(final View v) {\n        ViewCompat.animate(v)\n                .setDuration(200)\n                .scaleX(0.9f)\n                .scaleY(0.9f)\n                .setInterpolator(new CycleInterpolator())\n                .setListener(new ViewPropertyAnimatorListener() {\n                    @Override\n                    public void onAnimationStart(final View view) {\n\n                    }\n\n                    @Override\n                    public void onAnimationEnd(final View view) {\n                        switch (v.getId()) {\n                            case R.id.btn_horizontal_ntb:\n                                startActivity(\n                                        new Intent(MainActivity.this, HorizontalNtbActivity.class)\n                                );\n                                break;\n                            case R.id.btn_horizontal_top_ntb:\n                                startActivity(\n                                        new Intent(MainActivity.this, TopHorizontalNtbActivity.class)\n                                );\n                                break;\n                            case R.id.btn_horizontal_coordinator_ntb:\n                                startActivity(\n                                        new Intent(MainActivity.this, HorizontalCoordinatorNtbActivity.class)\n                                );\n                                break;\n                            case R.id.btn_vertical_ntb:\n                                startActivity(\n                                        new Intent(MainActivity.this, VerticalNtbActivity.class)\n                                );\n                                break;\n                            case R.id.btn_samples_ntb:\n                                startActivity(\n                                        new Intent(MainActivity.this, SamplesNtbActivity.class)\n                                );\n                                break;\n                            default:\n                                break;\n                        }\n                    }\n\n                    @Override\n                    public void onAnimationCancel(final View view) {\n\n                    }\n                })\n                .withLayer()\n                .start();\n    }\n\n    private class CycleInterpolator implements android.view.animation.Interpolator {\n\n        private final float mCycles = 0.5f;\n\n        @Override\n        public float getInterpolation(final float input) {\n            return (float) Math.sin(2.0f * mCycles * Math.PI * input);\n        }\n    }\n}\n<\/pre>\n<p>The first screen implements the horizontal NavigationTabBar.<br \/>\n<a href=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-231449.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" class=\"aligncenter wp-image-5681 size-medium\" src=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-231449-153x300.png\" width=\"153\" height=\"300\"\/><\/a><\/p>\n<p>Its markup is in activity_horizontal_ntb.xml.\n<\/p><pre class=\"lang:default decode:true\" title=\"activity_horizontal_ntb.xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;LinearLayout\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:background=\"#423752\"\n    android:orientation=\"vertical\"&gt;\n\n    &lt;android.support.v4.view.ViewPager\n        android:id=\"@+id\/vp_horizontal_ntb\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"0dp\"\n        android:layout_weight=\"1\"\/&gt;\n\n    &lt;devlight.io.library.ntb.NavigationTabBar\n        android:id=\"@+id\/ntb_horizontal\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"60dp\"\n        app:ntb_badge_gravity=\"top\"\n        app:ntb_badge_position=\"right\"\n        app:ntb_badged=\"true\"\n        app:ntb_scaled=\"true\"\n        app:ntb_tinted=\"true\"\n        app:ntb_title_mode=\"all\"\n        app:ntb_titled=\"true\"\n        app:ntb_swiped=\"true\"\/&gt;\n\n&lt;\/LinearLayout&gt;\n<\/pre>\n<p>Here in the LinearLayout root, the standard ViewPager for displaying and flipping through tabs.<\/p>\n<p>Next is the NavigationTabBar from the Devlight library. In addition to the standard size attributes, here are the settings for the badge position relative to the button, turning on the badge display, turning on the scaling effect and rendering the active button, setting the header display method and last attribute ntb_swiped &#8212; I did not understand what it is responsible for. Who will understand &#8212; write in the comments.<\/p>\n<p>The entire list of possible attributes of the NavigationTabBar component is here:\n<\/p><pre class=\"lang:default decode:true\">&lt;devlight.io.library.ntb.NavigationTabBar\n   android:id=\"@+id\/ntb\"\n   android:layout_width=\"match_parent\"\n   android:layout_height=\"50dp\"\n   app:ntb_animation_duration=\"400\"\n   app:ntb_preview_colors=\"@array\/colors\"\n   app:ntb_corners_radius=\"10dp\"\n   app:ntb_active_color=\"#fff\"\n   app:ntb_inactive_color=\"#000\"\n   app:ntb_badged=\"true\"\n   app:ntb_titled=\"true\"\n   app:ntb_scaled=\"true\"\n   app:ntb_tinted=\"true\"\n   app:ntb_title_mode=\"all\"\n   app:ntb_badge_position=\"right\"\n   app:ntb_badge_gravity=\"top\"\n   app:ntb_badge_bg_color=\"#ffff0000\"\n   app:ntb_badge_title_color=\"#ffffffff\"\n   app:ntb_typeface=\"fonts\/custom_typeface.ttf\"\n   app:ntb_badge_use_typeface=\"true\"\n   app:ntb_swiped=\"true\"\n   app:ntb_bg_color=\"#000\"\n   app:ntb_icon_size_fraction=\"0.5\"\n   app:ntb_badge_size=\"10sp\"\n   app:ntb_title_size=\"10sp\"\/&gt;<\/pre>\n<p>We are looking at the code HorisontalNtbActivity. In the initUI method, there is a viewPager and for it an adapter with five elements is installed. Next are the standard methods and tabs are created based on the layout with several TextView\n<\/p><pre class=\"lang:default decode:true\">import android.app.Activity;\nimport android.graphics.Color;\nimport android.os.Bundle;\nimport android.support.v4.view.PagerAdapter;\nimport android.support.v4.view.ViewPager;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\nimport android.widget.TextView;\n\nimport java.util.ArrayList;\n\nimport devlight.io.library.ntb.NavigationTabBar;\n\n\/**\n * Created by GIGAMOLE on 28.03.2016.\n *\/\npublic class HorizontalNtbActivity extends Activity {\n\n    @Override\n    protected void onCreate(final Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_horizontal_ntb);\n        initUI();\n    }\n\n    private void initUI() {\n        final ViewPager viewPager = (ViewPager) findViewById(R.id.vp_horizontal_ntb);\n        viewPager.setAdapter(new PagerAdapter() {\n            @Override\n            public int getCount() {\n                return 5;\n            }\n\n            @Override\n            public boolean isViewFromObject(final View view, final Object object) {\n                return view.equals(object);\n            }\n\n            @Override\n            public void destroyItem(final View container, final int position, final Object object) {\n                ((ViewPager) container).removeView((View) object);\n            }\n\n            @Override\n            public Object instantiateItem(final ViewGroup container, final int position) {\n                final View view = LayoutInflater.from(\n                        getBaseContext()).inflate(R.layout.item_vp, null, false);\n\n                final TextView txtPage = (TextView) view.findViewById(R.id.txt_vp_item_page);\n                txtPage.setText(String.format(\"Page #%d\", position));\n\n                container.addView(view);\n                return view;\n            }\n        });<\/pre>\n<p>The most interesting happens below. Here you define an array of colors for the navigation bar buttons.\n<\/p><pre class=\"\">final String[] colors = getResources().getStringArray(R.array.default_preview);<\/pre>\n<p>Then, an instance of NavigationTabBar is created.<br \/>\nNext, a list of models is created for the buttons on the NavigationTabBar.\n<\/p><pre class=\"\">final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb_horizontal);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models = new ArrayList&lt;&gt;();\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first),\n                        Color.parseColor(colors[0]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_sixth))\n                        .title(\"Heart\")\n                        .badgeTitle(\"NTB\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_second),\n                        Color.parseColor(colors[1]))\n\/\/                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .title(\"Cup\")\n                        .badgeTitle(\"with\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_third),\n                        Color.parseColor(colors[2]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_seventh))\n                        .title(\"Diploma\")\n                        .badgeTitle(\"state\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth),\n                        Color.parseColor(colors[3]))\n\/\/                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .title(\"Flag\")\n                        .badgeTitle(\"icon\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth),\n                        Color.parseColor(colors[4]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .title(\"Medal\")\n                        .badgeTitle(\"777\")\n                        .build()\n        );<\/pre>\n<p>For each button, the icon is set, the color of the active icon (from the array of colors above), the icon for the active button, the text of the button, and the text of the badge.<\/p>\n<p>Then the list of buttons is passed to the navigationTabBar instance using the setModels method. It is also passed to the ViewPager and the tabbed change listener is installed. Next are the empty methods of the listener. The onPageSelected method removes the badge for the selected tab.\n<\/p><pre class=\"\">navigationTabBar.setModels(models);\nnavigationTabBar.setViewPager(viewPager, 2);\nnavigationTabBar.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {\n    @Override\n    public void onPageScrolled(final int position, final float positionOffset, final int positionOffsetPixels) {\n\n    }\n\n    @Override\n    public void onPageSelected(final int position) {\n        navigationTabBar.getModels().get(position).hideBadge();\n    }\n\n    @Override\n    public void onPageScrollStateChanged(final int state) {\n\n    }\n});<\/pre>\n<p>Below we see the method navigationTabBar.postDelayed, where in a separate thread implemented a spectacular appearance of badges on the buttons at the start of Activity.\n<\/p><pre class=\"\">navigationTabBar.postDelayed(new Runnable() {\n            @Override\n            public void run() {\n                for (int i = 0; i &lt; navigationTabBar.getModels().size(); i++) {\n                    final NavigationTabBar.Model model = navigationTabBar.getModels().get(i);\n                    navigationTabBar.postDelayed(new Runnable() {\n                        @Override\n                        public void run() {\n                            model.showBadge();\n                        }\n                    }, i * 100);\n                }\n            }\n        }, 500);\n    }\n}<\/pre>\n<p>Here is a relatively simple example of the implementation of the NavigationTabBar library.<\/p>\n<p><a href=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-231734.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" class=\"aligncenter wp-image-5682 size-medium\" src=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-231734-153x300.png\" width=\"153\" height=\"300\"\/><\/a><\/p>\n<p>The following implementation is not much more complicated, here NavigationTabBar is used in conjunction with standard widgets, such as AppBarLayout, CollapsingToolbarLayout, Toolbar and FloatingActionButton. For the coordinated work of all components, the root CoordinatorLayout answers.\n<\/p><pre class=\"lang:default decode:true\" title=\"activity_horizontal_coordinator_ntb.xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;android.support.design.widget.CoordinatorLayout\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    android:id=\"@+id\/parent\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:background=\"#423752\"\n    android:fitsSystemWindows=\"true\"\n    android:orientation=\"vertical\"&gt;\n\n    &lt;android.support.design.widget.AppBarLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"180dp\"\n        android:fitsSystemWindows=\"true\"\n        android:theme=\"@style\/AppTheme.AppBarOverlay\"&gt;\n\n        &lt;android.support.design.widget.CollapsingToolbarLayout\n            android:id=\"@+id\/toolbar\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"match_parent\"\n            android:fitsSystemWindows=\"true\"\n            app:title=\"@string\/app_name\"\n            app:expandedTitleTextAppearance=\"@null\"\n            app:contentScrim=\"#605271\"\n            app:layout_scrollFlags=\"scroll|exitUntilCollapsed\"&gt;\n\n            &lt;ImageView\n                android:id=\"@+id\/backdrop\"\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"match_parent\"\n                android:fitsSystemWindows=\"true\"\n                android:background=\"#605271\"\n                android:src=\"@drawable\/ic_eighth\"\n                android:tint=\"#9f90af\"\n                android:padding=\"32dp\"\n                app:layout_collapseMode=\"pin\"\/&gt;\n\n            &lt;android.support.v7.widget.Toolbar\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"?attr\/actionBarSize\"\n                android:fitsSystemWindows=\"true\"\n                app:layout_collapseMode=\"parallax\"\n                app:title=\"@string\/app_name\"\n                app:popupTheme=\"@style\/AppTheme.AppBarOverlay\"\/&gt;\n\n        &lt;\/android.support.design.widget.CollapsingToolbarLayout&gt;\n    &lt;\/android.support.design.widget.AppBarLayout&gt;\n\n    &lt;android.support.v4.view.ViewPager\n        android:id=\"@+id\/vp_horizontal_ntb\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        app:layout_behavior=\"@string\/appbar_scrolling_view_behavior\"\/&gt;\n\n    &lt;devlight.io.library.ntb.NavigationTabBar\n        android:id=\"@+id\/ntb_horizontal\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"60dp\"\n        android:layout_gravity=\"bottom\"\n        app:ntb_badge_size=\"12sp\"\n        app:ntb_badge_bg_color=\"#ffff0000\"\n        app:ntb_badge_gravity=\"top\"\n        app:ntb_badge_position=\"left\"\n        app:ntb_badge_title_color=\"#ffffffff\"\n        app:ntb_badge_use_typeface=\"true\"\n        app:ntb_badged=\"true\"\n        app:ntb_typeface=\"fonts\/agency.ttf\"\/&gt;\n\n    &lt;android.support.design.widget.FloatingActionButton\n        android:id=\"@+id\/fab\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_gravity=\"bottom|end\"\n        android:layout_marginBottom=\"76dp\"\n        android:layout_marginRight=\"16dp\"\n        android:layout_marginEnd=\"16dp\"\n        android:tint=\"#9f90af\"\n        android:src=\"@drawable\/ic_first\"\n        app:backgroundTint=\"#605271\"\/&gt;\n\n&lt;\/android.support.design.widget.CoordinatorLayout&gt;\n<\/pre>\n<p>The code in Activity is slightly different from the previous example, by adding new components.\n<\/p><pre class=\"lang:default decode:true\" title=\"HorizontalCoordinatorNtbActivity.java\">package devlight.io.sample;\n\nimport android.app.Activity;\nimport android.graphics.Color;\nimport android.os.Bundle;\nimport android.support.design.widget.CollapsingToolbarLayout;\nimport android.support.design.widget.CoordinatorLayout;\nimport android.support.design.widget.Snackbar;\nimport android.support.v4.view.PagerAdapter;\nimport android.support.v4.view.ViewPager;\nimport android.support.v7.widget.LinearLayoutManager;\nimport android.support.v7.widget.RecyclerView;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\nimport android.widget.TextView;\n\nimport devlight.io.library.ntb.NavigationTabBar;\n\nimport java.util.ArrayList;\nimport java.util.Random;\n\n\/**\n * Created by GIGAMOLE on 28.03.2016.\n *\/\npublic class HorizontalCoordinatorNtbActivity extends Activity {\n\n    @Override\n    protected void onCreate(final Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_horizontal_coordinator_ntb);\n        initUI();\n    }\n\n    private void initUI() {\n        final ViewPager viewPager = (ViewPager) findViewById(R.id.vp_horizontal_ntb);\n        viewPager.setAdapter(new PagerAdapter() {\n            @Override\n            public int getCount() {\n                return 5;\n            }\n\n            @Override\n            public boolean isViewFromObject(final View view, final Object object) {\n                return view.equals(object);\n            }\n\n            @Override\n            public void destroyItem(final View container, final int position, final Object object) {\n                ((ViewPager) container).removeView((View) object);\n            }\n\n            @Override\n            public Object instantiateItem(final ViewGroup container, final int position) {\n                final View view = LayoutInflater.from(\n                        getBaseContext()).inflate(R.layout.item_vp_list, null, false);\n\n                final RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.rv);\n                recyclerView.setHasFixedSize(true);\n                recyclerView.setLayoutManager(new LinearLayoutManager(\n                                getBaseContext(), LinearLayoutManager.VERTICAL, false\n                        )\n                );\n                recyclerView.setAdapter(new RecycleAdapter());\n\n                container.addView(view);\n                return view;\n            }\n        });\n\n<\/pre>\n<p>ViewPager here uses RecyclerView to implement a scrolling list.\n<\/p><pre class=\"lang:default decode:true\" title=\"HorizontalCoordinatorNtbActivity.java\"> final String[] colors = getResources().getStringArray(R.array.default_preview);\n\n        final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb_horizontal);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models = new ArrayList&lt;&gt;();\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first),\n                        Color.parseColor(colors[0]))\n                        .title(\"Heart\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_second),\n                        Color.parseColor(colors[1]))\n                        .title(\"Cup\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_third),\n                        Color.parseColor(colors[2]))\n                        .title(\"Diploma\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth),\n                        Color.parseColor(colors[3]))\n                        .title(\"Flag\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth),\n                        Color.parseColor(colors[4]))\n                        .title(\"Medal\")\n                        .build()\n        );\n\n        navigationTabBar.setModels(models);\n        navigationTabBar.setViewPager(viewPager, 2);<\/pre>\n<p>The implementation of NavigationTabBar is practically the same, except that only one icon for the button is used here and the badges are disabled.\n<\/p><pre class=\"\">\/\/IMPORTANT: ENABLE SCROLL BEHAVIOUR IN COORDINATOR LAYOUT\nnavigationTabBar.setBehaviorEnabled(true);<\/pre>\n<p>And here are the important differences. The navigationTabBar.setBehaviorEnabled method enables synchronization when scrolling with the rest of the widgets in the CoordinatorLayout.\n<\/p><pre class=\"\">navigationTabBar.setOnTabBarSelectedIndexListener(new NavigationTabBar.OnTabBarSelectedIndexListener() {\n    @Override\n    public void onStartTabSelected(final NavigationTabBar.Model model, final int index) {\n    }\n\n    @Override\n    public void onEndTabSelected(final NavigationTabBar.Model model, final int index) {\n        model.hideBadge();\n    }\n});\nnavigationTabBar.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {\n    @Override\n    public void onPageScrolled(final int position, final float positionOffset, final int positionOffsetPixels) {\n\n    }\n\n    @Override\n    public void onPageSelected(final int position) {\n\n    }\n\n    @Override\n    public void onPageScrollStateChanged(final int state) {\n\n    }\n});<\/pre>\n<p>Next, we see a new listener, which defines the highlighted tab by index.\n<\/p><pre class=\"\">final CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.parent);\nfindViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {\n    @Override\n    public void onClick(final View v) {\n        for (int i = 0; i &lt; navigationTabBar.getModels().size(); i++) {\n            final NavigationTabBar.Model model = navigationTabBar.getModels().get(i);\n            navigationTabBar.postDelayed(new Runnable() {\n                @Override\n                public void run() {\n                    final String title = String.valueOf(new Random().nextInt(15));\n                    if (!model.isBadgeShowed()) {\n                        model.setBadgeTitle(title);\n                        model.showBadge();\n                    } else model.updateBadgeTitle(title);\n                }\n            }, i * 100);\n        }<\/pre>\n<p>Below is an instance of CoordinatorLayout. Then the FAB is determined and by clicking on it on the panel buttons there are badges, and in the coordinatorLayout.postDelayed method Snackbar with a message is displayed.\n<\/p><pre class=\"\"> coordinatorLayout.postDelayed(new Runnable() {\n            @Override\n            public void run() {\n                final Snackbar snackbar = Snackbar.make(navigationTabBar, \"Coordinator NTB\", Snackbar.LENGTH_SHORT);\n                snackbar.getView().setBackgroundColor(Color.parseColor(\"#9b92b3\"));\n                ((TextView) snackbar.getView().findViewById(R.id.snackbar_text))\n                        .setTextColor(Color.parseColor(\"#423752\"));\n                snackbar.show();\n            }\n        }, 1000);\n    }\n});<\/pre>\n<p>Next, CollapsingToolbarLayout is created &#8212; this is a toolbar wrapper that implements the collapsing effect &#8212; destruction, or the disappearance of the toolbar when scrolling. Here, the header text color is set when the toolbar is in the normal position and when collapsing.\n<\/p><pre class=\"\">final CollapsingToolbarLayout collapsingToolbarLayout =\n            (CollapsingToolbarLayout) findViewById(R.id.toolbar);\n    collapsingToolbarLayout.setExpandedTitleColor(Color.parseColor(\"#009F90AF\"));\n    collapsingToolbarLayout.setCollapsedTitleTextColor(Color.parseColor(\"#9f90af\"));\n}<\/pre>\n<p>And at the end is the implementation of the adapter class for RecyclerView, which simply creates a list of 20 items.\n<\/p><pre class=\"\">public class RecycleAdapter extends RecyclerView.Adapter&lt;RecycleAdapter.ViewHolder&gt; {\n\n        @Override\n        public ViewHolder onCreateViewHolder(final ViewGroup parent, final int viewType) {\n            final View view = LayoutInflater.from(getBaseContext()).inflate(R.layout.item_list, parent, false);\n            return new ViewHolder(view);\n        }\n\n        @Override\n        public void onBindViewHolder(final ViewHolder holder, final int position) {\n            holder.txt.setText(String.format(\"Navigation Item #%d\", position));\n        }\n\n        @Override\n        public int getItemCount() {\n            return 20;\n        }\n\n        public class ViewHolder extends RecyclerView.ViewHolder {\n\n            public TextView txt;\n\n            public ViewHolder(final View itemView) {\n                super(itemView);\n                txt = (TextView) itemView.findViewById(R.id.txt_vp_item_list);\n            }\n        }\n    }\n}<\/pre>\n<p>The next method is the NavigationTabBar location at the top of the screen.<\/p>\n<p><a href=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-232523.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" class=\"aligncenter wp-image-5683 size-medium\" src=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-232523-153x300.png\" width=\"153\" height=\"300\"\/><\/a><br \/>\nTo do this, the NavigationTabBar is built into AppBarLayout in the markup file.\n<\/p><pre class=\"lang:default decode:true\" title=\"activity_horizontal_top_ntb.xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;android.support.design.widget.CoordinatorLayout\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:background=\"#423752\"\n    android:orientation=\"vertical\"&gt;\n\n    &lt;android.support.v4.view.ViewPager\n        android:id=\"@+id\/vp_horizontal_ntb\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        app:layout_behavior=\"@string\/appbar_scrolling_view_behavior\"\/&gt;\n\n    &lt;android.support.design.widget.AppBarLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:background=\"#00000000\"&gt;\n\n        &lt;FrameLayout\n            android:id=\"@+id\/wrapper_ntb_horizontal\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"wrap_content\"\n            app:layout_scrollFlags=\"scroll|enterAlways\"&gt;\n\n            &lt;devlight.io.library.ntb.NavigationTabBar\n                android:id=\"@+id\/ntb_horizontal\"\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"60dp\"\n                app:ntb_bg_color=\"#605271\"\n                app:ntb_title_size=\"12sp\"\n                app:ntb_badge_bg_color=\"#ffff0000\"\n                app:ntb_badge_gravity=\"bottom\"\n                app:ntb_badge_position=\"left\"\n                app:ntb_badge_title_color=\"#ffffffff\"\n                app:ntb_badge_use_typeface=\"true\"\n                app:ntb_badged=\"true\"\n                app:ntb_title_mode=\"active\"\n                app:ntb_titled=\"true\"\n                app:ntb_scaled=\"false\"\n                app:ntb_typeface=\"fonts\/agency.ttf\"\/&gt;\n\n        &lt;\/FrameLayout&gt;\n\n    &lt;\/android.support.design.widget.AppBarLayout&gt;\n\n    &lt;View\n        android:id=\"@+id\/mask\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"150dp\"\n        android:layout_gravity=\"bottom\"\/&gt;\n\n&lt;\/android.support.design.widget.CoordinatorLayout&gt;\n<\/pre>\n<p>The implementation in the Activity class almost does not differ from the previous example, except for the absence of FAB and CollapsingToolbarLayout.\n<\/p><pre class=\"lang:default decode:true\" title=\"TopHorizontalNtbActivity.java\">package devlight.io.sample;\n\nimport android.app.Activity;\nimport android.graphics.Color;\nimport android.os.Bundle;\nimport android.support.v4.view.PagerAdapter;\nimport android.support.v4.view.ViewPager;\nimport android.support.v7.widget.LinearLayoutManager;\nimport android.support.v7.widget.RecyclerView;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\nimport android.widget.TextView;\n\nimport devlight.io.library.ntb.NavigationTabBar;\n\nimport java.util.ArrayList;\nimport java.util.Random;\n\n\/**\n * Created by GIGAMOLE on 28.03.2016.\n *\/\npublic class TopHorizontalNtbActivity extends Activity {\n\n    @Override\n    protected void onCreate(final Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_horizontal_top_ntb);\n        initUI();\n    }\n\n    private void initUI() {\n        final ViewPager viewPager = (ViewPager) findViewById(R.id.vp_horizontal_ntb);\n        viewPager.setAdapter(new PagerAdapter() {\n            @Override\n            public int getCount() {\n                return 5;\n            }\n\n            @Override\n            public boolean isViewFromObject(final View view, final Object object) {\n                return view.equals(object);\n            }\n\n            @Override\n            public void destroyItem(final View container, final int position, final Object object) {\n                ((ViewPager) container).removeView((View) object);\n            }\n\n            @Override\n            public Object instantiateItem(final ViewGroup container, final int position) {\n                final View view = LayoutInflater.from(\n                        getBaseContext()).inflate(R.layout.item_vp_list, null, false);\n\n                final RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.rv);\n                recyclerView.setHasFixedSize(true);\n                recyclerView.setLayoutManager(new LinearLayoutManager(\n                                getBaseContext(), LinearLayoutManager.VERTICAL, false\n                        )\n                );\n                recyclerView.setAdapter(new RecycleAdapter());\n\n                container.addView(view);\n                return view;\n            }\n        });\n\n        final String[] colors = getResources().getStringArray(R.array.default_preview);\n\n        final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb_horizontal);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models = new ArrayList&lt;&gt;();\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first),\n                        Color.parseColor(colors[0]))\n                        .title(\"Heart\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_second),\n                        Color.parseColor(colors[1]))\n                        .title(\"Cup\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_third),\n                        Color.parseColor(colors[2]))\n                        .title(\"Diploma\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth),\n                        Color.parseColor(colors[3]))\n                        .title(\"Flag\")\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth),\n                        Color.parseColor(colors[4]))\n                        .title(\"Medal\")\n                        .build()\n        );\n        navigationTabBar.setModels(models);\n        navigationTabBar.setViewPager(viewPager, 2);\n\n        navigationTabBar.post(new Runnable() {\n            @Override\n            public void run() {\n                final View viewPager = findViewById(R.id.vp_horizontal_ntb);\n                ((ViewGroup.MarginLayoutParams) viewPager.getLayoutParams()).topMargin =\n                        (int) -navigationTabBar.getBadgeMargin();\n                viewPager.requestLayout();\n            }\n        });\n\n        navigationTabBar.setOnTabBarSelectedIndexListener(new NavigationTabBar.OnTabBarSelectedIndexListener() {\n            @Override\n            public void onStartTabSelected(final NavigationTabBar.Model model, final int index) {\n\n            }\n\n            @Override\n            public void onEndTabSelected(final NavigationTabBar.Model model, final int index) {\n                model.hideBadge();\n            }\n        });\n\n        findViewById(R.id.mask).setOnClickListener(new View.OnClickListener() {\n            @Override\n            public void onClick(final View v) {\n                for (int i = 0; i &lt; navigationTabBar.getModels().size(); i++) {\n                    final NavigationTabBar.Model model = navigationTabBar.getModels().get(i);\n                    navigationTabBar.postDelayed(new Runnable() {\n                        @Override\n                        public void run() {\n                            final String title = String.valueOf(new Random().nextInt(15));\n                            if (!model.isBadgeShowed()) {\n                                model.setBadgeTitle(title);\n                                model.showBadge();\n                            } else model.updateBadgeTitle(title);\n                        }\n                    }, i * 100);\n                }\n            }\n        });\n    }\n\n    public class RecycleAdapter extends RecyclerView.Adapter&lt;RecycleAdapter.ViewHolder&gt; {\n\n        @Override\n        public ViewHolder onCreateViewHolder(final ViewGroup parent, final int viewType) {\n            final View view = LayoutInflater.from(getBaseContext()).inflate(R.layout.item_list, parent, false);\n            return new ViewHolder(view);\n        }\n\n        @Override\n        public void onBindViewHolder(final ViewHolder holder, final int position) {\n            holder.txt.setText(String.format(\"Navigation Item #%d\", position));\n        }\n\n        @Override\n        public int getItemCount() {\n            return 20;\n        }\n\n        public class ViewHolder extends RecyclerView.ViewHolder {\n\n            public TextView txt;\n\n            public ViewHolder(final View itemView) {\n                super(itemView);\n                txt = (TextView) itemView.findViewById(R.id.txt_vp_item_list);\n            }\n        }\n    }\n}\n<\/pre>\n<p>The following example shows the vertical implementation of NavigationTabBar.<\/p>\n<p><a href=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-232859.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" class=\"aligncenter wp-image-5684 size-medium\" src=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-232859-153x300.png\" width=\"153\" height=\"300\"\/><\/a><\/p>\n<p>The markup file is similar to the very first example, only the LinearLayout root has a horizontal orientation.\n<\/p><pre class=\"lang:default decode:true\" title=\"activity_vertical_ntb.xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;LinearLayout\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:orientation=\"horizontal\"\n    android:background=\"#423752\"&gt;\n\n    &lt;devlight.io.library.ntb.NavigationTabBar\n        android:id=\"@+id\/ntb_vertical\"\n        android:layout_width=\"50dp\"\n        android:layout_height=\"match_parent\"\n        app:ntb_preview_colors=\"@array\/vertical_ntb\"\/&gt;\n\n    &lt;android.support.v4.view.ViewPager\n        android:id=\"@+id\/vp_vertical_ntb\"\n        android:layout_width=\"0dp\"\n        android:layout_height=\"match_parent\"\n        android:layout_weight=\"1\"\/&gt;\n\n&lt;\/LinearLayout&gt;\n<\/pre>\n<p>The Activity class code is practically the same as the first example.\n<\/p><pre class=\"lang:default decode:true\" title=\"VerticalNtbActivity.java\">package devlight.io.sample;\n\nimport android.app.Activity;\nimport android.graphics.Color;\nimport android.os.Bundle;\nimport android.support.v4.view.PagerAdapter;\nimport android.support.v4.view.ViewPager;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\nimport android.widget.TextView;\n\nimport devlight.io.library.ntb.NavigationTabBar;\n\nimport java.util.ArrayList;\n\n\/**\n * Created by GIGAMOLE on 28.03.2016.\n *\/\npublic class VerticalNtbActivity extends Activity {\n\n    @Override\n    protected void onCreate(final Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_vertical_ntb);\n        initUI();\n    }\n\n    private void initUI() {\n        final ViewPager viewPager = (ViewPager) findViewById(R.id.vp_vertical_ntb);\n        viewPager.setAdapter(new PagerAdapter() {\n            @Override\n            public int getCount() {\n                return 8;\n            }\n\n            @Override\n            public boolean isViewFromObject(final View view, final Object object) {\n                return view.equals(object);\n            }\n\n            @Override\n            public void destroyItem(final View container, final int position, final Object object) {\n                ((ViewPager) container).removeView((View) object);\n            }\n\n            @Override\n            public Object instantiateItem(final ViewGroup container, final int position) {\n                final View view = LayoutInflater.from(\n                        getBaseContext()).inflate(R.layout.item_vp, null, false);\n\n                final TextView txtPage = (TextView) view.findViewById(R.id.txt_vp_item_page);\n                txtPage.setText(String.format(\"Page #%d\", position));\n\n                container.addView(view);\n                return view;\n            }\n        });\n\n        final String[] colors = getResources().getStringArray(R.array.vertical_ntb);\n\n        final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb_vertical);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models = new ArrayList&lt;&gt;();\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first),\n                        Color.parseColor(colors[0]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_second),\n                        Color.parseColor(colors[1]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_third),\n                        Color.parseColor(colors[2]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth),\n                        Color.parseColor(colors[3]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth),\n                        Color.parseColor(colors[4]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_sixth),\n                        Color.parseColor(colors[5]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_seventh),\n                        Color.parseColor(colors[6]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n        models.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_eighth),\n                        Color.parseColor(colors[7]))\n                        .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))\n                        .build()\n        );\n\n        navigationTabBar.setModels(models);\n        navigationTabBar.setViewPager(viewPager, 4);\n    }\n}\n<\/pre>\n<p>And finally, the last example.<\/p>\n<p><a href=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-233230.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" class=\"aligncenter wp-image-5685 size-medium\" src=\"\/wp-content\/uploads\/2016\/12\/device-2016-12-08-233230-153x300.png\" width=\"153\" height=\"300\"\/><\/a><\/p>\n<p>There are several NavigationTabBar elements in frames in the markup file. Here you can visually see how different attributes affect the display of the panel on the screen.\n<\/p><pre class=\"lang:default decode:true\" title=\"activity_samples_ntb.xml\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;LinearLayout\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:background=\"#423752\"\n    android:orientation=\"vertical\"\n    android:weightSum=\"2\"&gt;\n\n    &lt;LinearLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"0dp\"\n        android:layout_weight=\"1\"\n        android:orientation=\"horizontal\"\n        android:weightSum=\"3\"&gt;\n\n        &lt;FrameLayout\n            android:layout_width=\"0dp\"\n            android:layout_height=\"match_parent\"\n            android:layout_weight=\"1\"\n            android:padding=\"10dp\"&gt;\n\n            &lt;devlight.io.library.ntb.NavigationTabBar\n                android:id=\"@+id\/ntb_sample_1\"\n                android:layout_width=\"80dp\"\n                android:layout_height=\"match_parent\"\n                android:layout_gravity=\"center\"\n                app:ntb_bg_color=\"#605271\"\n                app:ntb_active_color=\"#000\"\n                app:ntb_scaled=\"false\"\n                app:ntb_inactive_color=\"#fff\"\n                app:ntb_animation_duration=\"1000\"\/&gt;\n\n        &lt;\/FrameLayout&gt;\n\n        &lt;FrameLayout\n            android:layout_width=\"0dp\"\n            android:layout_height=\"match_parent\"\n            android:layout_weight=\"1\"\n            android:padding=\"10dp\"&gt;\n\n            &lt;devlight.io.library.ntb.NavigationTabBar\n                android:id=\"@+id\/ntb_sample_2\"\n                android:layout_width=\"50dp\"\n                android:layout_height=\"match_parent\"\n                android:layout_gravity=\"center\"\n                app:ntb_bg_color=\"#d78cd3\"\n                app:ntb_active_color=\"#d78cd3\"\n                app:ntb_inactive_color=\"#d78cd3\"\/&gt;\n\n        &lt;\/FrameLayout&gt;\n\n        &lt;FrameLayout\n            android:layout_width=\"0dp\"\n            android:layout_height=\"match_parent\"\n            android:layout_weight=\"1\"\n            android:padding=\"10dp\"&gt;\n\n            &lt;devlight.io.library.ntb.NavigationTabBar\n                android:id=\"@+id\/ntb_sample_3\"\n                android:layout_width=\"60dp\"\n                android:layout_height=\"match_parent\"\n                android:layout_gravity=\"center\"\n                app:ntb_bg_color=\"#00000000\"\n                app:ntb_corners_radius=\"10dp\"\n                app:ntb_inactive_color=\"#000\"\n                app:ntb_preview_colors=\"@array\/red_wine\"\/&gt;\n\n        &lt;\/FrameLayout&gt;\n\n    &lt;\/LinearLayout&gt;\n\n    &lt;LinearLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"0dp\"\n        android:layout_weight=\"1\"\n        android:orientation=\"vertical\"\n        android:weightSum=\"3\"&gt;\n\n        &lt;FrameLayout\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"0dp\"\n            android:layout_weight=\"1\"\n            android:padding=\"10dp\"&gt;\n\n            &lt;devlight.io.library.ntb.NavigationTabBar\n                android:id=\"@+id\/ntb_sample_4\"\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"80dp\"\n                android:layout_gravity=\"center\"\n                app:ntb_bg_color=\"#00FFFFFF\"\n                app:ntb_active_color=\"#be7818\"\n                app:ntb_inactive_color=\"#be7818\"\n                app:ntb_animation_duration=\"1000\"\/&gt;\n\n        &lt;\/FrameLayout&gt;\n\n        &lt;FrameLayout\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"0dp\"\n            android:layout_weight=\"1\"\n            android:padding=\"10dp\"&gt;\n\n            &lt;devlight.io.library.ntb.NavigationTabBar\n                android:id=\"@+id\/ntb_sample_5\"\n                android:layout_width=\"200dp\"\n                android:layout_height=\"50dp\"\n                android:layout_gravity=\"center\"\n                app:ntb_animation_duration=\"400\"\n                app:ntb_preview_colors=\"@array\/red_wine\"\n                app:ntb_corners_radius=\"25dp\"\n                app:ntb_scaled=\"false\"\n                app:ntb_active_color=\"#8d88e4\"\n                app:ntb_inactive_color=\"#dddfec\"\n                app:ntb_bg_color=\"#8d88e4\"\/&gt;\n\n        &lt;\/FrameLayout&gt;\n\n        &lt;FrameLayout\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"0dp\"\n            android:layout_weight=\"1\"\n            android:padding=\"10dp\"&gt;\n\n            &lt;devlight.io.library.ntb.NavigationTabBar\n                android:id=\"@+id\/ntb_sample_6\"\n                android:layout_width=\"240dp\"\n                android:layout_height=\"60dp\"\n                android:layout_gravity=\"center\"\n                app:ntb_bg_color=\"#4b405c\"\n                app:ntb_corners_radius=\"4dp\"\n                app:ntb_preview_colors=\"@array\/polluted_waves\"\/&gt;\n\n        &lt;\/FrameLayout&gt;\n\n    &lt;\/LinearLayout&gt;\n\n&lt;\/LinearLayout&gt;\n<\/pre>\n<p>In the Activity class, you can see the implementation code for each individual NavigationTabBar element.\n<\/p><pre class=\"lang:default decode:true\" title=\"SamplesNtbActivity.java\">package devlight.io.sample;\n\nimport android.app.Activity;\nimport android.graphics.Color;\nimport android.os.Bundle;\nimport android.support.v4.graphics.ColorUtils;\nimport android.widget.Toast;\n\nimport devlight.io.library.ntb.NavigationTabBar;\n\nimport java.util.ArrayList;\n\n\/**\n * Created by GIGAMOLE on 28.03.2016.\n *\/\npublic class SamplesNtbActivity extends Activity {\n\n    @Override\n    protected void onCreate(final Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_samples_ntb);\n        initUI();\n    }\n\n    private void initUI() {\n        final NavigationTabBar ntbSample1 = (NavigationTabBar) findViewById(R.id.ntb_sample_1);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models1 = new ArrayList&lt;&gt;();\n        models1.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first), Color.WHITE\n                ).build()\n        );\n        models1.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_second), Color.LTGRAY\n                ).build()\n        );\n        models1.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_third), Color.GRAY\n                ).build()\n        );\n        models1.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth), Color.DKGRAY\n                ).build()\n        );\n        ntbSample1.setModels(models1);\n\n        final NavigationTabBar ntbSample2 = (NavigationTabBar) findViewById(R.id.ntb_sample_2);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models2 = new ArrayList&lt;&gt;();\n        models2.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_seventh), Color.YELLOW\n                ).build()\n        );\n        models2.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_sixth), Color.YELLOW\n                ).build()\n        );\n        models2.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth), Color.YELLOW\n                ).build()\n        );\n        models2.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_eighth), Color.YELLOW\n                ).build()\n        );\n        models2.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_second), Color.YELLOW\n                ).build()\n        );\n        ntbSample2.setModels(models2);\n        ntbSample2.setModelIndex(3, true);\n\n        final NavigationTabBar ntbSample3 = (NavigationTabBar) findViewById(R.id.ntb_sample_3);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models3 = new ArrayList&lt;&gt;();\n        models3.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_seventh), Color.RED\n                ).build()\n        );\n        models3.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_seventh), Color.RED\n                ).build()\n        );\n        models3.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_seventh), Color.RED\n                ).build()\n        );\n        ntbSample3.setModels(models3);\n        ntbSample3.setModelIndex(1, true);\n\n        final NavigationTabBar ntbSample4 = (NavigationTabBar) findViewById(R.id.ntb_sample_4);\n        final int bgColor = Color.parseColor(\"#423752\");\n        final ArrayList&lt;NavigationTabBar.Model&gt; models4 = new ArrayList&lt;&gt;();\n        models4.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth), bgColor\n                ).build()\n        );\n        models4.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first), bgColor\n                ).build()\n        );\n        models4.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth), bgColor\n                ).build()\n        );\n        models4.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_sixth), bgColor\n                ).build()\n        );\n        models4.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_third), bgColor\n                ).build()\n        );\n        ntbSample4.setModels(models4);\n        ntbSample4.setModelIndex(2, true);\n\n        final NavigationTabBar ntbSample5 = (NavigationTabBar) findViewById(R.id.ntb_sample_5);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models5 = new ArrayList&lt;&gt;();\n        models5.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth), Color.WHITE\n                ).build()\n        );\n        models5.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first), Color.WHITE\n                ).build()\n        );\n        models5.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth), Color.WHITE\n                ).build()\n        );\n        models5.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_sixth), Color.WHITE\n                ).build()\n        );\n        ntbSample5.setModels(models5);\n        ntbSample5.setModelIndex(2, true);\n        ntbSample5.setOnTabBarSelectedIndexListener(new NavigationTabBar.OnTabBarSelectedIndexListener() {\n            @Override\n            public void onStartTabSelected(final NavigationTabBar.Model model, final int index) {\n\n            }\n\n            @Override\n            public void onEndTabSelected(final NavigationTabBar.Model model, final int index) {\n                Toast.makeText(SamplesNtbActivity.this, String.format(\"onEndTabSelected #%d\", index), Toast.LENGTH_SHORT).show();\n            }\n        });\n\n        final NavigationTabBar ntbSample6 = (NavigationTabBar) findViewById(R.id.ntb_sample_6);\n        final ArrayList&lt;NavigationTabBar.Model&gt; models6 = new ArrayList&lt;&gt;();\n        models6.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fifth), randomColor()\n                ).build()\n        );\n        models6.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_first), randomColor()\n                ).build()\n        );\n        models6.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_fourth), randomColor()\n                ).build()\n        );\n        models6.add(\n                new NavigationTabBar.Model.Builder(\n                        getResources().getDrawable(R.drawable.ic_sixth), randomColor()\n                ).build()\n        );\n        ntbSample6.setModels(models6);\n    }\n\n    private int randomColor() {\n        float[] TEMP_HSL = new float[]{0, 0, 0};\n        float[] hsl = TEMP_HSL;\n        hsl[0] = (float) (Math.random() * 360);\n        hsl[1] = (float) (40 + (Math.random() * 60));\n        hsl[2] = (float) (40 + (Math.random() * 60));\n        return ColorUtils.HSLToColor(hsl);\n    }\n}\n<\/pre>\n<p>This was an overview of how to implement the NavigationTabBar library from the Devlight development team.[:]<\/p>","protected":false},"excerpt":{"rendered":"<p>[:ru]\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u043c \u0432\u044b\u043f\u0443\u0441\u043a\u0435 \u0414\u0438\u0437\u0430\u0439\u043d\u0430 \u0430\u043d\u0434\u0440\u043e\u0438\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b DevLight. \u041a\u0442\u043e \u043d\u0435 \u0432 \u043a\u0443\u0440\u0441\u0435, \u044d\u0442\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u0438 \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0441 \u0443\u0440\u043e\u043a\u043e\u0432 \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u043a\u0430\u043d\u0430\u043b\u0435. \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0438\u0445 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0444\u0438\u0440\u043c\u0430 \u0438 \u043a\u0440\u0443\u0442\u044b\u0435 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0438. \u0418\u043d\u0442\u0435\u0440\u0432\u044c\u044e \u0441 \u0440\u0435\u0431\u044f\u0442\u0430\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435. \u0420\u0435\u0431\u044f\u0442\u0430 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043e \u0442\u043e\u043c, \u0447\u0435\u0433\u043e \u0434\u043e\u0441\u0442\u0438\u0433\u043b\u0438 \u0438 \u0434\u0435\u043b\u044f\u0442\u0441\u044f \u0441\u0435\u043a\u0440\u0435\u0442\u0430\u043c\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u0443\u0441\u043f\u0435\u0445\u0430 \u0441 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5381,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[24],"tags":[3,63,42,19,14,25],"_links":{"self":[{"href":"https:\/\/www.fandroid.info\/wp-json\/wp\/v2\/posts\/5679"}],"collection":[{"href":"https:\/\/www.fandroid.info\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fandroid.info\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fandroid.info\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fandroid.info\/wp-json\/wp\/v2\/comments?post=5679"}],"version-history":[{"count":5,"href":"https:\/\/www.fandroid.info\/wp-json\/wp\/v2\/posts\/5679\/revisions"}],"predecessor-version":[{"id":9528,"href":"https:\/\/www.fandroid.info\/wp-json\/wp\/v2\/posts\/5679\/revisions\/9528"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fandroid.info\/wp-json\/wp\/v2\/media\/5381"}],"wp:attachment":[{"href":"https:\/\/www.fandroid.info\/wp-json\/wp\/v2\/media?parent=5679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fandroid.info\/wp-json\/wp\/v2\/categories?post=5679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fandroid.info\/wp-json\/wp\/v2\/tags?post=5679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}