AndroidでFrameLayoutの上にボタンを重ねるとボタンが半透明になってしまう件

結論

【解決したい課題】AndroidでFrameLayoutの上にボタンを重ねると、ボタンが半透明になってしまい超見難いのをどうにかしたい。
【解決方法】アプリのスタイルを見直せばよい。


詳細

FrameLayoutにSurfaceViewを作ってそこに画像を描くアプリを作っていた。
操作用のボタンを設置しようとして、ググったところFrameLayoutを使って重ね合わせるのが定石だということでやってみた。
わかりやすくするため、肝の部分だけソースコードを書くとこんな感じ。

activity_main.xml その1:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ff000000" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center" >
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="ボタンですよ" />
        </LinearLayout>
    </FrameLayout>
</RelativeLayout>

MainActivity.java その1:

package com.example.test1;

import android.os.Bundle;
import android.app.Activity;

public class MainActivity extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
}

このアプリの画面は次の通り。ボタンが半透明になっていることがわかるだろうか。

その1

ググったところ、透明度をXMLで変更するには android:alpha="1" などと指定すればよいらしいので、指定してみたが、より透明にすることはできても、透明度を下げる(より不透明にする)ことはできなかった。

で、次に試したのが、こちら。

activity_main.xml その2:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ff000000" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center" >
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="ボタンですよ"
                android:background="#ffffffff" />
        </LinearLayout>
    </FrameLayout>
</RelativeLayout>

この場合の画面は次の通り。ボタンが無事不透明(真っ白)になっている。

その2

よかったよかった、と喜んだ。
が、実はこれだと、ボタンをクリックしてもボタンの色が変わらず、クリックした感が全くでないことがわかった。

さらに調べたところ、ボタンのスタイルで、通常時・クリック時・無効時のデザインを全部指定してやればよいことがわかった。
(例えば、http://tech.pjin.jp/blog/2016/02/09/android%E3%80%80ui%E5%9F%BA%E6%9C%AC-button%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%99%E3%82%8B/

うーん、これは面倒そうだ……

で、結局行き着いた方法は、アプリ全体のスタイルを見直すという方法。具体的にはstyles.xmlを見直す。

styles.xml その1・その2:

<resources>
    <style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar" >
    </style>

    <style name="AppTheme" parent="AppBaseTheme" >
    </style>
</resources>

だったのを次のようにしてみた。(他のファイルは「その1」のまま)

styles.xml その3:

<resources>
    <style name="AppBaseTheme" parent="android:Theme.Light" >
    </style>

    <style name="AppTheme" parent="AppBaseTheme" >
    </style>
</resources>

この時の画面は次の通り。

その3

つまり、"Theme.Holo.Light.DarkActionBar" ではなくて "Theme.Light" を使うように変更してみた。

ボタンの半透明度だけを変える方法があるんじゃないかと思うが、結局見つけられなかった。
とはいえ、やりたいことはできたので、(不満は残るが)これで良しとしておこう。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください