【Android Studio&Kotlin】トグル(切り替え)スイッチのON/Offでアイコンを変更する方法

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

初心者
トグルスイッチのアイコンを変更することはできますか?

よしたか
学んだことをアウトプットしていきます。

 

この記事を読むことで
  • トグルスイッチのアイコンを変更する方法がわかります。

トグルスイッチのアイコンを変更する方法

対象者

大前提
  • Android Studioで既にtoggleSwitchを設定している状態での説明になります。

kotlinのトグルボタンのソースコード

val toggle: ToggleButton = findViewById(R.id.togglebutton)
toggle.setOnCheckedChangeListener { _, isChecked ->
    if (isChecked) {
        // The toggle is enabled
    } else {
        // The toggle is disabled
    }
}

レイアウトにtogglebuttonを追加しておいてください。

ポイント
  • 上がONのときの状態の処理を書きます。
  • 下がOFFのときの状態の処理を書きます。

 

アイコンを変える方法

アイコンを変える情報があまり多くなかったので自分が実装した内容を掲載しておきます。

以下の部分を入れることによってアイコンを変更することができます。

        toggle.setCompoundDrawablesWithIntrinsicBounds(
            null,
            ContextCompat.getDrawable(this, R.drawable.〇〇),
            null,
            null
        )
   

 

全体のソースコードでは次のようにセットすることができます。

val toggle: ToggleButton = findViewById(R.id.togglebutton)
toggle.setOnCheckedChangeListener { _, isChecked ->
    if (isChecked) {
        toggle.setCompoundDrawablesWithIntrinsicBounds(
            null,
            ContextCompat.getDrawable(this, R.drawable.〇〇),
            null,
            null
        )
    } else {
        // The toggle is disabled
    }
}
ポイント
  • アイコン画像は事前に準備しておきましょう。
  • 画面レイアウトに「togglebutton」の設定もしておいてください。

まとめ

今回はトグル(切り替え)スイッチのON/Offでアイコンを変更する方法についてお伝えしました。

setCompoundDrawablesWithIntrinsicBoundsの部分が載っていなかったので苦戦しました。

スタックオーバーフローにしかなかったので、紹介となります。

※プログラミングは習得中ですので、参考程度に記事を読んでください。

 

参考はこちら

切り替えボタン 公式ドキュメント

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事