Instagram Profile UI in Jetpack Compose - Android Studio Tutorial

Поділитися
Вставка
  • Опубліковано 19 вер 2024
  • In this video, you'll learn to make the profile page of Instagram in Jetpack Compose.
    ⭐ Get certificates for your future job
    ⭐ Save countless hours of time
    ⭐ 100% money back guarantee for 30 days
    ⭐ Become a professional Android developer now:
    pl-coding.com/...
    💻 Let me personally review your code and provide individual feedback, so it won't backfire and cost you a fortune in future:
    elopage.com/s/...
    Get the source code for this video here:
    github.com/phi...
    Regular programming advice on my Instagram page: / _philipplackner_
    Checkout my GitHub: github.com/phi...
    You like my free content? Here you can buy me a coffee:
    www.buymeacoff...

КОМЕНТАРІ • 106

  • @theanswerga
    @theanswerga 3 роки тому +9

    I see you're a man of culture

  • @alij3fer
    @alij3fer 3 роки тому +24

    Philipp with MiaKhalifa 🤣😂😂

    • @xCrawfly
      @xCrawfly 4 місяці тому

      I was watching the tutorial and suddently I realiced that 😂You won me on comment it out here

  • @sarankumar_ns
    @sarankumar_ns 3 роки тому +46

    Followed by miakhalifa 🤣

    • @ChrisAthanas
      @ChrisAthanas 3 роки тому +2

      Philipp has a lot of jokes like that

    • @AYJ959
      @AYJ959 2 роки тому

      😂😂

  • @zachariamwalwama
    @zachariamwalwama 3 роки тому +1

    Now i can migrate to Jetpack, I will always remember this awesome tutorial

  • @chuka_obi5167
    @chuka_obi5167 2 роки тому +4

    I love this video! It was so educational and I learnt a lot from it! Thank you Philipp!!

  • @salvadorjohndeniel
    @salvadorjohndeniel 2 роки тому +4

    24:16
    Philipp: Mia Khalifa, Whoever that is?
    Me: HEHEHE

  • @Kunal-jp8tn
    @Kunal-jp8tn 2 роки тому +2

    Great Tutorial.. Would love to see more of the UI builds.....

  • @Tensordroid
    @Tensordroid 3 роки тому +4

    Awesome tutorial, thank you so much, learned a lot form it !😊

  • @MrSojek
    @MrSojek 3 роки тому +4

    Mechanical keyboards are great remedy for hangover.

  • @Denis0Kor
    @Denis0Kor 3 роки тому +1

    Great tutorial about JetPack Compose, thanks a lot!

  • @themindsetgarage
    @themindsetgarage 2 роки тому +3

    Nice one Phillipp. I request you make a cool nav bar drawer with compose. One that uses animation to draw the drawer.

  • @vimaldubey8179
    @vimaldubey8179 2 роки тому +1

    great tutorials and great instagram followers in this ui....🙂

  • @abelmengesha3773
    @abelmengesha3773 2 роки тому +2

    Great to see that mia khalifa follows you. 🤣 Your tutorials stood out that even attracted other industries.

  • @GRZlllBadman
    @GRZlllBadman Рік тому +1

    lets make a Spotify one Philipp !!!

  • @yousefkazemi785
    @yousefkazemi785 2 роки тому

    Hey Philipp, thank you for the course.

  • @venkatesh4307
    @venkatesh4307 3 роки тому +1

    Thanks Philipp

  • @luckydevil1601
    @luckydevil1601 2 роки тому

    Amazing tutorial, thank you so much!!! 😍

  • @LuanPedro2107
    @LuanPedro2107 3 роки тому

    Compose is Live !!

  • @tonnie7079
    @tonnie7079 2 роки тому

    10:59 Surprise, Surprise the composable takes a modifier again!! Good Humor and your way of teaching is out of this world. My main takeaway today was the TabRow composable and several other tricks you showed on the Video. Armed with this knowledge I will now go ahead and clone my Twitter profile.

  • @shreyashchoudhary7413
    @shreyashchoudhary7413 3 роки тому

    Awaited!

  • @judefrancis
    @judefrancis 3 роки тому

    Great content, thank you Philipp 👍

  • @ambermalandkar1138
    @ambermalandkar1138 3 роки тому

    the keyboard is fine man , nice video

  • @dmytromarchuk3023
    @dmytromarchuk3023 2 роки тому +1

    Thanks for your videos.
    Some suggestions:
    28:20 I'd use a scope function (?.run, ?.let, ?.apply) instead of null checking

    • @twojaStara698
      @twojaStara698 2 роки тому

      Bro those functions should be used in more dynamic situations like observing livedata. There is no need to keep that much safe when data doesnt change while using in normal situations

    • @farazahmed7
      @farazahmed7 Рік тому +3

      @@twojaStara698 nope. That's how you null check in Kotlin. It is a standard practice in Kotlin.

    • @Priyanshu-nq8rm
      @Priyanshu-nq8rm Рік тому

      ​@@farazahmed7oho

  • @galanteria01
    @galanteria01 3 роки тому

    Amazing content man.

  • @xandrviking1113
    @xandrviking1113 Рік тому

    Awesome t-shirt 👍

  • @mikevaskiv2801
    @mikevaskiv2801 2 роки тому

    Thank you for your videos!

  • @ahmadbanikamali6936
    @ahmadbanikamali6936 2 роки тому

    Great tutorial

  • @mustafaammar551
    @mustafaammar551 3 роки тому

    very cool Bro
    wish you all the best 👍👍👍👍🔥🔥🔥🔥

  • @jatinsingalEARCS
    @jatinsingalEARCS 2 роки тому

    please bring more videos like this

  • @dz9ro648
    @dz9ro648 Рік тому +4

    Bro realy thought that he could hide miakhalifa 😂

  • @r.j.jeninjoseph4975
    @r.j.jeninjoseph4975 3 роки тому

    Good content keep going so much useful

  • @bipinbharti6540
    @bipinbharti6540 Рік тому

    Awsome video very help full me

  • @re_allyedge
    @re_allyedge 3 роки тому +1

    Sheeeeesh 🥶🥶🥶

  • @harwinderbenipal5332
    @harwinderbenipal5332 Рік тому

    Hi PL, Why are you creating top bar manually and in the last video in meditation ui you created bottom bar manually. Why you don't use default components provided by andorid e.g. BottomAppBar, TopAppBar?

  • @princepatel4864
    @princepatel4864 3 роки тому

    Thank you for this video sir

  • @user-ed8xj1py6w
    @user-ed8xj1py6w 9 місяців тому

    Hi Philipp . One question. Video (30.40) when I add ProfileScreen ButtonSession (modifir = modifir.fillMaxWidth) for some reason the buttons do not stretch along the entire length. What could it be? I follow your example.

  • @vathsan3906
    @vathsan3906 3 роки тому +2

    Make Similar for Feed and all other screens in Instagram too

  • @mr_h_and_m
    @mr_h_and_m 3 роки тому

    Big fan bro!

  • @Rafael-hk9pg
    @Rafael-hk9pg 2 роки тому

    24:17 Yea, who's that Philipp?

  • @reza_hm
    @reza_hm 2 роки тому

    It will be great if you can flow material design along with... My whole android team follows

  • @onlyyoutube8269
    @onlyyoutube8269 Рік тому

    is it the great time to watch it today? Or should i consider new uploads on your channel?

  • @АйратХайруллов-я3б

    Thanks a lot!

  • @aliveli2941
    @aliveli2941 3 роки тому

    excellent video

  • @kratom82
    @kratom82 3 роки тому

    Great compose tutorial. How did you get so much space above the "profilename", did you changed something in the manifest?

  • @JohannesTeichert
    @JohannesTeichert 3 роки тому

    is that posttabview the same as when you would implement a full screen tab bar navigation layout?

  • @user-vc9xf7oq1e
    @user-vc9xf7oq1e Рік тому

    Spotify for sure

  • @AbdulWahab-kk1hs
    @AbdulWahab-kk1hs 3 роки тому

    Wonderful

  • @arielapp9469
    @arielapp9469 2 роки тому

    "followed by, codinginflow..... and our dear miakhalifa, whoever that is" underrated comment, I almost spilled my coffee.

  • @vaibhavjaiswal5911
    @vaibhavjaiswal5911 3 роки тому +1

    Can u make Spotify UI, or netflix UI?

  • @apptech9712
    @apptech9712 2 роки тому

    hey can you tell me how instagram approaches the posts Cache and maintain data for one fragment if we switch to another one...and update data on fragment if data has changes

  • @ARIHANTJAIN27
    @ARIHANTJAIN27 2 роки тому

    Did you tried to rotate you screen? UI is not as per expectation. Scroll is not working.

  • @mudassirhussain1241
    @mudassirhussain1241 3 роки тому

    awesome content thank you and how to splash secreen in jetpack compose

  • @clamum9648
    @clamum9648 2 роки тому +1

    Yo big 🐕
    Do you have a video explaining how to have an image picker and then storing the resulting image in a database (either its data/bytes or its URI)?
    I've basically got it working, I guess, but I don't know if it's better to store the image data itself or just the URI. I'd prefer the URI but it's so easy to move images around on a device (like to a different folder/album) that I could see images easily being broken due to being moved. Then if you store data you'll need to resize the images because you don't want to be storing 5 MB images in the db, and that would be pointless anyway since it'll be just a thumbnail in the app. 🤯🤯🤯

  • @beginnercoding1089
    @beginnercoding1089 3 роки тому

    When we change orientation to the horizontal, we see only half screen and can't to scroll. How to solve that problem in compose?

    • @ARIHANTJAIN27
      @ARIHANTJAIN27 2 роки тому

      You can add modifier with Scroll vertical property

  • @Frozen_Priest
    @Frozen_Priest 3 роки тому

    Hoped to see how staggered scroll works. Sad

  • @shohagkhan3677
    @shohagkhan3677 2 роки тому

    Please make a CRUD app using Ktor client instead of Retrofit with dagger hilt.

  • @rafael36326
    @rafael36326 3 роки тому

    This version of the Android Support plugin for IntelliJ IDEA (or Android Studio) cannot open this project, please retry with version 2020.3.1 or newer.
    BUG
    GIT CLONE what`s ? how resolve?

    • @kratom82
      @kratom82 3 роки тому

      Note: Support for Jetpack Compose is included only in Beta and Canary versions of Android Studio. get to developer.android.com/codelabs/jetpack-compose-basics#0 and read how to prepare yourself for this ;)

  • @abhishektripathi6957
    @abhishektripathi6957 8 місяців тому

    Hi Philipp today i am watching this video and suddenly my eyes get on the the section in this screen where you write "Followed by codinginflow, miakhalifa" miakhalifa 🤣🤣🤣 i can not tell you how much i laugh after see miakhalifa

  • @dhanrajmakwana7930
    @dhanrajmakwana7930 2 роки тому

    Can you explain me responsive design in jetpack compose and create video ?

  • @rushidesai2836
    @rushidesai2836 3 роки тому +3

    Anyone noticed 'followed by miakhalifa'?

  • @niloysaha3904
    @niloysaha3904 3 місяці тому

    I saw that Followed by miaKhalifa after 17 mins of the video 😂😂😂

  • @zhanyshmasirov4611
    @zhanyshmasirov4611 2 роки тому

    danke

  • @deepmashru8951
    @deepmashru8951 Рік тому

    Wow this dude has connections with Mia khalifa😂😂😂

  • @yogesh9974
    @yogesh9974 2 роки тому

    Can you make a complete clone of Instagram

  • @Adam0001
    @Adam0001 2 роки тому

    Hello Philipp, thanks for your effort
    If you do not mind cloning Facebook and Spotify UI 😅,
    I'm sorry

    • @miracleukaka4085
      @miracleukaka4085 2 роки тому

      He already did that for Spotify. You can check it out.

    • @Adam0001
      @Adam0001 2 роки тому

      @@miracleukaka4085
      But not in jetpack compose

  • @shidqi100
    @shidqi100 3 роки тому

    Instagram build with react native isn't it? just curious

    • @jayeshseth
      @jayeshseth 3 роки тому

      React is made by facebook..thus all facebook apps are built in react

    • @farazahmed7
      @farazahmed7 3 роки тому

      Some parts of it are in RN not full

    • @garri5108
      @garri5108 2 роки тому

      that's why it's so shitty

  • @wheza99
    @wheza99 Рік тому

    I think I knew the answer, to why the "profile stuff" does not scroll along with the posts.
    You should put the material profile in the lazy Column/Lazy Row/lazy GridView.
    LazyGridView () {
    // Profile Code ---> You can use "Item Span".
    // Posts Code
    }

  • @Віталій-у7э9б
    @Віталій-у7э9б Рік тому

    in your T-shirt I read "putin" but then I realized that it should be "put in"

  • @abhijeetmule1521
    @abhijeetmule1521 2 роки тому

    lol Mia Khalifa who ever that is :)

  • @warTag68
    @warTag68 Рік тому

    It's very annoying that you have to code for so long without being able to see any kind of Preview.... OK there is a @Preview annotation but that is useless when a composable takes in many parameters, unless you are up for setting up @PreviewParameters which is a pain in the ass.
    Only option left is to relaunch emulator every time u want to double check your work. In this tutorial's case Phillip is just double checking with already made template and it's easier for him since he already built this UI prior.
    Building with XML is easier from UX perspective because u are able to see the layout, with Compose it's almost as if u have to do it in your brain combined with many compile/runs.

    • @PhilippLackner
      @PhilippLackner  Рік тому

      The preview has gotten a lot better and now usually works just fine

  • @عبدالرزاقخليفة-ج7ت

    can you make a tutorial about live wallpaper app where if you click a button it applies the live wallpaper on your screen, not like making the whole APK as a live wallpaper just making a button and if you click it it sets the GIF live wallpaper for you

  • @devdojohub
    @devdojohub Рік тому

    did anyone notice followed by miakhalifa 🥵

  • @HritikGupta722
    @HritikGupta722 2 роки тому

    Whoever that is .😂

  • @amitranjan3344
    @amitranjan3344 2 роки тому

    lol mia khalifa :D

  • @Ayor88
    @Ayor88 7 місяців тому

    those practical video are good but too far from reallity of a true project

    • @PhilippLackner
      @PhilippLackner  7 місяців тому +1

      This is not meant to teach you build a full project, but a full UI for a screen of a full project

  • @mertkavrayc58
    @mertkavrayc58 2 роки тому

    Followed by Mia Khalifa :)

  • @sug_madic7683
    @sug_madic7683 3 роки тому

    No one noticed followed by Mia Khalifa

  • @harisai3580
    @harisai3580 2 роки тому

    Followed by miaKhalifa. I didnt noticed atleast for 20 min

  • @shaikbasha4745
    @shaikbasha4745 2 роки тому

    lol.... you are followed by "Mia Khalifa"

  • @clo4k661
    @clo4k661 3 роки тому

    to do coding you need to calm down your mind,

  • @i_fahimkhan
    @i_fahimkhan 3 роки тому

    coding in flow followed you on Instagram but I don't understand why would "She" followed you
    like this comment you noticed that other person who followed philipp

  • @farazahmed7
    @farazahmed7 Рік тому

    what is the shortcut to format the code ?

  • @Firelordca4
    @Firelordca4 Рік тому

    "Followed by ...miakhalifa..." Phillipp, you rascal

  • @reza_hm
    @reza_hm 2 роки тому

    "miakhalifa" whoever that is 🤫

  • @عبدالرزاقخليفة-ج7ت

    can you make a tutorial about live wallpaper app where if you click a button it applies the live wallpaper on your screen, not like making the whole APK as a live wallpaper just making a button and if you click it it sets the GIF live wallpaper for you