风格化

Question

我正在完成一个项目，我们将从旧项目中删除ActionBarSerlock。我正在尝试重建标签栏看起来像原始栏，其中每个标签看起来像一个实际的按钮。现在，外观必须保持不变。这是当前标签栏的样子：
我已经能够使阴影工作，并根据需要显示图标/文本，但在按钮填充整个标签时遇到问题，我需要放入分隔线，使它们看起来像按钮一样以上。这基本上是我到目前为止（这只是一个测试项目，所以图像不是与第一张图像完全相同的质量图像）：

因此，我需要弄清楚如何扩展选项卡按钮以填充整个选项卡位置以及如何创建分隔线以使它们看起来像真正的按钮。下面的许多代码来自原始项目中包含ActionBarSerlock的内容，除非内置于该库中，否则我无法确切地确定按钮布局的创建位置。所以我一直试图将各种东西拼凑在一起，以创造相同的外观和感觉。

这是我在主Activity中填写标签的内容：

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setLogo(R.drawable.navigation_logo);
    toolbar.setBackgroundColor(getResources().getColor(R.color.white));
    toolbar.setTitle("");
    setSupportActionBar(toolbar);

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);

    View tab1View = View.inflate(this, R.layout.tab_accounts, null);
    TabLayout.Tab tab1 = tabLayout.newTab().setCustomView(tab1View);
    tabLayout.addTab(tab1);

    View tab2View = View.inflate(this, R.layout.tab_pay_transfer, null);
    TabLayout.Tab tab2 = tabLayout.newTab().setCustomView(tab2View);
    tabLayout.addTab(tab2);

    View tab3View = View.inflate(this, R.layout.tab_rdc, null);
    TabLayout.Tab tab3 = tabLayout.newTab().setCustomView(tab3View);
    tabLayout.addTab(tab3);

    View tab4View = View.inflate(this, R.layout.tab_more, null);
    TabLayout.Tab tab4 = tabLayout.newTab().setCustomView(tab4View);
    tabLayout.addTab(tab4);

    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

    final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
    final PagerAdapter adapter = new PagerAdapter
            (getSupportFragmentManager(), tabLayout.getTabCount());
    viewPager.setAdapter(adapter);
    viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            Log.d("TEST", "Getting Item: " + tab.getPosition());
            viewPager.setCurrentItem(tab.getPosition());
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
        }

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

        }
    });
}

这是第一个选项卡（tab_accounts.xml）的代码示例。我试过玩分隔线，但不确定这是不是最好的方法。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab_container"
    style="@style/tab_container"
    android:background="@drawable/gradient">

    <View
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:background="@color/divider_color" />

    <ImageView
        android:id="@+id/tab_image"
        style="@style/tab_image"
        android:contentDescription="@null"
        android:src="@drawable/tab_accounts_selector" />

    <TextView
        android:id="@+id/tab_text"
        style="@style/tab_text"
        android:text="Accounts" />

    <View
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:background="@color/divider_color" />

</RelativeLayout>

这是上面标签布局中使用的样式：

<style name="tab_container">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_margin">0dp</item>
    <item name="android:gravity">center</item>
    <item name="android:orientation">vertical</item>
    <item name="android:paddingTop">0dp</item>
    <item name="android:paddingBottom">0dp</item>
    <item name="android:paddingLeft">0dp</item>
    <item name="android:paddingRight">0dp</item>
</style>

<style name="tab_image">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_alignParentTop">true</item>
    <item name="android:layout_centerHorizontal">true</item>
    <item name="android:layout_gravity">center</item>
    <item name="android:paddingTop">2dp</item>
    <item name="android:layout_marginTop">0dp</item>
    <item name="android:layout_marginBottom">2dp</item>
    <item name="android:src">@drawable/tab_accounts_selector</item>
</style>

<style name="tab_text">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:paddingBottom">2dp</item>
    <item name="android:layout_alignParentBottom">true</item>
    <item name="android:layout_centerHorizontal">true</item>
    <item name="android:gravity">center</item>
    <item name="android:text">Accounts</item>
    <item name="android:textColor">@drawable/tab_text_color_selector</item>
    <item name="android:textSize">11sp</item>
</style>

我没有包含选择器文件，因为我认为它们并不真正与所需的更改相关。但如果需要它们或任何其他编码来帮助确定所需的更改，请告诉我，我将提供它们。

就像我提到的那样，这是一个较旧的项目，所以我试图避免不得不尽可能地重组它。

我感谢任何可能的帮助。谢谢。