概要

LinearLayoutで画像とテキストを縦に並べてボタンっぽいものを作ります。

完成イメージ

タップ前: 、タップ後:

XML

ボタンのXML

my_button.xml

<LinearLayout
	android:id="@+id/my_button"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentLeft="true"
	android:layout_centerVertical="true"
	android:background="@drawable/button_background"
	android:gravity="center"
	android:orientation="vertical"
	android:paddingBottom="5dp"
	android:paddingLeft="9dp"
	android:paddingRight="9dp"
	android:paddingTop="5dp">

	<ImageView
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:src="@drawable/plus_symbol" />

	<TextView
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="追加"
		android:textColor="@android:color/white"
		android:textSize="12sp"
		android:textStyle="bold" />
</LinearLayout>

ボタンの背景のXML

button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/button_background_normal"
        android:state_pressed="false"
        android:state_selected="false" />
    <item
        android:drawable="@drawable/button_background_pressed"
        android:state_pressed="true"
        android:state_selected="false" />
    <item
        android:drawable="@drawable/button_background_normal"
        android:state_pressed="false"
        android:state_selected="true" />
    <item
        android:drawable="@drawable/button_background_pressed"
        android:state_pressed="true"
        android:state_selected="true" />
</selector>

タップ前のXML

button_background_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="FF9AA2BF" />
    <corners android:radius="2dp" />
    <stroke
        android:width="1dp"
        android:color="FF9AA2BF" />
</shape>

タップ後のXML

button_background_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="FF6E7280" />
    <corners android:radius="2dp" />
    <stroke
        android:width="1dp"
        android:color="FF6E7280" />
</shape>

＋画像

app/src/main/res/drawable/plus_smybol.png

（↑白い+記号の画像です）