Develop Reference

Increase width custom view on tab in tablayout

I currently have a tablayout with a custom tab. Currently the tabs display great the only issue is that the tabs seem to be confined to the tablayout tab size leaving a space in between the next tab. Is there a way to make the custom view on the tab match the tablayouts tab size? Please let me know.
custom_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="50dp">
textview element
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
TabLayout tabLayout = findViewById(R.id.tabLayout);
new TabLayoutMediator(tabLayout, viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
#Override
public void onConfigureTab(#NonNull TabLayout.Tab tab, int position) {
tab.setCustomView(R.layout.custom_tab);
//get textview and set custom text
//set background color
}
}).attach();

After some digging I was able to find an answer. The problem is when using a custom view, the tablayout inflates the view to a maximum width and height. The best way to add a background that fully matches the full tablayout tab width and height is to use the tablayout xml tabBackground and add a drawable that includes a selector plus the textColor and textSelectedColor. Follow this tutorial for more information: https://www.thecodecity.com/2016/12/changing-background-color-of-tab.html#:~:text=%20How%20to%20change%20tab%20color%20in%20TabLayout,create%20as%20the%20background%20of%20the...%20More%20

TabLayout first item offset on the left

I have a TabLayout with horizontally scrollable tabs using Material Design guidelines state.
On mobile and desktop, offset the first tab on the left to sign that tabs are scrollable.
How can I achieve this? If I add a left margin or padding this will only move in all tabs to the right side but I can't scroll the tabs all the way to the left side of the screen anymore.
I also tried this:
tabLayout.setScrollPosition(2, 0.2f, true);
Which would pre-select the 3rd item and offsets the sliding indicator by 0.2 which in the end looks weird and also doesn't actually move the first tab item to the right side on the screen.
Thanks for help in advance!

I found the solution. In the layout XML you can set the content offset with "tabContentStart".
Example:
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabContentStart="57dp"
app:tabMode="scrollable" />

Here is the solution in the happy and wonderful Jetpack Compose world :
ScrollableTabRow(
selectedTabIndex = ...
edgePadding = 0.dp
) { /* Your Tabs */ }

Set NavigationDrawer's ListView margin programmatically

I am currently struggling to design my application the way i want to.
In my app i am using a NavigationDrawer and different fragments. By clicking on an item in the NavigationDrawer i swap out the fragment that is currently active.
There is one main fragment which shows a map and doesn't show a toolbar. When I switch to another fragment I want to show my toolbar and let the user interact with it.
Now when I show the toolbar I have to set the top margin of the NavigationDrawer to the size of the toolbar so it doesn't get overlapped.
When I am showing the toolbar I set the margin of the NavigationDrawer's listview like this:
ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) mDrawerListView.getLayoutParams();
params.setMargins(0, drawerMarginTop, 0, 0);
mDrawerListView.setLayoutParams(params);
mDrawerListView.requestLayout();
The outcome is like the complete opposite of what i expect. It seems like the margin is applied to the bottom of the view.
Screenshot:
Another thing that annoys me is that the toggle-arrow of the toolbar is not centered correctly. It's a little bit higher than it should be, so it overlaps the system bar in the top and doesn't fill the whole size of the toolbar. I tried to make this clear in the following picture:
If you need any xml or code just let me know and I will edit my question.
Thank you in advance!
EDIT 1+2:
My toolbar style:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_navigation"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/my_color"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
EDIT 3:
The Problem with the toggle-arrow not being centered is fixed now. Thanks to Alchete.
Unfortunately the NavigationDrawer is still buggy. I found out that if I open and close the NavigationDrawer many times it somehow changes its layout at one time and the margin is set correctly... Is there any way to force this top happen immediately?
After many times of opening and closing the drawer it looks like this: (Exactly what I want it to look like)
There must be a way to force this immediately, right?

Your alignment issue is most likely due to your toolbar height. You should be setting the toolbar height as follows:
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize">
Here's the same issue for reference: android.support.v7.widget.Toolbar icon alignment issue
I would also be using Google's IOSched app for reference on how to set these items up properly. You can find all the code on Github.
Here are their layout files. Scroll down to see their toolbar/navdrawer layouts: https://github.com/google/iosched/tree/dfaf8b83ad1b3e7c8d1af0b08d59caf4223e0b95/android/src/main/res/layout
And, also note that Google's reference design is to OVERLAP the toolbar with the navdrawer -- which is not how you have it. And, the right margin should be equivalent to the toolbar height.
See here: http://www.google.com/design/spec/patterns/navigation-drawer.html

I'm not 100% about this but it looks like you're setting the ViewGroup layout params to be of type MarginLayoutParams. Instead, set the margin on a 'normal' root ViewGroup type e.g. RelativeLayout and pass that to the View:
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,RelativeLayout.LayoutParams.MATCH_PARENT);
params.setMargins(0, drawerMarginTop, 0, 0);
mDrawerListView.setLayoutParams(params);
mDrawerListView.requestLayout();
You may want to change MATCH_PARENT to WRAP_CONTENT depending on your xml.

Set width of tabs

I found a lot of questions about this topic, but no working answers. So I have to ask the same question again...
I have a Fragment in which I am displaying two Tabs. On smartphone devices everything looks fine. Just like I want to. But on tablets (or generally on larger screens) the two Tabs are centered, that there are two "gaps", left an right of the Tabs.
Now I want to get rid of these gaps. My favorite solution would be to stretch both Tabs to cover the complete screen width. If that is not possible, I at least want to change the color of the TabBar.
I create and add my tabs like this (I left out the text and TabListener creation and assignment):
Tab tabA;
Tab tabB;
final ActionBar myActionBar = ((ActionBarActivity) getActivity()).getSupportActionBar();
myActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
myActionBar.addTab(tabA);
myActionBar.addTab(tabB);
When I try something like this
myActionBar.getTabAt(0).getCustomView().getLayoutParams().width = 200;
I always have a NullPonterException. I also tried to use a CustomView for the tabs. I created a new TabWidget.xml Like this:
<?xml version="1.0" encoding="utf-8"?>
<TabWidget xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="250dip"
android:layout_height="match_parent"
>
</TabWidget>
But no chance. The tab size just does not change.

Just found this post: Stacked ActionBar tab bar not filling parent
It seems as if it is not possible to change the Tab width to a value bigger 160 dip. So for the moment I have to use plan b and change the color of the TabBar.

Instead of tabs, try to place image view with background image

how to change the tab widget size in TabHost

In my application i use the tabhost in linear layout, tabhost contains 4 tabs. The size of the tabwidget is very very high and it shows title very small. Can any one help me how to reduce the size of tabwidget.

I would insist to create custom Tabs using setIndicator(View). So, create a TextView of your desired size and set it to the TabWidget. Here is an Tutorial for the same with Example.
You can just inflate a TextView and set it to the TabWidget using
View view = LayoutInflater.from(context).inflate(R.layout.your_custom_tab-layout,
null);
TextView tv = (TextView) view.findViewById(R.id.my_text_view);
TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tv).
setContent(intent);
mTabHost.addTab(setContent);

I'm not clear on exactly what you're looking to do here, but I'll make a guess at it.
If you don't want space to be taken up by graphics (in other words, have text only) you can set the height and graviy of the widget to effectively remove the space that is used by the graphic, making for a much more compact tab label (vertically).
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:gravity="bottom" />