My main activity is a TabActivity
, but my tabs don't require icons. I know I can omit the icon by using the overloaded TabHost.TabSpec.setIndicator(CharSequence label)
method, as answered in this question.
But the space where the icon would go is still reserved, so a lot of space is wasted. This has already been remarked in this question. It seems I can't just reduce the tab height. I'll have to supply my own View
with the TabHost.TabSpec.setIndicator(View view)
overload.
Fine, but I want to make sure the rest of the styling (background/coloring) remains consistently 'android' across all devices, just as if I'd used a default tab indicator. So I don't want to supply my own colors.
I've found @android:color/tab_indicator_text
and using it for the TextView
s text-color seems to work as expected. But I don't know where to get the default tab-background-colors. I've also discovered the @android:style/Widget.TabWidget
style, but applying it to neither the TextView
nor the surrounding LinearLayout
seems to help.
This is my tab indicator view xml file, taken from some tutorial:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:padding="12dip" >
<TextView
android:id="@+id/tabText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/tab_indicator_text" />
</LinearLayout>
How do I get 'android default' tab styling on this?
Edit: Next, I tried to add a default tab through setIndicator(CharSequence)
, take the getBackground
drawable of its indicator view, clear all tabs, add my custom views (see above), then put the drawable I retrieved in setBackground
for the new indicators.
The result looks sort of right and sort of wrong. For one, they're too high again, so I gained nothing. For another, the background states of all tabs are now linked somehow (active, highlighted, selected, etc.). Using mutate()
on the drawable(s) didn't help at all. Next trick: I added three default tabs, took all of their backgrounds, cleared them, and gave my own three tabs one background each.
Well, that solves the second problem. Their states are no longer linked. But they're still too high. So I reduced the height of the TabWidget
using updateViewLayout
. This works, but leaves a discolored bar at the top of the tab indicators.
Actually, I just end up with the same situation as when using the TabHost.TabSpec.setIndicator(CharSequence label)
method. And anyway, all these hacks make me feel dirty. Isn't there an elegant way to get default android styling on a custom view?
From Setup, in the Quick Find box, enter Tabs , then select Tabs. Click New in the Custom Object Tabs related list. Select the custom object to appear in the custom tab. If you haven't created the custom object, click create a new custom object now and follow the instructions in Create a Custom Object.
Custom tabs let you display custom object data or other web content in Salesforce. When you add a custom tab to an app in Salesforce Classic, it appears as a tab. When you add a custom tab to an app in Lightning Experience, it appears as an item in the app's navigation bar and in the App Launcher.
The Tab style does not have any impact on security or access. Its a visual representation which let you identify a tab easily, especially handy in case you have a lot of tabs. The tab itself may represent a custom object, a VF page, a lightning page or a web tab.
This code taken from android sources tab_indicator.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="64dip"
android:layout_weight="1"
android:layout_marginLeft="-3dip"
android:layout_marginRight="-3dip"
android:orientation="vertical"
android:background="@android:drawable/tab_indicator">
<ImageView android:id="@+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
/>
<TextView android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
style="?android:attr/tabWidgetStyle"
/>
</RelativeLayout>
You can try to just take this code, delete the ImageView
, change layout_centerHorizontal
in the TextView
to layout_center
, reduce height of the RelativeLayout
, and provide this view in TabHost.TabSpec.setIndicator(View view)
. There are references only to @android
resources, so you do not need create any drawables or text styles.
EDIT
The standard android drawable background for the tab indicator is not visible from an app, but it is possible to do it like this:
TabSpec tc = getTabHost().newTabSpec("tag");
tc.setIndicator("indicator1");
tc.setContent(content);
getTabHost().addTab(tc);
getTabHost().findViewById(android.R.id.icon).setVisibility(View.GONE);
TextView tv = (TextView) getTabHost().findViewById(android.R.id.title);
RelativeLayout.LayoutParams rllp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
rllp.addRule(RelativeLayout.CENTER_IN_PARENT);
tv.setLayoutParams(rllp);
Then it is possible to reduce the height of the tabs:
RelativeLayout parent = ((RelativeLayout) tv.getParent());
ViewGroup.LayoutParams vglp = parent.getLayoutParams();
vglp.height = android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
parent.setLayoutParams(vglp);
The result will be:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With