Overlay part of an imageview over toolbar

Question

I am trying to overlay part of an image view over a toolbar as shown in the below image.

I have tried using a custom floating action button (using a rectangular canvas) described by Sanjeet Ajnabee here . But, I want only a part of the image to be on the toolbar unlike a floating action button.

Using a dialog wouldn't work as well. I want the image to be part of the layout.

Any idea to start with will help.

Answer 1

That's pretty simple, you just use a NoActionBar style and then a Layout like the pseudo-XML below:

<FrameLayout>
   <Toolbar height="60dp" paddingBottom="12dp"> // here is the Toolbar
   <ImageView marginTop="48dp" /> // marging top = 60-12=48
   <FrameLayout marginTop="60dp">
        // add here the rest of your layout
   </FrameLayout>
</FrameLayout>