Create map view in android

Question

I want to create this layout

this is the map view (gray view) and the image (blue view) for this I use this code

<FrameLayout 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="@color/abc_search_url_text_normal" android:orientation="vertical"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="100dp" android:layout_alignParentBottom="true" android:layout_gravity="bottom" android:layout_marginBottom="3dp" android:paddingTop="5dp" app:cardBackgroundColor="@color/abc_input_method_navigation_guard"> </android.support.v7.widget.CardView> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="bottom" android:layout_marginBottom="30dp" android:layout_marginRight="10dp" android:scaleType="fitXY" android:src="@drawable/abc_ratingbar_full_material" /> </FrameLayout> 

but as a result of my viewing the image going back to the card, I try to reletivelayout instead of framelayout, but the same result.

Answer 1

Try:

• Use RelativeLayout

• Align ImageView with parent right / end and add right / end field

• Align the FAB at the top of the map screen and add a negative margin

 <RelativeLayout ...> <CardView android:id="@+id/cardView" android:layout_width="match_parent" android:layout_height="120dp" /> <ImageView android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignTop="@id/cardView" android:layout_marginTop="-32dp" android:layout_marginRight="20dp" /> </RelativeLayout> 

Answer 2

CardView has a default elevation in API 21+, you can control the height less than ImageView

  <android.support.v7.widget.CardView xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" app:cardElevation="1dp"/> <ImageView android:id="@+id/image_view_user" android:layout_width="48dp" android:layout_height="48dp" android:elevation="2dp"/> 

in Pre 21 you can use

 overlayView.bringToFront(); root.requestLayout(); root.invalidate(); 

This will not work in 21+ if you have different heights

Answer 3

Just put CardView in a different view, like in FrameLayout. As below:

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_marginStart="10sp" android:layout_marginEnd="10sp" > <FrameLayout android:layout_marginTop="15sp" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="100sp" app:cardCornerRadius="5sp" app:cardBackgroundColor="@color/colorPrimary"> <!--other view items --> </android.support.v7.widget.CardView> </FrameLayout> <de.hdodenhof.circleimageview.CircleImageView android:layout_width="90sp" android:layout_height="90sp" app:civ_border_width="2dp" android:layout_marginStart="10sp" app:civ_border_color="@color/colorPrimaryDark" android:id="@+id/profileImg" android:background="@drawable/ic_if_profle_1055000" xmlns:app="http://schemas.android.com/apk/res-auto"/> 

Screenshot: