title: How to implement custom tabview in Android ViewPager?
body: <p>Can I ask how could we  implement the following layout using <strong>Viewpager</strong> in Android: </p>
  
  <h2>1) Desired View</h2>
  
  <p><img src="https://i.stack.imgur.com/VM64F.png" alt="enter image description here"></p>
  
  <p><br /></p>
  
  <h2>2)Techniques/Methods tried:</h2>
  
  <p>There is an Activity with Viewpager and a FragmentPagerAdapter to return the appropriate Fragment for each tab. 
  I have tried the following answers/library:</p>
  
  <p><a href="https://stackoverflow.com/questions/24753854/custom-viewpager-tabs-with-custom-view-multiple-fragment-and-layouts">Custom viewpager tabs with custom view, multiple fragment and layouts</a></p>
  
  <p><a href="https://stackoverflow.com/questions/27581447/viewpager-in-android-with-fixed-tabs-at-bottom-with-icon-and-text-in-each-tab">Viewpager in Android with fixed tabs at bottom with Icon and Text in each tab</a></p>
  
  <p><a href="http://viewpagerindicator.com/" rel="nofollow noreferrer">http://viewpagerindicator.com/</a></p>
  
  <p>I also try to set the ActionbarStyle in app Theme, but it all the rules apply to the ActionBar, not the tab view of view pager.</p>
  
  <pre><code>&lt;style name="MyTheme" parent="android:Theme.Holo.Light"&gt;
          &lt;item name="android:actionBarStyle"&gt;@style/MyCustomActionBar&lt;/item&gt;
          &lt;item name="android:actionBarTabStyle"&gt;@style/ActionBarTabStyle&lt;/item&gt;
          &lt;item name="android:actionBarSize"&gt;100dp&lt;/item&gt;
      &lt;/style&gt;
  
      &lt;style name="ActionBarTabStyle" parent="@android:style/Widget.Holo.ActionBar.TabView"&gt;
          &lt;item name="android:minHeight"&gt;200dp&lt;/item&gt;
      &lt;/style&gt;
  
  
      &lt;style name="MyCustomActionBar" parent="@android:style/Widget.Holo.Light.ActionBar"&gt;
          &lt;item name="android:background"&gt;@color/white&lt;/item&gt;
          &lt;item name="android:height"&gt;100dp&lt;/item&gt;
      &lt;/style&gt;
  </code></pre>
  
  <p><br /></p>
  
  <h2>3) Current View:</h2>
  
  <p>This is the current tabview of the viewpager, which is not good looking: </p>
  
  <p><img src="https://i.stack.imgur.com/PMOCh.png" alt="enter image description here"> </p>
  
  <h2>4) XML layout:</h2>
  
  <p>Activity layout: </p>
  
  <pre><code>&lt;android.support.v4.view.ViewPager
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/pager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
     /&gt;
  </code></pre>
  
  <p>Curent Fragment layout: </p>
  
  <pre><code>&lt;ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:id="@+id/new_deliver_scroll"
      &gt;
  &lt;LinearLayout  android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
  
      android:paddingLeft="@dimen/activity_horizontal_margin"
      android:paddingRight="@dimen/activity_horizontal_margin"
      android:paddingTop="@dimen/activity_vertical_margin"
      android:paddingBottom="@dimen/activity_vertical_margin"
      android:background="@color/background_material_light"
      android:id="@+id/newDeliverMain"
      &gt;
  
  &lt;LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      android:id="@+id/new_deliver_main_linear"
      &gt;
      &lt;RelativeLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="20dp"
          android:orientation="horizontal"
          android:id="@+id/relative_layout_item_info"
          &gt;
  
          &lt;TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/Item_desc"
              android:id="@+id/new_deliver_item_desc_text"
              android:textColor="@color/app_blue"
  
              /&gt;
  </code></pre>
  
  <p>...........</p>
  
  <h2>5) Code to create custom tabview in Activity:</h2>
  
  <pre><code>viewPagerAdapter = new SenderViewPagerAdapter( getSupportFragmentManager());
          viewPager = (ViewPager) findViewById(R.id.pager);
  
          viewPager.setAdapter( viewPagerAdapter);
  
          actionBar = getActionBar();
          actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
          viewPager.setOnPageChangeListener(
                  new ViewPager.SimpleOnPageChangeListener() {
                      @Override
                      public void onPageSelected(int position) {
                          actionBar.setSelectedNavigationItem(position);
                      }
                      @Override
                      public void onPageScrolled(int arg0, float arg1, int arg2) {
                      }
                      @Override
                      public void onPageScrollStateChanged(int arg0) {
                      }
                  });
          for (int i = 0; i &lt; viewPagerAdapter.getCount(); i++) {
  
              ActionBar.Tab newTab = actionBar.newTab();
              newTab.setCustomView(R.layout.custom_actionbar);
              newTab.setTabListener(this);
  
              TextView title = (TextView) newTab.getCustomView().findViewById(R.id.tab_title);
              ImageView icon = (ImageView)newTab.getCustomView().findViewById(R.id.tab_icon);
              title.setText(viewPagerAdapter.getPageTitle(i));
              icon.setImageResource(ICONS[i]);
              actionBar.addTab(newTab);
         }
  </code></pre>
  
  <p><br />
  After several trials, I temporarily stuck here. Any <strong>ideas, suggestions</strong> how to implement the desired view would be very appreciated. Thank you very much. </p>
  
  <h2>6) Update</h2>
  
  <p>Not work with:<br>
  icon.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));</p>
  
  <p>@refer to @karaokyo answer: 
  I switch to use Radio Button instead of action bar, it works ok, just few more customisations. </p>
  
  <p>Change image when check: </p>
  
  <pre><code>Drawable top = getResources().getDrawable(R.drawable.image);
  button.setCompoundDrawablesWithIntrinsicBounds(null, top , null, null);
  </code></pre>
  
  <p>For Radio Button, it very hard to change the size of the top image programatically, better to resize the image itself > take me 2 hours figure out. </p>