1

Hello I'm trying to develop a similar UI of Google pay, you can find the reference image below

This is a random image from Google search

(That notch kind of part near to Pay logo)

but I don't know how to achieve it, please someone give a reference or code to create this

I have a layout till that blue part with a chart inside it, now I need to develop below part like that, you can find my UI design below

This is my UI Design

Your help would be appreciated! thank you!

ADM
  • 20,406
  • 11
  • 52
  • 83
rakcode
  • 2,256
  • 4
  • 19
  • 44
  • 2
    Seems like a `9-patch` background. – ADM Dec 06 '18 at 10:14
  • 2
    use cardView and get benefit of corner radius. then overlap your cardView with other layout – Rahul Khurana Dec 06 '18 at 10:15
  • I'll try this once, Thank you – rakcode Dec 06 '18 at 10:15
  • 1
    That may be an image view. – Gokul Nath KP Dec 06 '18 at 10:37
  • 1
    The rectangle with the notch is a customview. The size of the notch equal to the size of the Gpay icon + margin . I am new to customviews and as of now I am not able to cut the notch. – Pemba Tamang Dec 06 '18 at 11:19
  • 1
    yeah, something like that, I created a card view with the radius and placed it inside a LinearLayout and below that created another LinearLayout and added color to it, then gave cardview a margin of half of the height of cardview, so cardview went half belo of the LinearLayout, now it looks like a notch!! thanks for @RahulKhurana for sugession – rakcode Dec 06 '18 at 11:34
  • share a screenshot @rakcode – Pemba Tamang Dec 06 '18 at 11:46
  • 1
    better yet post an answer – Pemba Tamang Dec 06 '18 at 11:49
  • yes i'll do it in some time, currently im out – rakcode Dec 06 '18 at 12:04
  • 1
    I did some digging, this is going to require a customview or some use of the [EdgeTreatment](https://developer.android.com/reference/com/google/android/material/shape/EdgeTreatment) class. The sloution will need some work, IMO if you really want an answer you might have to set up a bounty. – Pemba Tamang Dec 06 '18 at 12:45
  • 1
    You could use MotionLayout with some animation adding that view --> https://proandroiddev.com/motionlayout-shapeofview-26a7ab10142f CardView has only round radius on its corners, its not like the picture you showed from google. – Haroun Hajem Dec 06 '18 at 15:28
  • Please see https://stackoverflow.com/a/53859083/1631967 – aminography Dec 19 '18 at 21:02

1 Answers1

1

use cardView and get benefit of corner radius. then overlap your cardView with other layout

Rahul Khurana
  • 8,577
  • 7
  • 33
  • 60
  • The shape he is showing requires more then round corners. Where they overlap they need a negative round shape to even out the round corners. – Haroun Hajem Dec 07 '18 at 08:00