Android: How correctly to create buttons which are incorporated in a single visual element?

Question

I received such a layout:

How correctly to make such, not using the Custom View? Or is this the only way to solve the problem? I'm not sure how this design solution is called, so Google has not helped much.

I have a strong desire to program this in the most standard way, so that it turns into a theme that could be applied to standard widgets

score 1 · Accepted Answer · answered May 07 '18 at 04:31

Try this

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/linearTop"
        android:padding="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="140dp"
            android:layout_weight="1"
            android:orientation="vertical">


            <Button
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:layout_margin="2dp"
                android:background="@drawable/test"
                android:text="button 1" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:layout_margin="2dp"
                android:background="@drawable/test"
                android:text="button 1" />
        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="130dp"
            android:layout_weight="1"
            android:orientation="vertical">


            <Button
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/test"
                android:text="button 1" />

        </LinearLayout>
    </LinearLayout>

    <android.support.v7.widget.CardView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginTop="-20dp"
        android:background="#ffffff"
        android:padding="10dp"
        app:cardCornerRadius="50dp"
        app:cardUseCompatPadding="true"
        app:layout_anchor="@id/linearTop"
        app:layout_anchorGravity="center">

        <android.support.design.widget.FloatingActionButton
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:backgroundTint="#de0606"
            android:scaleType="fitXY"
            android:src="@drawable/ic_dot" />

    </android.support.v7.widget.CardView>
</android.support.design.widget.CoordinatorLayout>

@drawable/ic_dot

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#de0606"
        android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
</vector>

android:background="@drawable/test"

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#06892b" />

    <corners android:radius="20dp" />
</shape>

OUTPUT

Android: How correctly to create buttons which are incorporated in a single visual element?

1 Answers1