Xdimen - Support multiple screen sizes easily by scaling your dimensions

Islam Khaled

Last update: Dec 8, 2022

Related tags

Overview

Xdimen

Support multiple screen sizes easily by scaling your dimensions.

How does Xdimen work?

When you have a UI design with a specific dimension, and you need to support different mobiles or tablets in portrait or landscape. This case Xdimen can help you to generate scalable dimesions for common devices' screen sizes.

Xdimen generates an alternative res directory for every common screen width (configurable) and scales your design dimensions.

Xml resources are generated with help of kotlin xml builder

Find more about Xdimen here

Usage

Add to project

Xdimen must be applied in an android project.

Groovy

  plugins {
    id 'io.github.islamkhsh.xdimen' version "$latest_version"   
    // agp plugin
  }

Kotlin

  plugins {                         
    id("io.github.islamkhsh.xdimen") version "$latest_version"  
    // agp plugin
  }

Configure Xdimen

All properties are optional, only designWidth is required. Properties are discussed in more detail in below section.

Groovy

  xdimen {
    deleteOldXdimen = true
    designWidth = 411 // required
    designDpi = mdpi()
    targetDevicesWidth = [360, 375, 411]
    dimensRange {
        minDimen = -10
        maxDimen = 600
        step = 0.5d
    }
    fontsRange {
        minDimen = 10
        maxDimen = 60
        step = 1.0d
    }
}

Kotlin

  xdimen {
    deleteOldXdimen.set(true)
    designWidth.set(411) // required
    designDpi.set(mdpi())
    targetDevicesWidth.set(phonePortrait)
    dimensRange {
        minDimen.set(-10)
        maxDimen.set(500)
        step.set(0.5)
    }
    fontsRange {
        minDimen.set(10)
        maxDimen.set(60)
        step.set(1.0)
    }
}

Use scaled dimens

After generate xdimen resources (see next section) you can use the dimens

   <TextView android:layout_width="@dimen/x100dp"    # width in design is 100dp
             android:layout_height="@dimen/x50_5dp"  # height in design is 50.5dp
             android:padding="@dimen/neg_x6_5dp"     # padding in design is -6.5dp
             android:textSize="@dimen/x12sp"         # textSize in design is 12sp
             />

Tasks

To execute a task, make sure you execute it on an android project using one of these ways

$ gradle :prjectName:taskName.
From gradle tool window under android group.
From Run AnyThing window.

`generateXdimen`

Generates alternative resources for every device width in targetDevicesWidth set and for every created resource qualifier it scales the dimensions to fit with this width. It uses configured properties to calculate a scaling factor, get the range of dimensions to generate and the list of screen widths' to target.

`deleteXdimen`

Delete the previous generated xdimen resources unless you renamed the res file or dir. It will be executed before generateXdimen if you set deleteOldXdimen property by true.

Configuration properties

deleteOldXdimen

By setting it when you execute generateXdimen task deleteXdimen will be executed first to delete all previous generated xdimen resources and their dirs if the directory contains only xdimen.xml file.

If you renamed the xdimen.xml file or its directory for any reason, this file won't be deleted.

Default value: true.

designWidth

The value of screen width of your design in dp unit. It will be used with designDpi to calculate the relativeDesignWidth (width relative to main density mdpi) and then calculate a scaling factor for every screen width in targetDevicesWidth.

If your design is in px set its width in this property and set designDpi to be mdpi as in mdpi 1px = 1dp.

No default value because it's required and must be configured.

designDpi

The design screen density (dot per inch) see more. This will be used with designWidth to calculate the relativeDesignWidth.

Default value is: mdpi

Predefined densities: for every density in common densities there's a method with its name ( ldpi(), mdpi(), hdpi(), ... etc), Also there's a method to set custom density dpi(value).

targetDevicesWidth

The width of screens of devices which you target. For every width in this list, an alternative resource will be generated with scaled dimensions.

ex: if the list is [350, 400] then

...
-> values/xdimen.xml            # Devices with screen-width less than 350dp.
-> values-w350dp/xdimen.xml     # 350dp <= screen-width < 400dp
-> values-w400dp/xdimen.xml     # screen-width >= 400dp
...

You can use a predefined set as it's, adds or removes from it, or provide your own set.

Default value is: [designWidth] set of designWidth provided value.

Predefined sets for common devices:

phonePortrait: common phones in portrait orientation.

phoneLandscape: common phones in landscape orientation.

tabletPortrait: common tablets in portrait orientation.

tabletLandscape: common tablets in landscape orientation.

devicesInPortrait: common phones and tablets in portrait.

devicesInLandscape: common phones and tablets in landscape.

You can combine multiple devices list, but I recommend not to target both portrait and landscape unless you provide a custom layout for landscape or using Pane Layout.

These lists were collected from many sources: Wikipedia, ScreenSize, Pixensity and others.

dimensRange

The range of dimensions you want to be generated and scaled.

