Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I use default tab styling in my custom tab view?

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 TextViews 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?

like image 696
mhelvens Avatar asked Nov 25 '11 15:11

mhelvens


People also ask

How do you make custom tabs?

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.

What is a custom tab in Salesforce?

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.

What is tab style in Salesforce?

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.


1 Answers

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: this

like image 106
Jin35 Avatar answered Sep 26 '22 18:09

Jin35