How would I go about displaying multiple images the way Tinder does it: it should display the next image when I click on the right side of the image and display the previous image when I click on the left side of the image.
It should also display a little arrow to the right or left only when clicked and show somehow which picture is being displayed (with little bars like tinder or dots or something).
Is there a library for that?
EDIT:
To clarify: I already implemented the Tinder swipe-cards with the help of the Diolor/Swipecards library. What I'm suprisingly a little stuck with is implementing the image gallery INSIDE the Tinder swipecards. Only the part seen in the picture above.
There are a lot of libraries to it for you
https://github.com/janishar/PlaceHolderView
https://github.com/yuyakaido/CardStackView
https://github.com/Ivaskuu/tinder_cards
https://github.com/Yalantis/Koloda-Android
My solution was adding two pictures of arrows, putting two layouts above them, then adding onClickListeners for the Layouts, which select the next/previous picture in the adapter to be displayed in the ImageView.
The layout .xml file:
<?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"
android:layout_gravity="center"
android:clipToPadding="false"
android:outlineProvider="bounds"
android:paddingLeft="10sp"
android:paddingTop="10sp"
android:paddingRight="10sp"
android:paddingBottom="100sp">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:elevation="2dp"
app:cardCornerRadius="4dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/imageViewMainBackground"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#mipmap/ic_user_default" />
<ImageView
android:id="#+id/imageNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|end"
android:scaleType="centerCrop"
android:src="#drawable/outline_keyboard_arrow_right_black_48" />
<ImageView
android:id="#+id/imagePrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:scaleType="centerCrop"
android:src="#drawable/outline_keyboard_arrow_left_black_48" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<LinearLayout
android:id="#+id/previousLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".50"
android:orientation="horizontal" />
<LinearLayout
android:id="#+id/nextLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:layout_weight=".50"
android:orientation="horizontal" />
</LinearLayout>
<TextView
android:id="#+id/nameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:padding="20sp"
android:shadowColor="#color/colorBlack"
android:shadowRadius="20"
android:textColor="#color/colorWhite"
android:textSize="30sp"
tools:text="hello" />
<ImageView
android:id="#+id/infoImageViewItemCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:scaleType="centerCrop"
android:padding="20sp"
android:shadowColor="#color/colorBlack"
android:shadowRadius="20"
android:src="#drawable/outline_info_white_48" />
<LinearLayout
android:id="#+id/bottomLayout"
android:layout_width="match_parent"
android:layout_height="110dp"
android:layout_gravity="bottom"
android:orientation="horizontal" />
</FrameLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Related
I have this layout
<RelativeLayout
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">
<ImageView
android:id="#+id/imgDisplay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop" />
<LinearLayout
android:id="#+id/MainLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:background="#drawable/bg"
android:keepScreenOn="true"
tools:context=".MainActivity">
<TextView
style="#style/MyTextStyle"
android:id="#+id/MessageTextView"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_centerHorizontal="true"
android:visibility="gone"/>
<ImageButton
android:src="#drawable/ic_angry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/AngryImageButton"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:adjustViewBounds="true"
android:layout_gravity="center_horizontal"
android:background="#null"
android:scaleType="fitCenter" />
<LinearLayout
android:id="#+id/BottomLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:layout_below="#+id/FacesHolderFrameLayout"
android:orientation="horizontal"
android:foregroundGravity="bottom">
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageButton
android:layout_weight="1"
android:src="#drawable/ic_insert_chart_white_48dp"
android:layout_width="wrap_content"
android:layout_height="54dp"
android:id="#+id/StatisticsImageButton"
android:background="#null"
android:layout_marginTop="20dp"
android:scaleType="fitCenter" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Which in general is an imageview that takes the whole screen and acts as a background image, the above it i have a linearlayout (MainLinearLayout) that hold vertically a textview, an imagebutton (AngryImageButton) and another linearlayout (BottomLinearLayout) that is just display a small image (like the logo) horizontally centered.
I want to be able to change programatically the size of the AngryImageButton and the BottomLinearLayout to be displayed in the bottom of the screen and to be always visible. I mean to be on top of the other views.
Right now the BottomLinearLayout appears in the center and below the MainLinearLayout and if i make the AngryImageButton very large, it pushes below the BottomLinearLayout until its not visible in the screen at all, i don't want that. I want it to be at the bottom, and always visible.
How i can accomplish that? Also i want the layout to work in both orientations
To bring View to front, you can use
myView.bringToFront()
or You can make use of ViewCompat and set its translation Z like below.
ViewCompat.setTranslationZ(view, 1)
here's the doc for bringToFront() bringToFront()
I am loading images from firebase and loading them into card tiles in a staggered recycler view. I want the width of the photos to be consistent and match parent, and the height to change depending on the height of the photo.
I am not sure what am I doing wrong but the images don't show. I can see a thin line where the photo should be, kind of seems like it is the photo but it had like a 1px height, just a horizontal line.
This is my xml
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:id="#+id/staggered_feed_image_card"
app:cardCornerRadius="16dp"
app:cardElevation="0dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/no_dread"
android:id="#+id/staggered_feed_image"
android:scaleType="centerCrop"/>
</androidx.cardview.widget.CardView>
I also tried to wrap the imageView in another layout such as follows:
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:id="#+id/staggered_feed_image_card"
app:cardCornerRadius="16dp"
app:cardElevation="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/no_dread"
android:id="#+id/staggered_feed_image"
android:scaleType="centerCrop"/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
I've tried both relative-layout or vertical linear-layout and tried both with the height being either wrap content or match parent, and neither work.
Try to use below code and let me know you can see your image or not.
<?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:id="#+id/viewBinary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:id="#+id/staggered_feed_image_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:cardCornerRadius="16dp"
app:cardElevation="0dp">
<ImageView
android:id="#+id/staggered_feed_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:srcCompat="#drawable/splashlogo" />
</androidx.cardview.widget.CardView>
</LinearLayout>
If this not help then check below things are perfect in your project or not:
1) implementation 'androidx.cardview:cardview:1.0.0' make sure you added dependency.
2) Try to change drawable and check your layout.
If still you are facing issue then let me know.
try changing
app:srcCompat="#drawable/no_dread"
to
android:src="#drawable/no_dread"
in your Imageview, it works to me
use a container view like RelativeLayout or LinearLayout as the first child in the card view. Then you can place the content in that layout anyway you want.
Example
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/ap"
Then continue with the above scenario
Update: as cardview is confusing so that is the scheme I mainly use
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp">
<LinearLayout
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:scaleType="centerCrop"
android:src="#drawable/balon" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="#string/card_title"
android:textColor="#000"
android:textSize="18sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/card_content"
android:textColor="#555" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/action_share"
android:theme="#style/PrimaryFlatButton" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/action_explore"
android:theme="#style/PrimaryFlatButton" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
I hope this helps
I think you'll want to set the scaleType to fitCenter and adjustViewBounds to true:
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/no_dread"
android:id="#+id/staggered_feed_image"
android:scaleType="fitCenter"
android:adjustViewBounds="true"/>
Reference: https://proandroiddev.com/a-guide-for-android-imageview-scaletype-and-adjustviewbounds-64a1e4a35503
I am trying to create a chat application. The chat layout currently looks like this
The corresponding layout file is
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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:fillViewport="true"
android:layout_height="match_parent">
<RelativeLayout
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.example.nirmal.chatadapter.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:src="#drawable/iconuser"
app:civ_border_width="2dp"
app:civ_border_color="#color/White"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="#dimen/marginLeftForToolbar"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/White"
android:text="UserName Here"
android:layout_marginTop="#dimen/marginTopBottomForBubble"
android:id="#+id/user_name"
android:textSize="#dimen/textMedium"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/White"
android:text="User details Here"
android:layout_marginTop="#dimen/marginTopBottomForBubble"
android:id="#+id/user_details"
android:textSize="#dimen/textSmall"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar"
android:layout_marginTop="#dimen/recyclerViewMargin"
android:isScrollContainer="true"
android:id="#+id/chatRecycler"
android:layout_above="#+id/chatBoxAndSend">
</android.support.v7.widget.RecyclerView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:layout_marginBottom="5dp"
android:id="#+id/chatBoxAndSend">
<EditText
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:minWidth="50dp"
android:maxWidth="50dp"
android:id="#+id/chatBox"
android:paddingStart="#dimen/cardViewPadding"
android:background="#drawable/rounded_chat_box"
android:layout_margin="#dimen/marginForChatBox"
/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:background="#drawable/oval_button"
android:minWidth="50dp"
android:maxWidth="50dp"
android:text="Send"
android:imeOptions="flagNoExtractUi"
android:id="#+id/chatSendButton"
android:layout_margin="#dimen/marginForChatBox"
android:textColor="#color/Black"
/>
<!--<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:id="#+id/send_button"
android:src="#drawable/send"
android:background="#drawable/oval_button"
android:layout_marginBottom="#dimen/marginForChatBox"
android:layout_marginTop="#dimen/marginForChatBox"
android:layout_marginEnd="#dimen/marginForChatBox"
/>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:id="#+id/send_button"
android:src="#drawable/send"
app:civ_border_width="2dip"
android:layout_marginEnd="#dimen/marginForChatBox"
app:civ_border_color="#color/greenChatColor"/>-->
</LinearLayout>
</RelativeLayout>
</ScrollView>
When I open my soft keyboard the layout looks likes this
I have added this in my manifest file
android:windowSoftInputMode="adjustPan|stateHidden"
The output is not what I expected it to be. I want the recyclerview to dynamically resize in the center of the screen and the Toolbar and the edittext to stay fully visible.
As you can see the toolbar has been pushed up and is not visible even when scrolled. The edittext is hidden partially by the suggestions given by the keyboard. Some of the posts I saw asked me to add a scrollview which I did and still the same result. How can I solve this problem?
If you want to resize RecyclerView on SoftInput open or close then you can use below single line code
((LinearLayoutManager)myRecyclerView.getLayoutManager()).setStackFromEnd(true);
For more read this post: https://trinitytuts.com/tips/resize-recyclerview-on-android-softinput-keyboard-appear/
Hope this code helps you
The flag adjustPan is wrong. Use the adjustResize instead:
android:windowSoftInputMode="adjustResize|stateHidden"
What adjustPan does is equivalent to enlarging a picture more than the screen and then panning - i.e. moving the picture so you see different parts of it. (like a map in google map for instance).
So I want to use 2 images. One should be on top of the other but smaller, so that the border of the image that's behind is only shown.
Take a look at these 2 photos.
Image that's behind (The border Image)
[IMG]http://i66.tinypic.com/25zgguh.jpg[/IMG]
Image that should be inside the border
[IMG]http://i67.tinypic.com/10mpgt4.jpg[/IMG]
XML CODE
<com.inthessaloniki.cityguide.view.SelectorRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_poi_list_item"
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_size"
android:minHeight="#dimen/fragment_poi_list_recycler_item_size"
android:listSelector="#drawable/selector_clickable_item_bg_inverse">
<ImageView
android:id="#+id/fragment_poi_list_item_image"
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_size"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_panel_height"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingLeft="#dimen/global_spacing_xs"
android:paddingRight="#dimen/global_spacing_xxs"
android:background="#color/fragment_poi_list_recycler_item_panel_bg">
<TextView
android:id="#+id/fragment_poi_list_item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="2"
android:ellipsize="end" />
<TextView
android:id="#+id/fragment_poi_list_item_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_grid_distance"
android:drawablePadding="#dimen/fragment_poi_list_recycler_item_icon_padding"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="1"
android:ellipsize="end" />
</LinearLayout>
I was thinking if I could add an android:background="First Image" and make my Image view center but leaving some space on the edges for the background to be shown.
Would have posted 2 more images showing how the app is and how it should look, but the site won't let me post more than 2 links cause my reputation is lower than 10 -_-
Thanks in advance for the help!!!
Do it like this:
<com.inthessaloniki.cityguide.view.SelectorRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_poi_list_item"
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_size"
android:minHeight="#dimen/fragment_poi_list_recycler_item_size"
android:listSelector="#drawable/selector_clickable_item_bg_inverse">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_image"
tools:context=".MainActivity">
<ImageView
android:id="#+id/view"
android:layout_margin="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/foreground_image" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_panel_height"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingLeft="#dimen/global_spacing_xs"
android:paddingRight="#dimen/global_spacing_xxs"
android:background="#color/fragment_poi_list_recycler_item_panel_bg">
<TextView
android:id="#+id/fragment_poi_list_item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="2"
android:ellipsize="end" />
<TextView
android:id="#+id/fragment_poi_list_item_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_grid_distance"
android:drawablePadding="#dimen/fragment_poi_list_recycler_item_icon_padding"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="1"
android:ellipsize="end" />
</LinearLayout>
hope I got it clear, you could simply use two layout and adjust margin for the small one.
put your images as RelativeLayout background or use ImageView in layouts
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="25dp"></RelativeLayout>
</RelativeLayout>
I would like to make an ImageView overlay another ImageView like this; only half of the circle green is overlaying the image:
I have tried using RelativeLayout and put both ImageView inside. Then I overlay the circle over the image by using android:layout_alignBottom. It did overlay the but I have no idea how to set the offset so that only half of the circle is overlaying the base image.
EDIT:
Sorry, here is my layout xml code
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32sp" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/image_view_product"
android:layout_centerHorizontal="true"
android:background="#drawable/image_view_circle"
android:src="#drawable/ic_circle" />
</RelativeLayout>
I get lots of upvote for this answer.So i try to improve that answer. May be this is the better way to do that compare to other two, because this solution doesn't required to fix the layout or divide screen in equal part so may be this is better to do that.
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/viewA"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:orientation="horizontal">
<TextView
android:id="#+id/subject"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Thi"
android:textColor="#android:color/white"
android:textSize="17sp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/viewB"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="horizontal">
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Thi"
android:textColor="#android:color/black"
android:textSize="17sp"
/>
</LinearLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/plus"
app:layout_anchor="#+id/viewA"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
Alternate way Try this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
// this is your first layout to put the big image
// use src or backgroud image as per requirement
<LinearLayout
android:background="#color/red_error"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
// this is your bottom layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
// This is the imageview which overlay the first LinearLayout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/success"
android:adjustViewBounds="true"
android:layout_gravity="center"/>
</FrameLayout>
its look like this
found one more solution for that (Edit)
if your big image size is fixed height you can try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/layoutTop"
android:background="#color/red_error"
android:layout_width="match_parent"
android:layout_height="200dp" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/layoutBottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentBottom="true"
android:layout_below="#id/layoutTop" >
</RelativeLayout>
<ImageView
android:id="#+id/overlapImage"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_above="#id/layoutBottom"
android:layout_centerHorizontal="true"
android:layout_marginBottom="-20dp"
android:adjustViewBounds="true"
android:src="#drawable/testimage" />
</RelativeLayout>
Refernce :- Android: Placing ImageView on overlap between layouts
Hope this will help.Good Luck
Try out this way:
Just change layout_width and layout_height according to your need.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<View
android:id="#+id/viewOne"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#126989" />
<View
android:id="#+id/viewTwo"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_below="#+id/viewOne"
android:background="#547866" />
<View
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignBottom="#+id/viewTwo"
android:layout_centerHorizontal="true"
android:background="#ff7800"
android:layout_marginBottom="35dp" />
</RelativeLayout>
It will look like this:
I would recommend Constraintlayout as it gives excellent control over the positioning of individual view items. Sample based on your example below
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/parentLayout">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product"/>
<View
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintTop_toBottomOf="#+id/image_view_product"/>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignBottom="#id/image_view_product"
android:layout_centerHorizontal="true"
android:background="#drawable/circle"
android:src="#drawable/ic_add_circle_green_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
Use layout_marginTop = -20dp ( Half of your image size ). It will go up.
android:layout_marginTop="-20dp"
put both the image in Relative layout
first define the image you want to put behind the green circle
than define the green circle as
android:layout_alignBottom="#+id/Image1"
Than adjust the position by giving margin to the green circle image.
I recommend you to use a framelayout with these two images.
with the refresh imageview at the bottom and the table fan at the top.
Note : As the framelayout behaves like a stack, the item at the bottom will appear at the top.
And do the set the gravity of the refresh icon to be bottom|center to make it look this way.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:src="#drawable/ic_fan"
android:scaleType="centerCrop"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<ImageView
android:src="#drawable/ic_refresh"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center|bottom"/>
</FrameLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32sp" >
<ImageView
android:id="#+id/ivBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="-20dp"
android:layout_below="#+id/ivBackground"
android:layout_centerHorizontal="true"
android:background="#drawable/image_view_circle"
android:src="#drawable/ic_circle" />
I think this should help you i have edited your code and made changes as below
- I change circle imageview height to 40dp and then i give margin top -20 dp so that image will overlay half as you need on background image.
I did not run this code so if you face any issues just let me know i hope this works well for you..
Screenshot:
activity_main.xml:
<RelativeLayout
android:id="#+id/rl_image"
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="null"
android:scaleType="fitXY"
android:src="#drawable/album9" />
<ImageView
android:id="#+id/imageView_round"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/user_profile" />
</RelativeLayout>