[英]Custom TabLayout Indicator - Android
I have been trying to make a custom TabLayout indicator like Google Drive's one but didn't figure it out.我一直在尝试制作一个像 Google Drive 一样的自定义 TabLayout 指示器,但没有弄明白。 I tried the following article:
我尝试了以下文章:
https://medium.com/@adrianespi94/apply-new-google-style-to-your-android-material-tabs-4d498c993c51 https://medium.com/@adrianespi94/apply-new-google-style-to-your-android-material-tabs-4d498c993c51
It works fine, but not as good as the one in the GIF below.它工作正常,但不如下面 GIF 中的那个。
Thanks in advance.提前致谢。
There's two thing like this.有两件事是这样的。
works by clicking on tab.通过单击选项卡工作。
works by horizontal scrolling and clicking on tab also.通过水平滚动和单击选项卡也可以工作。
I don't know what you want actually.我不知道你实际上想要什么。 cause, the link you gave that is
no 1
.因为,你给的链接是
no 1
。 which is TabHost
.这是
TabHost
。 I am adding source code for both.我正在为两者添加源代码。
ViewPagerAdapter
: ViewPagerAdapter
:
public class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> fragmentList=new ArrayList<>();
private final List<String> fragmentListTitles=new ArrayList<>();
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentListTitles.size();
}
//return page title
@Override
public CharSequence getPageTitle(int position) {
return fragmentListTitles.get(position);
}
public void AddFragment(Fragment fragment,String title)
{
fragmentList.add(fragment);
fragmentListTitles.add(title);
}
}
MainActivity
: MainActivity
:
private TabLayout tabLayout;
private AppBarLayout appBarLayout;
private ViewPager viewPager;
tabLayout=(TabLayout)findViewById(R.id.tablayout);
viewPager=(ViewPager)findViewById(R.id.viewpager);
//create viewpageradaper class object
ViewPagerAdapter adapter=new ViewPagerAdapter(getSupportFragmentManager());
//adding fragments using adapter object
adapter.AddFragment(new FreeFireFragment(), "Free Fire");
adapter.AddFragment(new PubgFragment(), "Pubg");
adapter.AddFragment(new CallOfDutyFragment(), "Call of Duty");
//set adapter into viewpager
viewPager.setAdapter(adapter);
//set viewpager into tablayout
tabLayout.setupWithViewPager(viewPager);
If you want to add icon:如果要添加图标:
//for set icon into tab items
final int[] ICONS = new int[]{
R.drawable.ff,
R.drawable.pubg,
R.drawable.cod
};
//enter the following source code below the MainActivity source code
//set icon to tab items
tabLayout.getTabAt(0).setIcon(ICONS[0]);
tabLayout.getTabAt(1).setIcon(ICONS[1]);
tabLayout.getTabAt(2).setIcon(ICONS[2]);
activity_home.xml
: activity_home.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="55dp"
app:tabBackground="@color/homeColor"
app:tabGravity="fill"
app:tabIndicatorColor="@color/tabIndicator"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/tabIndicator"
app:tabTextColor="@color/tabTextColor">
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/viewpager">
</androidx.viewpager.widget.ViewPager>
</LinearLayout>
Above source code works as no 2.上面的源代码作为没有 2 工作。
Now, no 1:现在,没有1:
Layout
: Layout
:
<TabHost
android:id="@+id/tab_host"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@id/rl_">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/Filters"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="@layout/filters_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/Adjustments"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
layout="@layout/adjustment_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</FrameLayout>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#40cccccc" />
</LinearLayout>
</TabHost>
MainActivity
//setup tabHost
TabHost tabHost = findViewById(R.id.tab_host);
tabHost.setup();
//set item 1 in tabhost
TabHost.TabSpec Filters= tabHost.newTabSpec("Filters");
Filters.setContent(R.id.Filters);
Filters.setIndicator("Filters");
tabHost.addTab(Filters);
//set item 2 in tabhost
TabHost.TabSpec Adjustments= tabHost.newTabSpec("Adjustments");
Adjustments.setContent(R.id.Adjustments);
Adjustments.setIndicator("Adjustments");
tabHost.addTab(Adjustments);
I made the solution by myself, it seems like the solution can be done easily without libraries or any spaghetti code.我自己制作了解决方案,似乎无需库或任何意大利面条代码即可轻松完成解决方案。
First, you need to an XML file for tab indicator:首先,您需要一个 XML 文件作为选项卡指示器:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
<size android:height="3dp" />
<solid android:color="@color/selectedColor" />
</shape>
Then make a Selector to change the indicator color based on your selection:然后制作一个 Selector 以根据您的选择更改指示器颜色:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/selectedColor" android:state_selected="true" />
<item android:color="@color/notSelectedColor" />
</selector>
Finally in your TabLayout, add these lines:最后在您的 TabLayout 中,添加以下行:
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIconTint="@drawable/tab_selector_color" //for selection
app:tabIndicator="@drawable/tab_indicator" //for rounded corners
app:tabIndicatorAnimationMode="elastic" //for that elastic swiping effect
app:tabIndicatorColor="@color/selectedColor"
app:tabIndicatorFullWidth="false"
app:tabInlineLabel="true"
app:tabSelectedTextColor="@color/selectedColor"
app:tabTextColor="@color/notSelectedColor"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.