minDimen: the minimum dimen to be generated.
maxDimen: the maximum dimen to be generated.
step: the step between two generated dimen.

Default value: minDimen=-10, maxDimen=600, step=1.00.

fontsRange

The same of dimensRange but for fonts dimensions range.

Default value: minDimen=6, maxDimen=48, step=1.00.

Screenshots

You might also like...

Android Library for making animated tutorials inside your app

##SlidingTutorial Cleveroad introduces Sliding Tutorial Library for Android Hey guys, hope you haven’t started developing a tutorial for your Android

2.5k Dec 31, 2022

The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.

MaterialDrawer ... the flexible, easy to use, all in one drawer library for your Android project. What's included 🚀 • Setup 🛠️ • Migration Guide 🧬

11.6k Dec 27, 2022

A flexible, easy to use, unique drawer library for your Android project.

Duo Navigation Drawer This Android library provides an easy way to create an alternative navigation drawer for android. Instead of a drawer that slide

1.1k Dec 21, 2022

Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way.

Alligator Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way. Features Any app

290 Dec 9, 2022

Dismiss your keyboard by tapping anywhere outside it.

Keyboard Dismisser What is this? Keyboard Dismisser is a simple library that allows you to dismiss keyboard by tapping anywhere outside it. Currently

49 Nov 28, 2021

Navigation Component: THE BEST WAY to create navigation flows for your app

LIVE #017 - Navigation Component: A MELHOR FORMA de criar fluxos de navegação para o seu app! Código fonte do projeto criado na live #017, ensinando c

4 Jun 15, 2022

Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps

Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps. The extension provides handy methods and properties to change the behaviour as well as the appearance of the navigation bar.

4 Nov 30, 2022

An Android staggered grid view which supports multiple columns with rows of varying sizes.

AndroidStaggeredGrid ##Notice - Deprecated - 09-2015 This library has been deprecated. We will no longer be shipping any updates or approving communit

4.8k Dec 29, 2022

Learn how to create a layout that works with all screen sizes of the device.

3 Nov 15, 2021

A library to quickly and easily enable multiple monitoring & support platforms for your mobile apps

You have a small team. Setting up crash reporting tools, event tracking tools, and log management services is not what you want to spend your hours do

65 Aug 8, 2022

Charts/graphs library for Android compatible with API 8+, several chart types with support for scaling, scrolling and animations

HelloCharts for Android Charting library for Android compatible with API 8+(Android 2.2). Works best when hardware acceleration is available, so API 1

7.4k Jan 6, 2023

Androidicons is a professional, handcrafted icon set with 250 icons in 14 different colors and 5 sizes, including an icon font and all sources.

Android Developer Icons Android Developer Icons is a custom icon set, created by Opoloo. Included are: 250 hand-crafted, pixel-perfect icons in 5 size

685 Nov 23, 2022

Android cutout screen support Android P. Android O support huawei, xiaomi, oppo and vivo.

CutoutScreenSupport Android cutout screen support Android P. Android O support huawei, xiaomi, oppo and vivo. Usage whether the mobile phone is cutout

5 Nov 3, 2022

🌏 Android/IDEA localization plugin. supports multiple languages and multiple translators.

English | 简体中文 AndroidLocalizePlugin 🌏 Android/IDEA localization plugin. supports multiple languages and multiple translators. Features Multiple tran

465 Dec 28, 2022

A MaterialChipSetWidget is used to hold multiple chipsets 🤩 and each chipset has multiple values. 🔖

38 Sep 21, 2022

A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

⚡ A powerful & easy to use chart library for Android ⚡ Charts is the iOS version of this library Table of Contents Quick Start Gradle Maven Documentat

36k Dec 31, 2022

NTabLayout is a simple tab bar custom view under android which has click-sliding and scaling up animation effect.

NTabLayout Brief NTabLayout is a simple tab bar custom view under android which has click-sliding and scaling up animation effect. This tab bar's effe

1 Oct 22, 2021

This application is used to adjust the scaling of kubernetes deployments depending on the message-count of given RabbitMQ queues.

PodAutoScaler This application is used to adjust the scaling of kubernetes deployments depending on the message-count of given RabbitMQ queues. It use

7 May 9, 2022

🚀🏞💪 Collection of Images, Modifiers, utility functions for Jetpack Compose to expand and enrich displaying, manipulating, scaling, resizing, zooming, and getting cropped ImageBitmap based on selection area

Collection of Images, Modifiers, utility functions for Jetpack Compose to expand and enrich displaying, manipulating, scaling, resizing, zooming, and getting cropped ImageBitmap based on selection area, before/after image to with handle to show partial of both images and more is cooking up

207 Dec 26, 2022

Comments

support for both orientation.

I want to set dimen for both orientation. how should I do it?

for eg. values-w483dp and values-w483dp-port automatically generated and the dimen values set to specific orientation.

opened by kyawhtut-cu 3