소개

디자인의 형편상 버튼이라든가, LinearLayout를 둥글게 하고 싶었을 때에 조사했을 때의 메모.

구현

기본적으로 background를 지정할 때 다른 파일에서 둥근 모양을 정의한 것을 읽으면 잘 갑니다.

버튼 비교

우선은 버튼으로 비교해 보겠습니다.
비교 대상은 통상의 버튼, 둥근(5dp)의 버튼, 둥근(10dp)의 버튼입니다.

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp">

        <!--通常のボタン-->
        <Button
            android:id="@+id/buttonNormal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:background="@color/button_material_light"
            android:text="普通" />

        <!--角丸5dpのボタン-->
        <Button
            android:id="@+id/buttonRoundedCorners5dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@drawable/shape_rouded_corners_5dp"
            android:text="角丸(5dp)" />

        <!--角丸10dp-->
        <Button
            android:id="@+id/buttonRoundedCorners10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:background="@drawable/shape_rouded_corners_10dp"
            android:text="角丸(10dp)" />
    </RelativeLayout>

일반 버튼

이것은 특별히 망설이지 않으므로 설명은 생략합니다.

둥근(5dp) 버튼

radius를 지정하여 둥근 정도를 조정합니다. 우선 5dp부터

drawable/shape_rounded_corners_5dp.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:topRightRadius="5dp"
                android:bottomRightRadius="5dp"
                android:bottomLeftRadius="5dp"
                android:topLeftRadius="5dp"
                />
            <solid
                android:color="@color/button_material_light"
                />
        </shape>
    </item>
</selector>

둥근(10dp) 버튼

Radius의 지정을 크게 하면 더욱 강한 둥글게 됩니다.

drawable/shape_rounded_corners_10dp.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:topRightRadius="10dp"
                android:bottomRightRadius="10dp"
                android:bottomLeftRadius="10dp"
                android:topLeftRadius="10dp"
                />
            <solid
                android:color="@color/button_material_light"
                />
        </shape>
    </item>
</selector>

비교 이미지

버튼 보충

버튼을 누를 때 색을 바꾸고 싶은 경우는, 정의한 파일에 써 추가하는 것으로 실현 가능합니다.
다만, 그 경우에는 state_pressed마다 둥글기의 지정도 해주지 않으면 누르는 순간에 둥근 버튼으로 바뀌므로 주의해 주세요.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--ボタン通常時のレイアウト-->
    <item state_pressed="false">
        <shape android:shape="rectangle">
            <corners
                android:topRightRadius="5dp"
                android:bottomRightRadius="5dp"
                android:bottomLeftRadius="5dp"
                android:topLeftRadius="5dp"
                />
            <solid
                android:color="@color/button_material_light"
                />
        </shape>
    </item>
    <!--ボタン押下時のレイアウト-->
    <item state_pressed="true">
        <shape android:shape="rectangle">
            <corners
                android:topRightRadius="5dp"
                android:bottomRightRadius="5dp"
                android:bottomLeftRadius="5dp"
                android:topLeftRadius="5dp"
                />
            <solid
                android:color="#000000"
                />
        </shape>
    </item>
</selector>

LinearLayout 비교

다음으로 LinearLayout을 비교하겠습니다.
버튼과는 달리 뷰를 가지므로, 경우에 따라서는 조금 마음이 달라집니다.

<!--LinearLayout全体に適用-->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:background="@drawable/shape_rouded_corners_5dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="hoge" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="fuga" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="foo" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="bar" />
        </LinearLayout>

        <!--LinearLayout全体に適用したうえで要素一つだけ別の色を指定-->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@drawable/shape_rouded_corners_5dp"
            android:orientation="vertical">

            <!--個別の背景を色で指定-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@color/accent_material_light"
                android:text="hoge" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="fuga" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="foo" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="bar" />
        </LinearLayout>

        <!--LinearLayout全体に適用したうえで要素一つだけ別の背景を指定-->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:background="@drawable/shape_rouded_corners_5dp"
            android:orientation="vertical">

            <!--個別の背景を定義ファイルで指定-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/shape_rouded_corners_top_5dp"
                android:text="hoge" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="fuga" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="foo" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="bar" />
        </LinearLayout>
    </RelativeLayout>

LinearLayout 전체에 적용

이것은 버튼으로 사용한 xml 파일을 그대로 유용해도 괜찮습니다.
어떤 모서리도 제대로 둥글게됩니다.

LinearLayout 전체에 적용한 후 요소 하나만 다른 색을 지정

이것은 겉보기에 잘 작동하는 것처럼 보이지만 색상을 지정했기 때문에 왼쪽 상단과 오른쪽 위 모서리가 지정되지 않습니다.
좌하 우하만 둥근 모양의 왜곡된 형태가 되어 버립니다.

LinearLayout 전체에 적용한 후 요소 하나만 다른 배경을 지정

하나 앞에서 색을 지정하고 있던 부분을 xml로 개별적으로 정의하고 지정하면 잘 작동합니다.

drawable/shape_rouded_corners_top_5dp.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:topRightRadius="5dp"
                android:topLeftRadius="5dp"
                />
            <solid
                android:color="@color/accent_material_light"
                />
        </shape>
    </item>
</selector>

비교 이미지

결론

이런 번거로운 일 없이도 xml로 지정한 것만으로 능숙한 것 둥근이 되어 주지 않을까 생각했습니다.

이번 소스는 아래와 같습니다.
htps : // 기주 b. 코 m / 마이 이바 r / 촛불 d 코 r 네 r mp ぇ