How to center an ImageView on the edge of a cardView? - android

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>

Related

Inside Framelayout i have 1 cardview and an image view. I want the image view over the card view. What i want to do

I was trying to make an image view over the card view. So I used Framelayout. Inside that i added 1 cardview after that I added an image view. If I use a LinearLayout instead of cardview the image view views over the linearlayout. But if I use card view the image view is not getting over the card view. Please help me ...
I have shown what I have
put your card view inside AnyLayout like LinerarLayout
<FrameLayout>
<LinearLayout>
<CardView/>
</LinearLayout>
<ImageView/>
</FrameLayout>
Try with something like below:
<?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"
tools:context=".CustomGallery"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Dummy Text"
android:gravity="center"/>
<!-- Add more Views -->
<FrameLayout
android:layout_width="150dp"
android:layout_height="150dp"
android:clickable="true"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:layout_gravity="center_horizontal">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="10dp"
app:cardElevation="0dp">
<!--<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/add_menu_item_logo"
android:scaleType="fitXY"
android:src="#drawable/ic_baseline_brightness_low_24"
/>-->
</androidx.cardview.widget.CardView>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/add_menu_logo_placeholder">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="#drawable/ic_baseline_brightness_low_24"/>
</FrameLayout>
</FrameLayout>
</LinearLayout>
Please use card view like this
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="0dp"
android:elevation="0dp"
android:layout_centerInParent="true" />
Note the important attribs are
app:cardElevation="0dp"
and android:elevation="0dp"
It will set the elevation to 0.

Image doesn't appear when placing it in a card view

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

Background not filling entire screen in scrollview android

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>

How to center RecyclerView items horizontally with vertical GridLayoutManager

I have a vertical RecyclerView using a GridLayoutManager. I want each column to be centered, but the columns begin all the way on the left. In the following picture you can see what I'm talking about. I used the ugly color scheme to illustrate the columns and background. The green is the background for each item in the RecyclerView, the red is the background of the RecyclerView itself:
http://imgur.com/a/J3HtF
I'm setting it up with:
mRecyclerView.setLayoutManager(new GridLayoutManager(this, 2));
Here's the column_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="120dp"
android:layout_height="180dp"
android:orientation="vertical"
android:padding="4dp">
<ImageView
android:id="#+id/movie_column_photo"
android:layout_width="80dp"
android:layout_height="120dp"/>
<TextView
android:id="#+id/movie_column_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Here's the recyclerview xml:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="#+id/company_details_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
Try letting the column item fill the width of the column while centering everything inside:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="180dp"
android:orientation="vertical"
android:padding="4dp">
<ImageView
android:id="#+id/movie_column_photo"
android:layout_width="80dp"
android:layout_height="120dp"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="#+id/movie_column_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"/>
</LinearLayout>
To restate #kris larson's answer;
If you are using ConstraintLayout, adding android:layout_gravity="center" or android:layout_gravity="center_horizontal" to the parent layout in item's XML would be enough (the first parent in hierarchy).
In your case, the codes would be something similar to this:
<android.support.constraint.ConstraintLayout
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="180dp"
android:orientation="vertical"
android:padding="4dp"
android:layout_gravity="center">
<ImageView
android:id="#+id/movie_column_photo"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="80dp"
android:layout_height="120dp"/>
<TextView
android:id="#+id/movie_column_title"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
Simply set the width of the root layout for your column_item.xml to match_parent will center RecyclerView items horizontally.
Wrap your recyclerview inside the constraintlayout, something like this:
<androidx.constraintlayout.widget.ConstraintLayout
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" >
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/book_list"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:spanCount="2" />
Hope it helps!!

CardView goes on top of FrameLayout, but declared first

I have simple FrameLayout with support CardView as first item, and TextView as second, so TextView must be on top of inflated view. This works on pre-Lolipop but on 21+ card takes toppest place in layout, why that's so and how to fix this? Same thing with RelativeLayout.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>
In case someone gets here and the solution for setting elevation doesn't work for them (like in my case, where I needed to draw an image above the CardView and having a shadow on it was not acceptable), you can solve the issue by wrapping the CardView inside another FrameLayout. In the example provided, it would look something like this:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content">
<!-- This is the added FrameLayout -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>
I might be joining the discussion a bit late, but if you can afford giving up the CardView's elevation, you can just set the cardElevation property of the CardView in your XML layout to 0dp.
Like so:
app:cardElevation="0dp"
Just add your text view inside the card view, far as I know the z order is undefined inside a frame layout, but last laid out view should be drawn last.
This probably had to do with that card views in lollipop use elevation while they fall back on border drawing code pre lollipop.
This worked for me!
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content">
<!-- Add this layout as parent of CardView -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false" />
</LinearLayout>
<!--Close parent layout-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#0000ff"
android:gravity="center"
android:text="i am top view!"
android:textAllCaps="true"
android:textColor="#00ff00"
android:textSize="30sp" />
</FrameLayout>

Categories

Resources