How to use Percentage for android layout?
UPDATE 2018:
PercentRelativeLayout
and PercentFrameLayout
are deprecated. Consider using ConstraintLayout
Old Answer:
So far Android Support library has limited on where to use this:
with
RelativeLayout
android.support.percent.PercentRelativeLayout
with
FrameLayout
android.support.percent.PercentFrameLayout
How to use it?
Well, first make sure to include the dependency at
build.grade(Module: app)
in your android app.
dependencies {
compile 'com.android.support:percent:23.3.0'
}
Then navigate to your xml layout in this example (.MainActivity)
<android.support.percent.PercentRelativeLayout
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="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<Button
android:id="@+id/button"
android:text="Button"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
app:layout_widthPercent="30%"/>
<Button
android:id="@+id/button2"
android:text="Button 2"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/button"
app:layout_widthPercent="60%"/>
<Button
android:id="@+id/button3"
android:text="Button 3"
android:layout_height="wrap_content"
android:layout_below="@+id/button"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
app:layout_widthPercent="90%"/>
</android.support.percent.PercentRelativeLayout>
For more detail please check here:
Percentage width in a RelativeLayout
You are looking for the android:layout_weight
attribute. It will allow you to use percentages to define your layout.
In the following example, the left button uses 70% of the space, and the right button 30%.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:text="left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".70" />
<Button
android:text="right"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".30" />
</LinearLayout>
It works the same with any kind of View, you can replace the buttons with some EditText to fit your needs.
Be sure to set the layout_width
to 0dp
or your views may not be scaled properly.
Note that the weight sum doesn't have to equal 1, I just find it easier to read like this. You can set the first weight to 7 and the second to 3 and it will give the same result.
How to make ConstraintLayout work with percentage values?
You can currently do this in a couple of ways.
One is to create guidelines (right-click the design area, then click add vertical/horizontal guideline). You can then click the guideline's "header" to change the positioning to be percentage based. Finally, you can constrain views to guidelines.
Another way is to position a view using bias (percentage) and to then anchor other views to that view.
That said, we have been thinking about how to offer percentage based dimensions. I can't make any promise but it's something we would like to add.
How to set a layout width percentage of one third on ConstraintLayout?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android" >
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="3"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="2"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="3"/>
</LinearLayout>
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="3"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="4"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="5"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="6"/>
</LinearLayout>
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="3"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="7"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="8"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="9"/>
</LinearLayout>
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="3"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="10"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="11"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="12"/>
</LinearLayout>
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="3"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="13"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="14"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="15"/>
</LinearLayout>
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="3"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="16"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="17"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="18"/>
</LinearLayout>
</LinearLayout>
Android Percentage Layout Height
You could add another empty layout below that one and set them both to have the same layout weight. They should get 50% of the space each.
How to set different percentages for Mobile & Tablets
you can use smallest width dimens
<android.support.percent.PercentRelativeLayout
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"/>
<TextView
android:text="Completed"
app:layout_widthPercent="@fraction/width"
app:layout_heightPercent="@fraction/height"
app:layout_marginTopPercent="@fraction/margin_top"
app:layout_marginLeftPercent="@fraction/margin_left"/>
</android.support.percent.PercentRelativeLayout/>
and in dimens:
dimens.xml
<fraction name="width">40%</fraction>
<fraction name="height">40%</fraction>
<fraction name="margin_top">15%</fraction>
<fraction name="margin_left">15%</fraction>
and dimens.xml (sw 600dp)
<fraction name="width">40%</fraction>
<fraction name="height">50%</fraction>
<fraction name="margin_top">15%</fraction>
<fraction name="margin_left">15%</fraction>
you can see more detail for design screen here
Android - layout width/height percentage of a screen?
OK. This is the trick
In simple words: make a 1px (px, not dp - you don't want it scaled, but small enough to be trascurable!) TextView which will be your invisible (you leave it transparent and set no text in it) "center of the universe".
Then stretch your other TextView, but limit it to stay to the left (which is at 50% - 1/2 px) of the center and above (again, 50% - 1/2 px) it:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="@+id/centerPoint"
android:layout_width="1px"
android:layout_height="1px"
android:layout_centerInParent="true"
/>
<TextView
android:id="@+id/myText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="@id/centerPoint"
android:layout_above="@id/centerPoint"
/>
</RelativeLayout>
How to position views using percentage for top/left within container?
You could use a ConstraintLayout
https://developer.android.com/training/constraint-layout/index.html
A constraint layout will allow you to position a view based on percentages like you want using horizontal and vertical bias. For example:
<android.support.constraint.ConstraintLayout
android:id="@+id/constraint"
android:layout_width="match_parent"
android:layout_height="200dp">
<TextView
android:id="@+id/edition_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.33"
android:background="@android:color/holo_purple"
android:text="text"/>
</android.support.constraint.ConstraintLayout>
Just make sure the child view (the Textview) is constrained to the top and bottom so you can set vertical bias. And also start, end so you can set horizontal bias.
The result is this:
And this can be done programmatically also, see here for a good guide:
http://www.zoftino.com/adding-views-&-constraints-to-android-constraint-layout-programmatically
Android Layout with height in percent
Use a LinearLayout and layout_weight
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<View
android:layout_width="match_parent"
android:background="@color/blue"
android:layout_height="16dp" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@color/black"
android:layout_weight="1"/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/red"/>
</LinearLayout>
The Views can be changed to ConstraintLayouts
Related Topics
No Repository Found Error in Installing Adt in Eclipse Indigo
Reasons That The Passed Intent Would Be Null in Onstartcommand
How to Set Android Tablayout in The Bottom of The Screen
Change Progressbar Color Through Code Only in Android
User Does Not Have Permission to Access This Object . Firebase Storage Android
Can't Create New Kotlin Project After Updating to Android Studio 4.2
How to Place App Icon on Launcher Home Screen
How to Use Standard Attribute Android:Text in My Custom View
How to Resolve Target 'Android-16'
How to Set Margins for Textview Programmatically
How to Remove White Underline in a Searchview Widget in Toolbar Android
Change Navigation Bar Icon Color on Android
How to Close Android Soft Keyboard Programmatically
Android Studio and Android.Support.V4.App.Fragment: Cannot Resolve Symbol