This is a specified proportion to the size of the Layout or View support library, with which you can easily set a fixed ratio of the size of the Layout or View, internal adaptive size calculation, completely abandon the code to calculate the size! If you have any questions in the course or suggestions, please send an e-mail to the following e-mail, thank you!

Overview

Android-RatioLayout Build Status Download

This is a specified proportion to the size of the Layout or View support library, with which you can easily set a fixed ratio of the size of the Layout or View, internal adaptive size calculation, completely abandon the code to calculate the size! If you have any questions in the course or suggestions, please send an e-mail to the following e-mail, thank you!

For more information please see the website

Screenshots

Sample Sample

Android-RatioLayout with xml code

<net.soulwolf.widget.ratiolayout.widget.RatioFrameLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    app:datumRatio="datumWidth"
    app:widthRatio="16.0"
    app:heightRatio="9.0"
    android:layout_height="wrap_content">

    <net.soulwolf.widget.ratiolayout.widget.RatioImageView
        android:id="@+id/image2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:datumRatio="datumWidth"
        app:widthRatio="16.0"
        app:heightRatio="7.0"
        android:scaleType="centerCrop"/>

    <net.soulwolf.widget.ratiolayout.widget.RatioTextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="25sp"
        android:textStyle="bold"
        android:gravity="center"
        app:datumRatio="datumWidth"
        app:widthRatio="16.0"
        android:background="@color/sample_text"
        app:heightRatio="7.0"
        android:text="RatioImageView/RatioTextView:16*7"
        android:textColor="@android:color/white"/>

</net.soulwolf.widget.ratiolayout.widget.RatioFrameLayout>

<LinearLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:orientation="horizontal">

    <net.soulwolf.widget.ratiolayout.widget.RatioTextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/sample_primary"
        android:gravity="center"
        android:text="Square"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layoutSquare="true"/>

    <net.soulwolf.widget.ratiolayout.widget.RatioView
        android:layout_width="15dp"
        android:layout_height="wrap_content"
        app:heightRatio="1"
        app:widthRatio="1"/>

    <net.soulwolf.widget.ratiolayout.widget.RatioTextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/sample_primary"
        android:gravity="center"
        android:text="AspectRatio:1.0"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layoutAspectRatio="1"/>

</LinearLayout>

<net.soulwolf.widget.ratiolayout.widget.RatioRelativeLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    app:datumRatio="datumWidth"
    app:widthRatio="15.0"
    app:layout_marginTop="8dp"
    app:heightRatio="10.0"
    app:layout_height="wrap_content"/>
		

Android-RatioLayout with java code

RatioFrameLayout ratioFrameLayout = new RatioFrameLayout(context);
ratioFrameLayout.setRatio(datumRatio,widthRatio,heightRatio);
ratioFrameLayout.setSquare(square);
ratioFrameLayout.setAspectRatio(aspectRatio);

Attr params info

attrName Explanation
datumRatio This parameter indicates the ratio is calculated based on Width Or Height! Default auto
widthRatio This parameter indicates the proportion of the size Width
heightRatio This parameter indicates the proportion of the size Height
layoutSquare This parameter indicates the proportion of the square
layoutAspectRatio This parameter indicates the proportion of the (width / height)

Implementing View!

  • RatioAbsoluteLayout
  • RatioLinearLayout
  • RatioButton
  • RatioCheckBox
  • RatioCheckedTextView
  • RatioEditText
  • RatioFrameLayout
  • RatioGridLayout
  • RatioImageButton
  • RatioImageView
  • RatioProgressBar
  • RatioRadioButton
  • RatioRadioGroup
  • RatioRelativeLayout
  • RatioSpace
  • RatioTableLayout
  • RatioTextView
  • RatioGridView
  • RatioListView
  • RatioRecyclerView
  • RatioCardView

Custom

public class RatioFrameLayout extends FrameLayout implements RatioMeasureDelegate {

    private RatioLayoutDelegate mRatioLayoutDelegate;


    public RatioFrameLayout(Context context) {
        super(context);
    }

