如何在 TabLayout 中获取圆形选项卡指示器以填充圆形选项卡指示器背景?
How do I get a round tab indicator to fill a round tab indicator background in TabLayout?
我正在设计一个使用圆形背景和圆形选项卡指示符的 TabLayout。在下面的图像 link 中,可以看到我的白色标签周围有某种填充。如何摆脱填充并完全填充选项卡?
我附上了我的选项卡布局的代码。我的背景和 tabIndicator 可绘制对象是在草图中设计的 - 尺寸与下面的 "expected result" 完全相同。
<com.google.android.material.tabs.TabLayout
android:id="@+id/newgroup_tabs"
android:layout_width="0dp"
android:layout_height="45dp"
android:layout_marginTop="22dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="@drawable/newgroup_tabbg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tvnewgroups_title"
app:tabGravity="fill"
app:tabInlineLabel="true"
app:tabIndicator="@drawable/newgroup_tabindicatorwide"
app:tabIndicatorColor="@color/white"
app:tabIndicatorFullWidth="true"
app:tabIndicatorGravity="center"
app:tabIndicatorHeight="54dp"
app:tabMode="fixed"
app:tabTextColor="@color/black" />
我的预期结果应该是这样的,https://ibb.co/XYZ2jkS
但我实际得到的是这个,https://ibb.co/Lz1C0Fy。
如何让我的设计看起来像预期的图像?任何帮助将不胜感激,谢谢!
我已经完成了这个演示你可以检查一下
Mainactivity.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:fitsSystemWindows="true"
android:background="@color/black_overlay"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginTop="22dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="@drawable/demo2"
app:tabGravity="fill"
app:tabInlineLabel="true"
app:tabIndicator="@drawable/demo"
app:tabIndicatorColor="@color/colorWhite"
app:tabIndicatorFullWidth="true"
app:tabIndicatorGravity="stretch"
app:tabIndicatorHeight="54dp"
app:tabMode="fixed"
app:tabTextColor="@color/black_overlay" />
<androidx.viewpager.widget.ViewPager
android:layout_below="@id/tabLayout"
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"></androidx.viewpager.widget.ViewPager>
MainActivity.Java
package com.Whosebugtest;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import com.google.android.material.tabs.TabLayout;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
public class MainActivity extends AppCompatActivity {
private TabAdapter adapter;
private TabLayout tabLayout;
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
adapter = new TabAdapter(getSupportFragmentManager());
adapter.addFragment(new Tab1Fragment(), "Tab 1");
adapter.addFragment(new Tab1Fragment(), "Tab 2");
adapter.addFragment(new Tab1Fragment(), "Tab 3");
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
}
}
demo.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="20dp" />
</shape>
demo2.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#98D5F5" />
<corners android:radius="20dp" />
</shape>
TabFragment1.Java
package com.Whosebugtest;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
public class Tab1Fragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_one, container, false);
}
}
fragment_one.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Tab 1"
android:textSize="36sp" />
</RelativeLayout>
TabAdapter.Java
package com.Whosebugtest;
import java.util.ArrayList;
import java.util.List;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;
public class TabAdapter extends FragmentStatePagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
TabAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
}
我正在设计一个使用圆形背景和圆形选项卡指示符的 TabLayout。在下面的图像 link 中,可以看到我的白色标签周围有某种填充。如何摆脱填充并完全填充选项卡?
我附上了我的选项卡布局的代码。我的背景和 tabIndicator 可绘制对象是在草图中设计的 - 尺寸与下面的 "expected result" 完全相同。
<com.google.android.material.tabs.TabLayout
android:id="@+id/newgroup_tabs"
android:layout_width="0dp"
android:layout_height="45dp"
android:layout_marginTop="22dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="@drawable/newgroup_tabbg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tvnewgroups_title"
app:tabGravity="fill"
app:tabInlineLabel="true"
app:tabIndicator="@drawable/newgroup_tabindicatorwide"
app:tabIndicatorColor="@color/white"
app:tabIndicatorFullWidth="true"
app:tabIndicatorGravity="center"
app:tabIndicatorHeight="54dp"
app:tabMode="fixed"
app:tabTextColor="@color/black" />
我的预期结果应该是这样的,https://ibb.co/XYZ2jkS
但我实际得到的是这个,https://ibb.co/Lz1C0Fy。
如何让我的设计看起来像预期的图像?任何帮助将不胜感激,谢谢!
我已经完成了这个演示你可以检查一下
Mainactivity.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:fitsSystemWindows="true"
android:background="@color/black_overlay"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginTop="22dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="@drawable/demo2"
app:tabGravity="fill"
app:tabInlineLabel="true"
app:tabIndicator="@drawable/demo"
app:tabIndicatorColor="@color/colorWhite"
app:tabIndicatorFullWidth="true"
app:tabIndicatorGravity="stretch"
app:tabIndicatorHeight="54dp"
app:tabMode="fixed"
app:tabTextColor="@color/black_overlay" />
<androidx.viewpager.widget.ViewPager
android:layout_below="@id/tabLayout"
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"></androidx.viewpager.widget.ViewPager>
MainActivity.Java
package com.Whosebugtest;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import com.google.android.material.tabs.TabLayout;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
public class MainActivity extends AppCompatActivity {
private TabAdapter adapter;
private TabLayout tabLayout;
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
adapter = new TabAdapter(getSupportFragmentManager());
adapter.addFragment(new Tab1Fragment(), "Tab 1");
adapter.addFragment(new Tab1Fragment(), "Tab 2");
adapter.addFragment(new Tab1Fragment(), "Tab 3");
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
}
}
demo.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="20dp" />
</shape>
demo2.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#98D5F5" />
<corners android:radius="20dp" />
</shape>
TabFragment1.Java
package com.Whosebugtest;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
public class Tab1Fragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_one, container, false);
}
}
fragment_one.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Tab 1"
android:textSize="36sp" />
</RelativeLayout>
TabAdapter.Java
package com.Whosebugtest;
import java.util.ArrayList;
import java.util.List;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;
public class TabAdapter extends FragmentStatePagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
TabAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
}