Develop Reference

How to centre a string in toolbar fragment?

I have the following part of XML which generates a toolbar in my profile fragment with a black background and profile written in it.
I'm trying though to center the profile but nothing seems to work. Any suggestions?
<fragment
android:id="#+id/navigation_home"
android:name="com.example.myapp_android.ui.home.HomeFragment"
android:label="#string/title_home"
tools:layout="#layout/fragment_home" />
I tried adding to the <fragment android:label_gravity = "center" and android:gravity = "center"
but none of them moved the profile text.

Toolbars can have childview so you can use TextView inside of a toolbar
Use this :
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Toolbar"
android:textSize="20sp"
android:textStyle="bold"/>
</androidx.appcompat.widget.Toolbar>

Custom Tab's text is not highlighted in the Tablayout

I have made a CustomView for the tabs in the TabLayout that contains aTextViewfor the tab title andImageViewfor the icons
But when I click on a tab, the text for the selected tab is not highlighted!
I have tried every combination of XML attributes for the tablayout wigdet and nothing is working out. I tried to Google the problem, but couldn't find any solutions.
MainActivity.class
The implemeneation of the Tablayoyut with custom view.
mainTablayout = (TabLayout) findViewById(R.id.tablayout_activity_main);
mainViewpager = (ViewPager) findViewById(R.id.main_viewpager);
mainTablayout.addTab(mainTablayout.newTab().setText("Search"));
mainTablayout.addTab(mainTablayout.newTab().setText("Inbox"));
mainTablayout.addTab(mainTablayout.newTab().setText("Edit"));
mainTablayout.addTab(mainTablayout.newTab().setText("Profile"));
mainTablayout.getTabAt(0).setCustomView(R.layout.custom_tablayout).setIcon(R.drawable.ic_search);
mainTablayout.getTabAt(1).setCustomView(R.layout.custom_tablayout).setIcon(R.drawable.ic_tab_envelope);
mainTablayout.getTabAt(2).setCustomView(R.layout.custom_tablayout).setIcon(R.drawable.ic_tab_cogwheel);
mainTablayout.getTabAt(3).setCustomView(R.layout.custom_tablayout).setIcon(R.drawable.ic_tab_profile_1);
mainViewpager.setAdapter(new MainPagerAdapter(getSupportFragmentManager()));
mainViewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mainTablayout));
mainTablayout.addOnTabSelectedListener(this);
custom_tablayout.xml:
The layout for the custom tabs
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#android:id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
<TextView
android:textSize="12sp"
android:textStyle="bold"
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-6dp" />
</LinearLayout>
activity_main.xml:
This is the attribute used on the Tablayout wigdet
<android.support.design.widget.TabLayout
android:id="#+id/tablayout_activity_main"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentBottom="true"
android:layout_below="#id/tablayout_activity_main"
android:background="#f5f5f5"
app:tabGravity="fill"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabTextColor="#color/tab_off"
app:tabSelectedTextColor="#color/colorPrimary" />

You could try to select the tab through the tab-layout.
I'm using com.android.support:design:23.2.1 support library.Using below code you can highlight selected tab.
tabLayout.getTabAt(0).select();
You can refer following link: https://guides.codepath.com/android/google-play-style-tabs-using-tablayout

How to set underline with specific color on inactive tab in tablayout? My custom view occupy max tab width.

I can't deal with setting custom view on TabLayout tabs. I want to set underline (like indicator on active tab) with specific color on every inactive tab. I created view in this way:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/colorPrimary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="#style/tab_layout_item"
android:layout_centerInParent="true"
tools:text="All in"/>
<View
android:layout_width="wrap_content"
android:layout_height="7dp"
android:background="#color/colorPrimaryDark"
android:layout_alignParentBottom="true"/>
but wrap_content parameter didn't work and view occupied max tab width.
Here is my TabLayout xml:
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/background_primary"
app:tabIndicatorHeight="0dp"
app:tabMode="scrollable"
app:tabGravity="fill"
app:tabPaddingBottom="0dp"
app:tabPaddingTop="0dp"
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"
android:layout_gravity="bottom"/>
How to create custom view for TabLayout tabs which is suited to text inside (especially when String inside is short)?
Maybe is a better way to achieve this result?

Inflate your tabs:
LayoutInflater inflater = getActivity().getLayoutInflater();
RelativeLayout tab1 = (RelativeLayout) inflater.inflate(R.layout.component_custom_tab,null);
RelativeLayout tab2 ...
Add id to your divider:
<View
android:id="#+id/divider"
android:layout_width="wrap_content"
android:layout_height="7dp"
android:background="#color/colorPrimaryDark"
android:layout_alignParentBottom="true"/>
Set color for each tab:
tab1.findViewById(R.id.divider).setBackgroundColor(getColor(R.color.color_1));
tab2 ....
Add tabs in TabLayout:
mTabLayout.addTab(mTabLayout.newTab().setCustomView(tab1), index1);
mTabLayout.addTab(mTabLayout.newTab().setCustomView(tab2), index2);
...

Android TabLayout tabPaddingTop and tabPaddingBottom not being removed

Here is my tab layout XML
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/custom_tab_layout_height"
android:background="#color/tab_background_primary"
app:tabGravity="fill"
app:tabIndicatorColor="#color/primary_white"
app:tabIndicatorHeight="3dp"
app:tabMinWidth="120dp"
app:tabMode="scrollable"
app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp"
app:tabPaddingTop="1dp"
app:tabPaddingBottom="1dp"
/>
It is removing the horizontal padding in between tabs but not the tabPaddingTop and tabPaddingBottom.
How do I remove the top and bottom padding to make each tab match the tabLayout height?
Custom view for each tab
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/tab"
android:textColor="#color/primary_white"
android:textSize="14sp"
android:textStyle="bold"
android:gravity="fill"
android:fontFamily="#string/font_fontFamily_medium"/>
I also tried using a Linear Layout with Imagview and Textview as custom view
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:gravity="fill"
android:layout_height="match_parent">
<ImageView
android:id="#+id/tab_logo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#mipmap/ic_settings_light"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/tab_title"
android:textColor="#color/primary_white"
android:textSize="14sp"
android:textStyle="bold"
android:gravity="center"
android:text="test"
android:fontFamily="#string/font_fontFamily_medium"/>
</LinearLayout>
And here is how I inflated the custom tab view (for custom view with textView)
TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabTwo.setText("CASH IN");
tabTwo.setBackgroundColor(Color.parseColor("#EC5A0B"));
tabTwo.setCompoundDrawablesWithIntrinsicBounds(R.mipmap.ic_action_cash_light, 0, 0, 0);
tabLayout.getTabAt(1).setCustomView(tabTwo);
As you can see, I am trying to give different background color to each tab. But the padding at top and bottom is still there.

I think Android design library's TabLayout have default padding like what you can see here
The other recommendation that I can recommend to you is using Google IO's SlidingTabLayout (Don't forget to copy SlidingTabStrip too!)
The usage is simple, just include in your layout :
<com.myapp.ui.widget.SlidingTabLayout
android:id="#+id/main_view_pager_tab"
android:layout_width="match_parent"
android:layout_height="#dimen/tabs_height"
android:background="#color/white" />
and then in your activity set the viewpager and listener (if you want)
mainViewPagerTab.setViewPager(mainViewPager);
mainViewPagerTab.setOnPageChangeListener(onPageChangeListener);

This was the only solution
https://stackoverflow.com/a/37942842/5689605
Try the code, after adding your tabs to your tablayout.
final ViewGroup test = (ViewGroup)(tabs.getChildAt(0));//tabs is your Tablayout
int tabLen = test.getChildCount();
for (int i = 0; i < tabLen; i++) {
View v = test.getChildAt(i);
v.setPadding(0, 0, 0, 0);
}

I got the best solution for this issue, check the below code and this will helpful.
My tablayout XML is like this:
<RelativeLayout
android:layout_height="30dp"
android:background="#333333"
android:layout_width="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextAppearance="#style/MineCustomTabText"
style="#style/tab_bassr"
app:tabMode="scrollable"/>
</RelativeLayout>
the relative layout upon this will reduce the top and bottom margin
<style name="tab_bassr" parent="TextAppearance.Design.Tab">
<item name="android:layout_width">match_parent</item>
<item name="android:tabStripEnabled">false</item>
<item name="tabPaddingStart">5dp</item>
<item name="tabPaddingEnd">5dp</item>
</style>
<style name="MineCustomTabText" parent="TextAppearance.Design.Tab">
<item name="android:textSize">14sp</item>
</style>
The style file is for left and right padding and the text size.

Toolbar title with custom view

I am attempting to show both a title, using setTitle and a custom view in my toolbar.
I am not treating it as an actionbar, instead as nothing more than a view.
I am adding both the titles and custom view in Java
toolbar = (Toolbar) view.findViewById(R.id.toolbar);
if (title != null) {
toolbar.setTitle(title);
toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));
}
if (subtitle != null) {
toolbar.setSubtitle(subtitle);
toolbar.setSubtitleTextColor(getResources().getColor(android.R.color.white));
}
// Add switch view to toolbar
View switchView = LayoutInflater.from(getActivity())
.inflate(R.layout.device_list_switch, null);
toolbar.addView(switchView);
The xml for my switch view is
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/discoverable"
android:layout_alignParentBottom="true"
android:layout_alignTop="#+id/discoverable"
android:layout_toLeftOf="#+id/discoverable"
android:layout_toStartOf="#+id/discoverable"
android:gravity="center"
android:text="#string/discoverable_switch_label"
android:textColor="#android:color/white"
/>
<Switch
android:id="#+id/discoverable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginLeft="#dimen/discoverable_switch_margin_left"
android:layout_marginStart="#dimen/discoverable_switch_margin_left"/>
</RelativeLayout>
What happens is that the RelativeLayout fills the entire toolbar area and the title isn't visible.
Any ideas?

If you are not using the Toolbar as an ActionBar, then maybe you could just use a layout.
I used a LinearLayout instead of a Toolbar.
What advantages is Toolbar giving you?

This can be solved by adding your own title (and subtitle, if you need it) text views inside the toolbar alongside your custom view.
But perhaps a better way is to use a second toolbar nested inside the first. That way, all formatting is taken care of for you.
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/topToolbar"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/titleToolbar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:contentInsetStart="0dp"
app:contentInsetLeft="0dp">
</android.support.v7.widget.Toolbar>
<CustomView... />
</LinearLayout>
</android.support.v7.widget.Toolbar>