この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
今回は、Androidで 透明ボタン を作ってみます。
この記事でいっている 透明ボタン とは、通常時は透明で、タップした時は半透明になるボタンのことです。
実装
では、作っていきます。
まず、ボタンタップ時の半透明の色を、 colors.xml に追記します。
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="clearButtonPressed">#33000000</color>
</resources>
次に、透明ボタンの drawable を作成します。
「drawable」フォルダ内に、新たに clear_button_bg.xml ファイルを作成します。
clear_button_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/clearButtonPressed" android:state_pressed="true" />
<item android:drawable="@android:color/transparent" />
</selector>
最後に、透明ボタンをレイアウトファイルに記述します。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="120dp"
android:layout_height="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<View
android:id="@+id/image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_marginStart="10dp"
android:background="@drawable/stack_penguin_2_app_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="54dp"
android:gravity="center"
android:text="Penguin!" />
<Button
android:id="@+id/clearButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/clear_button_bg" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
動作確認
では動かしてみます。
通常時は、こんな感じです。
タップするとこんな感じです。
ボタン内部の画像や文字列がちょっと複雑になっても、上から透明ボタンを被せてボタンタップ時の色を調整できます。
これに角丸を付けてみようかと思いましたが、それはまた今度。
ではでは。