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
Related
I have a layout like this:
My xml for that layout:
<?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:layout_height="match_parent"
android:fillViewport="true"
tools:context=".view.testviews.ProfileFragment"
android:background="#color/colorDarkGrey">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginStart="20dp"
android:layout_marginTop="100dp"
android:layout_marginEnd="20dp"
app:cardCornerRadius="16dp">
<FrameLayout
android:layout_gravity="center_horizontal"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="-50dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:src="#drawable/user_image_placeholder"
app:civ_border_color="#FF000000"
app:civ_border_width="2dp">
</de.hdodenhof.circleimageview.CircleImageView>
</FrameLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
I'm trying to center the circleImageView on the edge of the cardView. But the top part of it is invisible. I looked up for similar questions, but they couldn't meet my requirements. How can I achieve this?
So I tried #PPartisan's solution, and it made it like this:
The code for that :
<?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:layout_height="match_parent"
android:fillViewport="true"
tools:context=".view.testviews.ProfileFragment"
android:background="#color/colorDarkGrey">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:id="#+id/cardView2"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginStart="20dp"
android:layout_marginTop="150dp"
android:layout_marginEnd="20dp"
app:cardCornerRadius="16dp">
</androidx.cardview.widget.CardView>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="90dp"
android:src="#drawable/user_image_placeholder"
app:civ_border_color="#FF000000"
app:civ_border_width="2dp"
>
</de.hdodenhof.circleimageview.CircleImageView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Don't make your ImageView a child of the CardView, as it will be clipped by its parent. Also, when considering XML, the drawing order is specified from top to bottom, which means that Views specified later in the XML will be drawn over any views that are specified earlier. This mean you should draw your CardView first, and then your CircleImageView. Your layout structure should therefore be:
<CardView.../>
<...CircleImageView.../>
I would also recommend you use CoordinatorLayout as it will be simpler to use features like guidelines to correctly align your various views.
Edit: Thankyou Adinia for pointing out in the comments that it is also necessary to set an elevation on the image to ensure it draws on top.
android:layout_gravity="center"
So your layout becomes:
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="80dp"
app:cardElevation="10dp"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/titelbild280x280"
/>
</android.support.v7.widget.CardView>
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>
Let me explain i have a xml like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/img_circle" />
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_alignTop="#id/imgCircle"
android:layout_alignBottom="#id/imgCircle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imgCircle"
android:layout_toEndOf="#id/imgCircle"
android:background="#drawable/layout_view_round_corner"
android:orientation="vertical">
<TextView
android:id="#+id/mapCurrentLocation"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="TextView1"
android:textColor="#color/lblTextColor"
android:textSize="#dimen/lblTextLarge"
android:textStyle="normal" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="TextView2"
android:textColor="#color/lblHintColor2"
android:textSize="#dimen/lblTextMedium"
android:textStyle="normal" >
</TextView>
</LinearLayout>
</RelativeLayout>
And this gives me Image and TextViews next to it
But i want to accomplish something like this
that TextView Background is extended (padding maybe) at the half of the Rounded Image (behind it) so that it looks like its "part" of the image. Or I was thinking of Making a view with background white that goes behind TextView so that it looks that way. But wanted to ask here maybe if there is a better way to do this.
I hope i was clear in explaining this (That is why I added pictures).
I have tried to use demo with your xml file and you can check below code. I had to give static height and width of the ImageView to achieve result.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/imgCarCircle"
android:layout_alignTop="#id/imgCarCircle"
android:layout_marginLeft="30dp"
android:background="#color/colorAccent"
android:orientation="vertical"
android:paddingLeft="40dp">
<TextView
android:id="#+id/mapCurrentLocation"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="text1"
android:textStyle="normal"></TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="text2"
android:textStyle="normal"></TextView>
</LinearLayout>
<ImageView
android:id="#+id/imgCarCircle"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#mipmap/ic_launcher_round" />
</RelativeLayout>
try these:
first solution: change this
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_alignTop="#id/imgCircle"
android:layout_alignBottom="#id/imgCircle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imgCircle"
android:layout_toEndOf="#id/imgCircle"
android:background="#drawable/layout_view_round_corner"
android:orientation="vertical">
to this:
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_alignTop="#id/imgCircle"
android:layout_alignBottom="#id/imgCircle"
android:layout_width="match_parent"
android:layout_marginLeft="20dp" // or just figure your image width and set this programatically
android:layout_height="wrap_content"
android:background="#drawable/layout_view_round_corner"
android:orientation="vertical">
second solution: it to use AbsoluteLayout which is a bit hard to handle.
I'm developing an app and I need to fill the entire screen with a background, this view contains a scrollview. The problem is that the background is not covering the entire screen, it has a white stripe at the bottom, like the image below.
I have already tried many options of scaleType, like fitXY, centerInside, etc. none of them worked out.
My XML is below.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/signup_background" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="40dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/image_view_photo"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_gravity="center"
android:layout_marginBottom="25dp"
android:src="#drawable/camera_icon" />
<android.support.v7.widget.AppCompatEditText
android:id="#+id/edit_text_name"
style="#style/BaseEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/name_icon"
android:hint="#string/field_name"
android:inputType="textCapWords" />
<android.support.v7.widget.AppCompatEditText
android:id="#+id/edit_text_email"
style="#style/BaseEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/email_icon"
android:hint="#string/field_email"
android:inputType="textEmailAddress" />
<android.support.v7.widget.AppCompatEditText
android:id="#+id/edit_text_password"
style="#style/BaseEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/password_icon"
android:hint="#string/field_password"
android:inputType="textPassword" />
<android.support.v7.widget.AppCompatEditText
android:id="#+id/edit_text_confirm_password"
style="#style/BaseEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="35dp"
android:drawableLeft="#drawable/password_icon"
android:hint="#string/field_confirm_password"
android:inputType="textPassword" />
<com.jacksonueda.reachalert.Utils.LoadingButton
android:id="#+id/btn_signup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="#string/action_sign_up" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
Can anyone help me? Thanks.
I think that you have to give background to ConstraintLayout with width wrap_content. also set your height for both ScrollView and ConstraintLayout wrap_content.
In constraint layout you have to specify constraint. You don't have specified constraint in ImageView
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/signup_background" />
Replace it with
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/signup_background"
card_view:layout_constraintBottom_toBottomOf="parent"
card_view:layout_constraintLeft_toLeftOf="parent"
card_view:layout_constraintRight_toRightOf="parent"
card_view:layout_constraintTop_toTopOf="parent" />
Try to use RelativeLayout instead of ConstraintLayout in your xml. Relative Layout is best for overlapping two elements of xml.
I got the answer, what I needed to do was to put a RelativeLayout as parent of the ScrollView, like below.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/signup_background"
android:orientation="vertical"
android:padding="40dp">
...
</LinearLayout>
</ScrollView>
</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>