web-dev-qa-db-ja.com

TabLayoutの下に行を追加する

TabLayoutの下に行を追加しようとして問題が発生しましたが、セレクター行の後ろにある必要があります。次のようになります。

Exemple

すでにカスタムビューを追加しようとしましたが、各タブの内側にマージンがあるため、うまくいきませんでした。

何か案は?

これは私が今得たものです:

current_tablayout

これが私がXMLに追加する方法です:

<Android.support.design.widget.TabLayout
    Android:id="@+id/tabs"
    Android:layout_width="match_parent"
    Android:layout_height="60dp"
    app:tabBackground="@color/white"
    app:tabIndicatorColor="@color/colorAccent"
    app:tabTextColor="@color/white"/>

これは私がコードを介して行っていることです:

private void configureTabLayout() {
    TabLayout.Tab tabHome = mTabLayout.newTab().setIcon(R.drawable.ic_home_cinza);
    TabLayout.Tab tabEmprestimos = mTabLayout.newTab().setIcon(R.drawable.ic_emprestimos_cinza);
    TabLayout.Tab tabPersonal = mTabLayout.newTab().setIcon(R.drawable.ic_usuario_cinza);

    View root = mTabLayout.getChildAt(0);
    if (root instanceof LinearLayout) {
        ((LinearLayout) root).setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
        GradientDrawable drawable = new GradientDrawable();
        drawable.setColor(getResources().getColor(R.color.silver));
        drawable.setSize(2, 1);
        ((LinearLayout) root).setDividerPadding(10);
        ((LinearLayout) root).setDividerDrawable(drawable);
    }

    mTabLayout.addTab(tabHome);
    mTabLayout.addTab(tabEmprestimos);
    mTabLayout.addTab(tabPersonal);
    mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
}
12

Drawableフォルダーにxmlを作成します

background.xml

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item Android:top="-10dp" Android:right="-10dp" Android:left="-10dp">
        <shape 
            Android:shape="rectangle">
            <solid Android:color="#1bd4f6" />
            <stroke
                Android:width="2dp"
                Android:color="#0288D1" />
        </shape>
    </item>

</layer-list>

これをTabLayoutに設定します

  <Android.support.design.widget.TabLayout
        Android:background="@drawable/background"
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="60dp"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabTextColor="@color/white"/>

必要に応じて値と色を変更してください!

出力:

enter image description here

13
Charuක

あなたはこれを試すことができます。ソリューション

<FrameLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <Android.support.design.widget.TabLayout
       Android:id="@+id/tabs"
       Android:layout_width="match_parent"
       Android:layout_height="60dp"
       app:tabBackground="@color/white"
       app:tabIndicatorColor="@color/colorAccent"
       app:tabIndicatorHeight="2.5dp"
       app:tabTextColor="@color/white"/>

    <View
       Android:layout_width="match_parent"
       Android:layout_height="2.5dp"
       Android:layout_gravity="bottom"
       Android:background="#c6c6c6" />

</FrameLayout>
3
Tiko