    public RatioFrameLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        mRatioLayoutDelegate = RatioLayoutDelegate.obtain(this, attrs);
    }

    public RatioFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mRatioLayoutDelegate = RatioLayoutDelegate.obtain(this, attrs, defStyleAttr);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public RatioFrameLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        mRatioLayoutDelegate = RatioLayoutDelegate.obtain(this, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (mRatioLayoutDelegate != null) {
            mRatioLayoutDelegate.update(widthMeasureSpec, heightMeasureSpec);
            widthMeasureSpec = mRatioLayoutDelegate.getWidthMeasureSpec();
            heightMeasureSpec = mRatioLayoutDelegate.getHeightMeasureSpec();
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    public void setRatio(RatioDatumMode mode, float datumWidth, float datumHeight) {
        if (mRatioLayoutDelegate != null) {
            mRatioLayoutDelegate.setRatio(mode, datumWidth, datumHeight);
        }
    }

    @Override
    public void setSquare(boolean square) {
        if (mRatioLayoutDelegate != null) {
            mRatioLayoutDelegate.setSquare(square);
        }
    }

    @Override
    public void setAspectRatio(float aspectRatio) {
        if (mRatioLayoutDelegate != null) {
            mRatioLayoutDelegate.setAspectRatio(aspectRatio);
        }
    }
}

Maven

<dependency>
  <groupId>net.soulwolf.widget</groupId>
  <artifactId>ratiolayout</artifactId>
  <version>2.1.0</version>
  <type>pom</type>
</dependency>

Gradle

allprojects {
   repositories {
      jcenter()
   }
}

compile 'net.soulwolf.widget:ratiolayout:2.1.0'

Developed by

Amphiaraus - [email protected]

License

Copyright 2015 The Android Open Source Project for Android-RatioLayout

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You might also like...
A library that easily allows you to mask layouts/viewgroups
A library that easily allows you to mask layouts/viewgroups

Maskable Layout Overview ======================= The Maskable Layout is a simple framelayout that allows you to easily mask views and viewgroups. You

CircularStats - Custom Widget to display stats of any thing

CircularStats This is a custom widget made with Jetpack Compose for displaying s

Material Design Search View Layout, now implemented in Google Maps, Dialer, etc

THIS PROJECT IS DEPRECATED Component is not maintained anymore. Implementation of Lollipop+ Dialer and Google Maps. DEMO Add in View Add to your layou

It's an Android library that allows you to use Layout as RadioButton or CheckBox.
It's an Android library that allows you to use Layout as RadioButton or CheckBox.

Android - CompoundLayout It's an Android library that allows you to use Layout as RadioButton or CheckBox. The librarie is Android 14+ compatible. Gra

Easily add slide to dismiss functionality to an Activity
Easily add slide to dismiss functionality to an Activity

Slidr Easily add slide-to-dismiss functionality to your Activity by calling Slidr.attach(this) in your onCreate(..) method. Usage An example usage: pu

A simple customised version of the TextInputLayout from the Android Design Support Library ⌨️
A simple customised version of the TextInputLayout from the Android Design Support Library ⌨️

Buffer Text Input Layout (Coming to maven central soon!) This is a simple customisation of the TextInputLayout found in the Design Support Library. Wh

A very simple arc layout library for Android
A very simple arc layout library for Android

ArcLayout A very simple arc layout library for Android. Try out the sample application on the Play Store. Usage (For a working implementation of this

Share Layout Android Library
Share Layout Android Library

Share any layout screenshot including any string of any Android App to any app via Intent .

Ultra Pull to Refresh for Android. Support all the views.

Welcome to follow me on GitHub or Twitter GitHub: https://github.com/liaohuqiu Twitter: https://twitter.com/liaohuqiu 中文版文档 Wanna auto-load-more? This

Comments
  • 反馈Android-RatioLayout问题

    反馈Android-RatioLayout问题

    你好,当前我设置heightRatio和widthRatio比例后,然后我将手机切换成横屏模式,正确的情况应该是heightRatio和widthRatio的值调换一下顺序,这样才能够适配横屏,但是当我切换横屏模式后它们没有被调换,导致横屏使用的比例是竖屏的比例,导致横屏无法适配,这种情况应该怎么做呢?

    opened by tcqq 4
  • Square Layout

    Square Layout

    I know it's easy to create square layout - it's special case of RatioLayout with widthRatio=1 and heightRatio=1. However, could you please make square layout built-in in this library?

    opened by anticafe 3
  • RecyclerView GridLayoutManager

    RecyclerView GridLayoutManager

    image

    RecyclerView GridLayoutManager

    <net.soulwolf.widget.ratiolayout.widget.RatioImageView
        android:layout_width="match_parent"
        android:layout_height="@dimen/public_height_20"
        android:background="@android:color/holo_blue_bright"
        app:datumRatio="datumHeight"
        app:heightRatio="1"
        app:widthRatio="3" />
    
    opened by ZQ7 0
  • RatioFrameLayout is not rounding its corner from bottom

    RatioFrameLayout is not rounding its corner from bottom

    I have added RationFrameLayout but it is not rounding from bottom

    
            <net.soulwolf.widget.ratiolayout.widget.RatioFrameLayout
                android:layout_width="@dimen/_40sdp"
                android:layout_height="@dimen/_40sdp"
                android:visibility="gone"
                tools:visibility="visible"
                app:cardCornerRadius="4dp"
                app:cardElevation="4dp"
                app:datumRatio="datumAuto"
                app:layoutAspectRatio="1.0" />
    
    opened by FazalHussain 0
ConstraintLayout is an Android layout component which allows you to position and size widgets in a flexible way

ConstraintLayout is a layout manager for Android which allows you to position and size widgets in a flexible way. It's available for both the Android view system and Jetpack Compose.

Android Jetpack 970 Jan 6, 2023
A pull to refresh layout for android, the RecyclerRefreshLayout is based on the SwipeRefreshLayout. support all the views, highly customizable, code simplicity, etc. really a practical RefreshLayout!

RecyclerRefreshLayout English | 中文版 RecyclerRefreshLayout based on the {@link android.support.v4.widget.SwipeRefreshLayout} The RecyclerRefreshLayout

dinus_developer 1.7k Nov 10, 2022
A 3D Layout for Android,When you use it warp other view,it can became a 3D view,一秒让你的view拥有3D效果!

ThreeDLayout A 3D Layout,When you use it warp other view,it can became a 3D view 中文文档 preview USAGE 1.compile library allprojects { repositories {

androidwing 490 Oct 27, 2022
Added support to modify text size and indicator width based on the original TabLayout.

XTabLayout——可修改选中项字体大小和指示器长度的TabLayout XTabLayout是基于design包中的TabLayout进行了功能的扩展,在保留原有功能的基础上,增加了修改选中项字体大小、修改指示器长度以及限制屏幕显示范围内显示的Tab个数。 集成步骤: 1.添加XTabLayo

Kennor 660 Dec 20, 2022
Draftsman is an on device layout inspector which can be embedded in your android app.

Draftsman Draftsman is an on-device layout inspector for Android apps. It allows you to view various properties of rendered Android Views such as widt

Gojek 243 Dec 22, 2022
GoolgePlusLayout is a custom layout that plays animation on the children views while scrolling as the layout in the Google Plus (android) main page

Google Plus Layout Google Plus Layout is a custom layout that support playing animation on child view(s) in a serialize manner like the the main

Ahmed Nammari 224 Nov 25, 2022
null 2.4k Dec 30, 2022
An Android Layout which has a same function like https://github.com/romaonthego/RESideMenu

ResideLayout An Android Layout which has a same function like https://github.com/romaonthego/RESideMenu. Can be used on Android 1.6(I haven't try it.)

Yang Hui 392 Oct 12, 2022
a custom pull-to-refresh layout which contains a interesting animation

This is a project with custom pull-to-refresh layout which contains a interesting animation. And the animation is inspired by https://dribbble.com/sho

ZhangLei 1.8k Dec 27, 2022
Linear Layout Manager which supports WRAP_CONTENT

Linear Layout Manager DEPRECATED RecyclerView supports WRAP_CONTENT starting from Android Support Library 23.2. More details here: http://android-deve

Sergey Solovyev 418 Nov 10, 2022