Skip to content

Aspect ratio image view

What is aspect ratio ?

Based on Wikipedia: The aspect ratio of an image is the ratio of its width to its height. It is commonly expressed as two numbers separated by a colon, as in 16:9. For an x:y aspect ratio, the image is x units wide and y units high

What is problem with aspect ratio in android ?

Android is the operating system of smartphones, tablets, TVs and etc with different screen sizes. that mean if you want to show photos or videos in this screens you shuld take care of device size and device aspect ratio.
in http://screensiz.es/ you can see devices screen size and aspect ratio with many other properties

What is ariv solution for aspect ratio problem ?

ariv is an simple android library for showing photos in android app based on photo aspect ratio with max,min width & height. with ariv you can make pinterst explore ui or telegram photo item in chat.

How to add ariv to android project ?

Gradle

//Add it in your root build.gradle at the end of repositories
allprojects {
  repositories {
	maven { url 'https://jitpack.io' }
  }
}
// Add it to app build.gradle 
dependencies {
    implementation 'com.github.mehdiyari:AspectRatioImageView:{latest_version}'
}

Gradle-Kotlin-DSL

//Add it in your root build.gradle.kts at the end of repositories
repositories {
  maven {
    this.url = URI("https://jitpack.io")
  }
}
// Add it to app build.gradle.kts
dependencies {
    implementation("com.github.mehdiyari:AspectRatioImageView:{latest_version}")
}

How to use it ?

for simple using you declare AspectRatioImageView like ImageView

<ir.mehdiyari.ariv.ui.AspectRatioImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:ariv_src="@drawable/photo"/>

this will show your photo as original dimension. but if your photo is too big and screen size is small photo does not showed properly. for solving this issue you can just delcare AspectRatioImageView with bounds.

<ir.mehdiyari.ariv.ui.AspectRatioImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:ariv_src="@drawable/bridge"
    app:ariv_minWidth="100dp"
    app:ariv_maxHeight="250dp"
    app:ariv_minHeight="100dp"
    app:ariv_maxWidth="300dp"/>

How to use it in recyclerView ?

If you want to use ariv into recyclerview you just simply set adapter_mode=true on AspectRatioImageView

<ir.mehdiyari.ariv.ui.AspectRatioImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:ariv_src="@drawable/photo"
    app:ariv_adapterMode="true"/>

if you are in recyclerview and set adapter_mode=true then ariv avoiding call requestLayout on changing bounds and dimension

Loading Photo from api !

In many scanrio we must fetch photo from api with glide, picasso or etc. and the problem is view not mesured until photo loaded completlly and this make bad ui/ux. this problem fixed by sending width and height with photo url from backend

{
   "id": xxx,
   "product_name": "keyboard",
   "photo": {
      "url": "http://mehdiyari.ir/keyboard.png",
      "width": 1280,
      "height": 960
   }
}

// or 
{
   .....
   "photo": "http://mehdiyari.ir/picure_product_xxx_1280x960.png"
}

in ariv you must menually set dimension for mesuare view until photo loader load photo completlly

// set property [manuallySetPhotoDimension] to true if you want menually set dimension
aspectRatioImageView.manuallySetPhotoDimension = true

// and set api dimension to ariv manully
aspectRatioImageView.setPhotoDimension(photo_width_from_api, photo_height_from_api)

// load image with Glide
Glide.with(aspectRatioImageView).load(photoUri)
     .into(aspectRatioImageView)

CornerRaduis, Stroke and …

AspectRatioImageView uses RoundedImageView as parent. you can add all RoundedImageView attributes to ariv

<ir.mehdiyari.ariv.ui.AspectRatioImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:ariv_src="@drawable/photo"
      android:layout_margin="10dp"
      app:riv_corner_radius="20dp"
      app:riv_border_width="2dp"
      app:riv_border_color="@color/colorAccent"/>

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *