【Android】Viewの形を角丸等に変更する【Java/Kotlin】

こんにちは!

今回はViewの形を変更してみようと思います。

だいたいのViewの形はデフォルトで四角なので角丸にしたい場合は対応が必要です。

Viewを角丸にする

前提準備

まずは角丸にするためのdrawableを作成します。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <!-- Viewの背景色を設定 -->
            <solid android:color="#FF0000" />
            <!-- Viewの角丸を設定 -->
            <corners android:radius="16dp" />
        </shape>
    </item>
</selector>

表示する

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_view"
        android:text="かどまる"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

ポイント

1. cornersで角丸加減を設定する

cornersタグには下記の角丸を調節できるattributeが定義できます。

attribute名説明
radius全ての角を指定したdp分丸みを強くする
topLeftRadius左上の角を指定したdp分丸みを強くする
topRightRadius右上の角を指定したdp分丸みを強くする
bottomLeftRadius左下の角を指定したdp分丸みを強くする
bottomRightRadius右下の角を指定したdp分丸みを強くする

2.solidで背景色に色を定義する

角丸に設定したい場合はbackgroundにdrawableを設定する必要があります。

なのでdrawableには背景色を定義しないとViewの背景色がデフォルト表示になってします。

要注意です。

Viewを円形に設定する

続いてはViewを円形い表示してみましょう。

円形Viewと言えばTwitterの投稿ボタン等が円形ですね。

前提準備

角丸同様に円形用のdrawableを作成します。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <!-- Viewの背景色を設定 -->
            <solid android:color="#FF0000" />
            <!-- Viewのサイズを設定 -->
            <size android:width="120dp" android:height="120dp" />
        </shape>
    </item>
</selector>

表示する

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ring_view"
        android:text="円"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

ポイント

1.sizeで円形を保つためにViewの縦横を同じ大きさにする

円形を保つためにwidth,heigtを同じ大きさにします。

違う大きさの場合楕円形になってしまうので注意です。

2.solidで背景色に色を定義する

こちらも角丸同様に背景色を設定しないとデフォルト色になってしまうので要注意です。

最後に

いかがでしたでしょうか

drawableを使ったViewの形の変更角丸、円形、楕円形、線くらいです。

ひしがたや好きな形を表示したい場合はCanvasを使用すると対応できます。

コメント

タイトルとURLをコピーしました