Profile

Cover photo
Bobby Hargett
53,589 views
AboutPostsCollectionsPhotosVideos

Stream

Bobby Hargett

Shared publicly  - 
 
 
Use a fixed aspect ratio with the Percent Support Library 23.1
Pro-tip by +Ian Lake

The Percent Support Library (https://goo.gl/KbnO7W) makes it easy to set dimensions and margins in terms of a percentage of the overall space. In the 23.1 release (http://goo.gl/Ohd5Sy), it also gained the ability to set a custom aspect ratio via app:layout_aspectRatio.

This allows you to set only a single dimension, such as only the width, and the height will be automatically determined based on the aspect ratio you’ve defined, whether it is 4:3 or 16:9 or even a square 1:1 aspect ratio.

So building a navigation drawer header with a 16:9 background image would look like:
<android.support.percent.PercentRelativeLayout 
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
  <ImageView
    app:layout_widthPercent="100%"
    app:layout_aspectRatio="178%"
    android:scaleType="centerCrop"
    android:src="@drawable/header_background"/>
  <!-- The rest of your layout -->
</android.support.percent.PercentRelativeLayout>

You’ll note we use layout_widthPercent instead of layout_width - this ensures that the height is not erroneously set to 0dp before the first layout pass is done and ensures the aspect ratio is always correctly computed based on the current width.

So how did a 16:9 aspect ratio turn into 178%? Our target 16:9 aspect ratio can also be expressed as a 1.78:1 ratio or equivalently, a width 178% of the height. This is the format the layout_aspectRatio expects.

Of course, you can also define the aspect ratio in separate XML files with code such as:

<item name="header_aspectRatio" type="fraction">178%</item>

This makes it possible to change or reuse them across different form factors or layouts.

Material design designates a number of ratio keylines (http://goo.gl/OHeq6x) which you can use in your app, but you could also consider using this for list items (where you may be using ?android:attr/listPreferredItemHeight) with items such as a profile image or video thumbnail for a fixed aspect ratio.

You’ll be able to use this with PercentFrameLayout, PercentRelativeLayout, or through any custom ViewGroup using PercentLayoutHelper (http://goo.gl/BBxu6p).
16 comments on original post
1
Add a comment...

Bobby Hargett

Discussion  - 
 
Will FreeFlow ever be available on Maven?
1
Arpit Mathur's profile photo
 
Yeah, sorry. I have tried and failed twice mostly cause I dont know Maven. I am hoping sometime this coming week this works out. I have a meeting with another developer to figure out the steps needed.
Add a comment...

Bobby Hargett

Shared publicly  - 
 
I won candy on the #googlebirthday doodle! Score: 140
1
Add a comment...

Bobby Hargett

Shared publicly  - 
 
 
Make your windowBackground work for you instead of using null
Pro-tip by +Ian Lake

When looking for overdraw in your app, you’ll find that there’s something behind your Views: that default background color is your windowBackground. If you use fullscreen opaque Views, you might be tempted to set your windowBackground to null, but this may lead to even more problems in the form of visual artifacts.

When could a null windowBackground cause visual artifacts? One common case is during the cold start of your app, when the system uses your windowBackground to display a placeholder in the time before your Activity’s setContentView() is called. While calling getWindow().setBackground(null) in your onCreate() gets around that, you may still see artifacts when a keyboard/IME animates in behind where the keyboard appears or with ListViews overscroll behavior.

Instead, consider using your windowBackground. Make sure your windowBackground actually is the background of most of your Activity (particularly over scrollable sections where overdraw is the most important to avoid), removing opaque view backgrounds where possible.

Setting a windowBackground via XML involves just a single line in your theme:
<style name="AppTheme">
 <itemname="android:windowBackground">@color/custom_background</item>
</style>

Note that this doesn’t preclude you from using a branded launch theme (https://goo.gl/G7EULW) - in fact, that also uses the windowBackground precisely because it is what the system draws during cold starts.
Use cold start time effectively with a branded launch theme Pro-tip by +Ian Lake When your app isn’t in memory and is launched, that ‘cold start’ can… - Android Developers - Google+
4 comments on original post
1
Add a comment...

Bobby Hargett

Shared publicly  - 
 
There is still some love is this crazy world of ours. Mashable: 7-Year Old Boy Fighting Brain Cancer Scores 69-Yard Touchdown. http://goo.gl/mag/lei0ufb
1
Add a comment...
Bobby's Collections
Basic Information
Gender
Male
Links