Customize the selected tab in TabLayout

Here's what I need

enter image description here

Here's what I achieved (Ignore the size and background color)

enter image description here

My codes:

<android.support.design.widget.TabLayout

                    android:id="@+id/tabs"

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_marginTop="24dp"

                    app:tabMode="fixed"

                    app:tabBackground="@drawable/tab_selector"

                    app:tabIndicatorHeight="0dp"

                    app:tabTextAppearance="?android:textAppearanceMedium"

                    app:tabSelectedTextColor="#6e00b5"/>

tab_selector.xml

    <?xml version="1.0" encoding="utf-8"?>

    <selector xmlns:android="http://schemas.android.com/apk/res/android">



    <item android:drawable="@drawable/selected_dot"

        android:state_selected="true"/>



</selector>

selected_dot.xml

<?xml version="1.0" encoding="utf-8"?>

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

<item>

    <shape

        android:innerRadius="0dp"

        android:shape="ring"

        android:thickness="4dp"

        android:useLevel="false">

        <solid android:color="#6e00b5"/>

    </shape>

</item>

The only problem I'm facing is to place the dot under the text.

asked Nov 20 '18 at 12:21

Sambit Mallick

93110

add a comment |

Here's what I need

enter image description here

Here's what I achieved (Ignore the size and background color)

enter image description here

My codes:

<android.support.design.widget.TabLayout

                    android:id="@+id/tabs"

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_marginTop="24dp"

                    app:tabMode="fixed"

                    app:tabBackground="@drawable/tab_selector"

                    app:tabIndicatorHeight="0dp"

                    app:tabTextAppearance="?android:textAppearanceMedium"

                    app:tabSelectedTextColor="#6e00b5"/>

tab_selector.xml

    <?xml version="1.0" encoding="utf-8"?>

    <selector xmlns:android="http://schemas.android.com/apk/res/android">



    <item android:drawable="@drawable/selected_dot"

        android:state_selected="true"/>



</selector>

selected_dot.xml

<?xml version="1.0" encoding="utf-8"?>

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

<item>

    <shape

        android:innerRadius="0dp"

        android:shape="ring"

        android:thickness="4dp"

        android:useLevel="false">

        <solid android:color="#6e00b5"/>

    </shape>

</item>

The only problem I'm facing is to place the dot under the text.

asked Nov 20 '18 at 12:21

Sambit Mallick

93110

add a comment |

Here's what I need

enter image description here

Here's what I achieved (Ignore the size and background color)

enter image description here

My codes:

<android.support.design.widget.TabLayout

                    android:id="@+id/tabs"

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_marginTop="24dp"

                    app:tabMode="fixed"

                    app:tabBackground="@drawable/tab_selector"

                    app:tabIndicatorHeight="0dp"

                    app:tabTextAppearance="?android:textAppearanceMedium"

                    app:tabSelectedTextColor="#6e00b5"/>

tab_selector.xml

    <?xml version="1.0" encoding="utf-8"?>

    <selector xmlns:android="http://schemas.android.com/apk/res/android">



    <item android:drawable="@drawable/selected_dot"

        android:state_selected="true"/>



</selector>

selected_dot.xml

<?xml version="1.0" encoding="utf-8"?>

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

<item>

    <shape

        android:innerRadius="0dp"

        android:shape="ring"

        android:thickness="4dp"

        android:useLevel="false">

        <solid android:color="#6e00b5"/>

    </shape>

</item>

The only problem I'm facing is to place the dot under the text.

asked Nov 20 '18 at 12:21

Sambit Mallick

93110

Here's what I need

enter image description here

Here's what I achieved (Ignore the size and background color)

enter image description here

My codes:

<android.support.design.widget.TabLayout

                    android:id="@+id/tabs"

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_marginTop="24dp"

                    app:tabMode="fixed"

                    app:tabBackground="@drawable/tab_selector"

                    app:tabIndicatorHeight="0dp"

                    app:tabTextAppearance="?android:textAppearanceMedium"

                    app:tabSelectedTextColor="#6e00b5"/>

tab_selector.xml

    <?xml version="1.0" encoding="utf-8"?>

    <selector xmlns:android="http://schemas.android.com/apk/res/android">



    <item android:drawable="@drawable/selected_dot"

        android:state_selected="true"/>



</selector>

selected_dot.xml

<?xml version="1.0" encoding="utf-8"?>

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

<item>

    <shape

        android:innerRadius="0dp"

        android:shape="ring"

        android:thickness="4dp"

        android:useLevel="false">

        <solid android:color="#6e00b5"/>

    </shape>

</item>

The only problem I'm facing is to place the dot under the text.

android android-layout android-xml android-tablayout

asked Nov 20 '18 at 12:21

Sambit Mallick

93110

asked Nov 20 '18 at 12:21

Sambit Mallick

93110

asked Nov 20 '18 at 12:21

Sambit Mallick

93110

asked Nov 20 '18 at 12:21

Sambit Mallick

93110

asked Nov 20 '18 at 12:21

Sambit Mallick

93110

add a comment |

2 Answers
2

active

oldest

votes

Simple Solution

Use app:tabIndicator instead of app:tabBackground

<TabLayout

    app:tabIndicator="@drawable/tab_dot"

    app:tabIndicatorHeight="8dp">

Note that use at least double app:tabIndicatorHeight of tab thinkness (4dp) to make that fully visible.

edited Nov 20 '18 at 13:25

answered Nov 20 '18 at 12:56

Khemraj

12k23170

Damn! I thought I can only change the background. I should have tried this before asking.
– Sambit Mallick
Nov 20 '18 at 13:15

add a comment |

I don't think so, tab selector will work in case of tablayout. You need to implement in your own way

You need to set TabSlected listener and then add below code,

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){

    @Override

    public void onTabSelected(TabLayout.Tab tab){

    int position = tab.getPosition();

    LinearLayout view = (LinearLayout) tabLayout.getChildAt(0);      

    TextView textView = (TextView) view.getChildAt(position);

//Below line will change selected tab textview title only.

    textView.setCompoundDrawablesWithIntrinsicBounds(null,null,null,objContext.getResources().getDrawable(R.drawable.selected_dot))

    }

});

edited Nov 20 '18 at 12:59

answered Nov 20 '18 at 12:51

Anil Ghodake

8291433

Cannot resolve tabStrip and objContext
– Sambit Mallick
Nov 20 '18 at 12:59

Use tablayout object instead of tabstrip. I just edited the answer.
– Anil Ghodake
Nov 20 '18 at 13:03

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53392887%2fcustomize-the-selected-tab-in-tablayout%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Simple Solution

Use app:tabIndicator instead of app:tabBackground

<TabLayout

    app:tabIndicator="@drawable/tab_dot"

    app:tabIndicatorHeight="8dp">

Note that use at least double app:tabIndicatorHeight of tab thinkness (4dp) to make that fully visible.

edited Nov 20 '18 at 13:25

answered Nov 20 '18 at 12:56

Khemraj

12k23170

Damn! I thought I can only change the background. I should have tried this before asking.
– Sambit Mallick
Nov 20 '18 at 13:15

add a comment |

Simple Solution

Use app:tabIndicator instead of app:tabBackground

<TabLayout

    app:tabIndicator="@drawable/tab_dot"

    app:tabIndicatorHeight="8dp">

Note that use at least double app:tabIndicatorHeight of tab thinkness (4dp) to make that fully visible.

edited Nov 20 '18 at 13:25

answered Nov 20 '18 at 12:56

Khemraj

12k23170

Damn! I thought I can only change the background. I should have tried this before asking.
– Sambit Mallick
Nov 20 '18 at 13:15

add a comment |

Simple Solution

Use app:tabIndicator instead of app:tabBackground

<TabLayout

    app:tabIndicator="@drawable/tab_dot"

    app:tabIndicatorHeight="8dp">

Note that use at least double app:tabIndicatorHeight of tab thinkness (4dp) to make that fully visible.

edited Nov 20 '18 at 13:25

answered Nov 20 '18 at 12:56

Khemraj

12k23170

Simple Solution

Use app:tabIndicator instead of app:tabBackground

<TabLayout

    app:tabIndicator="@drawable/tab_dot"

    app:tabIndicatorHeight="8dp">

Note that use at least double app:tabIndicatorHeight of tab thinkness (4dp) to make that fully visible.

edited Nov 20 '18 at 13:25

answered Nov 20 '18 at 12:56

Khemraj

12k23170

edited Nov 20 '18 at 13:25

answered Nov 20 '18 at 12:56

Khemraj

12k23170

answered Nov 20 '18 at 12:56

Khemraj

12k23170

answered Nov 20 '18 at 12:56

Khemraj

12k23170

Damn! I thought I can only change the background. I should have tried this before asking.
– Sambit Mallick
Nov 20 '18 at 13:15

add a comment |

