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

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
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>


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

Related

Button in the bottom of LinearLayout

I am making an app in which I have a RecyclerView. I have also added a button, but it isn't shown. See the left photo. What I now want is to make the RecyclerView so that may button is visible, like in the photo on the right. How can I achieve this?
Under the photos you can see my xml code. I'd like the RecyclerView to be relative/dynamic.
<?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:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.test.test.MainActivity"
android:orientation="vertical"
android:background="#color/colorAccent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<androidx.cardview.widget.CardView
android:id="#+id/cardViewMiddle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
app:cardCornerRadius="15dp">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
<Button
android:id="#+id/btnCheckout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/round_corner"
android:backgroundTint="#color/colorPrimaryDark"
android:elevation="16dp"
android:text="START"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>

The problem is that you set the CardView height to match_parent so it takes up the entire screen. It's best to use ConstraintLayout for these kinds of layouts, but you can also fix it with minimal effort 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:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.test.test.MainActivity"
android:orientation="vertical"
android:background="#color/colorAccent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<androidx.cardview.widget.CardView
android:id="#+id/cardViewMiddle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_weight="1"
app:cardCornerRadius="15dp">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
<Button
android:id="#+id/btnCheckout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/round_corner"
android:backgroundTint="#color/colorPrimaryDark"
android:elevation="16dp"
android:text="START"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>
Note I only changed CardView's layout_height to 0dp and then added the following:
android:layout_weight="1"
Which will tell the layout to stretch as much as it can (while not covering other elements below it).

Add image on top of bottomsheet in Android

How can add image on top of the bottom sheet in Android? See this image
I tried this but it doesn't work. I want the transparency as shown in the image attached.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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="match_parent"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/myBottomLL"
app:layout_anchorGravity="top|center" />
<LinearLayout
android:id="#+id/myBottomLL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/background" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Follow these links.
How to make the background transparent:
https://medium.com/#manuaravindpta/transparent-background-for-bottomsheetdialog-396a1a646f1b
How to make the bottom sheet full screen:
https://medium.com/better-programming/bottom-sheet-android-340703e114d2
For the circular image view:
https://github.com/hdodenhof/CircleImageView
Just add a transparent View to the top like this.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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="match_parent"
android:background="#android:color/transparent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/topImage"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_gravity="center_horizontal|top"
android:elevation="6dp"
android:src="#drawable/ic_account_circle"
app:civ_border_color="#color/colorAccent"
app:civ_border_width="2dp"
app:civ_circle_background_color="#android:color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/transparentRegion"
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="horizontal" />
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/white"
app:elevation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="end"
android:orientation="horizontal">
<ImageButton
android:id="#+id/closeBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="16dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="#drawable/ic_close"
android:tint="#android:color/black" />
</LinearLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/bottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:fillViewport="true">
<LinearLayout
android:id="#+id/other_content_goes_here"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="15dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Other Content"
android:textSize="24sp" />
<View
android:id="#+id/extraSpace"
android:layout_width="match_parent"
android:layout_height="800dp" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Set the theme of the BottomSheetDialogFragment.
You can also add a BottomSheetCallback and decrease the height of the transparent space at the top as you scroll up

Image showing behind 3rd party View in coordinator layout

I have an image in a coordinator layout and i have a diagonal layout i got from here - https://github.com/florent37/DiagonalLayout.
In the coordinator layout i am setting the Diagonal Layout as the anchor for the image cos i want my layout to look like the example in the url above.
here is my layout file and the result i am having
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.dishesteam.dishes.activities.ProfileActivity">
<com.github.florent37.diagonallayout.DiagonalLayout
android:id="#+id/diagonal_layout"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="250dp"
android:elevation="5dp"
app:diagonal_angle="12"
app:diagonal_direction="left"
app:diagonal_position="bottom">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/profile_background">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:textColor="#color/textColorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/Theme.AppCompat.Light"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Joshua Majebi"
android:layout_gravity="top"
android:layout_marginTop="40dp"
android:layout_marginLeft="25dp"
android:textColor="#color/textColorPrimary"/>
</LinearLayout>
</com.github.florent37.diagonallayout.DiagonalLayout>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="16dp"
app:srcCompat="#drawable/ic_account_circle_black_24dp"
app:layout_anchor="#id/diagonal_layout"
app:layout_anchorGravity="left|bottom"
android:layout_marginStart="16dp" />
</android.support.design.widget.CoordinatorLayout>
My Image is falling behind the DiagonalLayout not sure what i am doing wrong here.

