CODEWITHSUNDEEP
androidandroid-layoutandroid-activityandroid-fragmentsandroid-button
Nurzhan Nogerbek
Nurzhan Nogerbek

Reputation: 5236

How to set Floating Action Button correctly?

I have a problem. I used this this library to make sliding up panel. Click here. I added it and then I tried to make floating action button as in google map application.(As in the picture). enter image description here

But here below my result. How to set (make top of sliding panel trasprent may be) it correctly as in 1-st picture.

enter image description here

fragment_1.xml (Check out Sliding layout part)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <com.sothree.slidinguppanel.SlidingUpPanelLayout
        xmlns:sothree="http://schemas.android.com/apk/res-auto"
        android:id="@+id/sliding_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        sothree:umanoPanelHeight="56dp"
        sothree:umanoShadowHeight="4dp"
        sothree:umanoParalaxOffset="50dp"
        sothree:umanoDragView="@+id/dragView"
        xmlns:fab="http://schemas.android.com/apk/res-auto">

        <!-- MAIN CONTENT -->
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:weightSum="100">

        </LinearLayout>


        <!-- SLIDING LAYOUT -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="390dp"
            android:background="@android:color/transparent"
            android:orientation="vertical"
            android:clickable="true"
            android:focusable="false"
            sothree:umanoOverlay="true"
            android:layout_below="@+id/main_content">

            <!-—TOP OF PANEL -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="56dp"
                android:orientation="horizontal"
                android:background="#03A9F4"
                android:id="@+id/dragView">


                <TextView
                    android:id="@+id/name"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:textSize="14sp"
                    android:gravity="center_vertical"
                    android:paddingLeft="10dp"
                    android:textColor="@android:color/white"/>

                <Button
                    android:id="@+id/follow"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:textSize="14sp"
                    android:gravity="center_vertical|right"
                    android:paddingRight="10dp"
                    android:paddingLeft="10dp"/>

                <com.melnykov.fab.FloatingActionButton
                    android:id="@+id/fab"
                    sothree:fab_type="normal"
                    android:layout_marginBottom="25dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|right|center"
                    android:tint="@android:color/white"
                    android:src="@android:drawable/ic_dialog_map"
                    fab:fab_colorNormal="@color/fab_primary"
                    fab:fab_colorPressed="@color/fab_pressed"
                    fab:fab_colorRipple="@color/fab_ripple"/>

            </LinearLayout>
        </LinearLayout>
    </com.sothree.slidinguppanel.SlidingUpPanelLayout>
</RelativeLayout>

Thanks for any help!

Upvotes: 4

Views: 3951

Answers (2)

Tunji_D
Tunji_D

Reputation: 3687

An easier way, which is what I did, is just add a padding of 28 dp to the first item in the sliding layout and put the SlidingLayout in overlay mode.

<com.sothree.slidinguppanel.SlidingUpPanelLayout
android:id="@+id/sliding_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
xmlns:sothree="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoOverlay="true"
sothree:umanoPanelHeight="228dp"
sothree:umanoShadowHeight="0dp"
tools:context="com.myfab5.mobile.myfab5.ui.BusinessActivityFragment"
tools:ignore="RtlHardcoded">

<com.google.android.gms.maps.MapView
    android:id="@+id/map_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/transparent">

    <ImageView
        android:id="@+id/header_image"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_alignParentTop="true"
        android:layout_marginTop="28dp" />

    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/directions_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="@dimen/full_margin"
        android:elevation="@dimen/quarter_margin"
        android:src="@drawable/ic_directions_white_24dp"
        fab:fab_colorNormal="@color/accent"
        fab:fab_colorPressed="@color/accent_60"
        fab:fab_colorRipple="@color/accent_60" />

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="@dimen/triple_margin"
        android:layout_marginLeft="@dimen/full_margin"
        android:layout_marginTop="@dimen/quadruple_margin"
        android:text="@string/business_name"
        android:textColor="@color/white"
        android:textSize="24sp" />


</RelativeLayout>

Upvotes: 0

Ali Noureddine
Ali Noureddine

Reputation: 323

put the <com.melnykov.fab.FloatingActionButton/> outside the <com.sothree.slidinguppanel.SlidingUpPanelLayout/> and don't forget to locate it by using marginTop and marginLeft: 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    xmlns:fab="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <com.sothree.slidinguppanel.SlidingUpPanelLayout
        xmlns:sothree="http://schemas.android.com/apk/res-auto"
        android:id="@+id/sliding_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        sothree:umanoPanelHeight="56dp"
        sothree:umanoShadowHeight="4dp"
        sothree:umanoParalaxOffset="50dp"
        sothree:umanoDragView="@+id/dragView"
        xmlns:fab="http://schemas.android.com/apk/res-auto">

        <!-- MAIN CONTENT -->
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:weightSum="100">

        </LinearLayout>


        <!-- SLIDING LAYOUT -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="390dp"
            android:background="@android:color/transparent"
            android:orientation="vertical"
            android:clickable="true"
            android:focusable="false"
            sothree:umanoOverlay="true"
            android:layout_below="@+id/main_content">

            <!--—TOP OF PANEL -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="56dp"
                android:orientation="horizontal"
                android:background="#03A9F4"
                android:id="@+id/dragView">


                <TextView
                    android:id="@+id/name"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:textSize="14sp"
                    android:gravity="center_vertical"
                    android:paddingLeft="10dp"
                    android:textColor="@android:color/white"/>

                <Button
                    android:id="@+id/follow"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:textSize="14sp"
                    android:gravity="center_vertical|right"
                    android:paddingRight="10dp"
                    android:paddingLeft="10dp"/>



            </LinearLayout>
        </LinearLayout>
    </com.sothree.slidinguppanel.SlidingUpPanelLayout>
    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/fab"
        sothree:fab_type="normal"
        android:layout_marginBottom="25dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right|center"
        android:tint="@android:color/white"
        android:src="@android:drawable/ic_dialog_map"
        android:layout_marginLeft="300dp"
        android:layout_marginTop="200dp"
        fab:fab_colorNormal="@color/fab_primary"
        fab:fab_colorPressed="@color/fab_pressed"
        fab:fab_colorRipple="@color/fab_ripple"/>
</RelativeLayout>

Upvotes: 1

Related Questions