Comment afficher ce type d'onglets TabLayout dans Android?

Question

Affichage Ce type d'onglets dans Tablayout

J'ai essayé mais n'a pas obtenu le bon rendement

Mon code est ici

private int[] imageList= {R.drawable.icon_category,R.drawable.icon_newest}; 

tabLayout=(TabLayout)findViewById(R.id.tabs); 
    tabLayout.addTab(tabLayout.newTab().setText("")); 
    tabLayout.addTab(tabLayout.newTab().setText("")); 


    for (int i = 0; i < imageList.length; i++) { 
     tabLayout.getTabAt(i).setIcon(imageList[i]); 
    } 

Answer 1

Essayez le suivant à l'aide Tab personnalisé

disposition principale xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical"> 

<android.support.design.widget.TabLayout 
    android:id="@+id/tab_layout" 
    android:layout_width="match_parent" 
    android:layout_height="45dp" 
    android:background="?attr/colorPrimary" 
    app:tabIndicatorHeight="0dp" 

    /> 

<android.support.v4.view.ViewPager 

    android:id="@+id/view_pager" 
    android:layout_width="match_parent" 
    android:layout_height="0dp" 
    android:layout_marginTop="?android:actionBarSize" 
    android:layout_weight="1" /> 
</LinearLayout> 

principale classe d'activité

public class MainActivity extends AppCompatActivity { 

private TabLayout mTabLayout; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
    ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager); 
    mTabLayout = (TabLayout) findViewById(R.id.tab_layout); 
    final MyPagerAdapter pagerAdapter = new MyPagerAdapter(getSupportFragmentManager()); 
    if (viewPager != null) 
     viewPager.setAdapter(pagerAdapter); 
    viewPager.setOffscreenPageLimit(2); 
    mTabLayout = (TabLayout) findViewById(R.id.tab_layout); 
    if (mTabLayout != null) { 
     mTabLayout.setupWithViewPager(viewPager); 

     for (int i = 0; i < mTabLayout.getTabCount(); i++) { 
      TabLayout.Tab tab = mTabLayout.getTabAt(i); 
      if (tab != null) 
       tab.setCustomView(pagerAdapter.getTabView(i)); 
     } 

     mTabLayout.getTabAt(0).getCustomView().setSelected(true); 
    } 
    pagerAdapter.SetOnSelectView(mTabLayout, 0); 

    mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
     @Override 
     public void onTabSelected(TabLayout.Tab tab) { 
      int c = tab.getPosition(); 
      pagerAdapter.SetOnSelectView(mTabLayout, c); 
     } 

     @Override 
     public void onTabUnselected(TabLayout.Tab tab) { 
      int c = tab.getPosition(); 
      pagerAdapter.SetUnSelectView(mTabLayout, c); 
     } 

     @Override 
     public void onTabReselected(TabLayout.Tab tab) { 

     } 
    }); 
} 

private class MyPagerAdapter extends FragmentPagerAdapter { 

    public final int PAGE_COUNT = 3; 
    TextView title; 
    private final String[] mTabsTitle = {"Events", "News", "Contacts"}; 

    public MyPagerAdapter(FragmentManager fm) { 
     super(fm); 
    } 

    public View getTabView(int position) { 
     // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView 
     View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null); 
     title = (TextView) view.findViewById(R.id.title); 
     title.setText(mTabsTitle[position]); 
     return view; 
    } 

    public void SetOnSelectView(TabLayout tabLayout, int position) { 
     TabLayout.Tab tab = tabLayout.getTabAt(position); 
     View selected = tab.getCustomView(); 
     TextView iv_text = (TextView) selected.findViewById(R.id.title); 
     iv_text.setTextColor(getApplicationContext().getResources().getColor(R.color.colorwhite)); 
    } 

    public void SetUnSelectView(TabLayout tabLayout, int position) { 
     TabLayout.Tab tab = tabLayout.getTabAt(position); 
     View selected = tab.getCustomView(); 
     TextView iv_text = (TextView) selected.findViewById(R.id.title); 
     iv_text.setTextColor(getApplicationContext().getResources().getColor(R.color.colorblack)); 
    } 

    @Override 
    public Fragment getItem(int pos) { 

     switch (pos) { 

      case 0: 
       return TestFragemt.newInstance("", ""); 


      case 1: 
       return NewTestFragment.newInstance("", ""); 

      case 2: 
       return TestFragemt.newInstance("", ""); 
     } 

     return null; 
    } 

    @Override 
    public int getCount() { 
     return PAGE_COUNT; 
    } 

    @Override 
    public CharSequence getPageTitle(int position) { 
     return mTabsTitle[position]; 
    } 
} 
} 

