LoginSignup
11

More than 5 years have passed since last update.

AndroidのSlidingTabsBasicのタブの色や区切り線(divider)、インジケーター(indicator)、余白(padding、margin)をカスタマイズする方法

Last updated at Posted at 2015-04-23

SlidingTabsBasicのタブとタブの中に入るテキスト周りをカスタマイズする方法のメモです。

indicatorの色と線の幅、dividerの線の縦幅と横幅を変える

SlidingTabStrip.java
//indicator
private static final int DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 2;//底の線の太さ
private static final byte DEFAULT_BOTTOM_BORDER_COLOR_ALPHA = 0x26;
private static final int SELECTED_INDICATOR_THICKNESS_DIPS = 8;//indicatorの太さ
private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xFF33B5E5;//色

//divider
private static final int DEFAULT_DIVIDER_THICKNESS_DIPS = 1;//線の太さ(横幅)
private static final byte DEFAULT_DIVIDER_COLOR_ALPHA = 0x20;
private static final float DEFAULT_DIVIDER_HEIGHT = 0.5f;//線の高さ 1.0fで100%の高さ(縦幅)
  • 各設定値を変えれば変更できます。

indicatorとdividerの色をsetCustomTabColorizerで変える

SlidingTabsBasicFragment.java
mSlidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
    @Override
    public int getIndicatorColor(int position) {
        return  SlidingTabsBasicFragment.this.getResources().getColor(R.color.black);
    }
    @Override
    public int getDividerColor(int position) {
        return SlidingTabsBasicFragment.this.getResources().getColor(R.color.white);
    }
});
  • indicatorはSlidingTabsBasicFragmentmSlidingTabLayoutsetCustomTabColorizerしても色を変えられます。

タブの中のテキストのfontsizeとpadding(左上右上)、テキスト色、背景色を変える

SlidingTabLayout.java
private static final int TAB_VIEW_PADDING_DIPS = 16;//padding全方向
private static final int TAB_VIEW_TEXT_SIZE_SP = 12;//fontsize

protected TextView createDefaultTabView(Context context) {

    /*
    省略
    */

    //背景色の設定
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
        // If we're running on Honeycomb or newer, then we can use the Theme's
        // selectableItemBackground to ensure that the View has a pressed state
        TypedValue outValue = new TypedValue();
        getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,outValue, true);
            textView.setBackgroundResource(outValue.resourceId);
    }

    /*
    省略
    */

    //paddingの設定
    int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
    textView.setPadding(padding, padding, padding, padding);//左上右下の順

    //テキスト色の設定
    textView.setTextColor(getResources().getColor(R.color.white));

    return textView;
}
  • 余白TAB_VIEW_PADDING_DIPSとフォントの大きさはTAB_VIEW_TEXT_SIZE_SPで設定できます。
  • 各方向でpaddingを変えたい場合は、createDefaultTabViewの中のsetPaddingしているところに各方向の値を作成して代入します。
  • テキストの色を変えたい場合はtextViewにsetTextColorをセットします。
  • 背景色はsetBackgroundResourceのところで設定してあるので、お好みにカスタマイズしたい場合は、上の背景色のところはすべてコメントアウトして、別にbackground.xml(下記)を作って、textView.setBackgroundResource(R.drawable.background)してあげれば変更できます。focusの色などを設定すればタップした時に色を変えられます。しかし、これを設定するとindicatorとdividerの上に色をかぶせることになるっぽいので、indicatorと区切り線(divider)が見えなくなります(透過させたらいい感じになるかも)。
background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:drawable="@color/tabfocus"></item>
    <item android:state_selected="true" android:drawable="@color/tabselected"></item>
    <item android:state_pressed="true" android:drawable="@color/tabpressed"></item>
    <item android:state_pressed="false" android:drawable="@color/tab"></item>
</selector>

テキスト(タブ)の外にmarginを入れる

SlidingTabLayout.java
//タブの外側に余白を入れる
LinearLayout.LayoutParams txtParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
float margin = getContext().getResources().getDisplayMetrics().density * 2;//2dp
txtParams.setMargins((int)margin, (int)margin, (int)margin, (int)margin);//左,上,右,上

textView.setLayoutParams(txtParams);
//textView.invalidate();//再描画が必要な場合は入れる
fragment_sample.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.android.common.view.SlidingTabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white"/>

</LinearLayout>
  • 余白を単位dpに変換して、最終的に先ほど出てきた上述のtextViewにセットします。
  • 何番目のタブと何番目のタブだけ・・・とかに設定したい場合は、populateTabStrip()のfor文の中のtabTitleViewにセットすれば変更できます。
  • 空いた隙間の色は、com.example.android.common.view.SlidingTabLayoutandroid:background="@color/white"を入れると良いです。dividerとindicatorなどが少し見える場合があるので、その時は線の幅を0にしておけば見えなくなります。

SlidingTabsBasicのサンプルダウンロード

Android Developers - SlidingTabsBasic
http://developer.android.com/samples/SlidingTabsBasic/index.html

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11