[Android] SeekBar の配列をコードで記述、ツマミとProgress barのカスタマイズ

SeekBarのツマミを変更したり、プログレスバーの色や形をカスタマイズしてみます。それらを配列にしてコードで記述してみるとこうなりました。

Android Studio
2021.2.1

SeekBar カスタマイズ

　
SeekBarの基本的なところはSeekBar でボリューム入力にあるように設定していきますが、つまみやプログレスバーはカスタマイズしたくなるのではないでしょうか。

目次
1. 背景色の変更
2. ツマミを画像に変更
3. shapeを使ってカスタマイズ
4. SeekBar 配列
5. サンプルコード
6. サンプル動画

背景色の変更

　
簡単にカスタマイズできるところを変更してみます。
　
高さと横幅は
layout_height
layout_width
で設定でき、背景色は
backgroundでカスタマイズします。
　

<SeekBar
    android:id="@+id/seekbar"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="#faa"
    android:layout_margin="20dp" />

<SeekBar

android:id="@+id/seekbar"

android:layout_width="match_parent"

android:layout_height="60dp"

android:background="#faa"

android:layout_margin="20dp" />

ツマミを画像に変更

　
ツマミをアイコン画像にすることも可能です。
例えば \res\mipmap\ic_launcher にあるdroidくんの画像を利用します

android:thumb="@mipmap/ic_launcher"

1	android:thumb="@mipmap/ic_launcher"

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:thumb="@mipmap/ic_launcher"
        android:background="#ccc"
        android:layout_margin="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<SeekBar

android:id="@+id/seekbar"

android:layout_width="match_parent"

android:layout_height="100dp"

android:thumb="@mipmap/ic_launcher"

android:background="#ccc"

android:layout_margin="20dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

shapeを使ってカスタマイズ

　
progress bar とツマミをshapeを使ってカスタマイズしてみたいと思います。
　
ツマミのshapeは
custom_thumb.xml としてdrawableに入れます。

custom_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:width="30dp" android:height="50dp" />
    <corners android:radius="15dp" />
    <solid android:color="#f44"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

</shape>

　
またprogress barの部分は
custom_progress.xml として同様にdrawableに入れます。

custom_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="#888"/>
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="#04f"/>
                <corners android:radius="8dp" />
            </shape>
        </clip>
    </item>
</layer-list>

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

</shape>

</item>

<clip>

</shape>

</clip>

</item>

</layer-list>

　
ツマミの移動を追随させるためにclipを使っています。
　
activity_main.xml

...
<SeekBar
    android:id="@+id/seekbar"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:progressDrawable="@drawable/custom_progress"
    android:thumb="@drawable/custom_thumb"
    android:background="#ccc"
    android:layout_margin="20dp" />
...

...

<SeekBar

android:id="@+id/seekbar"

android:layout_width="match_parent"

android:layout_height="50dp"

android:progressDrawable="@drawable/custom_progress"

android:thumb="@drawable/custom_thumb"

android:background="#ccc"

android:layout_margin="20dp" />

...

SeekBar 配列

　
配列はボタン配列のように、レイアウトファイルを使わずにfor文で作成していきます。
　

SeekBar seekBar[] = new SeekBar[4];

LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.VERTICAL);

layout.setLayoutParams(new LinearLayout.LayoutParams(
        LinearLayout.LayoutParams.MATCH_PARENT,
        LinearLayout.LayoutParams.MATCH_PARENT));

// seekBar[], 配列の設定
for(int i=0; i< seekBar.length ;i++) {
    // seekBar[]の設定
    seekBar[i] = new SeekBar(this);

    LinearLayout.LayoutParams seekBarLayoutParams = 
                               new LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.WRAP_CONTENT);

    seekBarLayoutParams.setMargins(30, 30, 30, 30);

    seekBar[i].setLayoutParams(seekBarLayoutParams);

    // 初期値
    seekBar[i].setProgress(0);
    // 最大値
    seekBar[i].setMax(100);
    seekBar[i].setOnSeekBarChangeListener(
            new SeekBar.OnSeekBarChangeListener() {
                //ツマミがドラッグされると呼ばれる
                @Override
                public void onProgressChanged(
                        SeekBar seekBar, int progress, boolean fromUser) {
                    Log.d("debug", String.valueOf(progress));
                }

                //ツマミがタッチされた時に呼ばれる
                @Override
                public void onStartTrackingTouch(SeekBar seekBar) {
                }

                //ツマミがリリースされた時に呼ばれる
                @Override
                public void onStopTrackingTouch(SeekBar seekBar) {
                }
            });
    layout.addView(seekBar[i]);

}

setContentView(layout);

SeekBar seekBar[] = new SeekBar[4];

LinearLayout layout = new LinearLayout(this);

layout.setOrientation(LinearLayout.VERTICAL);

layout.setLayoutParams(new LinearLayout.LayoutParams(

LinearLayout.LayoutParams.MATCH_PARENT,

LinearLayout.LayoutParams.MATCH_PARENT));

// seekBar[], 配列の設定

for(int i=0; i< seekBar.length ;i++) {

// seekBar[]の設定

seekBar[i] = new SeekBar(this);

LinearLayout.LayoutParams seekBarLayoutParams =

new LinearLayout.LayoutParams(

ViewGroup.LayoutParams.MATCH_PARENT,

ViewGroup.LayoutParams.WRAP_CONTENT);

seekBarLayoutParams.setMargins(30, 30, 30, 30);

seekBar[i].setLayoutParams(seekBarLayoutParams);

// 初期値

seekBar[i].setProgress(0);

// 最大値

seekBar[i].setMax(100);

seekBar[i].setOnSeekBarChangeListener(

new SeekBar.OnSeekBarChangeListener() {

//ツマミがドラッグされると呼ばれる

@Override

public void onProgressChanged(

SeekBar seekBar, int progress, boolean fromUser) {

Log.d("debug", String.valueOf(progress));

}

//ツマミがタッチされた時に呼ばれる

@Override

public void onStartTrackingTouch(SeekBar seekBar) {

}

//ツマミがリリースされた時に呼ばれる

@Override

public void onStopTrackingTouch(SeekBar seekBar) {

}

});

layout.addView(seekBar[i]);

}

setContentView(layout);

サンプルコード

　
以上をまとめて、レイアウトファイルを使わず配列として記述してみます。

MainActivity.java

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.res.ResourcesCompat;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private final SeekBar[] seekBar = new SeekBar[4];
    private TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // リニアレイアウトの設定
        LinearLayout layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.VERTICAL);

        layout.setLayoutParams(new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT));

        // レイアウト中央寄せ
        layout.setGravity(Gravity.CENTER);

        layout.setBackgroundColor(Color.rgb(220, 255, 220));
        setContentView(layout);

        // dp単位を取得
        float dp = getResources().getDisplayMetrics().density;
        // マージン 20dp に設定
        int margins = (int)(20 * dp);
        // SeekBarの高さを100dpに設定
        int seekBarHeight = (int)(50 * dp);

        textView = new TextView(this);

        LinearLayout.LayoutParams textViewLayoutParams = new LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        textViewLayoutParams.setMargins(margins, margins, margins, margins);

        textView.setLayoutParams(textViewLayoutParams);
        layout.addView(textView);
        String str = 0 + " %";
        textView.setText(str);
        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 30);


        // seekBar[], textView[] 配列の設定
        for(int i=0; i< seekBar.length ;i++) {
            // seekBar[]の設定
            seekBar[i] = new SeekBar(this);

            LinearLayout.LayoutParams seekBarLayoutParams = new LinearLayout.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT, seekBarHeight);
            seekBarLayoutParams.setMargins(margins, margins, margins, margins);

            seekBar[i].setLayoutParams(seekBarLayoutParams);
            layout.addView(seekBar[i]);

            // 初期値
            seekBar[i].setProgress(0);
            // 最大値
            seekBar[i].setMax(100);
            // 背景色
            seekBar[i].setBackgroundColor(Color.rgb(191, 191, 191));

//            if(i==0){
//                // nothing
//            }
            if(i==1){
                Drawable icon = ResourcesCompat.getDrawable(getResources(),
                        R.mipmap.ic_launcher, null);
                seekBar[i].setThumb(icon);
            }
            else if(i==2){
                ShapeDrawable sdrawable = new ShapeDrawable(new OvalShape());
                sdrawable.getPaint().setColor(Color.BLUE);
                sdrawable.setIntrinsicWidth(30*(int)dp);
                sdrawable.setIntrinsicHeight(50*(int)dp);
                seekBar[i].setThumb(sdrawable);
            }
            else if(i==3){
                Drawable icon = ResourcesCompat.getDrawable(getResources(),
                        R.drawable.custom_progress, null);
                seekBar[i].setProgressDrawable(icon);
            }

            seekBar[i].setOnSeekBarChangeListener(
                    new SeekBar.OnSeekBarChangeListener() {
                        // トグルがドラッグされると呼ばれる
                        @Override
                        public void onProgressChanged(SeekBar seekBar,
                                                      int progress, boolean fromUser) {
                            String str = progress + " %";
                            textView.setText(str);
                        }

                        // トグルがタッチされた時に呼ばれる
                        public void onStartTrackingTouch(SeekBar seekBar) {
                        }
                        // トグルがリリースされた時に呼ばれる
                        public void onStopTrackingTouch(SeekBar seekBar) {
                        }

                    });

        }
    }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import androidx.core.content.res.ResourcesCompat;

import android.graphics.Color;

import android.graphics.drawable.Drawable;

import android.graphics.drawable.ShapeDrawable;

import android.graphics.drawable.shapes.OvalShape;

import android.os.Bundle;

import android.util.TypedValue;

import android.view.Gravity;

import android.view.ViewGroup;

import android.widget.LinearLayout;

import android.widget.SeekBar;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

private final SeekBar[] seekBar = new SeekBar[4];

private TextView textView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// リニアレイアウトの設定

LinearLayout layout = new LinearLayout(this);

layout.setOrientation(LinearLayout.VERTICAL);

layout.setLayoutParams(new LinearLayout.LayoutParams(

LinearLayout.LayoutParams.MATCH_PARENT,

LinearLayout.LayoutParams.MATCH_PARENT));

// レイアウト中央寄せ

layout.setGravity(Gravity.CENTER);

layout.setBackgroundColor(Color.rgb(220, 255, 220));

setContentView(layout);

// dp単位を取得

float dp = getResources().getDisplayMetrics().density;

// マージン 20dp に設定

int margins = (int)(20 * dp);

// SeekBarの高さを100dpに設定

int seekBarHeight = (int)(50 * dp);

textView = new TextView(this);

LinearLayout.LayoutParams textViewLayoutParams = new LinearLayout.LayoutParams(

ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

textViewLayoutParams.setMargins(margins, margins, margins, margins);

textView.setLayoutParams(textViewLayoutParams);

layout.addView(textView);

String str = 0 + " %";

textView.setText(str);

textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 30);

// seekBar[], textView[] 配列の設定

for(int i=0; i< seekBar.length ;i++) {

// seekBar[]の設定

seekBar[i] = new SeekBar(this);

LinearLayout.LayoutParams seekBarLayoutParams = new LinearLayout.LayoutParams(

ViewGroup.LayoutParams.MATCH_PARENT, seekBarHeight);

seekBarLayoutParams.setMargins(margins, margins, margins, margins);

seekBar[i].setLayoutParams(seekBarLayoutParams);

layout.addView(seekBar[i]);

// 初期値

seekBar[i].setProgress(0);

// 最大値

seekBar[i].setMax(100);

// 背景色

seekBar[i].setBackgroundColor(Color.rgb(191, 191, 191));

// if(i==0){

// // nothing

// }

if(i==1){

Drawable icon = ResourcesCompat.getDrawable(getResources(),

R.mipmap.ic_launcher, null);

seekBar[i].setThumb(icon);

}

else if(i==2){

ShapeDrawable sdrawable = new ShapeDrawable(new OvalShape());

sdrawable.getPaint().setColor(Color.BLUE);

sdrawable.setIntrinsicWidth(30*(int)dp);

sdrawable.setIntrinsicHeight(50*(int)dp);

seekBar[i].setThumb(sdrawable);

}

else if(i==3){

Drawable icon = ResourcesCompat.getDrawable(getResources(),

R.drawable.custom_progress, null);

seekBar[i].setProgressDrawable(icon);

}

seekBar[i].setOnSeekBarChangeListener(

new SeekBar.OnSeekBarChangeListener() {

// トグルがドラッグされると呼ばれる

@Override

public void onProgressChanged(SeekBar seekBar,

int progress, boolean fromUser) {

String str = progress + " %";

textView.setText(str);

}

// トグルがタッチされた時に呼ばれる

public void onStartTrackingTouch(SeekBar seekBar) {

}

// トグルがリリースされた時に呼ばれる

public void onStopTrackingTouch(SeekBar seekBar) {

}

});

}

　
progressの部分はshapeファイルで記述しています。
custom_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="#888"/>
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="#04f"/>
                <corners android:radius="8dp" />
            </shape>
        </clip>
    </item>
</layer-list>

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

</shape>

</item>

<clip>

</shape>

</clip>

</item>

</layer-list>

サンプル動画

　
　
関連ページ：

SeekBarでボリューム入力
SeekBarの配列をコードで記述、ツマミとPregress barのカスタマイズ

　
Reference:
SeekBar | Android Developers