mise en page de CustomTab xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:background="@drawable/tab_color_selector" 
android:gravity="center" 
android:orientation="vertical" 

> 
<TextView 
    android:id="@+id/title" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:ellipsize="end" 
    android:maxLines="1" 
    android:padding="7dp" 
    android:textStyle="bold" 
    android:textAllCaps="false" 
    android:textColor="#000000" 
    android:textSize="12sp" 
    tools:text="Recents" /> 

    </LinearLayout> 

tab_color_selector dans drawable

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:drawable="@drawable/bagselected" 
android:state_selected="true"/> 
<item android:drawable="@drawable/bag" android:state_pressed="true"/> 
<item android:drawable="@drawable/bag"/> 
</selector> 

classe TestFrgment

public class TestFragemt extends Fragment { 
// TODO: Rename parameter arguments, choose names that match 
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER 
private static final String ARG_PARAM1 = "param1"; 
private static final String ARG_PARAM2 = "param2"; 


public TestFragemt() { 
    // Required empty public constructor 
} 

/** 
* Use this factory method to create a new instance of 
* this fragment using the provided parameters. 
* 
* @param param1 Parameter 1. 
* @param param2 Parameter 2. 
* @return A new instance of fragment TestFragemt. 
*/ 
// TODO: Rename and change types and number of parameters 
public static TestFragemt newInstance(String param1, String param2) { 
    TestFragemt fragment = new TestFragemt(); 
    Bundle args = new Bundle(); 
    args.putString(ARG_PARAM1, param1); 
    args.putString(ARG_PARAM2, param2); 
    fragment.setArguments(args); 
    return fragment; 
} 

@Override 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 

} 


@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
         Bundle savedInstanceState) { 
    // Inflate the layout for this fragment 

    View rootview = inflater.inflate(R.layout.testfragment, container, 
false); 

    return rootview; 

} 



} 

mise en page de testfragment xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="vertical" android:layout_width="match_parent" 
android:layout_height="match_parent"> 
<TextView 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:text="Fragment 1"/> 
</LinearLayout> 

NewTestFragment classe

public class NewTestFragment extends Fragment { 
// TODO: Rename parameter arguments, choose names that match 
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER 
private static final String ARG_PARAM1 = "param1"; 
private static final String ARG_PARAM2 = "param2"; 

public NewTestFragment() { 
    // Required empty public constructor 
} 

/** 
* Use this factory method to create a new instance of 
* this fragment using the provided parameters. 
* 
* @param param1 Parameter 1. 
* @param param2 Parameter 2. 
* @return A new instance of fragment TestFragemt. 
*/ 
// TODO: Rename and change types and number of parameters 
public static NewTestFragment newInstance(String param1, String param2) { 
    NewTestFragment fragment = new NewTestFragment(); 
    Bundle args = new Bundle(); 
    args.putString(ARG_PARAM1, param1); 
    args.putString(ARG_PARAM2, param2); 
    fragment.setArguments(args); 
    return fragment; 
} 

@Override 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 

} 


@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
         Bundle savedInstanceState) { 
    // Inflate the layout for this fragment 

    View rootview = inflater.inflate(R.layout.new_fragment, container, 
false); 

    return rootview; 

} 



} 

newtestfragment xml layout

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="vertical" android:layout_width="match_parent" 
android:layout_height="match_parent"> 
<TextView 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:text="Fragment 2"/> 
</LinearLayout> 

bagselected xml dans drawable

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
<solid android:color="#000000"/> 
<stroke android:width="1dip" android:color="#000000" /> 
<corners android:radius="15dip"/> 
<padding android:left="0dip" android:top="0dip" android:right="0dip" 
android:bottom="0dip" /> 
</shape> 

sac xml dans drawable

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
<solid android:color="#ffffff"/> 
<stroke android:width="1dip" android:color="#ffffff" /> 
<corners android:radius="15dip"/> 
<padding android:left="0dip" android:top="0dip" android:right="0dip" 
android:bottom="0dip" /> 
</shape> 

sortie:

pour réduire l'espace entre vos onglets utilisent tabPaddingStart et tabPaddingEnd

<android.support.design.widget.TabLayout 
    android:id="@+id/tab_layout" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="?attr/colorPrimary" 
    app:tabMode="scrollable" 
    app:tabIndicatorHeight="0dp" 
    app:tabPaddingStart="2dp" 
    app:tabPaddingEnd="2dp" 

    />