Android image with correct aspect ratio and border

Question

I want to have a fixed size block 120x180 dp that contains an image with the correct aspect ratio and a border drawn around it.

XML:

<android.support.constraint.ConstraintLayout android:layout_width="120dp" android:layout_height="180dp" app:layout_gravity="center"> <ImageView android:id="@+id/picture" android:layout_width="0dp" android:layout_height="0dp" android:background="@drawable/game_border" app:srcCompat="@drawable/pic_lion" android:scaleType="centerInside" /> 

Game_border Layout:

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shape="rectangle" > <solid android:color="#55111111" /> <padding android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp" /> <corners android:radius="6dp" /> </shape> </item> </layer-list> 

This scaleType works fine because it fills the entire interior of the tile and the background is not overestimated. But to demonstrate the wrong aspect ratio, I increased the maximum margin. See the figure below. I tried the remaining values, but they either drew the border or did not fill the full inside.

How can I use a slab that has a border around a part of the image with the correct aspect ratio? Image can be cut off. I think this method is called central culture. I found it in the Picasso library.

FitXY warps the image:

A hand-drawn image when I cropped the image while maintaining the aspect ratio. Sorry, it looks ugly, but generosity ends very soon.

Bjorn:

Rahul's answer has no bottom line

Answer 1

Use a simple Framelayout for the background and use centerCrop for the ImageView:

 <FrameLayout android:layout_width="120dp" android:layout_height="180dp" android:background="@drawable/background_with_rounded_corners" android:padding="4dp"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop"/> </FrameLayout> 

And move the add-on to FrameLayout, so for your background resource file you only need colors and angles:

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <solid android:color="#55111111" /> <corners android:radius="6dp" /> </shape> </item> </layer-list> 

Answer 2

 <ImageView android:id="@id/img" android:layout_width="match_parent" android:layout_height="match_parent" android:adjustViewBounds="true" android:scaleType="fitCenter" /> 

scaleType = "fitCenter" (default when skipped)

• will make it as wide as the parent element allows, and zoom in / out while maintaining the proportions.

  scaleType = "centerInside"

• if the inner width src is less than the parent width will center the image horizontally

• f the inner width of src greater than the parent width will make it as wide as the parent, and reduce the proportions.

It doesn't matter if you use android:src or ImageView.setImage* .key android: adjustViewBounds

Or Using CardView, you can also create rounded corners for ImageView.

  <android.support.v7.widget.CardView android:layout_width="120dp" android:layout_height="180dp" android:layout_gravity="center" android:layout_marginLeft="6dp" android:layout_marginRight="6dp" android:layout_marginTop="6dp" app:cardCornerRadius="@dimen/_5dp" app:cardBackgroundColor="#D3D3D3" app:cardPreventCornerOverlap="false" card_view:cardPreventCornerOverlap="false"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="3dp" android:background="@drawable/image" android:scaleType="fitXY" /> </android.support.v7.widget.CardView> 

Answer 3

The rounded corner of an ImageView can be a bit of a painful task. You can use a library that supports both rounded corners and borders. for instance

https://github.com/vinc3m1/RoundedImageView

If you understand what it does, you can easily create your own ImageView. The trick is to override the onDraw ImageView method and clip using paths. You can find articles related to this topic.

Answer 4

You can use two separate ImageViews: one for the frame and one for the image. Thus, you can use the ScaleType "centerCrop" in the ImageView image, and the resulting image will always be in the desired aspect ratio with a frame around it.

Just make sure that the limits for both ImageViews are set so that both ImageViews span the parent.

code:

 <android.support.constraint.ConstraintLayout 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="120dp" android:layout_height="180dp"> <ImageView android:layout_width="0dp" android:layout_height="0dp" app:srcCompat="@drawable/game_border" android:id="@+id/frame" app:layout_constraintTop_toTopOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintBottom_toBottomOf="parent"/> <ImageView android:layout_width="0dp" android:layout_height="0dp" app:srcCompat="@drawable/lion" android:id="@+id/picture" android:scaleType="centerCrop" app:layout_constraintTop_toTopOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:layout_marginTop="4dp" android:layout_marginStart="4dp" android:layout_marginLeft="4dp" android:layout_marginEnd="4dp" android:layout_marginRight="4dp" android:layout_marginBottom="4dp" /> 

Result: Picture_with_border

Answer 5

Since you are already using ConstraintLayout , this convenient attribute is app: layout_constraintDimensionRatio , which allows you to specify the size of the format. Here's the layout code for the picture below.

 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.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" > <ImageView android:id="@+id/picture" android:layout_width="120dp" android:layout_height="0dp" android:background="@drawable/game_border" android:scaleType="centerInside" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="h, 2:3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/vertical_deploy" /> </android.support.constraint.ConstraintLayout> 

Answer 6

Try the following:

 <LinearLayout android:layout_width="120dp" android:layout_height="180dp" android:background="@drawable/game_border"> <ImageView android:id="@+id/picture" android:layout_width="match_parent" android:layout_height="match_parent" app:srcCompat="@drawable/pic_lion" android:scaleType="centerCrop" /> </LinearLayout> 

Hope will help you!