In my previous article, we have learned the Basics of DataBinding. Today, we are going to put the basics into action by implementing a profile screen using data-binding concepts. The profile screen will have profile details at the top and the below section will have post images in grid format. The grid will be achieved using a RecyclerView implementing the data-binding in adapter class.
Using DataBinding in an adapter class, keeps the code to very minimal as lot of things will be taken care in the layout itself.
This example needs basic knowledge in android data binding. Get started with DataBinding by reading the below tutorial.
Read: Android working with DataBinding
1. Create a new project in Android Studio from File ⇒ New Project and select Basic Activity from templates.
2. Enable DataBiding in app/build.gradle. Also add the RecyclerView and Glide dependencies and Sync the project.
3. Add INTERNET permission in AndroidManifest.xml as the images needs to be loaded from an URL.
4. Download res.zip and add to your projects res folder. These drawable folders contains plus icon necessary for FAB.
5. Add the below resources to respective strings.xml, dimens.xml and colors.xml
6. Create three packages named model, utils and view. Once created, move the MainActivity to view package.
Below is the final project structure and files required.
7. Create User class under model package. To make this class Observable, extend the class from BaseObservable.
For demonstration, both Observable and ObservableField are used in the same class.
8. Create another class named Post.java under model package. This model class provides data to RecyclerView.
9. Under utils package, create two classes named BindingUtils.java and GridSpacingItemDecoration.java
GridSpacingItemDecoration provides spacing between RecyclerView grid elements.
Binding a RecyclerView layout is similar to normal binding except few changes in onCreateViewHolder and onBindViewHolder methods.
10. Create layout named post_row_item.xml. This layout contains an ImageView to render the image in RecyclerView.
11. Create a class named PostsAdapter.java under view package.
Now we have all the files in place. Let’s start building the main interface.
12. Open the layout files of main activity i.e activity_main.xml and content_main.xml and enable data-binding by adding <layout>, <data> and <variable> tags.
13. Finally open MainActivity.java and do the below modifications.
Run and test the app once. Make sure device is having internet connection as images will be downloaded from network.
If you have any queries, please post them in below section.
Hi there! I am Founder at androidhive and programming enthusiast. My skills includes Android, iOS, PHP, Ruby on Rails and lot more. If you have any idea that you would want me to develop? Let’s talk: [email protected]
Hello sir how to embed code to wordpress like your code view
Hello
it seems that the apk file is corrupted !
Could you try with this command
adb install -t databing-recyclerview.apk
syntaxhighlighter
Hi, which theme are you using?
Darcula Theme
https://stackoverflow.com/questions/16601260/how-do-i-change-android-studio-editors-background-color
Awesome
With Darcula which theme jar file u used????
Hey, Ravi
I didn’t understood data binding. It is similar to api call as we do normally. Can you provide more articles.
Have you read this article before?
https://www.androidhive.info/android-working-with-databinding/
Thanks. I will see it.
Great article.
Thank you:)
So @Ravi Tamada:disqus also using Redmi Mobile
I lost Nexus 5 three times and this is my second Redmi 🙂
Hey Ravi ,
Can you provide some tutorial on deep links ?
Hii Ravi,
please give some suggestion
I am trying to implement face recognization functinality in surface view but i don’t find any usefull link or example.
there are only example’s of face dectection i don’t find any material related to face recognization
please help me how to implement face dection and recognization both in app
Can you provide how i can notify adapter if there is any data change.
Do you have position of the item changed. You can use DiffUtils to identify changes in adapter class.
which software are you used for Mobile frame in your demo ?
Thankyou so much….. It really Help me…I am Still waiting databinding with mvvm architecture..
hi sir can any one help it’s uggentyly.. first uplode the image to the server and then downloded that image how to handle this problems….
recyclerView = binding.content.recyclerView;
why you use content with binding for getting recyclerview. ?
Please Provide the Some valuable source for Deep Links.
Sir can you demonstrate the use of other architecture components as well like the room database and live data.
Hello Sir,
You said FCM is free does that mean that if I have let’s say 1 million users using my app, will still be free?
Or does the Free Service have a limit on number of subscriber?
Pls I will love you to help make me understand in this matter
Yes it’s free. Other services like database is chargeable.
Hi !!!!!
Is this good time to work with databinding ???
because we faces many issue while implementing databinding like we need to rebuild project many time also faced issue with ActivityMainbinding class.
Yes there are building issues. But it’s good to consider DataBinding.
When we created the layout, we declared a variable called MODEL which is represented by BR.MODEL. This is a class that is generated automatically by the data binding plugin. To set it to the view, we just need to call the setVariable()on the ViewDataBinding instance we got in the previous step. Then we’ll use executePendingBindings to make binding happen immediately.
where are you bro, where is next article
please upload example’s regular
watch Bumblebee HD 2018 (available 1080p) . with the best quality and all languange….
here–>> POPCORNHDMOVIE1.BLOGSPOT.COM
in Hindi or Tamil
Hey Ravi great tutorial . Can you make a tutorial on MVVM design pattern..?
Covering MVVM is bit difficult in articles. Will post the code at least.
Awesome thanks
Hi Ravi, where are the images stored? I am trying to display my images from firebase storage but this does not work – any suggestions?
Do you have the public URL of firebase image?
I have the firebase url in my code which generates one picture. However, if I try to loop through to display all images (using the int i method as above), the media token at the end of the url prevents me from doing so as it differs for each image.
Any sample Images data you can post?
My images are named as 2.jpg, 3.jpg etc so therefore all share the same url apart from the media token at the end
https://firebasestorage.googleapis.com/v0/b/muamatcher.appspot.com
/o/29VHCB4MEkcm4YQhIMzkGPUy9hT2%2F2.jpg?alt=media&token=c7362321-856d-4890-a9f3-e8e8fd571321
(had to add space between the url to allow me to post this)
https://
firebasestorage.googleapis.com/v0/b/muamatcher.appspot.com
/o/29VHCB4MEkcm4YQhIMzkGPUy9hT2%2F2.jpg?alt=media&token=c7362321-856d-4890-a9f3-e8e8fd571321
(had to add space between the url to allow me to post this)
Hi Mr Ravi You Are best of the best . Please make Setting dark theme for multiple activity.Thanks 🙏🙏🙏👍👍👍
Hi Ravi,
Is it possible to initialize recyclerview in xml itself using data binding?
AndroidHive
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
copyright © 2017 Droid5 Informatics Pvt Ltd
www.droid5.com
