【Android】LinearLayoutで画像とテキストを縦に並べてボタンっぽくする

概要

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

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