androidandroid-layoutandroid-fragmentsandroid-tabhost
Galaxy tab 3 is not showing al layouts correctly, Nexus 7 2nd generation is
Somehow my Galaxy tab 3 is not showing all layouts correctly. This is the screenshot from the Galaxy tab:
Here is how it should look and looks on the Nexus 7 (a different option is selected hence the different white button):
This is my FragmentTabHost layout:
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TabWidget
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
This is the XML of a tab view:
<?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="@+id/tab_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="5dip"
android:paddingRight="10dp"
android:layout_gravity="center"/>
<TextView
android:id="@+id/tab_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:textColor="@android:color/white"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
This is the Java code:
@Override
protected void onCreate(Bundle savedInstanceState) {
requestWindowFeature(Window.FEATURE_NO_TITLE);
//
//more application logics here
//
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
Bundle b = new Bundle();
LayoutInflater inflater = (LayoutInflater) getApplicationContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
werkplekIndicator = inflater.inflate(R.layout.tab_view, null);
transportIndicator = inflater.inflate(R.layout.tab_view, null);
inkomendIndicator = inflater.inflate(R.layout.tab_view, null);
zoekenIndicator = inflater.inflate(R.layout.tab_view, null);
planningIndicator = inflater.inflate(R.layout.tab_view, null);
b.putString("key", "Werkplek");
mTabHost.addTab(mTabHost.newTabSpec("Werkplek")
.setIndicator(werkplekIndicator), WerkplekFragment.class, b);
b.putString("key", "Transport");
mTabHost.addTab(
mTabHost.newTabSpec("Transport").setIndicator(transportIndicator),
TransportFragment.class, b);
b.putString("key", "Inkomend");
mTabHost.addTab(mTabHost.newTabSpec("Inkomend")
.setIndicator(inkomendIndicator), InkomendFragment.class, b);
b.putString("key", "Zoeken");
mTabHost.addTab(mTabHost.newTabSpec("Zoeken").setIndicator(zoekenIndicator),
ZoekenFragment.class, b);
b.putString("key", "Planning");
mTabHost.addTab(mTabHost.newTabSpec("Planning").setIndicator(planningIndicator),
PlanningFragment.class, b);
mTabHost.setOnTabChangedListener(this);
setTabViews();
}
private void setTabViews() {
TabWidget tabWidget = mTabHost.getTabWidget();
tabWidget.setDividerDrawable(R.drawable.empty_divider);
werkplekIndicator.setBackgroundResource(R.drawable.red_3d_tab_first);
TextView werkplekIndicatorTitle = (TextView) werkplekIndicator.findViewById(R.id.tab_label);
werkplekIndicatorTitle.setText("Werkplek");
werkplekIndicatorTitle.setTextColor(Color.WHITE);
ImageView werkplekIndicatorIcon = (ImageView) werkplekIndicator.findViewById(R.id.tab_image);
werkplekIndicatorIcon.setImageResource(R.drawable.icon_werkplek);
transportIndicator.setBackgroundResource(R.drawable.red_3d_tab_middle);
TextView transportIndicatorTitle = (TextView) transportIndicator.findViewById(R.id.tab_label);
transportIndicatorTitle.setText("Transport");
transportIndicatorTitle.setTextColor(Color.WHITE);
ImageView transportIndicatorIcon = (ImageView) transportIndicator.findViewById(R.id.tab_image);
transportIndicatorIcon.setImageResource(R.drawable.icon_transport);
inkomendIndicator.setBackgroundResource(R.drawable.red_3d_tab_middle);
TextView inkomendIndicatorTitle = (TextView) inkomendIndicator.findViewById(R.id.tab_label);
inkomendIndicatorTitle.setText("Inkomend");
inkomendIndicatorTitle.setTextColor(Color.WHITE);
ImageView inkomendIndicatorIcon = (ImageView) inkomendIndicator.findViewById(R.id.tab_image);
inkomendIndicatorIcon.setImageResource(R.drawable.icon_inkomend);
zoekenIndicator.setBackgroundResource(R.drawable.red_3d_tab_middle);
TextView zoekenIndicatorTitle = (TextView) zoekenIndicator.findViewById(R.id.tab_label);
zoekenIndicatorTitle.setText("Zoeken");
zoekenIndicatorTitle.setTextColor(Color.WHITE);
ImageView zoekenIndicatorIcon = (ImageView) zoekenIndicator.findViewById(R.id.tab_image);
zoekenIndicatorIcon.setImageResource(R.drawable.icon_zoeken);
planningIndicator.setBackgroundResource(R.drawable.red_3d_tab_last);
TextView planningIndicatorTitle = (TextView) planningIndicator.findViewById(R.id.tab_label);
planningIndicatorTitle.setText("Planning");
planningIndicatorTitle.setTextColor(Color.WHITE);
ImageView planningIndicatorIcon = (ImageView) planningIndicator.findViewById(R.id.tab_image);
planningIndicatorIcon.setImageResource(R.drawable.icon_calendar);
switch(mTabHost.getCurrentTab()){
case 0:
werkplekIndicator.setBackgroundResource(R.drawable.red_3d_tab_first_selected);
werkplekIndicatorIcon.setImageResource(R.drawable.icon_werkplek_selected);
werkplekIndicatorTitle.setTextColor(getResources().getColor(R.color.vmt_black));
break;
case 1:
transportIndicator.setBackgroundResource(R.drawable.red_3d_tab_middle_selected);
transportIndicatorIcon.setImageResource(R.drawable.icon_transport_selected);
transportIndicatorTitle.setTextColor(getResources().getColor(R.color.vmt_black));
break;
case 2:
inkomendIndicator.setBackgroundResource(R.drawable.red_3d_tab_middle_selected);
inkomendIndicatorIcon.setImageResource(R.drawable.icon_inkomend_selected);
inkomendIndicatorTitle.setTextColor(getResources().getColor(R.color.vmt_black));
break;
case 3:
zoekenIndicator.setBackgroundResource(R.drawable.red_3d_tab_middle_selected);
zoekenIndicatorIcon.setImageResource(R.drawable.icon_zoeken_selected);
zoekenIndicatorTitle.setTextColor(getResources().getColor(R.color.vmt_black));
break;
default:
planningIndicator.setBackgroundResource(R.drawable.red_3d_tab_last_selected);
planningIndicatorIcon.setImageResource(R.drawable.icon_calendar_selected);
planningIndicatorTitle.setTextColor(getResources().getColor(R.color.vmt_black));
}
}
The biggest problem is the black bar on top (and in the right bottom corner). I know the code can be a lot shorter but this was just as test. The button backgrounds are all done with 9patches
Solution
I cannot explain the solution but I have found it. My suspicion is that the Samsung layer on top of Android does something with the Android Support Library (or doesn't support it the way it should, the irony).
The solution was setting a transparant background to the TabWidget:
<TabWidget
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent" />