CODEWITHSUNDEEP
androidandroid-layoutandroid-fragmentsfloating-action-button
Lars
Lars

Reputation: 824

Fab Button Menu is shown behind GridView

With the library for Floating Action Button by Clans (https://github.com/Clans/FloatingActionButton) i tried to implement a Floating Action Button with a Menu when the Button is clicked. The Problem i have is when i click the Button the Menu is gonna show up but the Buttons are hiding under another View (Grid View in this case). My layout looks like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/prevMonth"
        android:src="@drawable/arrow_left"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:layout_width="50dp"
        android:layout_height="35dp">
    </ImageView>
    <Button
        android:id="@+id/currentMonth"
        android:layout_weight="0.6"
        android:textColor="#000000"
        android:background="?android:attr/selectableItemBackground"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_marginRight="25dp"
        android:layout_marginLeft="25dp"
        android:layout_width="wrap_content"
        android:layout_height="50dp">
    </Button>
    <ImageView
        android:id="@+id/nextMonth"
        android:src="@drawable/arrow_right"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:layout_width="50dp"
        android:layout_height="35dp">
    </ImageView>
</LinearLayout>

<GridView
    android:id="@+id/calendarheader"
    android:visibility="visible"
    android:numColumns="7"
    android:verticalSpacing="-5dp"
    android:horizontalSpacing="0dp"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
</GridView>

<GridView
    android:id="@+id/calendar"
    android:visibility="visible"
    android:numColumns="7"
    android:verticalSpacing="-5dp"
    android:horizontalSpacing="0dp"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
 </GridView>

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

<com.github.clans.fab.FloatingActionMenu
    android:id="@+id/fabMenu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:layout_marginLeft="10dp"
    fab:menu_fab_size="normal"
    fab:menu_showShadow="true"
    fab:menu_shadowColor="#66000000"
    fab:menu_shadowRadius="4dp"
    fab:menu_shadowXOffset="1dp"
    fab:menu_shadowYOffset="3dp"
    fab:menu_colorNormal="#DA4336"
    fab:menu_colorPressed="#E75043"
    fab:menu_colorRipple="#99FFFFFF"
    fab:menu_animationDelayPerItem="50"
    fab:menu_icon="@drawable/fab_add"
    fab:menu_buttonSpacing="0dp"
    fab:menu_labels_margin="0dp"
    fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
    fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
    fab:menu_labels_paddingTop="4dp"
    fab:menu_labels_paddingRight="8dp"
    fab:menu_labels_paddingBottom="4dp"
    fab:menu_labels_paddingLeft="8dp"
    fab:menu_labels_padding="8dp"
    fab:menu_labels_textColor="#FFFFFF"
    fab:menu_labels_textSize="14sp"
    fab:menu_labels_cornerRadius="3dp"
    fab:menu_labels_colorNormal="#333333"
    fab:menu_labels_colorPressed="#444444"
    fab:menu_labels_colorRipple="#66FFFFFF"
    fab:menu_labels_showShadow="true"
    fab:menu_labels_singleLine="false"
    fab:menu_labels_ellipsize="none"
    fab:menu_labels_maxLines="-1"
    fab:menu_labels_style="@style/YourCustomLabelsStyle"
    fab:menu_labels_position="left"
    fab:menu_openDirection="up"
    fab:menu_backgroundColor="@android:color/transparent"
    fab:menu_fab_label="your_label_here"
    fab:menu_fab_show_animation="@anim/my_show_animation"
    fab:menu_fab_hide_animation="@anim/my_hide_animation">

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/alarmForAllDates"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_mode_edit_white_24dp"
        app:fab_size="mini"
        app:fab_label="Erinnerungen komplett"/>

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/alarmForCurrentMonth"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_mode_edit_white_24dp"
        app:fab_size="mini"
        app:fab_label="Erinnerungen akt. Monat" />

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/deleteAllAlarms"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_do_not_disturb_on_white_24dp"
        app:fab_size="mini"
        app:fab_label="Erinnerungen löschen"/>

</com.github.clans.fab.FloatingActionMenu>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:background="@drawable/gelb_ellipse"
        android:layout_alignTop="@+id/fabMenu"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView2"
        android:background="@drawable/grau_ellipse"
        android:layout_below="@+id/imageView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView3"
        android:background="@drawable/gruen_ellipse"
        android:layout_below="@+id/imageView2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Gelber Sack u Biomüll"
        android:id="@+id/textView"
        android:layout_alignBottom="@+id/imageView"
        android:layout_toRightOf="@+id/imageView"
        android:layout_toEndOf="@+id/imageView"
        android:layout_marginBottom="15dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Restmüll u Altpapier"
        android:id="@+id/textView3"
        android:layout_above="@+id/imageView3"
        android:layout_toRightOf="@+id/imageView2"
        android:layout_toEndOf="@+id/imageView2"
        android:layout_marginBottom="15dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Aktueller Tag"
        android:id="@+id/textView2"
        android:layout_alignTop="@+id/imageView3"
        android:layout_toRightOf="@+id/imageView3"
        android:layout_toEndOf="@+id/imageView3"
        android:layout_marginTop="15dp"/>

</RelativeLayout>

</LinearLayout>

The GridView with the id calendar is always laying above those Buttons in the List. Does anyone has any suggestions how iam able to solve the problem?

Much Thanks in advance!

Upvotes: 0

Views: 1010

Answers (1)

varunkr
varunkr

Reputation: 5552

Try wrapping your second gridView and floating button inside frame layout like this 

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <GridView
        android:id="@+id/calendar"
        android:visibility="visible"
        android:numColumns="7"
        android:verticalSpacing="-5dp"
        android:horizontalSpacing="0dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
     </GridView>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/fabMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        fab:menu_fab_size="normal"
        fab:menu_showShadow="true"
        fab:menu_shadowColor="#66000000"
        fab:menu_shadowRadius="4dp"
        fab:menu_shadowXOffset="1dp"
        fab:menu_shadowYOffset="3dp"
        fab:menu_colorNormal="#DA4336"
        fab:menu_colorPressed="#E75043"
        fab:menu_colorRipple="#99FFFFFF"
        fab:menu_animationDelayPerItem="50"
        fab:menu_icon="@drawable/fab_add"
        fab:menu_buttonSpacing="0dp"
        fab:menu_labels_margin="0dp"
        fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
        fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
        fab:menu_labels_paddingTop="4dp"
        fab:menu_labels_paddingRight="8dp"
        fab:menu_labels_paddingBottom="4dp"
        fab:menu_labels_paddingLeft="8dp"
        fab:menu_labels_padding="8dp"
        fab:menu_labels_textColor="#FFFFFF"
        fab:menu_labels_textSize="14sp"
        fab:menu_labels_cornerRadius="3dp"
        fab:menu_labels_colorNormal="#333333"
        fab:menu_labels_colorPressed="#444444"
        fab:menu_labels_colorRipple="#66FFFFFF"
        fab:menu_labels_showShadow="true"
        fab:menu_labels_singleLine="false"
        fab:menu_labels_ellipsize="none"
        fab:menu_labels_maxLines="-1"
        fab:menu_labels_style="@style/YourCustomLabelsStyle"
        fab:menu_labels_position="left"
        fab:menu_openDirection="up"
        fab:menu_backgroundColor="@android:color/transparent"
        fab:menu_fab_label="your_label_here"
        fab:menu_fab_show_animation="@anim/my_show_animation"
        fab:menu_fab_hide_animation="@anim/my_hide_animation">

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/alarmForAllDates"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_mode_edit_white_24dp"
            app:fab_size="mini"
            app:fab_label="Erinnerungen komplett"/>

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/alarmForCurrentMonth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_mode_edit_white_24dp"
            app:fab_size="mini"
            app:fab_label="Erinnerungen akt. Monat" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/deleteAllAlarms"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_do_not_disturb_on_white_24dp"
            app:fab_size="mini"
            app:fab_label="Erinnerungen löschen"/>
    </FrameLayout>

Upvotes: 1

Related Questions