android Realizes Bottom Navigation Bar

Bottom navigation bar I choose to use FragmentTabHost + Fragment to achieve, this method is easier to use, code is not much

The first is the starting activity_main. xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 tools:context="${relativePackage}.${activityClass}" > 
 
 <FrameLayout 
 android:id="@+id/main_view" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:layout_above="@+id/main_tab" 
 android:layout_alignParentLeft="true" 
 android:layout_alignParentTop="true" > 
 </FrameLayout> 
 
 <view 
 android:id="@+id/main_tab" 
 android:layout_width="match_parent" 
 android:layout_height="50dp" 
 android:layout_alignParentBottom="true" 
 android:layout_alignParentLeft="true" 
 class="android.support.v4.app.FragmentTabHost" /> 
 
</RelativeLayout> 

You can also write directly in the xml file

<android.support.v4.view.FragmentTabHost > 
</android.support.v4.view.FragmentTabHost> 

This xml file is one view plus one tab view to display fragments, tab to place the number of buttons at the bottom

Then there is tab_foot. xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:background="#F6F6F6" 
 android:gravity="center" 
 android:orientation="vertical" > 
 
 <ImageView 
 android:id="@+id/foot_iv" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:src="@drawable/home1" /> 
 
 <TextView 
 android:id="@+id/foot_tv" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginTop="3dp" 
 android:text=" Home page " 
 android:textColor="@color/tab_color" /> 
 
</LinearLayout> 

This is the xml file for the layout settings of each bottom button

Then there is the code of MainActivity

package com.gjn.mynavigation; 
 
import android.os.Bundle; 
import android.support.v4.app.FragmentActivity; 
import android.support.v4.app.FragmentTabHost; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.Window; 
import android.widget.ImageView; 
import android.widget.TabWidget; 
import android.widget.TextView; 
import android.widget.TabHost.OnTabChangeListener; 
import android.widget.TabHost.TabSpec; 
 
public class MainActivity extends FragmentActivity implements OnTabChangeListener { 
 
 private FragmentTabHost mTabHost; 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
 super.onCreate(savedInstanceState); 
 requestWindowFeature(Window.FEATURE_NO_TITLE); 
 setContentView(R.layout.activity_main); 
 
 // Initialization FragmentTabHost 
 initHost(); 
 // Initialize the bottom navigation bar  
 initTab(); 
 // Select by default  
 mTabHost.onTabChanged(TabDb.getTabsTxt()[0]); 
 } 
 
 private void initTab() { 
 String[] tabs = TabDb.getTabsTxt(); 
 for (int i = 0; i < tabs.length; i++) { 
  // New TabSpec 
  TabSpec tabSpec = mTabHost.newTabSpec(TabDb.getTabsTxt()[i]); 
  // Settings view 
  View view = LayoutInflater.from(this).inflate(R.layout.tabs_foot, null); 
  ((TextView) view.findViewById(R.id.foot_tv)).setText(TabDb.getTabsTxt()[i]); 
  ((ImageView) view.findViewById(R.id.foot_iv)).setImageResource(TabDb.getTabsImg()[i]); 
  tabSpec.setIndicator(view); 
  // Join TabSpec 
  mTabHost.addTab(tabSpec,TabDb.getFramgent()[i],null); 
 } 
 } 
 /*** 
 *  Initialization Host 
 */ 
 private void initHost() { 
 mTabHost = (FragmentTabHost) findViewById(R.id.main_tab); 
 // Call setup Method   Settings view 
 mTabHost.setup(this, getSupportFragmentManager(),R.id.main_view); 
 // Remove the dividing line  
 mTabHost.getTabWidget().setDividerDrawable(null); 
 // Monitor events  
 mTabHost.setOnTabChangedListener(this); 
 } 
 
 @Override 
 public void onTabChanged(String arg0) { 
 // How many switching interfaces are obtained from the dividing line  
 TabWidget tabw = mTabHost.getTabWidget(); 
 for (int i = 0; i < tabw.getChildCount(); i++) { 
  View v = tabw.getChildAt(i); 
  TextView tv = (TextView) v.findViewById(R.id.foot_tv); 
  ImageView iv = (ImageView) v.findViewById(R.id.foot_iv); 
  // Modify the current interface button color picture  
  if (i == mTabHost.getCurrentTab()) { 
  tv.setTextColor(getResources().getColor(R.color.tab_light_color)); 
  iv.setImageResource(TabDb.getTabsImgLight()[i]); 
  }else{ 
  tv.setTextColor(getResources().getColor(R.color.tab_color)); 
  iv.setImageResource(TabDb.getTabsImg()[i]); 
  } 
 } 
 } 
} 

