I am trying to round the corners of an ImageView in android xml development. I use a parent of CardView with CornerRadius and I made sure the API is above 19 to be able to use the elevation feature. For the moment I don't want to use any 3rd party, even though I tried and that didn't work either for unknown reasons.
<androidx.cardview.widget.CardView
android:id="#+id/profilecardview"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
app:cardCornerRadius="100dp"
android:elevation="10dp"
app:cardPreventCornerOverlap="false">
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:srcCompat="#drawable/profpic" />
</androidx.cardview.widget.CardView>
Thank for the help!
Related
I have the following problem: I want to put a CardView over another one in an android layout file.
So in android studio layout editor the result is this and it's what I want:
the cardView round one top right of the rectangular CardView, at the same elevation
But if I start the emulator the result is this:
This is the code of the two cardView:
<androidx.cardview.widget.CardView
android:id="#+id/dati1h"
android:layout_width="300dp"
android:layout_height="483dp"
android:layout_marginTop="90dp"
android:layout_marginBottom="162dp"
app:cardCornerRadius="8dp"
app:cardElevation="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/info"
android:layout_width="40dp"
android:layout_height="40dp"
app:cardCornerRadius="100dp"
app:layout_constraintBottom_toBottomOf="#id/dati1h"
app:layout_constraintEnd_toEndOf="#id/dati1h"
app:layout_constraintStart_toStartOf="#id/dati1h"
app:layout_constraintTop_toTopOf="#id/dati1h"
android:layout_marginBottom="480dp"
android:layout_marginStart="290dp"
android:clickable="true"
android:focusable="true"
app:cardElevation="5dp">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_info_foreground"/>
</androidx.cardview.widget.CardView>
I really don't know how to solve it. Thanks for the help!
how about make RelativeLayout
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:id="#+id/info"
android:layout_width="40dp"
android:layout_height="40dp"
app:cardCornerRadius="100dp"
app:layout_constraintBottom_toBottomOf="#id/dati1h"
app:layout_constraintEnd_toEndOf="#id/dati1h"
app:layout_constraintStart_toStartOf="#id/dati1h"
app:layout_constraintTop_toTopOf="#id/dati1h"
android:layout_marginBottom="480dp"
android:layout_marginStart="290dp"
android:clickable="true"
android:focusable="true"
app:cardElevation="5dp"/>
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_info_foreground"/>
</RelativeLayout>
I can't see an issue with the code as you declared info CardView after dati1h that means info cardView should get rendered over dati1h. But this can be a device specific issue i have faced similar issue before (For constraint layout).
To solve it i chose to increase the elevation which will solve it for sure.
But as you don't want to follow that approach try using Frame/Relative Layout as parent of both CardView(instead of constraint layout) and it should solve your issue.
I'm trying to show an image with a rounded view inside a cardview, and strangely I don't get the corners of the image rounded but flat. I'm compiling with API level 29.
<androidx.cardview.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/thumb"
android:layout_width="370dp"
android:layout_height="370dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="25dp"
android:visibility="visible"
card_view:cardCornerRadius="4dp"
card_view:cardUseCompatPadding="true"
card_view:cardPreventCornerOverlap="false"
app:cardElevation="0dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/ic_thumbnail" />
Worth noting I'm using Picasso to load the image. Any help on this matter is highly appreciated.
expected results:
actual result:
You can use above attribute in ImageView:
android:scaleType="fitXY"
I have a player screen where I want to display the artwork provided by an audio file as a square. Most files provide a square artwork, but some will provide a rectangle one.
In that case, I want to use the full height of the image and 'zoom in' losing some information on the right and the left but being able to show it in a square.
Right now I failed to do so.
Also, I would like it to work as well if a vertical rectangle is provided
I'm new to Constraintlayout and try the following but that doesn't work
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:gravity="center"
android:filter="true"
android:padding="20dp"
android:elevation="1dp"
android:scaleType="centerCrop" />
</androidx.constraintlayout.widget.ConstraintLayout>
Any idea on how to achive this?
You can replace android:scaleType="centerCrop" with android:scaleType="fitXY" to change the image default form and ration
From the documentation:
Scale the image using Matrix.ScaleToFit#FILL
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="0dp"
android:src="#drawable/image"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:gravity="center"
android:filter="true"
android:elevation="1dp"
android:scaleType="fitXY" />
I am adding the android studio preview so you can see how it looks:
Layout with shadow
I would like to create same shadow and layout as shown in above figure i tried http://inloop.github.io/shadow4android/ but i am not able to clear those 9 patch lines on top and left side of image
Using Material design, this can be done elegantly using elevation:
<TextView
android:id="#+id/myview"
...
android:elevation="2dp"
android:background="#drawable/myrect" />
https://developer.android.com/training/material/shadows-clipping.html
I will suggest you to use Cardview for this.
like below you can show shadow.
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:padding="#dimen/_5sdp"
app:cardElevation="#dimen/_3sdp"
android:layout_marginTop="#dimen/_10sdp"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="#dimen/_3sdp"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:text="Profile"
android:drawableLeft="#drawable/profile"
android:drawablePadding="#dimen/_5sdp"
android:id="#+id/frag_setting_profile_tv"
android:padding="#dimen/_10sdp"
style="#style/textview_primary"
android:layout_height="match_parent" />
</android.support.v7.widget.CardView>
app:cardElevation property show below shadow view .
I have same xml code but when I am running it in Lolipop the padding attribute is working fine but in JellyBean its not working also In my ImageView I am using an oval from drawable that is set with background attribute and transparent wifi image that has set by src attribute
<ImageView
android:id="#+id/imageView"
android:layout_width="42dp"
android:layout_height="42dp"
android:padding="8dp"
android:background="#drawable/icon_circle_primary"
android:src="#drawable/ic_info_black_48dp" />
Here the screenshot from both version
Try putting the ImageView inside of a FrameLayout and put the android:padding="8dp" and the android:background="#drawable/icon_circle_primary" attributes to the FrameLayout.
Something like:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="50"
android:background="#drawable/icon_circle_primary"
android:padding="8dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="42dp"
android:layout_height="42dp"
android:src="#drawable/ic_info_black_48dp" />
</FrameLayout>
Just in case this will help someone, I had a problem where the ImageView padding was not working for me where I also had android:scaleType="centerCrop" set.
Adding android:cropToPadding="true" did it for me.