Develop Reference

How to set size of layouts in Android as a percentage of the sceen size

I have a ConstraintLayout with an inner ConstraintLayout and a inner linear layout in Android. Here you can see my code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="#+id/outerConstraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_marginTop="#dimen/_5sdp"
android:layout_marginBottom="#dimen/_8sdp"
android:layout_width="#dimen/_235sdp"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#drawable/rim"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.93"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.75">
</LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/innerConstraintLayout"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/linearLayout"
app:layout_constraintEnd_toStartOf="#+id/linearLayout"
android:layout_marginLeft="#dimen/_10sdp"
android:layout_marginRight="#dimen/_30sdp"
android:background="#drawable/rim"
android:padding="12dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/linearLayout"
>
<TextView
android:id="#+id/textView_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Inner Constrained Layout"
android:textColor="#000000"
android:textSize="#dimen/_10ssp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button_okay"
android:layout_width="match_parent"
android:layout_height="#dimen/_25sdp"
android:background="#color/colorGreen"
android:text="Okay"
android:textAllCaps="false"
android:textColor="#121212"
android:textSize="#dimen/_8ssp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.553"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The problem is that the two layouts have different proportions when being displayed on different screens (see screenshot):
This does not look good as depending on the used device the layouts look quite different regarding their proportions (width and height). Now my question is whether there is a way of just setting the layouts' width and height generally as a percentage of the screen size and thus make the proportions of the width and height of layouts independent of the screen size? Or how else would you design layouts sucht that their proportions between width and height is more or less independant of the screen size?
I'd appreciate every comment and will be happy if you share your experience on that issue?

Now my question is whether there is a way of just setting the layouts' width and height generally as a percentage of the screen size
It can be done using constarintLayout like this:
Take any view, give it android:layout_height="0dp" - now it will respect your constraints, in additions add to it app:layout_constraintHeight_percent="0.15"
Now the view got the height of 15% of the parent size.
the same can be done for the width android:layout_width="0dp"
together with app:layout_constraintWidth_percent="0.5" and now your view will take 50% of your parent size.
You can combine those 2 like this:
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent="0.5"
app:layout_constraintHeight_percent="0.15"
Now your view is both 15% of the parent Width and 50% the parent height, change those numbers and you can control your view size according to your needs.

<LinearLayout
...
android:layout_width="#dimen/_235sdp"
...
>
I assume in #dimen/_235sdp you have a value of 235dp. If so, that line gives your LinearLayout fixed width of 235dp on all devices, so you can't expect it to scale percentage-wise.
Try using a vertical Guideline with percentage value and remove all other fixed sizes:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/outerConstraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"/>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_marginTop="#dimen/_5sdp"
android:layout_marginBottom="#dimen/_8sdp"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#android:color/holo_red_dark"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline"
app:layout_constraintEnd_toEndOf="parent">
</LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/innerConstraintLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="#dimen/_10sdp"
android:layout_marginEnd="#dimen/_30sdp"
android:background="#android:color/holo_blue_dark"
android:padding="12dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline">
<TextView
android:id="#+id/textView_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Inner Constrained Layout"
android:textColor="#000000"
android:textSize="#dimen/_10ssp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button_okay"
android:layout_width="match_parent"
android:layout_height="#dimen/_25sdp"
android:background="#android:color/holo_green_light"
android:text="Okay"
android:textAllCaps="false"
android:textColor="#121212"
android:textSize="#dimen/_8ssp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
In the updated code I added a vertical guidline splitting the screen to 0.3 and 0.7, then I constrained the inner layouts against the guideline to keep the ratio. Now on any device, you should see the left inner layout taking always 0.3 of the width, and the right inner layout taking always 0.7 of the width.
Tip: try avoiding ConstraintLayout inside ConstraintLayout, it should be fully possible to constrain the inner content (i.e. TextView, Button) against the parent ConstraintLayout without breaking the layout.

I had almost the same problem and to solve this problem, I divided each layer into two modes (mobile and tablet) (the Android system itself can recognize the sizes) and expanded both.
In this way, my work was more regular and changes in the next modes were easily possible for me.
my solution:
Make your resource like this.
res/layout/my_layout.xml
layout for normal screen size ("default")
res/layout-large/my_layout.xml
layout for large screen size
If you do not know how to create a layout-large folder, all you have to do is create a folder with the same name in the Project Explorer path and place your layer there.
Then Android itself will automatically be placed in a separate folder for each layer you have in the Android Studio Live folder.
For example, the activity_main folder consists of two layers as shown below