Among them, TabDb class is used to set the data of navigation bar and the resource when the picture is switched
The following are the TabDb classes

package com.gjn.mynavigation; 
 
public class TabDb { 
 /*** 
 *  Get all items at the bottom  
 */ 
 public static String[] getTabsTxt() { 
 String[] tabs = {" Home page "," Transaction "," Location "," Mine "}; 
 return tabs; 
 } 
 /*** 
 *  Get all fragments  
 */ 
 public static Class[] getFramgent(){ 
 Class[] cls = {OneFm.class,TwoFm.class,ThreeFm.class,FourFm.class}; 
 return cls ; 
 } 
 /*** 
 *  Get all the pictures before clicking  
 */ 
 public static int[] getTabsImg(){ 
 int[] img = {R.drawable.home1,R.drawable.glod1,R.drawable.xc1,R.drawable.user1}; 
 return img ; 
 } 
 /*** 
 *  Get all clicked pictures  
 */ 
 public static int[] getTabsImgLight(){ 
 int[] img = {R.drawable.home2,R.drawable.glod2,R.drawable.xc2,R.drawable.user2}; 
 return img ; 
 } 
} 

At this point, the bottom navigation bar is completely realized.

Now to implement the top navigation bar, see a lot of the final use of RadioGroup+ViewPager to achieve
The first is to design an xml layout for the first fragment: fm_one. xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:orientation="vertical" > 
 
 <HorizontalScrollView 
 android:id="@+id/one_hv" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:scrollbars="none" > 
 
 <RadioGroup 
  android:id="@+id/one_rg" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:orientation="horizontal" > 
 </RadioGroup> 
 </HorizontalScrollView> 
 
 <view 
 android:id="@+id/one_view" 
 android:layout_width="match_parent" 
 android:layout_height="0dp" 
 android:layout_weight="1" 
 class="android.support.v4.view.ViewPager" /> 
 
</LinearLayout> 

Set the top navigation bar and display view
This is followed by the layout of each item in the navigation bar

tab_rb.xml

<?xml version="1.0" encoding="utf-8"?> 
<RadioButton xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:background="@drawable/tab_rb_selector" 
 android:button="@null" 
 android:paddingBottom="10dp" 
 android:paddingLeft="15dp" 
 android:paddingRight="15dp" 
 android:paddingTop="10dp" 
 android:text=" Today " > 
</RadioButton> 

In which the selector file is set to control the clicked and unclicked status

tab_rb_selector.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android" > 
 <!--  Click  --> 
 <item android:state_checked="true"> 
 <layer-list > 
  <item > 
  <shape android:shape="rectangle"> 
   <stroke android:width="5dp" android:color="@color/tab_light_color"/> 
  </shape> 
  </item> 
  <item android:bottom="5dp"> 
  <shape android:shape="rectangle"> 
   <solid android:color="#fff"/> 
  </shape> 
  </item> 
 </layer-list> 
 </item> 
 <!--  Default  --> 
 <item > 
 <shape > 
  <solid android:color="#fafafa"/> 
 </shape> 
 </item> 
</selector> 

Set the display status when clicking and default
Finally, the OneFm class is implemented

package com.gjn.mynavigation; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.os.Bundle; 
import android.support.annotation.Nullable; 
import android.support.v4.app.Fragment; 
import android.support.v4.view.ViewPager; 
import android.support.v4.view.ViewPager.OnPageChangeListener; 
import android.util.DisplayMetrics; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.HorizontalScrollView; 
import android.widget.RadioButton; 
import android.widget.RadioGroup; 
import android.widget.RadioGroup.LayoutParams; 
import android.widget.RadioGroup.OnCheckedChangeListener; 
 
public class OneFm extends Fragment implements OnPageChangeListener { 
 
 private View view; 
 private RadioGroup rg_; 
 private ViewPager vp_; 
 private HorizontalScrollView hv_; 
 private List<Fragment> newsList = new ArrayList<Fragment>(); 
 private OneFmAdapter adapter; 
 
