ともちゃんのアプリ開発日記

組込みC言語プログラマだったともちゃんが、四苦八苦しながら、AndroidのJAVA/Kotlin、iOSのSwiftUIを習得して行きます。ともちゃんの備忘録も兼ねています。

ボタンの角を丸くする

ボタンの色を変えるのは、

Button button = findViewByID(R.id.button1);

button.setBackgroundColor(Color);

でできることは、に書きました。

ただ問題点は、ボタンを押したときの反応が亡くなることと、ボタンが何の変哲もない四画になってしまうことです。

今回は、ボタンの角を丸くすることで、ボタンに飾り気を持たせてみたいと思います。

 

1.まず、ボタンの形と色を決めるレイアウトを作成します。

  ボタンを離した時のbutton_skyblue_unpressed.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners
android:radius="10dp"
/>
<solid
android:color="#00C8C8"
/>
</shape>
</item>
</selector>

android:radius="10dp"のところで角を丸くしています。

ボタンを押した時のbutton_skyblue_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners
android:radius="10dp"
/>
<solid
android:color="#009898"
/>
</shape>
</item>
</selector>

色のところが異なっているだけです。

 

2.次にプログラム本体です。

上記で作成した、レイアウトをボタンに反映するのに、

button.setBackground(ResourcesCompat.getDrawable(getResources(), button_skyblue_unpressed, getActivity().getTheme()));

を使います。

実際のコードは下記です。

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_data_main, container, false);

(中略)

Button btnRegister = (Button) view.findViewById(R.id.buttonDataMainRegister);
// 「登録」のOnTouchListenerを設定
btnRegister.setOnTouchListener(new registerOnTouchListener());

(中略)

return view;
}

 

// 「登録」のOnTouchListener本体
private class registerOnTouchListener implements View.OnTouchListener {
@Override
public boolean onTouch(View v, MotionEvent event) {

Button button = (Button) getActivity().findViewById(R.id.buttonDataMainRegister);

DataCenter dataCenter = new DataCenter();
SharedPreferences prefs = getActivity().getSharedPreferences("setting", Context.MODE_PRIVATE);
int backgroundColor = prefs.getInt("BackgroundColor", 0);
int touchEvent = event.getAction();
switch (backgroundColor) {
case R.id.radioButtonSkyBule :
switch (touchEvent) {
case MotionEvent.ACTION_DOWN :
button.setBackground(ResourcesCompat.getDrawable(getResources(), button_skyblue_pressed, getActivity().getTheme()));
break;
case MotionEvent.ACTION_UP:
button.setBackground(ResourcesCompat.getDrawable(getResources(), button_skyblue_unpressed, getActivity().getTheme()));
break;
}
break;
case R.id.radioButtonGreen :
switch (touchEvent) {
case MotionEvent.ACTION_DOWN :
button.setBackground(ResourcesCompat.getDrawable(getResources(), button_green_pressed, getActivity().getTheme()));
break;
case MotionEvent.ACTION_UP:
button.setBackground(ResourcesCompat.getDrawable(getResources(), button_green_unpressed, getActivity().getTheme()));
break;
}
break;
case R.id.radioButtonYellow :
switch (touchEvent) {
case MotionEvent.ACTION_DOWN :
button.setBackground(ResourcesCompat.getDrawable(getResources(), button_yellow_pressed, getActivity().getTheme()));
break;
case MotionEvent.ACTION_UP:
button.setBackground(ResourcesCompat.getDrawable(getResources(), button_yellow_unpressed, getActivity().getTheme()));
break;
}
break;
default :
switch (touchEvent) {
case MotionEvent.ACTION_DOWN :
button.setBackground(ResourcesCompat.getDrawable(getResources(), button_white_pressed, getActivity().getTheme()));
break;
case MotionEvent.ACTION_UP:
button.setBackground(ResourcesCompat.getDrawable(getResources(), button_white_unpressed, getActivity().getTheme()));
break;
}
break;
}
return false;
}
}

 

 これで作った画面が、下記です。

f:id:uchida001tmhr:20160327075445p:plain