Placing a view above Floating Action Button

问题: I am not able to arrange a view above the FloatingActionButton. It always displays behind the button. As you can see in the screenshot, the view is having a backround color...

问题:

I am not able to arrange a view above the FloatingActionButton. It always displays behind the button. As you can see in the screenshot, the view is having a backround color, and its behind the FAB.

enter image description here

And my layout file,

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="370dp"
    android:layout_height="300dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_gravity="center"
    app:cardBackgroundColor="#DDE1E2"
    android:layout_margin="4dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:padding="20dp"
        android:layout_height="match_parent">

        <com.github.mikephil.charting.charts.PieChart
            android:id="@+id/chart1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerVertical="true"
            android:backgroundTint="#DDE1E2"
            android:layout_centerHorizontal="true"
            >

        </com.github.mikephil.charting.charts.PieChart>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            app:backgroundTint="@android:color/white"
            app:borderWidth="0dp"
            app:elevation="20dp"
            app:fabSize="mini" />

        <RelativeLayout
            android:id="@+id/total_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <View
                android:id="@+id/view"
                android:layout_width="100dp"
                android:layout_height="5dp"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:background="#272727" />

        </RelativeLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="INDIA"
            android:textStyle="bold"
            android:textSize="30sp"
            android:layout_below="@+id/fab"
            android:layout_marginTop="10dp"
            android:layout_centerHorizontal="true"
            />

    </RelativeLayout>


</androidx.cardview.widget.CardView>

回答1:

Try this

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="370dp"
    android:layout_height="300dp"
    android:layout_gravity="center"
    android:layout_margin="4dp"
    app:cardBackgroundColor="#DDE1E2">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="20dp">


        <FrameLayout
            android:id="@+id/total_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true">

            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                app:cardElevation="30dp">

                <View
                    android:id="@+id/view"
                    android:layout_width="100dp"
                    android:layout_height="5dp"
                    android:background="#272727" />

            </androidx.cardview.widget.CardView>

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                app:backgroundTint="@android:color/white"
                app:borderWidth="0dp"
                app:elevation="10dp"
                app:fabSize="mini" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center"
                android:layout_marginTop="30dp"
                android:text="INDIA"
                android:textSize="30sp"
                android:textStyle="bold" />

        </FrameLayout>

    </RelativeLayout>

</androidx.cardview.widget.CardView>

OUTPUT enter image description here


回答2:

FloatingActionButton takes up some elevation by default as a part of Material Design.

So, a workaround would be to give some elevation to the view that should show above the floating action button.

Eg. you can wrap the view by a CardView and use the following in xml. :-

 app:cardElevation="xdp" // i.e, the view that floats above the FAB

Or you can use a custom view and give it a circular background like floating action button without any elevation and place your view above it.

In your drawable :-

 <shape 
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="oval">> 
    <solid android:color="#FFFFFF" />
    <size android:height="25dp"
          android:width="25dp"/>
 </shape>

&& In you xml :-

 <View
    .....
    .....
    android:id="@+id/customFloatingActionButton"
    android:background="@drawable/oval"/>

回答3:

Try it

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.cardview.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="370dp"
android:layout_height="300dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center"
app:cardBackgroundColor="#DDE1E2"
android:layout_margin="4dp">

<RelativeLayout
    android:layout_width="match_parent"
    android:padding="20dp"
    android:layout_height="match_parent">

    <com.github.mikephil.charting.charts.PieChart
        android:id="@+id/chart1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerVertical="true"
        android:backgroundTint="#DDE1E2"
        android:layout_centerHorizontal="true"
        >

    </com.github.mikephil.charting.charts.PieChart>



    <RelativeLayout
        android:id="@+id/total_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:id="@+id/view"
            android:layout_width="100dp"
            android:layout_height="5dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:background="#272727" />

    </RelativeLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:backgroundTint="@android:color/white"
        app:borderWidth="0dp"
        app:elevation="20dp"
        app:fabSize="mini" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="INDIA"
        android:textStyle="bold"
        android:textSize="30sp"
        android:layout_below="@+id/fab"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true"
        />

</RelativeLayout>

  • 发表于 2019-03-02 14:49
  • 阅读 ( 233 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除