I am trying to design floating action button with number label on it. But when text is being displayed on the label it is hiding behind the cart FloatingActionButton
.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:orientation="horizontal">
<android.support.design.widget.FloatingActionButton
android:id="@+id/add_to_cart_floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:elevation="5dp"
android:src="@drawable/cart2"
app:backgroundTint="@color/colorPrimaryDark"
app:borderWidth="0dp"
app:fabSize="normal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="-50dp"
android:layout_marginTop="15dp"
android:layout_toEndOf="@id/add_to_cart_floating_action_button"
android:background="@drawable/floating_action_button_label"
android:paddingBottom="5dp"
android:paddingEnd="5dp"
android:paddingStart="20dp"
android:paddingTop="5dp"
android:text="@string/one"
android:textColor="@color/TextcolorforBlack"
android:textStyle="bold" />
</RelativeLayout>
floating_action_button_label.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/TextcolorforWhite" />
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
</shape>
I used this layout. Just added android:elevation="7dp"
and few padding changes which you can adjust as per your choice.
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.design.widget.FloatingActionButton
android:id="@+id/add_to_cart_floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:elevation="5dp"
android:src="@drawable/cart2"
app:backgroundTint="#800"
app:borderWidth="0dp"
app:fabSize="normal" />
<TextView
android:layout_width="35dp"
android:layout_height="wrap_content"
android:layout_marginStart="-45dp"
android:layout_marginTop="10dp"
android:layout_toEndOf="@id/add_to_cart_floating_action_button"
android:background="@drawable/floating_action_button_label"
android:paddingBottom="2dp"
android:paddingEnd="6dp"
android:paddingStart="12dp"
android:paddingTop="2dp"
android:elevation="7dp"
android:text="1"
android:textColor="#800"
android:textStyle="bold" />
</RelativeLayout>
I used this floating_action_button_label.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFF" />
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
<stroke android:width="1sp"
android:color="#800"/>
</shape>
Try having a textview with elevation attribute :
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#00fff0"
app:borderWidth="0dp"
android:elevation="0dp"
app:fabSize="normal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:text="above"
android:elevation="7dp"/>
</FrameLayout>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.