JackD JackD - 20 days ago 8
Android Question

Android FloatActionButton: how to make it stick out of a View?

I have a FloatActionButton that have to stick out a bit from the view that contains it, but it becomes cutted.

How can I obtain it to get out a bit from the container?

Example Image

enter image description here

This is the complete code of the Layout, including the Coordinator Layout and the FAB.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_show_image"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/add_text_to_media_image"/>

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/black_overlay"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
/>

<android.support.design.widget.CoordinatorLayout
android:id="@+id/add_text_to_media_detail"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/black_overlay"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:id="@+id/add_text_to_media_text_container">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Aggiungi una descrizione..."
android:textColorHint="@color/material_grey_300"
android:textColor="@color/white"
android:id="@+id/add_text_to_media_text"/>
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/add_text_to_media_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="normal"
android:src="@drawable/ic_send_white_24dp"
app:layout_anchor="@+id/add_text_to_media_text_container"
app:layout_anchorGravity="right"
android:clickable="true"
android:layout_marginTop="-27dp"
android:layout_marginRight="16dp"
/>
</android.support.design.widget.CoordinatorLayout>


</FrameLayout>

Answer

Make your view taller with a transparent background and change the background of your edittext to the darker color if you want