androidpicassoandroid-cardview
Curve imageview corner android
From last many days I am trying to implement curve corner for my view. I want to design my xml like this image:
OR url: Sample Image
All I want is image with curve corner. Width if image will fit its parent while height will be auto.So that full image can be display.
I tried to use cardView, Glide, Picasso and com.makeramen.roundedimageview.RoundedImageView library but couldn't get proper result.
adapterHome.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:background="@color/transparent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_5sdp"
android:layout_marginEnd="@dimen/_5sdp"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/transparent">
<ProgressBar
android:id="@+id/progress"
android:layout_width="match_parent"
android:layout_height="100dp"
android:visibility="gone" />
<ImageView
android:id="@+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/influencers"
android:scaleX="1"
android:scaleY="1"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:paddingTop="@dimen/_2sdp"
android:layout_marginStart="@dimen/_1sdp"
android:background="@color/light_transparent"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:paddingLeft="@dimen/_5sdp"
android:orientation="horizontal"
>
<ImageView
android:layout_width="@dimen/_12sdp"
android:layout_height="@dimen/_12sdp"
android:src="@drawable/ic_happy_smily"
android:layout_gravity="center"
/>
<TextView
android:id="@+id/total_reaction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/thumbnail"
android:text="3k"
android:textColor="@color/white"
android:layout_gravity="bottom"
android:gravity="start"
android:textSize="@dimen/_10sdp"
android:paddingLeft="@dimen/_5sdp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:orientation="horizontal"
android:layout_gravity="center"
android:gravity="center"
>
<ImageView
android:layout_width="@dimen/_15sdp"
android:layout_height="@dimen/_15sdp"
android:src="@drawable/ic_eye_watch_white"
android:layout_gravity="center"
/>
<TextView
android:id="@+id/total_watch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/thumbnail"
android:text="3k"
android:textColor="@color/white"
android:layout_gravity="bottom"
android:gravity="start"
android:textSize="@dimen/_10sdp"
android:paddingLeft="@dimen/_5sdp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:orientation="horizontal"
android:layout_gravity="center"
android:gravity="end"
>
<TextView
android:id="@+id/total_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/thumbnail"
android:text="0 Sec"
android:textColor="@color/white"
android:layout_gravity="bottom"
android:gravity="end"
android:textSize="@dimen/_10sdp"
android:paddingRight="@dimen/_5sdp"
/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
</LinearLayout>
<TextView
android:id="@+id/post_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/_5sdp"
android:text="sdsds"
android:layout_gravity="top"
android:gravity="top"
android:layout_marginBottom="@dimen/_5sdp"
android:textSize="@dimen/_12sdp"
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:enabled="true"
android:textColor="@color/black"
/>
</LinearLayout>
also instead of
<LinearLayout
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_5sdp"
android:layout_marginEnd="@dimen/_5sdp"
android:orientation="vertical">
</LinearLayout>
I tried to use
CardView but it doesnt worked.
<androidx.cardview.widget.CardView
android:id="@+id/card_view"
xmlns:card_view="https://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="@color/grey_300"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="0dp"
card_view:cardUseCompatPadding="true">
</androidx.cardview.widget.CardView>
Using Picasso:
Transformation transformation = new RoundedTransformationBuilder()
.borderColor(Color.BLACK)
.cornerRadiusDp(30)
.oval(false)
.build();
Picasso.get()
.load(imageUrl)
.placeholder(R.drawable.influencers)
.error(R.drawable.influencers)
.transform(transformation)
.into(holder.thumbnail);
After using below is my output:
Output
Solution
Use cardview and give card corner radius . in cardview take any layout then use any view in that layout.
example:
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="10dp"
app:cardElevation="0dp"
android:id="@+id/inercard"
app:cardBackgroundColor="#ffffff">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:id="@+id/imageview"
android:scaleType="fitXY"
/>
</LinearLayout>
</androidx.cardview.widget.CardView>