First of all simplify views tree. Use virtual layouts instead of nesting. You can use Guideline, Flow, attribute app:layout_constraintDimensionRatio or chains with weight for ConstraintLayout's children to use needed proportions.
This article may help you
Another way is to create different layout with qualifiers. Would be better to use single layout for better design management.

Android Normal Layout is displayed differently on devices

I'm relatively new in the area of App Development and still cant get behind the proper way to set up an xml file (in this case for a normal layout) to fit every mobile device that uses this layout type.
For example: I have a Pixel 2 Emulator and a Nexus 5 Emulator (both use the normal layout). However the result on the screen looks different on the devices:
Pixel 2 (1080x1920 - 420dpi): https://i.stack.imgur.com/5zmZ3.png
Nexus 5 (1080x1920 - xxhdpi): https://i.stack.imgur.com/sSLtb.png
After some research in the Google developers section about Device compability I found out that it could be due to the different pixel densities, but I have no clue how to fix this.
The xml code of this layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="#drawable/mybackground"
tools:context=".Start">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="#00FFFFFF"
android:padding="5dp"
android:scrollbars="none"
android:layout_below="#id/name_add"
android:layout_marginTop="15dp"
android:layout_marginBottom="160dp"
android:layout_marginStart="200dp"
/>
<EditText
android:id="#+id/name_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="100dp"
android:layout_marginTop="200dp"
android:width="180dp"
android:ems="10"
android:hint="Name"
android:importantForAutofill="no"
android:inputType="text"
android:singleLine="true"
android:textColor="#424242"
android:textColorHint="#424242"
app:backgroundTint="#585858" />
<ImageButton
android:id="#+id/btn_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/name_add"
android:layout_marginBottom="11dp"
android:layout_toEndOf="#id/name_add"
android:layout_marginStart="9dp"
android:src="#drawable/ic_plus"
android:background="#android:color/transparent"
android:contentDescription="add"/>
<Button
android:id="#+id/goToSelection"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="520dp"
android:background="#drawable/play_btn"
android:fontFamily="sans-serif"
android:paddingTop="2dp"
android:paddingBottom="2dp"
android:text="#string/btn_play"
android:textAllCaps="false"
android:textSize="20sp"
/>
<Button
android:id="#+id/languagegbr"
android:layout_width="45dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="15dp"
android:layout_marginBottom="15dp"
android:background="#drawable/gbr"
/>
<Button
android:id="#+id/languagedr"
android:layout_width="45dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="15dp"
android:layout_marginBottom="55dp"
android:background="#drawable/germanyr"
android:visibility="gone"/>
</RelativeLayout>
All of the images will later be replaced by vector graphics.
My question now is, how I can make my layout on the Nexus 5 (and on any other mobile device with a resolution of 1080x1920 or that uses the normal layout in general) look the same as it looks on the Pixel 2?

I've struggled with this kind of issues for a long time.
This stuff happens when you mess too much with dp's in margins and paddings usually. Given that dp's stay almost equal between different phone sizes, you will get variations of your display, such as the one you're showing us.
The way I solved it is by using Constraint Layout. It's very simple to use, and it has a lot of advantages. If there's no particular reason why you're not using Constraint Layout I highly suggest you to start now.
In a Constraint Layout all you need to do for your error to be solved is set the horizontal constraints to the parent and that's it.
<androidx.constraintlayout.widget.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=".login.YourActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Just by saying you'll be attached to your parent's left and right, sets the view right in the middle of your screen. Of any screen actually.

how to add tablet resolution support in Android Studio

