Android ScrollBar (ScrollView) スクロールバーをカスタマイズ -

スクロールバーの見た目を変えてみました。

■ スクロールバーの幅を変更

　android:scrollbarSize を指定します。

　寸法値（"14.5sp"のような単位付き浮動小数点）で指定
　利用可能な単位は
　　px (ピクセル)、
　　dp(dip) (密度非依存ピクセル)
　　sp (倍率非依存ピクセル)
　　in (インチ)
　　mm (ミリメータ)


■ 横スクロールバーの色を設定

　android:scrollbarThumbHorizontal を指定します。

view plainprint?

1. <HorizontalScrollView  
2.     android:layout_width="wrap_content"  
3.     android:layout_height="fill_parent"  
4.     android:scrollbarThumbHorizontal="@drawable/scrollbar_thumb">  
5. </HorizontalScrollView>  

<HorizontalScrollView
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:scrollbarThumbHorizontal="@drawable/scrollbar_thumb">
</HorizontalScrollView>

drawable/scrollbar_thumbl.xml

view plainprint?

1. <?xml version="1.0" encoding="utf-8" ?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <gradient  
4.         android:startColor="#FF0000"  
5.         android:endColor="#FFFFFF"  
6.         android:angle="0" />  
7.     <corners  
8.         android:radius="20dp" />  
9. </shape>  

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#FF0000"
        android:endColor="#FFFFFF"
        android:angle="0" />
    <corners
        android:radius="20dp" />
</shape>

■ 縦スクロールバーの色を設定

　android:scrollbarThumbVertical を指定します

view plainprint?

1. <ScrollView  
2.     android:layout_width="fill_parent"  
3.     android:layout_height="wrap_content"  
4.     android:scrollbarThumbVertical="@drawable/scrollbar_thumb">  
5. </ScrollView>  

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scrollbarThumbVertical="@drawable/scrollbar_thumb">
</ScrollView>

drawable/scrollbar_thumbl.xml

view plainprint?

1. <?xml version="1.0" encoding="utf-8" ?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <gradient  
4.         android:startColor="#FF0000"  
5.         android:endColor="#FFFFFF"  
6.         android:angle="90" />  
7.     <corners  
8.         android:radius="20dp" />  
9. </shape>  

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#FF0000"
        android:endColor="#FFFFFF"
        android:angle="90" />
    <corners
        android:radius="20dp" />
</shape>

■ 横スクロールバーのトラックの色を設定

　android:scrollbarTrackHorizontal を指定します。

view plainprint?

1. <HorizontalScrollView  
2.     android:layout_width="wrap_content"  
3.     android:layout_height="fill_parent"  
4.     android:scrollbarTrackHorizontal="@drawable/scrollbar_track">  
5. </HorizontalScrollView>  

<HorizontalScrollView
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:scrollbarTrackHorizontal="@drawable/scrollbar_track">
</HorizontalScrollView>

drawable/scrollbar_thumbl.xml

view plainprint?

1. <?xml version="1.0" encoding="utf-8" ?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <gradient  
4.         android:startColor="#FF0000"  
5.         android:endColor="#FFFFFF"  
6.         android:angle="0" />  
7.     <corners  
8.         android:radius="20dp" />  
9. </shape>  

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#FF0000"
        android:endColor="#FFFFFF"
        android:angle="0" />
    <corners
        android:radius="20dp" />
</shape>

■ 縦スクロールバーのトラックの色を設定

　android:scrollbarTrackVertical を指定します

view plainprint?

1. <ScrollView  
2.     android:layout_width="fill_parent"  
3.     android:layout_height="wrap_content"  
4.     android:scrollbarTrackVertical="@drawable/scrollbar_track">  
5. </ScrollView>  

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scrollbarTrackVertical="@drawable/scrollbar_track">
</ScrollView>

drawable/scrollbar_thumbl.xml

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <gradient  
4.         android:startColor="#FF0000"  
5.         android:endColor="#FFFFFF"  
6.         android:angle="90" />  
7.     <corners  
8.         android:radius="20dp" />  
9. </shape>  

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#FF0000"
        android:endColor="#FFFFFF"
        android:angle="90" />
    <corners
        android:radius="20dp" />
</shape>

■ 表示するスクロールバーを指定

　android:scrollbars　を指定します

　設定できる値は
　　"none"
　　"horizontal"
　　"vertical"

　"none" を指定すると、スクロール領域の端のフェードアウトのみで、
　バーは表示されない
　この場合、
　　android:fadingEdgeLength="25dip"
　にようにフェードアウトする領域の幅を指定できる

view plainprint?

1. <ScrollView  
2.     android:layout_width="fill_parent"  
3.     android:layout_height="fill_parent"  
4.     android:scrollbars="none"  
5.     android:background="#000000"  
6.     android:fadingEdgeLength="25dip">  
7. </ScrollView>  

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:scrollbars="none"
    android:background="#000000"
    android:fadingEdgeLength="25dip">
</ScrollView>

本の情報の部分が、バーが出ない代わりに、下の部分がフェードアウトしている




■ フェードアウトを非表示

　デフォルトだと、スクロールバー + フェードアウト
　なのですが、このフェードアウトを無くして
　スクロールバーだけにしたいときは

　android:fadingEdge　を指定します

　設定できる値は
　　"none"
　　"horizontal"
　　"vertical"

　で、"none" を指定すれば無くなります