TabHostについて

下のコードで、上の写真のようなタブを作りたいのですが、下のようになってしまいます。どうしてでしょうか？

// スクロール中はonPageScrolled()で描画するのでここではしない
![![イメージ説明]WIDTH:320

lang
1public class MainActivity extends FragmentActivity {
2    ViewPager viewPager;
3    TabHost tabHost;
4    View indicator;
5    TabWidget tabWidget;
6
7    @Override
8    protected void onCreate(Bundle savedInstanceState) {
9        super.onCreate(savedInstanceState);
10        setContentView(R.layout.activity_main);
11        //マテリアルデザインの作業
12        tabWidget = (TabWidget) findViewById(android.R.id.tabs);
13        tabWidget.setStripEnabled(false);
14        tabWidget.setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
15        indicator = findViewById(R.id.indicator);
16
17        tabHost = (TabHost) findViewById(android.R.id.tabhost);
18        tabHost.setup();
19
20        getActionBar().setElevation(0);     //TabとActionBarとの間の影を消す
21
22        float elevation = 4 * getResources().getDisplayMetrics().density;
23        tabHost.setElevation(elevation);
24
25        //PagerとTabの設定
26        ViewPagerAdapter vpa = new ViewPagerAdapter(getSupportFragmentManager());
27        viewPager = (ViewPager) findViewById(R.id.pager);
28        viewPager.setAdapter(vpa);
29        viewPager.setOnPageChangeListener(new PageChangeListener());
30
31        for (int i = 0; i < vpa.getCount(); i++) {
32            tabHost.addTab(tabHost
33                    .newTabSpec(String.valueOf(i))
34                    .setIndicator(vpa.getPageTitle(i))
35                    .setContent(android.R.id.tabcontent));
36        }
37
38        LayoutInflater inflater = LayoutInflater.from(this);
39        for (int i = 0; i < vpa.getCount(); i++) {
40            TextView tv = (TextView) inflater.inflate(R.layout.tab_widget, tabWidget, false);
41            tv.setText(vpa.getPageTitle(i));
42
43            tabHost.addTab(tabHost
44                    .newTabSpec(String.valueOf(i))
45                    .setIndicator(tv)
46                    .setContent(android.R.id.tabcontent));
47        }
48
49
50        tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
51            @Override
52            public void onTabChanged(String tabId) {
53                viewPager.setCurrentItem(Integer.valueOf(tabId));
54            }
55        });
56
57            viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
58            @Override
59            public void onPageSelected(int position) {
60                super.onPageSelected(position);
61                tabHost.setCurrentTab(position);
62            }
63        });
64    }
65
66    private class PageChangeListener implements ViewPager.OnPageChangeListener {
67        private int scrollingState = ViewPager.SCROLL_STATE_IDLE;
68
69        @Override
70        public void onPageSelected(int position) {
71
72    // スクロール中はonPageScrolled()で描画するのでここではしない
73
74            if (scrollingState == ViewPager.SCROLL_STATE_IDLE) {
75                updateIndicatorPosition(position, 0);
76            }
77            tabWidget.setCurrentTab(position);
78        }
79
80        @Override
81        public void onPageScrollStateChanged(int state) {
82            scrollingState = state;
83        }
84
85        @Override
86        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
87            updateIndicatorPosition(position, positionOffset);
88        }
89
90        private void updateIndicatorPosition(int position, float positionOffset) {
91            View tabView = tabWidget.getChildTabViewAt(position);
92            int indicatorWidth = tabView.getWidth();
93            int indicatorLeft = (int) ((position + positionOffset) * indicatorWidth);
94
95            final FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) indicator.getLayoutParams();
96            layoutParams.width = indicatorWidth;
97            layoutParams.setMargins(indicatorLeft, 0, 0, 0);
98            indicator.setLayoutParams(layoutParams);
99        }
100    }
101}