The Ultimate guide to supporting all screen sizes in Jetpack Compose using Material 3 design

Просмотров 12 тыс.

% 305

Follow me on Instagram → lofcoding
GitHub → github.com/mohammednawas8
LinkedIn profile → bit.ly/3l66EVg
Check out my Playlists → bit.ly/3FFX1q5
Login screen video → ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TCBAWdwupjU.html
Design repository → github.com/lofcoding/ComposeLoginScreen
Window size class Dependency:
implementation "androidx.compose.material3:material3-window-size-class:1.1.0"
Want to support Land of coding? you can buy me a coffee → www.buymeacoffee.com/landofcodiq

Опубликовано:

20 июн 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 23

@Landofcoding Год назад

Join our small android discord community discord.gg/snFzU9dZqz Make sure to say Hi when you join 😁

@think-positive700 2 месяца назад

Very good

@anasfarhad2845 10 месяцев назад

Is this the best approach out there because lets say we want to target 20 android smartphone only devices with all having different screen sizes and resolution then having all the button sizes, spacing between UI components for all 20 devices can be a real time consuming process for just one screen. Is there an API that can handle it automatically or we have to go with this approach?. Let me know please because whenever I work on UI I come into this problem quite often.

@Landofcoding 10 месяцев назад

Actually, if you have a good ui design that sticks to the android ui guidelines, you won't need this. But i use this way when the screen is complex and should look good for all the sizes. I don't know if this is the best approach but im sure that there are different and easier approaches and i will make sure to make videos about that when i get more info about it

@hangyeollee-creuset5108 10 месяцев назад

What is the good UI design for an example ? Thanks a lot for your contribution

@anasfarhad2845 10 месяцев назад

@@hangyeollee-creuset5108 I also wants to know.

@Landofcoding 10 месяцев назад

@@hangyeollee-creuset5108 thats the designer's job, take a look at snapchat, facebook, instagram

@leonelp9593 3 месяца назад

I thinks there is an easier way (kinda) which is Using ConstraintLayout and work with percentages only

@henrik908 9 месяцев назад

How to make the Text Responsive ??

@bolero9932 4 месяца назад

why dont you allow us to save your vid into my playlists???

@tylerbrecht-eq5zs 11 месяцев назад

Where can I find this code? Can't find it in the links provided

@Landofcoding 11 месяцев назад

Switch to support-screen-sizes branch

@x86xFX Год назад

Subbed, Thank you

@ayoubdev 9 месяцев назад

can you please for testing give us the emulator you use in this video with every specific dimension class please

@Landofcoding 9 месяцев назад

I forgot what emulators i used, but from what i remember Pixel2 pixel6 and any tablet for large screen sizes

@exey.artwork 10 дней назад

your setup will stop working if the user runs the app on a non-standard display, plus this approach requires a lot of code. It seems to me that it is better to use calculated dp values width or height / k, where k - the required coefficient

@allanandliftedhands2669 Год назад

what is the name of the repository in github

@Landofcoding Год назад

Its in the description

@aleksandrnikolaev2914 9 месяцев назад

Why couldn't the jetpack compose designer make the dimensions in percentages like in html so that we wouldn't have to suffer from assigning dimensions for each individual screen?

@Landofcoding 9 месяцев назад

You can use that, but u sometimes you have to pass static value not a ratio, and you cant pass ratio to a text for example

@aleksandrnikolaev2914 9 месяцев назад

@@Landofcoding what exactly can I use you said? As far as I know, there are no percentages or anything like that in jetpack compose, right?

@Landofcoding 9 месяцев назад

@@aleksandrnikolaev2914 There are these modifiers : fillMaxSize(ratio: Float) fillMaxWidth(ratio: Float) fillMaxHeight(ratio: Float) and also the weight() modifier which can be used inside rows and columns