How to set different percentages for Mobile & Tablets

Question

I am currently using android.support.percent API

My sample code

<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="40%"
     app:layout_heightPercent="40%"
     app:layout_marginTopPercent="15%"
     app:layout_marginLeftPercent="15%"/>
</android.support.percent.PercentRelativeLayout/>

My problem:

Percent relative layout fit correctly in Tablets... But some views are display very small in mobile phone.

So I want to increase the percentage for phone only.. not tablets.

My question:

How to set different percentage for phones & tablet using percent relative layout.(like different dimensions)

app:layout_heightPercent="40%" // fit for tablet But I want to increase to 50% for phone..

Answer 1

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

Answer 2

You should take a look at my answer right here https://stackoverflow.com/a/39571409/6644403

Tablet size is large so use ur current layout with percentage with the qualifier "Large" or "X Large" and create another one with no qualifier or "Normal" qualifier for mobile, where you can change size of your view.

Answer 3

For a workaround you can use different layout folders for different screens. For phone layout folder and for tablet layout-large.

screen.xml for layout folder

<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="40%"
     app:layout_heightPercent="40%"
     app:layout_marginTopPercent="15%"
     app:layout_marginLeftPercent="15%"/>
</android.support.percent.PercentRelativeLayout/>

screen.xml for layout-large folder

<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="80%"
     app:layout_heightPercent="80%"
     app:layout_marginTopPercent="30%"
     app:layout_marginLeftPercent="30%"/>
</android.support.percent.PercentRelativeLayout/>