Using ConstraintLayout I saw this problem: on phones, the resolution of my widgets is normal and takes up almost all of the
screen space:
But when I switch to the resolution of the tablets, all the widgets become small and cannot be viewed on the screen:
How to make the resolution of widgets look normal on all resolutions and devices?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TableLayout
android:id="#+id/table_l"
android:layout_width="297dp"
android:layout_height="329dp"
android:layout_weight="1"
android:layout_x="57dp"
android:layout_y="202dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</TableRow>
</TableLayout>
<Button
android:id="#+id/st"
android:layout_width="178dp"
android:layout_height="wrap_content"
android:layout_x="120dp"
android:layout_y="112dp"
android:text="start"
app:layout_constraintBottom_toTopOf="#+id/table_l"
app:layout_constraintEnd_toEndOf="#+id/table_l"
app:layout_constraintHorizontal_bias="0.495"
app:layout_constraintStart_toStartOf="#+id/table_l"
app:layout_constraintTop_toTopOf="parent"
android:layout_weight="1"
app:layout_constraintVertical_bias="0.647" />
<TextView
android:id="#+id/X_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
android:layout_x="118dp"
android:layout_y="608dp"
android:text="x:"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/O_text"
app:layout_constraintStart_toStartOf="#+id/O_text"
app:layout_constraintTop_toBottomOf="#+id/O_text" />
<TextView
android:id="#+id/O_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
android:layout_x="116dp"
android:layout_y="661dp"
android:text="o:"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/table_l"
app:layout_constraintHorizontal_bias="0.153"
app:layout_constraintStart_toStartOf="#+id/table_l"
app:layout_constraintTop_toBottomOf="#+id/table_l"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="27dp"
android:layout_height="47dp"
android:layout_marginTop="36dp"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.139"
app:layout_constraintStart_toEndOf="#+id/O_text"
app:layout_constraintTop_toBottomOf="#+id/table_l"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView4"
android:layout_width="25dp"
android:layout_height="45dp"
android:layout_marginBottom="52dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.151"
app:layout_constraintStart_toEndOf="#+id/X_text"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:layout_constraintVertical_bias="0.571" />
</androidx.constraintlayout.widget.ConstraintLayout>

You should create layout xml files for different screen size. For example; If your app running in Tablet(7 inch), you must create new layout as a layout-sw600dp.
Look at this link for more details.

You should stop using fixed sizes and x/y positions for layouts. There might be exceptions, but in general, all views should be able to dynamically resize themselves. That means, you almost never use fixed values for widths but instead wrap_content or match_parent. After 4 years of android development I also have to find one case where I ever needed the layout_x and layout_y XML tags.
Otherwise, this layout will be small on big screens and it won't fit on small screens.
For 90% of layouts, all you need is ConstraintLayout and maybe LinearLayout. RelativeLayouts have become mostly obsolete.
Explaining how to properly arrange your ui would be to exhaustive here. Instead, I recommend you to take the time to go through a tutorial like this google codelab on building a responsive UI with constraintlayouts. If done correctly, you can build one UI which looks good an smartphones and tablets.
But if you want to have an entirely different layout for tablets, then #Mustafa Yanık's approach is correct. Then you need to create a second layout in a different subfolder.

Android relative layout using dp jumps all over

I've tried to match as exactly as possible the tablet this is being designed for, a Samsung Tab S2 - 9.7" screen size, 2048x1536 - I've created an AVD to match that.
I've lined up the images as shown here:
But when I deploy it, they jump around, as shown here:
They get even worse depending on other tablets, but I'm just trying one for now. I'm using a full screen relative layout with DP for the dimensions and margins, so why do they jump around so much? Shouldn't it always be the same distance from the top/sides? How come even though the dimensions and pixels match exactly in the AVD and the tablet, it moves around?
I'm completely lost, I've read everything I can from setting margins in code to absolute layouts (no longer supported). Everything points back to DP, but even using an exact match tablet and designer, they change location and size.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_buttons"
tools:context="com.cimulus.samocoseat.MainMenu">
<!-- This FrameLayout insets its children based on system windows using
android:fitsSystemWindows. -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fullscreen_content_controls_a"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="UselessParent">
<ImageView
android:id="#+id/seatView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/seat"
android:layout_marginTop="60dp"
android:layout_marginBottom="60dp"
android:layout_marginLeft="245dp"
/>
<ImageButton
android:layout_width="124dp"
android:layout_height="75dp"
android:text="Seat Back Forward"
android:id="#+id/seatBackForward"
android:background="#drawable/left_inactive"
android:layout_marginTop="266dp"
android:layout_marginStart="38dp" />
<Button
android:layout_width="124dp"
android:layout_height="75dp"
android:text="Seat Back Forward"
android:id="#+id/legRightExtension"
android:background="#drawable/left_inactive"
android:layout_marginTop="142dp"
android:layout_marginLeft="100dp" />
</RelativeLayout>
</FrameLayout>
Any help is greatly appreciated.
Edit: I've also tried the relative layout existing on it's own, which gives me the same results overall:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fullscreen_content_controls_a"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_buttons">
<ImageView
android:id="#+id/seatView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/seat"
android:layout_marginTop="60dp"
android:layout_marginBottom="60dp"
android:layout_marginLeft="245dp"
/>
<ImageButton
android:layout_width="124dp"
android:layout_height="75dp"
android:text="Seat Back Forward"
android:id="#+id/seatBackForward"
android:background="#drawable/left_inactive"
android:layout_marginTop="266dp"
android:layout_marginStart="38dp" />
<Button
android:layout_width="124dp"
android:layout_height="75dp"
android:text="Seat Back Forward"
android:id="#+id/legRightExtension"
android:background="#drawable/left_inactive"
android:layout_marginTop="142dp"
android:layout_marginLeft="100dp" />
</RelativeLayout>

I had a similar problem and someone suggested using this library - https://github.com/intuit/sdp . It provides units, that are automatically scaled across devices with different screen characteristics. Hope it helps :)

Android Single Layout to FIt All Screen Sizes

I am updating my Android app and realized that I have created a layout for every possible screen size (layout-small, layout-large, etc...) It would be a huge pain to go through every XML file and manually make a small change. I am attempting to create a single XML file to support all screen sizes. After reviewing the Android documentation and other questions on stackoverflow, it seems LinearLayout is the best choice as you can provide a weightSum and layout_weight for each item in the layout. This is not working as expected (see below code and images). I am doing this correctly? Do I have to go back to creating a RelativeLayout for every possible screen size?
My images are an a single drawable folder and my layouts are in a single layout folder.
XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg"
android:gravity="center"
android:orientation="vertical"
android:weightSum="100" >
<ImageButton
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/image0"
android:background="#null"
android:layout_weight="30" />
<ImageButton
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/image1"
android:background="#null"
android:layout_weight="30" />
<ImageButton
android:id="#+id/key"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="30"
android:background="#null"
android:src="#drawable/image0_key" />
<TextView
android:id="#+id/tvScore"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Score: 0"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_weight="10"
android:layout_gravity="left" />
</LinearLayout>
Resulting View (overflow of items and layout not consistent for screen sizes)
Nexus One:
Tablet:
EDIT:
I have added the following drawable-____ folders. It produces the same result.

You might want to consider creating compatibility layout folders. :)

Yes we have a solution for the same by using android's percent layout we can now use app:layout_heightPercent and app:layout_widthPercent to fit all the screens using single layout.
compile 'com.android.support:percent:23.0.0'
Why use LinearLayout weight property now we have simpler solution.
Demo HERE !
GitHub project HERE !
Consider a simple sample
<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:id="#+id/fifty_huntv"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff7acfff"
android:text="20% - 50%"
android:textColor="#android:color/white"
app:layout_heightPercent="20%"
app:layout_widthPercent="50%" />
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toRightOf="#id/fifty_huntv"
android:background="#ffff5566"
android:text="80%-50%"
app:layout_heightPercent="80%"
app:layout_widthPercent="50%"
/>
</android.support.percent.PercentRelativeLayout>
Hope it's useful for someone :-)

Use Below layout for arranging your ImageButton and TextView. It works for all screen size Layouts.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3" />
<ImageButton
android:id="#+id/imageBtn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageBtn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Score: 0" />
</LinearLayout>

Never put an weight sum like hundred ,just try using single digits

DisplayMetric dm =new DisplayMetric();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int h= dm.heightPixels;
int w= dm.widthPixels;
h=h/10; // 10 is for example for 10% of display height
w=((w*20)/100); // 20%of display width
LinearLayout.LayoutParams params= new LinearLayout.LayoutParams(w,h);
YourObject.setLayoutParams(params);
//(YourObject) can be everything such as button , image button, textview,...

There are two issues here, one is to fill the size of the screen and the other is supporting the various resolution sizes of mobiles. Even within xxxhdpi, there are variations as new flagship Samsung Mobiles are drifting to 19.5 x 16.
Linear layout along with weight attributes does give a good coverage but beware of the nested tags and performance. It worked out well for most of the scenarios I have handled.
In addition, as pointed out in other answers, different drawables/resources for the standard sizes helps maintaining similar view in all devices.