 @Override 
 public View onCreateView(LayoutInflater inflater, 
 @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { 
 if (view == null) { 
  // Initialization view 
  view = inflater.inflate(R.layout.fm_one, container,false); 
  rg_ = (RadioGroup) view.findViewById(R.id.one_rg); 
  vp_ = (ViewPager) view.findViewById(R.id.one_view); 
  hv_ = (HorizontalScrollView) view.findViewById(R.id.one_hv); 
  // Settings RadioGroup Click event  
  rg_.setOnCheckedChangeListener(new OnCheckedChangeListener() { 
 
  @Override 
  public void onCheckedChanged(RadioGroup group, int id) { 
   vp_.setCurrentItem(id); 
  } 
  } 
  // Initialize the top navigation bar  
  initTab(inflater); 
  // Initialization viewpager 
  initView(); 
 } 
 /**
 *  After the bottom navigation bar is switched,   Because the top setting has not been destroyed, if it is not reset, view 
 *  Cause the bottom to switch back to the top page data will disappear, etc. bug 
 *  The following settings are recreated each time view You can  
 */ 
 ViewGroup parent = (ViewGroup) view.getParent(); 
 if (parent != null) { 
  parent.removeView(view); 
 } 
 return view; 
 } 
 /*** 
 *  Initialization viewpager 
 */ 
 private void initView() { 
 List<HTab> hTabs = HTabDb.getSelected(); 
 for (int i = 0; i < hTabs.size(); i++) { 
  OneFm1 fm1 = new OneFm1(); 
  Bundle bundle = new Bundle(); 
  bundle.putString("name", hTabs.get(i).getName()); 
  fm1.setArguments(bundle); 
  newsList.add(fm1); 
 } 
 // Settings viewpager Adapter  
 adapter = new OneFmAdapter(getActivity().getSupportFragmentManager(),newsList); 
 vp_.setAdapter(adapter); 
 // Two viewpager Switch No Reload  
 vp_.setOffscreenPageLimit(2); 
 // Set the default  
 vp_.setCurrentItem(0); 
 // Settings viewpager Monitor events  
 vp_.setOnPageChangeListener(this); 
 } 
 /*** 
 *  Initialize the header navigation bar  
 * @param inflater 
 */ 
 private void initTab(LayoutInflater inflater) { 
 List<HTab> hTabs = HTabDb.getSelected(); 
 for (int i = 0; i < hTabs.size(); i++) { 
  // Setting header item layout initialization data  
  RadioButton rbButton = (RadioButton) inflater.inflate(R.layout.tab_rb, null); 
  rbButton.setId(i); 
  rbButton.setText(hTabs.get(i).getName()); 
  LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, 
  LayoutParams.WRAP_CONTENT); 
  // Join RadioGroup 
  rg_.addView(rbButton,params); 
 } 
 // Default click  
 rg_.check(0); 
 } 
 @Override 
 public void onPageScrollStateChanged(int arg0) { 
 
 } 
 @Override 
 public void onPageScrolled(int arg0, float arg1, int arg2) { 
 
 } 
 @Override 
 public void onPageSelected(int id) { 
 setTab(id); 
 } 
 /*** 
 *  Page jump toggle header offset setting  
 * @param id 
 */ 
 private void setTab(int id) { 
 RadioButton rbButton = (RadioButton) rg_.getChildAt(id); 
 // Set the title to be clicked  
 rbButton.setChecked(true); 
 // Offset setting  
 int left = rbButton.getLeft(); 
 int width = rbButton.getMeasuredWidth(); 
 DisplayMetrics metrics = new DisplayMetrics(); 
 getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics); 
 int screenWidth = metrics.widthPixels; 
 // Moving distance =  The position on the left  + button Width of 1 Half  -  Of the screen width 1 Half  
 int len = left + width / 2 - screenWidth / 2; 
 // Moving  
 hv_.smoothScrollTo(len, 0); 
 } 
} 

There are two data classes and one fragment class

Data class

HTab.java

package com.gjn.mynavigation; 
 
/*** 
 *  Head Tab Attribute  
 * 
 */ 
public class HTab { 
 private String name; 
 
 public HTab(String name) { 
 super(); 
 this.setName(name); 
 } 
 
 public String getName() { 
 return name; 
 } 
 
 public void setName(String name) { 
 this.name = name; 
 } 
} 

HTabDb.java

<android.support.v4.view.FragmentTabHost > 
</android.support.v4.view.FragmentTabHost> 

0

Fragments
OneFm1.java

<android.support.v4.view.FragmentTabHost > 
</android.support.v4.view.FragmentTabHost> 

1

In this way, the top navigation bar is added to the first fragment and the switching function is realized
Finally, paste fragment. xml, which is the most default display page for each fragment

<android.support.v4.view.FragmentTabHost > 
</android.support.v4.view.FragmentTabHost> 

2