I am able to set the position of the UI elements based on screen size using horizontal & vertical bias in constraint layout.
But the width and height of the UI elements are not changing based on screen size so it still looks imperfect.
So how i can able to achieve this?
below is my source code :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
tools:context="com.satizh.android.constraintlayouttest.MainActivity">
<Button
android:id="@+id/button"
android:layout_width="125dp"
android:layout_height="47dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
android:layout_weight="68"
android:text="5%V30%H"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.050000012" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginTop="0dp"
app:layout_constraintTop_toBottomOf="@+id/button"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="0.915"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="0dp"
app:layout_constraintVertical_bias="0.138" />
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.14" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline2"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.05" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline3"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline4"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.53" />
</android.support.constraint.ConstraintLayout>
I have created some guidelines ( percentage wise ) so that we can guess how the UI button should actually look based on screen when we rotate the device. here is the gif for better understanding.
If you have the choice start with ConstraintLayout, but if you already have your app in RelativeLayout, stay with it. That's all I have been following. RelativeLayout is very limited in functionality and many complex layouts can't be made using it, especially when ratios are involved.
ConstraintLayout has dual power of both Relative Layout as well as Linear layout: Set relative positions of views ( like Relative layout ) and also set weights for dynamic UI (which was only possible in Linear Layout). Despite the fact that it's awesome, it fails to serve the purpose with simple UI layouts.
Use Coordinatorlayout as the top-level application decor. It will usually used to layout AppBarLayout , FloatingActionButton , and the main body of your screen, say NestedScrollView . Inside the NestedScrollView use ConstraintLayout to describe the rest of the layout as a flat hierarchy.
A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way. Note: ConstraintLayout is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread).
If you want the button to take all the horizontal space between two guidelines, then make its width be 0dp and constraint button's left and right edges to appropriate guidelines.
<Button
android:layout_width="0dp"
app:layout_constraintStart_toEndOf="@id/guideline3"
app:layout_constraintEnd_toStartOf="@id/guideline4"
... />
You'll get this output for portrait:
And this for landscape:
For addressing the vertical space, make the height 0dp and constraint button's top and bottom edges to appropriate guidelines.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
tools:context="com.satizh.android.constraintlayouttest.MainActivity">
<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
android:layout_weight="68"
android:text="5%V30%H"
app:layout_constraintBottom_toTopOf="@+id/guideline"
app:layout_constraintLeft_toLeftOf="@+id/guideline3"
app:layout_constraintRight_toLeftOf="@+id/guideline4"
app:layout_constraintTop_toTopOf="@+id/guideline2" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
android:text="box"
app:layout_constraintBottom_toTopOf="@+id/guideline8"
app:layout_constraintLeft_toLeftOf="@+id/guideline5"
app:layout_constraintRight_toLeftOf="@+id/guideline6"
app:layout_constraintTop_toTopOf="@+id/guideline7"
app:layout_constraintHorizontal_bias="0.0" />
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.17" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline2"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.05" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline3"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline4"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.53" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline5"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6510417" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline6"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8802083" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline7"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2994129" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline8"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.42" />
</android.support.constraint.ConstraintLayout>
Corresponding output:
you seem to have forgotten to set your constraints for the buttons apparently
android:layout_constraintLeft_toRightOf="@+id/guidelineX"
and not parent
you may also click on the small circles and drag them to the guidelines in the layout view
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With