android - How can i create this type of user interface?

Question

I am working on a tv remote application in that i have to create this type of user interface(ignore the red dashed line) i tried using a circle background that is

    <?xml version="1.0" encoding="utf-8"?>

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="oval">
            <solid
                android:color="@color/colorGreyShade2"/>
            <padding
                android:bottom="@dimen/_40sdp"
                android:left="@dimen/_40sdp"
                android:right="@dimen/_40sdp"
                android:top="@dimen/_40sdp"/>
            <stroke
                android:width="1dp"
                android:color="@color/colorGreyShade2"/>
        </shape>
    </item>
    <item>
        <shape
            android:shape="oval">
            <solid
                android:color="@color/colorGreyShade2"/>

            <size
                android:width="@dimen/_100sdp"
                android:height="@dimen/_100sdp"/>
            <stroke
                android:width="1dp"
                android:color="@color/colorGreyShade1"/>
        </shape>

    </item>
</layer-list>

and using this as background of a layout and trying to adjust the navigation buttons in that but not able to achieve. Can i use this image in an ImageView and detect user clicks from five button areas?

标签： androidandroid-layout

Answer 1

您可以从这里实现这一点。无需创建可绘制图层列表。您可以使用 imageview、textview 和约束布局。这也将很容易实现所有五个按钮单击。

bg_circle_fill_white.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/divider" />

    <stroke
        android:width="1dp"
        android:color="@color/black" />

    <padding
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp" />

    <corners android:radius="@dimen/_100sdp" />
</shape>

布局.xml

<?xml version="1.0" encoding="utf-8"?>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="@dimen/_200sdp"
        android:layout_height="@dimen/_200sdp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="@dimen/_150sdp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:background="@drawable/bg_circle_fill_white"
            android:layout_height="@dimen/_150sdp">

            <androidx.appcompat.widget.AppCompatImageView
                android:layout_width="wrap_content"
                android:src="@drawable/ic_previous_arrow"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                android:padding="@dimen/_5sdp"
                app:layout_constraintBottom_toBottomOf="parent"
                android:layout_height="wrap_content" />

            <androidx.appcompat.widget.AppCompatImageView
                android:layout_width="wrap_content"
                android:src="@drawable/ic_next_arrow"
                app:layout_constraintEnd_toEndOf="parent"
                android:padding="@dimen/_5sdp"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:layout_height="wrap_content" />

            <androidx.appcompat.widget.AppCompatImageView
                android:layout_width="wrap_content"
                android:src="@drawable/ic_arrow_up"
                app:layout_constraintEnd_toEndOf="parent"
                android:padding="@dimen/_5sdp"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_height="wrap_content" />

            <androidx.appcompat.widget.AppCompatImageView
                android:layout_width="wrap_content"
                android:src="@drawable/ic_arrow_down"
                app:layout_constraintEnd_toEndOf="parent"
                android:padding="@dimen/_5sdp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_height="wrap_content" />

            <androidx.appcompat.widget.AppCompatTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="@dimen/_20sdp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:text="OK"
                android:background="@drawable/bg_circle_fill_white" />

        </androidx.constraintlayout.widget.ConstraintLayout>


    </androidx.constraintlayout.widget.ConstraintLayout>