How to automaticaly resize view depending the mobile screen size

Question

Im trying to design a CardView to implement it in a RecyclerView whith a GridLayout. I designed the cardView but when I prove my design in different mobiles with different screen sizes the design doesn't scale itself. I used "dp" unity and "sp" unity like "Android developers" page shows.I don't know if I must create a design for each screen size or each screen density.

Can you help me?

Code:

<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:cardCornerRadius="6dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="true"
android:id="@+id/dlvsr_CardView">


<LinearLayout
    android:layout_width="170dp"
    android:layout_height="170dp"
    android:orientation="vertical"
    android:padding="4dp">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_launcher_background" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="Text view tittle"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Text view subtittle" />
</LinearLayout>

Here are the examples:

https://i.stack.imgur.com/nRpBY.png

https://i.stack.imgur.com/scL7K.png

https://i.stack.imgur.com/lrCyZ.png

https://i.stack.imgur.com/REzt7.png

Yes, unlesss I use 0 margins, the dp is useless when chaging to different screen sizes, it doesn't scale properly — Ronen Festinger, May 14 '22 at 21:57

Anisuzzaman Babla · Answer 1 · 2018-08-08T09:23:54.247

3

You don't have to create different design for each screen size. But at least you have to use different dimension for each screen.

To do that

You have to create Different values folder for different screens . Like

values-sw720dp          10.1” tablet 1280x800 mdpi        
values-sw600dp          7.0”  tablet 1024x600 mdpi  

values-sw480dp          5.4”  480x854 mdpi     
values-sw480dp          5.1”  480x800 mdpi   

values-xxhdpi           5.5"  1080x1920 xxhdpi    
values-xxxhdpi           5.5" 1440x2560 xxxhdpi  

values-xhdpi            4.7”   1280x720 xhdpi     
values-xhdpi            4.65”  720x1280 xhdpi 

values-hdpi             4.0” 480x800 hdpi    
values-hdpi             3.7” 480x854 hdpi        

values-mdpi             3.2” 320x480 mdpi        

values-ldpi             3.4” 240x432 ldpi    
values-ldpi             3.3” 240x400 ldpi
values-ldpi             2.7” 240x320 ldpi

Create a new dimens.xml file by right clicking all the values folder and choosing New > Values resource file. Write dimens for the name. (You could also call it dimen or dimensions. The name doesn't really matter, only the dimen resource type that it will include.)

Add a dimen name and value.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="my_value">16dp</dimen>
</resources>

Values can be in dp, px, or sp.

Use the value in xml

<TextView
    android:padding="@dimen/my_value"
    ... />

or in code

float sizeInPixels = getResources().getDimension(R.dimen.my_value);

edited Aug 08 '18 at 09:23

answered Aug 08 '18 at 08:51

Anisuzzaman Babla

6,510
7
36
53

How can I change de dimension for each screen size?? – ProRiderZ115 Aug 08 '18 at 09:08
You have to create Different values folder for different screens. Follow this https://stackoverflow.com/a/32861248/4972317 – Anisuzzaman Babla Aug 08 '18 at 09:17
But when i create that folders with the dimensions.xml inside, what is the way to attach the dimens for each size screen? – ProRiderZ115 Aug 08 '18 at 11:46
You don't have to worry about it. Android will do it for you. – Anisuzzaman Babla Aug 08 '18 at 12:11
Could you give an example please? – ProRiderZ115 Aug 09 '18 at 13:15
Android will automatically select different value folder for different screen size. – Anisuzzaman Babla Aug 09 '18 at 13:24
yes, but i don't know the way to create that folders correctly with proper names.I need that, Could you help? Maybe in a private chat if you want – ProRiderZ115 Aug 09 '18 at 18:54

score 1 · Accepted Answer · answered Aug 08 '18 at 09:25

You can use this library for sp and this for dp for all screen sizes. It has different dimen.xml with values respected to the different dpi.

This is the simplest solution to your problem.

Add all the ssp and sdp XML in your res->values-> to your project and then in UI xml use them like below.

<android.support.design.widget.TextInputLayout
        android:id="@+id/textEmailAddressInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignStart="@+id/textView"
        android:layout_below="@+id/textView"
        android:layout_marginTop="@dimen/_10sdp"
        android:textSize="@dimen/_14ssp">

In above usage example you can see I have used 14ssp as android:textSize and 10sdp for android:layout_marginTop which will be adjusted according to the dpi of all screen, this will work for all mobile size, tablet and even with Android TV.

Please let me know if you need more info on this.

this two libraries work as I need, but trying some designs, when I change landscape to portrait or viceversa the resizing is not good for me. Maybe is better for that to create different layouts for each views(Landscape and Portrait)? — ProRiderZ115, Aug 09 '18 at 19:44
@ProRiderZ115 Yes you can create the layout-land folder for landscape layouts. — Pankaj Mundra, Aug 10 '18 at 04:00
@ProRiderZ115 Have a look at this https://stackoverflow.com/questions/4572496/different-layouts-for-horizontal-and-vertical-for-an-android-app — Pankaj Mundra, Aug 10 '18 at 04:00

score 0 · Answer 3 · answered Aug 08 '18 at 09:15

0

You can use ConstraintLayout instead of LinearLayout and constraints view vertically and horizontally. it will be compatible with the different screen sized automatically.

answered Aug 08 '18 at 09:15

Emadi_mehrdad

146
1
2
16

How to automaticaly resize view depending the mobile screen size

3 Answers3