Elevation of DiagonalLayout is more higher than ImageView. So, you have to set higher elevation to ImageView to show it over DiagonalLayout.
Set ImageView elevation as android:elevation="6dp"
Try this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.florent37.diagonallayout.DiagonalLayout
android:id="#+id/diagonal_layout"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="250dp"
android:elevation="5dp"
app:diagonal_angle="12"
app:diagonal_direction="left"
app:diagonal_position="bottom">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/profile_background">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:textColor="#color/textColorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/Theme.AppCompat.Light"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Joshua Majebi"
android:layout_gravity="top"
android:layout_marginTop="40dp"
android:layout_marginLeft="25dp"
android:textColor="#color/textColorPrimary"/>
</LinearLayout>
</com.github.florent37.diagonallayout.DiagonalLayout>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="16dp"
android:elevation="6dp"
android:src="#mipmap/ic_launcher"
app:layout_anchor="#id/diagonal_layout"
app:layout_anchorGravity="left|bottom"
android:layout_marginStart="16dp" />
</android.support.design.widget.CoordinatorLayout>
OUTPUT:
Hope this will help~

android layout with fragment breaks when toolbar is there

Couldn't find a more appropriate title but my problem is the following. I have a LinearLayout that contains another LinearLayout and a fragment. I also want to add the toolbar but when I do so, then I only see the toolbar and the other screen is just white.
Here is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context="xeniasis.mymarket.MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:weightSum="4">
<LinearLayout
android:id="#+id/categories_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingRight="20dp">
<ExpandableListView
android:id="#+id/categories_listView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<fragment
android:id="#+id/mainPane"
android:name="xeniasis.mymarket.Products"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
tools:layout="#layout/activity_main" />
</LinearLayout>
</LinearLayout>
Toolbar:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:padding="5dp"
android:theme="#style/ToolbarTheme" />
And the fragment layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="xeniasis.mymarket.MainActivity">
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipeRefreshContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="#dimen/activity_vertical_margin">
<GridView
android:id="#+id/productsGridview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:numColumns="3"></GridView>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_margin="8dp"
android:clickable="true"
android:elevation="5dp"
android:src="#android:drawable/ic_menu_search" />
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
This only happens when I have a fragment, cause I previously had the same xml with a static layout where the fragment is now.

The problem is that you used a LinearLayout with
android:orientation="horizontal"
and since the toolbar has match_parent as width it occupies all the screen.
Try to use
android:orientation="vertical"
in the root layout

Android ScrollView below Toolbar fails to show all content

I have made a base-activity with a toolbar and add my layouts to this. But when I add a scrollview in the main content it doesn't show the bottom part when scrolling down. The missing part seems to be the same height as the toolbar.
My activitybase.xml:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/ToolBarStyle"
android:background="?attr/colorPrimary" />
<FrameLayout
android:id="#+id/root_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
My fragmentinfo.xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin">
<TextView
android:id="#+id/info_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_margin"
android:text="hei"
style="#style/TextLarge" />
<TextView
android:id="#+id/info_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/small_margin"
android:text="-SOME LONG TEXT-"
style="#style/TextNormal" />
<TextView
android:id="#+id/info_header2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_margin"
android:text="Test"
style="#style/TextLarge" />
</LinearLayout>
</ScrollView>
Screenshot below. This is scrolled all the way down. "Test" should be showing with 16 dp margin below it...

In FrameLayout
<FrameLayout
...
android:layout_marginBottom="56dp"
...
/>
Here 56dp is the Action Bar size.

Add android:layout_marginBottom to the ScrollView, using the action bar height dimen.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/abc_action_bar_default_height_material"
android:fillViewport="true">

Categories

Resources