0

I want to develop below shown sort of layout for my app.

enter image description here

I basically want to know how to align this circular ImageView on a CardView as shown above.

Hammad Nasir
  • 2,889
  • 7
  • 52
  • 133

2 Answers2

0

Well it can be done through both image view and cardview put in relative layout. Use com.joooonho.SelectableRoundedImageView for Rounded image view. Use something like this:

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="2dp"
    android:paddingRight="2dp" >

    <android.support.v7.widget.CardView
            android:id="@+id/card_view"
            android:layout_gravity="center"
            android:layout_width="match_parent"
            android:layout_height="define it"
            android:marginTop="70dp"
            card_view:cardCornerRadius="4dp"/>
        <com.joooonho.SelectableRoundedImageView
            android:id="@+id/image"
            android:src="@drawable/photo1"
            android:scaleType="centerCrop"
            android:width="100dp"
            android:height="100dp"
            android:marginTop="20dp"
            android:layout_centerHorizontal="true"
            app:sriv_left_top_corner_radius="16dip"
            app:sriv_right_top_corner_radius="0dip"
            app:sriv_left_bottom_corner_radius="48dip"
            app:sriv_right_bottom_corner_radius="16dip"
            app:sriv_border_width="2dip"
            app:sriv_border_color="#008fea"
            app:sriv_oval="true" /> </RelativeLayout>
Lakshay Jain
  • 446
  • 1
  • 3
  • 17
  • I don't want to know how to draw a circleimageview. Please see the edited question – Hammad Nasir Sep 13 '16 at 04:58
  • Yes i given u answer of that too just replace com.joooonho:selectableroundedimageview with your circular image code and it will draw some thing like that See i have given height of circle image 100dp and margin top of 20 dp in relative layout and card view margin top is 70 dp so it will make circular image 50dp above cardview so give card view top padding of 60dp and do everythig u wanna do in card view – Lakshay Jain Sep 13 '16 at 05:07
  • Bro, the imageview is getting under cardview. How to bring it above the cardview? – Hammad Nasir Sep 13 '16 at 09:42
  • can you please tell me how to bring it above the cardview? – Hammad Nasir Sep 13 '16 at 12:44
  • Right cardview code 1st and than round image view this will bring it to top of card view – Lakshay Jain Sep 15 '16 at 04:48
0

There are two ways if you don',t want to use any third party library: 1st>You can use 

<android.support.v4.widget.CircleImageView
android:layout_width=""
android:layout_height="" />

Get inside CircleImageView class to find what has been done.

2nd> We can Use layerList you can find details here: ImageView in circular through xml

now put imageview algined centre in card's layout and shadow of layerlist should be lighten to give elevated view having said Imageview will use Elevation.

Community
  • 1
  • 1
DevKRos
  • 422
  • 2
  • 15
  • 'now put imageview algined centre in card's layout and shadow of layerlist should be lighten to give elevated view having said Imageview will use Elevation.' <-- Can you give some code related to these lines? – Hammad Nasir Sep 13 '16 at 09:34
  • Man use frame layout ..as simple as that !! just a proper alignment needed. don't have laptop can't type through keypads the whole code – DevKRos Sep 16 '16 at 10:38
  • it'd be much helpful if you could provide some code. – Hammad Nasir Sep 16 '16 at 12:24