Damn! I thought I can only change the background. I should have tried this before asking.
– Sambit Mallick
Nov 20 '18 at 13:15

Damn! I thought I can only change the background. I should have tried this before asking.
– Sambit Mallick
Nov 20 '18 at 13:15

add a comment |

I don't think so, tab selector will work in case of tablayout. You need to implement in your own way

You need to set TabSlected listener and then add below code,

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){

    @Override

    public void onTabSelected(TabLayout.Tab tab){

    int position = tab.getPosition();

    LinearLayout view = (LinearLayout) tabLayout.getChildAt(0);      

    TextView textView = (TextView) view.getChildAt(position);

//Below line will change selected tab textview title only.

    textView.setCompoundDrawablesWithIntrinsicBounds(null,null,null,objContext.getResources().getDrawable(R.drawable.selected_dot))

    }

});

edited Nov 20 '18 at 12:59

answered Nov 20 '18 at 12:51

Anil Ghodake

8291433

Cannot resolve tabStrip and objContext
– Sambit Mallick
Nov 20 '18 at 12:59

Use tablayout object instead of tabstrip. I just edited the answer.
– Anil Ghodake
Nov 20 '18 at 13:03

add a comment |

I don't think so, tab selector will work in case of tablayout. You need to implement in your own way

You need to set TabSlected listener and then add below code,

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){

    @Override

    public void onTabSelected(TabLayout.Tab tab){

    int position = tab.getPosition();

    LinearLayout view = (LinearLayout) tabLayout.getChildAt(0);      

    TextView textView = (TextView) view.getChildAt(position);

//Below line will change selected tab textview title only.

    textView.setCompoundDrawablesWithIntrinsicBounds(null,null,null,objContext.getResources().getDrawable(R.drawable.selected_dot))

    }

});

edited Nov 20 '18 at 12:59

answered Nov 20 '18 at 12:51

Anil Ghodake

8291433

Cannot resolve tabStrip and objContext
– Sambit Mallick
Nov 20 '18 at 12:59

Use tablayout object instead of tabstrip. I just edited the answer.
– Anil Ghodake
Nov 20 '18 at 13:03

add a comment |

I don't think so, tab selector will work in case of tablayout. You need to implement in your own way

You need to set TabSlected listener and then add below code,

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){

    @Override

    public void onTabSelected(TabLayout.Tab tab){

    int position = tab.getPosition();

    LinearLayout view = (LinearLayout) tabLayout.getChildAt(0);      

    TextView textView = (TextView) view.getChildAt(position);

//Below line will change selected tab textview title only.

    textView.setCompoundDrawablesWithIntrinsicBounds(null,null,null,objContext.getResources().getDrawable(R.drawable.selected_dot))

    }

});

edited Nov 20 '18 at 12:59

answered Nov 20 '18 at 12:51

Anil Ghodake

8291433

I don't think so, tab selector will work in case of tablayout. You need to implement in your own way

You need to set TabSlected listener and then add below code,

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){

    @Override

    public void onTabSelected(TabLayout.Tab tab){

    int position = tab.getPosition();

    LinearLayout view = (LinearLayout) tabLayout.getChildAt(0);      

    TextView textView = (TextView) view.getChildAt(position);

//Below line will change selected tab textview title only.

    textView.setCompoundDrawablesWithIntrinsicBounds(null,null,null,objContext.getResources().getDrawable(R.drawable.selected_dot))

    }

});

edited Nov 20 '18 at 12:59

answered Nov 20 '18 at 12:51

Anil Ghodake

8291433

edited Nov 20 '18 at 12:59

answered Nov 20 '18 at 12:51

Anil Ghodake

8291433

answered Nov 20 '18 at 12:51

Anil Ghodake

8291433

answered Nov 20 '18 at 12:51

Anil Ghodake

8291433

Cannot resolve tabStrip and objContext
– Sambit Mallick
Nov 20 '18 at 12:59

Use tablayout object instead of tabstrip. I just edited the answer.
– Anil Ghodake
Nov 20 '18 at 13:03

add a comment |

Cannot resolve tabStrip and objContext
– Sambit Mallick
Nov 20 '18 at 12:59

Use tablayout object instead of tabstrip. I just edited the answer.
– Anil Ghodake
Nov 20 '18 at 13:03

Cannot resolve tabStrip and objContext
– Sambit Mallick
Nov 20 '18 at 12:59

Use tablayout object instead of tabstrip. I just edited the answer.
– Anil Ghodake
Nov 20 '18 at 13:03

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr