Merhaba Arkadaşlar,
Bugünki yazımız android’te bottom navigation bar üzerine olacak. İlk olarak Bottom navigation Bar nedir bu konuya değinicez ve sonrasında da bir örnek yapacağız.
Bottom Navigation Bar: Youtube’ın yeni özelliğinden yola çıkarsam bizim Tabhostumuz yerine altta kullanılan geçişli menü bottom navigation drawer’dır. Bugün şunu yapıcaz örnek bir github projesini import edip kullanıcaz.
İmport Edilecek Kütüphane :
https://github.com/Devlight/NavigationTabBar
Örnek:
MainActivity:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
import android.graphics.Color; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import java.util.ArrayList; import devlight.io.library.ntb.NavigationTabBar; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_horizontal_ntb); initUI(); } private void initUI() { final ViewPager viewPager = (ViewPager) findViewById(R.id.vp_horizontal_ntb); viewPager.setAdapter(new PagerAdapter() { @Override public int getCount() { return 5; } @Override public boolean isViewFromObject(final View view, final Object object) { return view.equals(object); } @Override public void destroyItem(final View container, final int position, final Object object) { ((ViewPager) container).removeView((View) object); } @Override public Object instantiateItem(final ViewGroup container, final int position) { final View view = LayoutInflater.from(getBaseContext()).inflate(R.layout.fragment1, null, false); final View view1 = LayoutInflater.from(getBaseContext()).inflate(R.layout.fragment2, null, false); final View view2 = LayoutInflater.from(getBaseContext()).inflate(R.layout.fragment3, null, false); final View view3 = LayoutInflater.from(getBaseContext()).inflate(R.layout.fragment4, null, false); final View view4 = LayoutInflater.from(getBaseContext()).inflate(R.layout.fragment5, null, false); View viewarr[]={view,view1,view2,view3,view4}; container.addView(viewarr[position]); return viewarr[position]; } }); final String[] colors = getResources().getStringArray(R.array.default_preview); final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb_horizontal); final ArrayList<NavigationTabBar.Model> models = new ArrayList<>(); models.add( new NavigationTabBar.Model.Builder( getResources().getDrawable(R.drawable.ic_first), Color.parseColor(colors[0])) .selectedIcon(getResources().getDrawable(R.drawable.ic_sixth)) .title("Heart") .build() ); models.add( new NavigationTabBar.Model.Builder( getResources().getDrawable(R.drawable.ic_second), Color.parseColor(colors[1])) // .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth)) .title("Cup") .build() ); models.add( new NavigationTabBar.Model.Builder( getResources().getDrawable(R.drawable.ic_third), Color.parseColor(colors[2])) .selectedIcon(getResources().getDrawable(R.drawable.ic_seventh)) .title("Diploma") .build() ); models.add( new NavigationTabBar.Model.Builder( getResources().getDrawable(R.drawable.ic_fourth), Color.parseColor(colors[3])) // .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth)) .title("Flag") .build() ); models.add( new NavigationTabBar.Model.Builder( getResources().getDrawable(R.drawable.ic_fifth), Color.parseColor(colors[4])) .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth)) .title("Medal") .build() ); navigationTabBar.setModels(models); navigationTabBar.setViewPager(viewPager, 2); navigationTabBar.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(final int position, final float positionOffset, final int positionOffsetPixels) { } @Override public void onPageSelected(final int position) { System.out.println( "pos:" + position); navigationTabBar.getModels().get(position).hideBadge(); } @Override public void onPageScrollStateChanged(final int state) { } }); navigationTabBar.postDelayed(new Runnable() { @Override public void run() { for (int i = 0; i < navigationTabBar.getModels().size(); i++) { final NavigationTabBar.Model model = navigationTabBar.getModels().get(i); navigationTabBar.postDelayed(new Runnable() { @Override public void run() { model.showBadge(); } }, i * 100); } } }, 500); } } |
Fragment’ler 1-2-3-4-5:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import android.support.v4.app.Fragment; import android.os.Build; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Fragment1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { //Inflate the layout for this fragment return inflater.inflate( R.layout.fragment1, container, false); } } |
activity_horizontal_ntb.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:tools="https://schemas.android.com/tools" android:background="#423752" android:orientation="vertical"> <android.support.v4.view.ViewPager android:id="@+id/vp_horizontal_ntb" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <devlight.io.library.ntb.NavigationTabBar android:id="@+id/ntb_horizontal" android:layout_width="match_parent" android:layout_height="60dp" app:ntb_badge_gravity="top" app:ntb_badge_position="right" app:ntb_badged="true" app:ntb_scaled="true" app:ntb_tinted="true" app:ntb_title_mode="all" app:ntb_titled="true" app:ntb_swiped="true"/> </LinearLayout> |
Fragment’lerin layout dosyası:
|
1 2 3 4 5 6 7 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> </RelativeLayout> |
Gradle dosyasına eklencek import:
|
1 |
compile 'devlight.io:navigationtabbar:1.2.5' |
Uygulama Ekran görüntüsü:
