我如何获得一个圆形标签以填充TabLayout中的圆形标签背景？

Question

我正在使用四舍五入的背景和四舍五入的标签指示符来设计TabLayout。在下面的图像链接中，可以看到我的白色标签周围有某种填充。如何摆脱填充并完全填满标签？

我已经附上了标签页布局的代码。我的background和tabIndicator的可绘制对象是在草图中设计的-尺寸与下面的“预期结果”完全相同。

<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。

我如何使我的设计看起来像预期的图像？任何帮助将不胜感激，谢谢！

Answer 1

我已经完成了此演示，您可以检查一下

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.stackoverflowtest;

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.stackoverflowtest;

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.stackoverflowtest;

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();
    }
}