Android picture with correct aspect ratio and border

Question

I want to have fixed size box 120x180 dp that contains a picture with correct aspect ratio and a border painted 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 setting works fine because it fill complete tile inner and background is not overriden. But to demonstrate incorrect aspect ratio I have increased top margin. See picture below. I tried remaining values but they either paint over the border or do not fill complete inner part.

How can I have the tile that has the border around a part of the picture with the right aspect ratio? The picture can be cut. I think that this technique is called center crop. I found it in the Picasso library.

FitXY deforms picture:

Manually painted picture when I cropped picture while preserving aspect ratio. Sorry, it looks ugly but bounty ends very soon.

Bjorn's answer:

Rahul answer does not have bottom border

please see http://stackoverflow.com/questions/2521959/how-to-scale-an-image-in-imageview-to-keep-the-aspect-ratio — Shayan Pourvatan, Jan 03 '17 at 06:12
I think I am looking for center crop. This picasso description looks to fit my need: CenterCrop() is a cropping technique that scales the image so that it fills the requested bounds of the ImageView and then crops the extra. The ImageView will be filled completely, but the entire image might not be displayed. — Leos Literak, Jan 03 '17 at 18:30
@Leos Literak you want to set an image to a view with the exact aspect ratio. as an example if there is an image view with 50dp in top padding ..you need to show your image in the remaining space with the aspect ratio without stretched.. is that you want or something else? — Charuක, Jan 08 '17 at 04:27
@LeosLiterak Can you put up your expected output beneath the images with a separate heading ? — Sreehari, Jan 09 '17 at 12:26

score 5 · Answer 1 · answered Jan 03 '17 at 08:21

5

<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 omitted)

will make it as wide as the parent allows and up/down-scale as needed keeping aspect ratio.

scaleType="centerInside"
if the intrinsic width of src is smaller than parent width will center the image horizontally
f the intrinsic width of src is larger than parent width will make it as wide as the parent allows and down-scale keeping aspect ratio.

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

Or Using the CardView also you can make 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>

answered Jan 03 '17 at 08:21

Rahul Devanavar

3,917
4
32
61

Nice answer. No fitXY helped. The CardView is a nice trick to get borders, I like it. But picture does not respect ratio. I need a crop technique. – Leos Literak Jan 03 '17 at 18:36
@LeosLiterak Did you checked with `scaleType=fitCenter` and `adjustViewBounds=true` ? – Rahul Devanavar Jan 04 '17 at 05:58
You are right that the aspect is preserved. But I need complete are painted by the picture. Your solution paints grey area around the small picture with fitCenter or improperly scaled picture with titXY. – Leos Literak Jan 04 '17 at 06:12
remove `android:layout_margin=3dp` of imageView due to that you are getting gray area around the image. – Rahul Devanavar Jan 04 '17 at 06:17
if still your facing the issue ,post your image – Rahul Devanavar Jan 04 '17 at 07:30
It still does not work. I added screenshot to my question. – Leos Literak Jan 09 '17 at 18:49
Pity I cannot split a bounty between http://meta.stackoverflow.com/q/293942/1639556 :-( I have three answers I favor. – Leos Literak Jan 09 '17 at 18:56

score 2 · Answer 2 · answered Jan 02 '17 at 20:14

2

Having rounded corner ImageView can be a bit of a painful task. What you can do use a library that supports both rounded corners and borders. For example

https://github.com/vinc3m1/RoundedImageView

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

answered Jan 02 '17 at 20:14

Rishabh876

3,010
2
20
37

Cool. I worried that I cannot fix it in XML and I will have to implement it myself. So this would save me lots of work. Bu I am still waiting if somebody knows root source of this issue. – Leos Literak Jan 02 '17 at 21:08

score 2 · Answer 3 · answered Jan 04 '17 at 08:53

You can use two separate ImageViews: one for the frame, and another one for the picture. That way you can use the ScaleType "centerCrop" on the picture ImageView, and resultant picture will always be in the desired aspect-ratio with a border around it.

Just make sure that the constraints on 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

This answer looks very promising. I will test it at evening. Thanks. — Leos Literak, Jan 04 '17 at 09:04

score 1 · Answer 4 · answered Jan 02 '17 at 19:23

Since you are already using ConstraintLayout, there's this handy attribute app:layout_constraintDimensionRatio that let you specify aspect ratio dimensions. Here's 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>

It does not work. And I doubt it could. This parameter defines a ratio between width and height of the component. It does not influence how loaded image is displayed. — Leos Literak, Jan 02 '17 at 21:20
Yeah I misunderstood your question. Can I have one of your images? — Alexander Perfilyev, Jan 02 '17 at 22:03
Take any image, dimensions are not important. Set padding top to high value to deform the image. — Leos Literak, Jan 03 '17 at 18:19

score 1 · Answer 5 · answered Jan 07 '17 at 08:34

Try this:

<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!

score 1 · Accepted Answer · answered Jan 09 '17 at 13:24

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 padding into the FrameLayout, so for your background resource file you only need color and corners:

<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>

I have added a screenshot of your asnwer. – Leos Literak Jan 09 '17 at 18:37 — Leos Literak, Jan 09 '17 at 18:37

Android picture with correct aspect ratio and border

6 Answers6