如何设计如附图所示的浮动按钮

Question

我正在尝试创建一个应用程序，并且我已经有一个图像设计，但我无法克隆选项卡上方按钮的确切形状

我期望此图中有相同的设计：下注：0 和 0.00EGP 应该是变量

Answer 1

创建一个 XML 文件bottom_corner.xml作为背景<?xml version="1.0" encoding="UTF-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">&nbsp; &nbsp; <solid android:color="#0091fa"/>&nbsp; &nbsp; <stroke android:width="1dp"&nbsp; &nbsp; &nbsp; &nbsp; android:color="#0091fa" />&nbsp; &nbsp; <corners android:radius="10dp"/>&nbsp; &nbsp; <padding android:left="0dp"&nbsp; &nbsp; &nbsp; &nbsp; android:top="0dp"&nbsp; &nbsp; &nbsp; &nbsp; android:right="0dp"&nbsp; &nbsp; &nbsp; &nbsp; android:bottom="0dp" /></shape>现在创建布局floated_button.xml并在布局中使用此背景：<RelativeLayout android:layout_width="match_parent"&nbsp; &nbsp; android:layout_height="60dp"&nbsp; &nbsp; android:layout_marginRight="10dp"&nbsp; &nbsp; android:layout_marginLeft="10dp"&nbsp; &nbsp; android:layout_marginBottom="5dp"&nbsp; &nbsp; android:background="@drawable/bottom_corner"&nbsp; &nbsp; xmlns:android="http://schemas.android.com/apk/res/android">&nbsp; &nbsp; <TextView&nbsp; &nbsp; &nbsp; &nbsp; android:id="@+id/tv_total_value"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_width="50dp"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_height="wrap_content"&nbsp; &nbsp; &nbsp; &nbsp; android:text="0"&nbsp; &nbsp; &nbsp; &nbsp; android:textSize="18dp"&nbsp; &nbsp; &nbsp; &nbsp; android:gravity="center"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_centerVertical="true"&nbsp; &nbsp; &nbsp; &nbsp; android:textColor="#fff"/>&nbsp; &nbsp; <TextView&nbsp; &nbsp; &nbsp; &nbsp; android:id="@+id/tv_egp_value"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_width="wrap_content"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_height="wrap_content"&nbsp; &nbsp; &nbsp; &nbsp; android:text="0.00 EGP"&nbsp; &nbsp; &nbsp; &nbsp; android:textSize="22dp"&nbsp; &nbsp; &nbsp; &nbsp; android:gravity="center"&nbsp; &nbsp; &nbsp; &nbsp; android:paddingRight="15dp"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_alignParentRight="true"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_centerVertical="true"&nbsp; &nbsp; &nbsp; &nbsp; android:textColor="#fff"/>&nbsp; &nbsp; <View&nbsp; &nbsp; &nbsp; &nbsp; android:layout_width="1dp"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_height="match_parent"&nbsp; &nbsp; &nbsp; &nbsp; android:background="#fff"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_toRightOf="@+id/tv_total_value"/>&nbsp; &nbsp; <TextView&nbsp; &nbsp; &nbsp; &nbsp; android:id="@+id/tv_title"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_width="wrap_content"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_height="wrap_content"&nbsp; &nbsp; &nbsp; &nbsp; android:text="Charge"&nbsp; &nbsp; &nbsp; &nbsp; android:textSize="22dp"&nbsp; &nbsp; &nbsp; &nbsp; android:gravity="center"&nbsp; &nbsp; &nbsp; &nbsp; android:paddingRight="15dp"&nbsp; &nbsp; &nbsp; &nbsp; android:paddingLeft="15dp"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_centerVertical="true"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_toRightOf="@+id/tv_total_value"&nbsp; &nbsp; &nbsp; &nbsp; android:textColor="#fff"/></RelativeLayout>

Answer 2

对于您的具体问题，您可以像这样继续：首先，你必须创建一个drawable file圆形背景。<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <solid android:color="#000000" />    <corners android:radius="15dp" /></shape>然后，您可以添加tag of image并将其放置在图像的一角上您想要放置的位置。然后使用drawable asbackground然后调整一下就可以TextView了。<ImageView    android:id="@+id/ivLauncher"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_margin="10dp"    android:src="@mipmap/ic_launcher"    app:layout_constraintLeft_toLeftOf="parent"    app:layout_constraintTop_toTopOf="parent" /><ImageView    android:id="@+id/ivBg"    android:layout_width="15dp"    android:layout_height="15dp"    android:src="@drawable/round_text_bg"    app:layout_constraintTop_toBottomOf="@id/ivLauncher"    app:layout_constraintBottom_toBottomOf="@id/ivLauncher"    app:layout_constraintLeft_toRightOf="@id/ivLauncher"    app:layout_constraintRight_toRightOf="@id/ivLauncher"/><TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="1"    android:textColor="#FFFFFF"    android:textSize="10dp"    app:layout_constraintTop_toTopOf="@id/ivBg"    app:layout_constraintBottom_toBottomOf="@id/ivBg"    app:layout_constraintLeft_toLeftOf="@id/ivBg"    app:layout_constraintRight_toRightOf="@id/ivBg"/>