tag:blogger.com,1999:blog-42149604321690501172024-03-14T17:23:35.625+05:30Akshay Rana | Android TutorialsAdminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comBlogger29125tag:blogger.com,1999:blog-4214960432169050117.post-15535991467787034252020-09-10T19:07:00.001+05:302020-09-10T19:26:35.709+05:30Event Bus in Android with Example | Simple and Easy Tutorial to Get Started<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHyNk643PlfHafq2-_AkhnF3IzX8xJ1FMmq6qIayvdyHOAkKVlq00StadrhPwgDNc-YPL439y9c7WQ-6Gbr2z1BrKxhre4gd3UnzD6XQU9YNxNQjrZa7dIwTpLS9QEi25EDBup6zxeusE/s2048/Event-Bus-in-Android-with-Example-Android-Studio.webp" style="margin-left: 1em; margin-right: 1em;"><img alt="Event Bus in Android" border="0" data-original-height="1152" data-original-width="2048" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHyNk643PlfHafq2-_AkhnF3IzX8xJ1FMmq6qIayvdyHOAkKVlq00StadrhPwgDNc-YPL439y9c7WQ-6Gbr2z1BrKxhre4gd3UnzD6XQU9YNxNQjrZa7dIwTpLS9QEi25EDBup6zxeusE/w640-h360/Event-Bus-in-Android-with-Example-Android-Studio.webp" title="Event Bus in Android" width="640" /></a>
</div>
<p>
<b>EventBus</b> is the number 1 event library for android and java.
<b>EventBus</b> uses the publisher and subscriber pattern for loose coupling which means the possibility of errors will be less. <b>EventBus</b> simplifies the communication between different components for example communications between different levels of activities or even services. You need very less or no setup to use <b>EventBus</b> in your existing project.
</p>
<p>
<b>EventBus</b> provides a convenient annotation-based API which makes it fast and the performance is increased. EventBus is used by many popular apps, apps which has 1 billion-plus download which shows how EventBus popular.
</p>
<p>
In this tutorial, we will see how we can get started using EventBus in an
android project. Before jumping in the code let's see what we will be going to
make. To better understanding EventBus we will make an app that allows us to add items to the cart and show the total count of the items. See below how our
app will work.
</p>
<p></p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs9_jkqB0XsyT_yVa8jOmbWkM3UAyUDe7xsV1L0aMeXH1i_Xjy4hYwT0ZP-HFofHLbNNBkNrKERYn73hfrbIrarKq3WaONVRXMUw7VAps_-oS59vt-0mz6VAXnR_5K0BjQCc3cWrWxsQw/s536/EventBus+in+Android+App.webp" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="536" data-original-width="491" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs9_jkqB0XsyT_yVa8jOmbWkM3UAyUDe7xsV1L0aMeXH1i_Xjy4hYwT0ZP-HFofHLbNNBkNrKERYn73hfrbIrarKq3WaONVRXMUw7VAps_-oS59vt-0mz6VAXnR_5K0BjQCc3cWrWxsQw/w366-h400/EventBus+in+Android+App.webp" width="366" /></a>
</div>
<p></p>
<p>Let's get started.</p>
<h2 style="text-align: left;">Add EventBus Dependency in Android Studio</h2>
<p>
First, we need to add EventBus Dependency in the project. Open your
build.gradle and add the dependency.
</p>
<p><script src="https://gist.github.com/Akshay-Rana-Gujjar/b58ecc28b66a3b6fe39ee9f8e720ca7a.js"></script></p>
<p>Hit the sync button and move to the next step.</p>
<h2 style="text-align: left;">Make a POJO class for EventBus</h2>
<p>
The next step is to make a Java object class to pass in the EevntBus Subscribe
method and to be used later.
</p>
<p>
For our example app, we will make a class with the name of CartEvent.java with
a string field for cart items.
</p>
<p>See the below code for better understanding.</p>
<p><script src="https://gist.github.com/Akshay-Rana-Gujjar/97a8a6d6ebca8389eca4237bf482e19b.js"></script></p>
<p>Move to the next step.</p><p><div>
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b
><a
href="https://www.akshayrana.in/2020/08/top-10-libraries-for-android-developers.html"
target="_blank"
>Top Libraries for Android Developers</a
>
</b>
</span>
</div></p>
<h2 style="text-align: left;">Make UI for the App</h2>
<p style="text-align: left;">
In the first activity, we have a textview to show the total count of the cart
item.
</p>
<p style="text-align: left;">
And a button to open second activity to add items in the cart.
</p>
<p style="text-align: left;">See the below code to understand.</p>
<p style="text-align: left;"><script src="https://gist.github.com/Akshay-Rana-Gujjar/65914b77630588a73db9b3bd82fd00be.js"></script></p>
<p style="text-align: left;">
Now make the second activity to show the items list and add a method for the
button click.
</p>
<p style="text-align: left;">
We made simple cart items. We add 3 items but in the real world application,
you should use
<a href="https://www.akshayrana.in/2020/06/what-is-recyclerview-in-android.html" target="_blank">recyclerview</a>
or any other view to make a list of items.
</p>
<p style="text-align: left;">Here is the second activity XML code.</p>
<p style="text-align: left;"><script src="https://gist.github.com/Akshay-Rana-Gujjar/012ae8748aa7f2bb9b3ee8ca0092ba9f.js"></script></p>
<p style="text-align: left;">
In the above code, we have added the onClick attribute and pass the
addItemToCart method name.
</p>
<p style="text-align: left;">
And made the appropriate method in the second activity java.
</p>
<p style="text-align: left;">
<script src="https://gist.github.com/Akshay-Rana-Gujjar/f00e4457d53e802126b0b7209b949f64.js"></script>
</p>
<p style="text-align: left;">Now implement EventBus in the project. </p>
<p style="text-align: left;">
Let's make the subscriber and in the subscriber method, we will add items to
the list.
</p>
<p style="text-align: left;">See below to understand.</p>
<h2 style="text-align: left;">
Make Subscribe Method of EventBus to update Cart
</h2>
<p style="text-align: left;">
We will show cart count in the first activity so we need to update cart count
in the subscriber method. Open your java file and create a method
onCartItemAdd and in the parameter, we will get our CartEvent object.
</p>
<p style="text-align: left;">
We will add this object to the list and then show the list size in the cart
count.
</p>
<p style="text-align: left;">
To tell the EventBus to trigger this method we need to add the @Subscribe
annotation to the method.
</p>
<p style="text-align: left;"><script src="https://gist.github.com/Akshay-Rana-Gujjar/17dab8a9109607c2619290b58230e9ce.js"></script></p>
<p style="text-align: left;">
We should unregister and re-register the EventBus in the onStart and onDestroy
method on the activity.
</p>
<p style="text-align: left;">
<script src="https://gist.github.com/Akshay-Rana-Gujjar/1cc265389f1925e1b2d50604956c5ec9.js"></script>
</p>
<p>Now we will call this method on the add item click of second activity.</p>
<p>
In the second activity, we already created a button onClick method. In that
method, we will call the EventBus post method and pass our CartEvent object.
</p>
<p><script src="https://gist.github.com/Akshay-Rana-Gujjar/38c1eb12c9e9222ed01305a3dc5f692d.js"></script></p>
<p>
That's it. Now run your app and add an item to the cart and back to the first
activity then you can see your updated cart item count.
</p>
<p>
This is just a simple example to get started in EventBus, you can use EventBus
wherever it fits in your requirement.
</p>
<p>
So guys this is the end of this article, I hope this article helped you
somewhere.
</p>
<p>
Don't forget to support us and share this article with your friends or
batchmates.
</p>
<p>Thank you and have a nice day.</p>
<div>
<div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
</div>
<div><br /></div>
<div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" />
<button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small>
<style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-71112289688641942022020-08-20T02:00:00.009+05:302020-09-12T01:41:53.127+05:30Top 10 Libraries every android developer should know [Best For Beginners]<p></p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyGFGz4SGdBKI-ROXg1GHMrQ94WPS7sr55ITLPYhFtM1CzuQmK5gMVnuoVIpkzE9pqZLr9_BZEWDRaTjtuDyM3sLgU7GgNMfAmODm-wqnmQQZg_SSim6xp_SJbaI1RiweUAM4Hjemp-Gs/s2048/Top-10-Libraries-every-android-developer-should-know.webp" style="margin-left: 1em; margin-right: 1em;"><img alt="Top 10 android libraries" border="0" data-original-height="1152" data-original-width="2048" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyGFGz4SGdBKI-ROXg1GHMrQ94WPS7sr55ITLPYhFtM1CzuQmK5gMVnuoVIpkzE9pqZLr9_BZEWDRaTjtuDyM3sLgU7GgNMfAmODm-wqnmQQZg_SSim6xp_SJbaI1RiweUAM4Hjemp-Gs/w640-h360/Top-10-Libraries-every-android-developer-should-know.webp" title="Top 10 android libraries" width="640" /></a>
</div>
<p style="text-align: left;">
Hello world, today we are going to see the top 10 libraries for the android developer that they should know about. You can use these libraries or you can also use their equivalent libraries if you like. These top 10 libraries are based on my experience this list can be different from person to person.
<b>The top 10 libraries every Android developer should know are listed below.</b>
</p>
<p></p>
<p></p>
<ol style="text-align: left;">
<li><b>Fast Android Networking Library</b></li>
<li><b>Glide</b></li>
<li><b>Room Persistence Library</b></li>
<li><b>Firebase Cloud Firestore</b></li>
<li><b>Crashlytics</b></li>
<li><b>LeakCanary</b></li>
<li><b>ExoPlayer</b></li>
<li><b>Firebase Auth</b></li>
<li><b>Firebase Storage</b></li>
<li><b>Facebook Shimmer</b></li>
</ol>
<h2 style="text-align: left;"><b>1. Fast Android Networking Library</b></h2>
<p style="text-align: left;">
<a href="http://amitshekhariitbhu.github.io/Fast-Android-Networking" target="_blank">Fast android networking</a>
as the name suggests this library is used for making HTTP requests. But what
makes this library stand out of other libraries is its simplicity of use that
everyone can start using it without any other requirement or follow any
pattern.
</p>
<p style="text-align: left;">
Just add this library to your project and start using it. It uses
<a href="http://square.github.io/okhttp/" target="_blank">OkHttp</a> and
<a href="https://github.com/square/okio" target="_blank">Okio</a> which makes
it fast also <a href="https://amitshekhariitbhu.github.io/Fast-Android-Networking/rxjava2_support.html" target="_blank">supports RxJava</a>.
</p>
<p style="text-align: left;">
<b> Top features of Fast Android Networking Library:</b>
</p>
<p style="text-align: left;"></p>
<ul style="text-align: left;">
<li><b>You can upload or download file with progress,</b></li>
<li><b>You can cancel any request easily,</b></li>
<li><b>Support RxJava,</b></li>
<li><b>Uses OkHttp and Okio as core dependency,</b></li>
<li><b>JSON handling is super easy,</b></li>
<li><b>Can customize requests for example timeout etc.</b></li>
<li>
<b>Can Load images from the internet so no need to use any other library for
image loading from the internet.</b>
</li>
</ul>
<p></p>
<p style="text-align: left;">
Here is a simple example of how you can make a request and get JSON.
</p>
<p style="text-align: left;">
<script src="https://gist.github.com/Akshay-Rana-Gujjar/14730f4ab59170432f1fd67ecd355dc3.js"></script>
</p>
<div>
If you want to see how to use it you can follow this <a href="https://www.akshayrana.in/2020/01/json-rest-api-in-android.html" target="_blank">tutorial on use REST API in Android</a>.
</div>
<p style="text-align: left;">
See the official documentation <a href="https://github.com/amitshekhariitbhu/Fast-Android-Networking" target="_blank">here</a>.
</p>
<h2 style="text-align: left;">
<span><span>2. Glide</span></span>
</h2>
<p style="text-align: left;">
<span><span>Glide is a fast, smooth, and efficient way to load images from the internal with super caching mechanism implementation. It uses very little memory to work and provide other functions for cropping and resizing the image.</span></span>
</p>
<p style="text-align: left;">
<span><span>It supports animated GIFs. There are other libraries for image loading that I have used but the Glide is different and advanced from other libraries and I become a fan of this library.</span></span>
</p>
<p style="text-align: left;">
<span><span><b>The top Features of Glide are:</b></span></span>
</p>
<p style="text-align: left;"></p>
<ul style="text-align: left;">
<li>
<span><span><b>Fast and efficient image loading,</b></span></span>
</li>
<li>
<span><span><b>Amazing caching implementation,</b></span></span>
</li>
<li>
<span><span><b>Can crop the image,</b></span></span>
</li>
<li>
<span><span><b>Can resize the image,</b></span></span>
</li>
<li>
<span><span><b>Support animated GIFs</b></span></span>
</li>
</ul>
<p style="text-align: left;">Here is a simple example of Gilde.</p>
<p style="text-align: left;"><script src="https://gist.github.com/Akshay-Rana-Gujjar/709492572b93fccde509b37326a7266f.js"></script></p>
<p style="text-align: left;">
You can read more on
<a href="https://www.akshayrana.in/2020/01/load-image-from-url-in-android.html" target="_blank">how to use glide in android here</a>.
</p>
<p style="text-align: left;">
Official documentation
<a href="https://bumptech.github.io/glide/" target="_blank">here</a>.
</p>
<h2 style="text-align: left;">3. Room Persistence Library</h2>
<p style="text-align: left;">
If you ever worked with the SQLite database in the android then you understand
that it is back pain to write code for SQLite.
</p>
<p style="text-align: left;">
To rescue you from this situation you can use Room Persistence Library which
provides an abstract layer to easily work with the SQLite database with all
operations.
</p>
<p style="text-align: left;">
Room Library is a part of Android Architecture Components which means it
belongs directly to Google. You can use it with RxJava.
</p>
<p style="text-align: left;"><b>The 3 major components of the Room are:</b></p>
<div>
<ul style="text-align: left;">
<li><b>Database</b></li>
<li><b>Entity (act as Table)</b></li>
<li><b>DAO (to perform database actions)</b></li>
</ul>
<p style="text-align: left;">
Check official documentation
<a href="https://developer.android.com/training/data-storage/room" target="_blank">here</a>.
</p>
</div>
<h2 style="text-align: left;">4. Firebase Cloud Firestore</h2>
<p style="text-align: left;">
Firebase Cloud Firestore is a NoSQL database hosted on the cloud and it is offered by Google. Firestore is a highly scalable and flexible database with expressive queries that help to get a specific document from the database.
</p>
<p style="text-align: left;">
Firestore can listen to the realtime value change so that you can make realtime applications very easily. Not only this you can use your application even if your device is offline thanks to offline support from Firestore.
</p>
<p style="text-align: left;">
With all these features you can definitely deliver a high-quality app to your users.
</p>
<p style="text-align: left;"><b>Firebase Cloud Firestore top features:</b></p>
<div>
<ul style="text-align: left;">
<li><b>NoSQL Database</b></li>
<li><b>Highly Scalable and Flexible</b></li>
<li><b>Realtime Update</b></li>
<li><b>Expressive query to get specific data</b></li>
<li><b>Offline support</b></li>
<li><b>Deliver a high-quality experience to the users</b></li>
<li><b>Integrate with other technologies e.g IOS, Web and Server</b></li>
</ul>
<p style="text-align: left;">
Check this a basic example of Firebase Cloud Firestore.
</p>
</div>
<p style="text-align: left;"><script src="https://gist.github.com/Akshay-Rana-Gujjar/60bf15dfdd93e2113ddf7add3b7ce123.js"></script></p>
<p style="text-align: left;">
You can read a detailed tutorial on <a href="https://www.akshayrana.in/2020/08/firebase-firestore-database-android.html" target="_blank">working with Firestore in android here</a>.
</p>
<p style="text-align: left;">
Official documentation can be found <a href="https://firebase.google.com/docs/firestore" target="_blank">here</a>.
</p>
<h2 style="text-align: left;">5. Crashlytics</h2>
<p style="text-align: left;">
Crashlytics is a realtime crash reporting system for making your app high
quality and can solve critical errors in the user’s mobile. In simple words,
you can get the error or crash report if it happens on any device.
</p>
<p style="text-align: left;">
Crashlytics only supports Android, IOS, and unity based games. Crashlytocs is
not for web and servers. But crashlytics is a must library that you should use
in your app, because it lets you know how your app is performing and what was
the error in the user’s device and these errors will be displayed on your
crashlytics panel in the firebase console.
</p>
<p style="text-align: left;">
So you can deliver a crash-free app to your users. To integrate crashlytics
you just need to add this library in your project and you are done and rest of
the things crashlytics will do for you.
</p>
<p style="text-align: left;"><b>The top features of Crashlytics are:</b></p>
<div>
<ul style="text-align: left;">
<li><b>Realtime reporting</b></li>
<li><b>Easy Error Grouping</b></li>
<li><b>Device info where Error occurred</b></li>
<li><b>Better dashboard for tracking crashes</b></li>
</ul>
<p style="text-align: left;">
Official documentation can be found
<a href="https://firebase.google.com/docs/crashlytics" target="_blank">here</a>.
</p>
</div>
<h2 style="text-align: left;">6. LeakCanary</h2>
<p style="text-align: left;">
The memory leak can be a big issue. Memory leak caused when your app makes
space in the memory for data and later when you don’t need that data but it is
still in the memory and Garbage Collectors unable to clear that data from the
memory because Garbage Collectors thinking that it is still in use and this
will keep happening and this will lead crash your app and raise out of the
memory exception.
</p>
<p style="text-align: left;">
So it is our responsibility to know if there is any memory leak in the app. To
detect memory leaks in the android app we can utilize this amazing library
that is LeakCanary.
</p>
<p style="text-align: left;">
Just add this library and run and use your app if any memory leaks are happing
in the app then this library will give a notification in your device to notify
you for the memory leaks and you can take better actions.
</p>
<p style="text-align: left;"><b>Features of LeanCanary are:</b></p>
<div>
<ul style="text-align: left;">
<li><b>Easy to use</b></li>
<li><b>Efficiently detect memory leaks</b></li>
<li><b>Notify if any leak detect through notification</b></li>
</ul>
<p style="text-align: left;">
Here you read on their
<a href="https://square.github.io/leakcanary/" target="_blank">official website</a>.
</p>
</div>
<h2 style="text-align: left;">7. ExoPlayer</h2>
<p style="text-align: left;">
In today’s world, video consumption is increasing as we have faster internet speed than before. The biggest video consumption platform is youtube.
</p>
<p style="text-align: left;">
As a developer if you are curious about how youtube plays video from the internet. How it handles the video stream then you should look at exoplayer because youtube is built with the exoplayer.
</p>
<p style="text-align: left;">
Youtube uses exoplayer for playing the video and the good news is you can too use exoplayer for making the app for video playing.
</p>
<p style="text-align: left;">
Another good app is TikTok which is famous worldwide too. By using the exoplayer you can make any video-based apps.
</p>
<p style="text-align: left;">
Exoplayer can paly video very smoothly and support adaptive playback.
</p>
<p style="text-align: left;"><b>Some features of Exoplayer are:</b></p>
<div>
<ul style="text-align: left;">
<li><b>Easy to customize</b></li>
<li><b>Support DASH, Progressive, Smooth Streaming and HLS</b></li>
<li><b>Adaptive Playback</b></li>
<li><b>Play video from local or from internet</b></li>
</ul>
<p style="text-align: left;">
Read more about ExoPlayer on the official site <a href="https://exoplayer.dev/" target="_blank">here</a>.
</p>
</div>
<h2 style="text-align: left;">8. Firebase Auth</h2>
<p style="text-align: left;">
Sometimes we need authentication for the user to save the data according to the different users. To do that we need some kind of a login system and this login system helps to authenticate the users for certain actions like we discussed above.
</p>
<p style="text-align: left;">
There can be any use case for using the authentication. If you don’t know the server backend language or you want a fast implementation then Firebase Auth is definitely a choice to go with.
</p>
<p style="text-align: left;">
Firebase auth supports many site logins including Google, Facebook, and
GitHub, etc or even you can authenticate users by phone number or OTP based authentication.
</p>
<p style="text-align: left;">
You should give it a shot if you haven’t already.
</p>
<p style="text-align: left;">
<b>Some amazing features of Firebase Auth are:</b>
</p>
<div>
<ul style="text-align: left;">
<li><b>Support almost every site logins</b></li>
<li><b>Easy to integrate</b></li>
<li><b>No need to write login logic at the server backend</b></li>
<li><b>Firebase UI for making implementation fast.</b></li>
</ul>
<p style="text-align: left;">
The official documentation is
<a href="https://firebase.google.com/docs/auth" target="_blank">here</a>.
</p>
</div>
<h2 style="text-align: left;">9. Firebase Storage</h2>
<p style="text-align: left;">
Uploading file handling on android devices as well as the server-side can be hard for beginners or even intermediate developers. To make uploading functionality for your app and keep things simple and manageable way, you should use Firebase Storage.
</p>
<p style="text-align: left;">
Firebase Storage is very easy to use to upload any file to the Firebase storage bucket. After uploading you can save the file link in your database for later use. You can show a progress bar to the users to notify how much a
file uploaded.
</p>
<p style="text-align: left;">
Firebase Storage provides you resume and pause functionality and if there is
any interruption while uploading then it will resume the uploading when
getting the right internet connection.
</p>
<p style="text-align: left;">Top features of Firebase Storage are:</p>
<div>
<ul style="text-align: left;">
<li>Resume/Pause Functionality</li>
<li>Smooth implementation</li>
<li>Fast uploading as it uses Google’s servers.</li>
<li>Easy to use</li>
</ul>
<p style="text-align: left;"><script src="https://gist.github.com/Akshay-Rana-Gujjar/d384b10f59ad0ba341d0f34561ea0aac.js"></script></p>
</div>
<p style="text-align: left;">
Above is the sample code of the Firebase Storage.
</p>
<p style="text-align: left;">
Check this tutorial on
<a href="https://www.akshayrana.in/2020/08/upload-image-to-firebase-storage-android.html" target="_blank">How to upload a file using Firebase Storage</a>.
</p>
<p style="text-align: left;">
Here is the official documentation:
<a href="https://firebase.google.com/docs/storage" target="_blank">Cloud Storage</a>.
</p>
<h2 style="text-align: left;">10. Facebook Shimmer</h2>
<p style="text-align: left;">
If you load data from the server then it is obvious that it will take some
time to fetch the data from the server and show that data in the view.
</p>
<p style="text-align: left;">
In the meanwhile fetching the data user will see nothing on the screen which
is a bad user experience you should indicate the user to wait for the data to
be load.
</p>
<p style="text-align: left;">
To indicate the user o loading the data we can use a progress bar to show circular loading but making a more professional app we need something more.
</p>
<p style="text-align: left;">
If you ever nothing in the Facebook android app when the data is load there is a placeholder in grey color with some animation. Look below for more clarity.
</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGbDpM-YPGVcWYsC-j0Eq3z1t5bKXz-mF-98TWTaN212p22utkE8_n-ICSfi8Hc-miKWgOTag7IFBPCHDWENAAjz1Cd7nnvXOJRB1AlfWufYcEDG08BTdMewgEoQKOecGu7kwzUU2zYzM/s478/facebook-shimmer-example.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="facebook shimmer example" border="0" data-original-height="478" data-original-width="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGbDpM-YPGVcWYsC-j0Eq3z1t5bKXz-mF-98TWTaN212p22utkE8_n-ICSfi8Hc-miKWgOTag7IFBPCHDWENAAjz1Cd7nnvXOJRB1AlfWufYcEDG08BTdMewgEoQKOecGu7kwzUU2zYzM/s16000/facebook-shimmer-example.jpg" title="facebook shimmer example" /></a>
</div>
<p style="text-align: left;">
This animation can be achieved by using the Facebook Shimmer library.
</p>
<p style="text-align: left;">
Check this
<a href="https://www.akshayrana.in/2020/02/show-loading-content-animation-facebook.html" target="_blank">Tutorial to make facebook shimmer in your app</a>.
</p>
<p style="text-align: left;">
The official site is <a href="https://facebook.github.io/shimmer-android/" target="_blank">here</a>.
</p>
<p style="text-align: left;">
This brings us to the end of this article. Thank you for reading, hope you
learned something new or it helped you in some way.
</p><p style="text-align: left;"><br /></p>
<p style="text-align: left;"></p>
<p></p>
<p></p>
<div>
<div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
</div>
<div><br /></div>
<div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-35359617794369896372020-08-13T16:28:00.011+05:302020-08-31T12:35:15.071+05:30Upload Image to Firebase Storage | Android Tutorial<h1 style="text-align: left;">
How to upload Image to Firebase Storage in Android
</h1>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD9rgB3Q23ztvS8j8o9jGgaJOj31Ld7H6oeGZdAPNcwXNuXgdDUlK1Xl-iQoYaorYbnzEY_fwYD8YCfpaeKjCUaspOSyXfh-h8U5fSChgz4TlpzEjHT_lR3Drvvi6nizOe8tRaSIe7-CE/s2048/How-to-upload-Image-to-Firebase-Storage-in-Android-compressed.webp" style="margin-left: 1em; margin-right: 1em;"><img alt="upload Image to Firebase Storage in Android" border="0" data-original-height="1152" data-original-width="2048" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD9rgB3Q23ztvS8j8o9jGgaJOj31Ld7H6oeGZdAPNcwXNuXgdDUlK1Xl-iQoYaorYbnzEY_fwYD8YCfpaeKjCUaspOSyXfh-h8U5fSChgz4TlpzEjHT_lR3Drvvi6nizOe8tRaSIe7-CE/w640-h360/How-to-upload-Image-to-Firebase-Storage-in-Android-compressed.webp" title="upload Image to Firebase Storage in Android" width="640" /></a>
</div>
<p style="text-align: left;">
Hello world, today we are going to learn how we can <a href="https://www.akshayrana.in/2020/08/upload-image-to-firebase-storage-android.html" style="font-weight: bold;" target="_blank">upload an image to the firebase storage</a> from our android application. We will see how we can <b>show the progress of uploading</b>
an image to the user.
<a href="https://firebase.google.com/docs/storage" style="font-weight: bold;" target="_blank">Firebase storage</a> gives use utility to upload the file and get the URL of that uploaded file so that we can access our file through the link. Let's see the final result we are going to learn.
</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3gdKbXDqqc8W2_mgDsQQcgOZIz5xZybbKUV6B8N-60tsqaT0NWz-JgIrcj0gJhFrYFzEwnh4IO4aZd-8nRNZ2nMbZIT2MvuXK38cB-zj-cc_AAavLZPkOjuINnqr8sDoKqxTdL6m1ts/s804/How+to+upload+Image+to+Firebase+Storage+in+Android.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="804" data-original-width="492" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3gdKbXDqqc8W2_mgDsQQcgOZIz5xZybbKUV6B8N-60tsqaT0NWz-JgIrcj0gJhFrYFzEwnh4IO4aZd-8nRNZ2nMbZIT2MvuXK38cB-zj-cc_AAavLZPkOjuINnqr8sDoKqxTdL6m1ts/s640/How+to+upload+Image+to+Firebase+Storage+in+Android.gif" /></a>
</div>
<p style="text-align: left;">
Before staring the code we need to enable firebase storage in our Firebase project. Open your Firebase console and select the project and click on storage then follow the on-screen instructions.
</p>
<p style="text-align: left;">
After creating the storage we need to change our storage rule so that we can
access the storage with the authentication.
</p>
<p style="text-align: left;">
Open your rules and change the if condition and replace != to ==.
</p>
<p style="text-align: left;">
After make changes hit the publish button and we are ready to go.
</p>
<p style="text-align: left;">
In your android project add these dependencies to work with firebase storage.
</p>
<p style="text-align: left;">
<script src="https://gist.github.com/Akshay-Rana-Gujjar/c939b8ddb352ebf717b61569904a8932.js"></script>
</p>
<p style="text-align: left;"><br /></p>
<p style="text-align: left;">Add This in the project level build.gradle.</p>
<p style="text-align: left;"><script src="https://gist.github.com/Akshay-Rana-Gujjar/9cf25b01291714d56a3a47c076d0f996.js"></script></p>
<p style="text-align: left;">
the first dependency is for firebase storage and the last dependency is
for <a href="https://github.com/Dhaval2404/ImagePicker" rel="nofollow" target="_blank">pick images from gallery or camera</a>.
</p>
<p style="text-align: left;">
After adding the dependencies.
<b>Let's see what tasks we need to perform to upload an image to the
firebase</b>.
</p>
<p style="text-align: left;"></p>
<ol style="text-align: left;">
<li><b>Pick an image from the gallery or camera.</b></li>
<li><b>Display picked image into ImageView.</b></li>
<li><b>Upload image on Click of the button.</b></li>
<li><b>Display progress bar while uploading.</b></li>
<li><b>After Uploading, get the uploaded image link.</b></li>
</ol>
<h2 style="text-align: left;">Pick an image from the Gallery or Camera</h2>
<p style="text-align: left;">
The first step is to pick the image from the gallery or camera for that we
will going to use this library
<a href="https://github.com/Dhaval2404/ImagePicker" rel="nofollow" target="_blank">https://github.com/Dhaval2404/ImagePicker</a>. Let's create our layout so that we can button and imageview. Open your
activity_main.xml file and add this code.
</p>
<p style="text-align: left;"><script src="https://gist.github.com/Akshay-Rana-Gujjar/792b98a34350044b38e7d609908ecb5f.js"></script></p>
<p style="text-align: left;">
In the layout, we have an imageview to show the image when we choose from the
gallery. A progress bar and a textview to show the progress of uploading an
image and an upload button to start uploading. A simple layout.
</p>
<p style="text-align: left;">
We will pick an image on the click of imageview we need to add click listener
and write code for start activity to pick an image. See the below code.
</p>
<p style="text-align: left;"><script src="https://gist.github.com/Akshay-Rana-Gujjar/1b74645629bcfc9b5108785d400351f2.js"></script></p>
<p style="text-align: left;">
In the above code, we are starting the image picker and to get the image URI
in the onActivityResult method. Let's override this method in our class.
</p>
<p style="text-align: left;"><script src="https://gist.github.com/Akshay-Rana-Gujjar/68939fb5a9dadea9cb30c8d3db8606da.js"></script></p>
<h2 style="text-align: left;">Display picked image into ImageView</h2>
<p style="text-align: left;">
After getting the image URI we will set the URI to imageview so that the user
can know which image he chose.
</p>
<p style="text-align: left;">
Note: if you are getting FileNotFound Exception then add
android:requestLegacyExternalStorage="true" to the application tag in the
manifest.xml file.
</p>
<p style="text-align: left;">We are storing the image URI in the variable.</p>
<p style="text-align: left;">
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b><a href="https://www.akshayrana.in/2020/08/bottom-sheet-in-android-updated.html" target="_blank">Android Bottom Sheet</a>
</b>
</span>
</p>
<h2 style="text-align: left;">Upload image on Click of the button</h2>
<p style="text-align: left;">
Now we will upload the image on the click of the button. Let's implement the
on click function on the button.
</p>
<p style="text-align: left;">
<script src="https://gist.github.com/Akshay-Rana-Gujjar/3c1822fa0745d1231bbeaf545e46e244.js"></script>
</p>
<p style="text-align: left;">
First, we are getting the storage reference then we are uploading the image in
the images folder and then concatenate the original image name with the file
format using the URI method getLastPathSegment. This method returns the
file name.
</p>
<p style="text-align: left;">
After that, we are uploading the image using the uploadImageRef and
calling its method putFile and pass our file Uri.
</p>
<p style="text-align: left;">
Then we will add a successful listener and failure listener. When your file
successfully uploads then addOnSuccessListener called and when there will be
any error then addOnFailureListener called.
</p>
<p style="text-align: left;">
Now see how to show progress bar while uploading.
</p>
<h2 style="text-align: left;">Display progress bar while uploading</h2>
<p style="text-align: left;">
To display progress while uploading the file or image. We will
add addOnProgressListener to the UploadTask. Check the below code.
</p>
<p style="text-align: left;"><script src="https://gist.github.com/Akshay-Rana-Gujjar/6d4167cfc217d4b10ab6739322411f5a.js"></script></p>
<p style="text-align: left;">
In the addOnProgressListener method, we are calculating the progress by
multiply 100 with data uploaded and divided by the total size of the file or
image.
</p>
<p style="text-align: left;">
Then we set the progress of the progress bar and also set the text of textview
to show the progress. This way we easily calculate the progress and set to the
progress bar.
</p>
<p style="text-align: left;">
Sometimes we have the case when we use putStrem and pass InputeStrem object
instead of putFile. In this case, if we call the getTotalByteCount method
we get -1 in return. To get the file size of InputStream e can use available
method to get the current data size. Note that call the available method right
after the InputStream method.
</p>
<p style="text-align: left;">
Now the only thing is left is to get the link of the file which we just
uploaded.
</p>
<h2 style="text-align: left;">After Uploading, get the uploaded image link</h2>
<p style="text-align: left;">
To get the download link of the image or file we need to add code in the
success listener of the UploadTask.
</p>
<p style="text-align: left;"><script src="https://gist.github.com/Akshay-Rana-Gujjar/43b0e83574da02805d075b3e2573e3dc.js"></script></p>
<p style="text-align: left;">
This way we can get our download link of the file which we have just uploaded.
</p>
<p style="text-align: left;">
You can save this URL to the database for later use maybe.
</p>
<p style="text-align: left;">
Now you can run your project and your app will run smoothly.
</p>
<p style="text-align: left;">
If you learned something new then do share this article with your friends and batchmates and don't forget to subscribe to our newsletter if you haven't joined already for the latest updates.
</p>
<p style="text-align: left;">Thanks for reading have a nice day.</p>
<div>
<div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
</div>
<div><br /></div>
<div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-67091689863671035112020-08-08T13:33:00.000+05:302020-08-17T20:52:11.698+05:30How to change font family of textview.<h1 style="text-align: left;">How to change font family of textview</h1>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgatpTWurJzuLD9J8iYJFAtqCa-FKJcyK-S7vGi-qy3I2z6EtjZtseVbq4f3AFaAcoti1WS4rGlcnzctTLw6LSqzoZYFtn8ELqdD1xaIgI0laDJrTefUsOJeZaeIySpVVyyi6OGibQSV6M/s2048/How+to+change+font+family+of+textview.webp" style="margin-left: 1em; margin-right: 1em;"><img alt="How to change font family of textview" border="0" data-original-height="1152" data-original-width="2048" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgatpTWurJzuLD9J8iYJFAtqCa-FKJcyK-S7vGi-qy3I2z6EtjZtseVbq4f3AFaAcoti1WS4rGlcnzctTLw6LSqzoZYFtn8ELqdD1xaIgI0laDJrTefUsOJeZaeIySpVVyyi6OGibQSV6M/w640-h360/How+to+change+font+family+of+textview.webp" title="How to change font family of textview" width="640" /></a>
</div>
<div><br /></div>
<div>
Hello world, today we are going to see how we can set the different font
families to the textview.
</div>
<div>
Why we need to use a different font for textview because simple or default font family of textview looks so simple and to give a professional look to our app we need custom fonts for textview. Let's see how to add custom fonts in the android application.
</div>
<div><br /></div>
<div>Below is the example of the custom fonts added to the textview.</div>
<div><br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo0KndajBa3VaYNE4KsweVKAtwR_HlqSNnoTyy6Ms0RkIspsaIWU-oSTUpWHTOCZFjD6pEfDZLk9R5N0_9cLcDfXGIu1914ahdRKML1oaxMt3kpSwVkpfja5ORRU3nGD6sF2cY3A0p_c0/s1843/Custom-font-family-of-textview.webp" style="margin-left: 1em; margin-right: 1em;"><img alt="custom fonts added to the textview" border="0" data-original-height="1843" data-original-width="1077" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo0KndajBa3VaYNE4KsweVKAtwR_HlqSNnoTyy6Ms0RkIspsaIWU-oSTUpWHTOCZFjD6pEfDZLk9R5N0_9cLcDfXGIu1914ahdRKML1oaxMt3kpSwVkpfja5ORRU3nGD6sF2cY3A0p_c0/w234-h400/Custom-font-family-of-textview.webp" title="custom fonts added to the textview" width="234" /></a>
</div>
</div>
<div><br /></div>
<div>
In the above image first font is default one and the rest are custom added
fonts.
</div>
<div><br /></div>
<div>To add the fonts first we need to download the .ttf files.</div>
<div><br /></div>
<h2 style="text-align: left;">Download .ttf fonts for textview</h2>
<div>
You can download fonts(.ttf) from here <a href="https://fonts.google.com/">https://fonts.google.com/</a>
</div>
<div><br /></div>
<div>Download one or more fonts that you like to add in the app.</div>
<div><br /></div>
<h2 style="text-align: left;">Create a font folder and add fonts</h2>
<div>
After downloading we need to add these fonts in the font folder in the android
project.
</div>
<div><br /></div>
<div>
To make the font folder right-click on res folder then click on new then click
on Android Resource Directory and after that choose resource type to font then
click on the OK button.
</div>
<div><br /></div>
<div>
After this, your font folder will be created then move your downloaded fonts
in the font folder in the android project.
</div>
<div><br /></div>
<div>Remember only add .ttf files in the font folder.</div>
<div><br /></div>
<div>Now we have added the font now let's see how we can use them. </div>
<div><br /></div>
<div>
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b><a href="https://www.akshayrana.in/2020/08/bottom-sheet-in-android-updated.html" target="_blank">How to make Bottom Sheet in Android</a>
</b>
</span>
</div>
<h2 style="text-align: left;">Set Font to TextView in XML</h2>
<div>
To set the font to textview just use this
property. android:fontFamily="@font/font_name".
</div>
<div><br /></div>
<div>For example, we have downloaded a font name montserrat.ttf</div>
<div><br /></div>
<div>then our textview will look like this.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/988c769feb79af3a0a70d30079d9cbc3.js"></script></div>
<div><br /></div>
<div>This the XML way to set font family.</div>
<div><br /></div>
<h2 style="text-align: left;">Set Font to TextView Programmingly</h2>
<div>
To set the font in the java file then you can do it like this. Let's say we
have an alata.ttf font in the font folder.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/06f263e8df17d10a9c28c20f8e120711.js"></script></div>
<div><br /></div>
<div>
Sometimes you may want to make a custom textview that has your custom font as
the default font.
</div>
<div>
In that case, you can make a new java file and extend to the
AppCompactTextView and set your font. See the below code for better understanding.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/2e23f64a99779954c8efc2373c254f01.js"></script></div>
<div><br /></div>
<div>
To set the font we made a init function in that function we use the
setTypeface function and pass our typeface font. In this case, our font name
is poppins.ttf
</div>
<div><br /></div>
<div>
Now you can use your custom textview in the XML and treat it like the normal textview but with the custom font family. You can use this in your whole app.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/f4e9eac690c4439af3d9c68e8e9efd7b.js"></script></div>
<div><br /></div>
<div>
<div>
If you learned something new then do share this article with your friends
and batchmates and don't forget to subscribe to our newsletter if you
haven't joined already for the latest updates.
</div>
<div><br /></div>
<div>Thanks for reading have a nice day.</div>
</div>
<div>
<div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
</div>
<div><br /></div>
<div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-70563425552566380592020-08-05T13:30:00.013+05:302020-08-13T23:45:11.031+05:30Bottom sheet in android | Android Tutorial 2020 Updated<h1 style="text-align: left;">How to make Bottom Sheet in Android</h1>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDgh31xharuWBacL57rgxAEhDGzQrzKr8D4GEHZbjL3AqFVWEzzOM43-OZsHjRc1zDtu7lke_1ynqSVULqeVK4XNgsXedCxBVE6EAOjKoXYwiZFnMkl2GPUhJdcBSK5UNuwSWqppGnkk/s2048/Bottom-sheet-in-android.webp" style="margin-left: 1em; margin-right: 1em;"><img alt="How to make Bottom Sheet in Android" border="0" data-original-height="1152" data-original-width="2048" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDgh31xharuWBacL57rgxAEhDGzQrzKr8D4GEHZbjL3AqFVWEzzOM43-OZsHjRc1zDtu7lke_1ynqSVULqeVK4XNgsXedCxBVE6EAOjKoXYwiZFnMkl2GPUhJdcBSK5UNuwSWqppGnkk/w640-h360/Bottom-sheet-in-android.webp" title="How to make Bottom Sheet in Android" width="640" /></a>
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div><br /></div>
<div><br /></div>
<div>
Hello world, today we are going to see how to make a
<b>persistence bottom sheet</b> and how to make a
<b>modal bottom sheet in the android</b>. The <b>bottom sheet</b> has two
types, one is persistence and the second is a modal sheet. In both cases, the
bottom sheet slides up. In the persistence bottom sheet, some parts of the bottom sheet showing to the user so that the user can slides up and in the
model bottom sheet you can make a trigger to show the bottom sheet and it is
fully hidden unlikely persistence bottom sheet. When a user clicks on a button
or something you can trigger the modal bottom sheet to show. Let's see the
finished app which we are going to make below.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHA-x-GcRuAMBfmrlTKWMO48mBm8rhkqbHlBTp5gFDpqd673cFdHcXkVFKeLlktgOpA3gkhr6kAMUoPbgsAmNOg6zEJHoYjMSYQeV7AAW6rlEMgOWKKoEXJIGi3CooOBpo8IOAXYJrck8/s630/android+bottom+sheet.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="bottom sheet android" border="0" data-original-height="630" data-original-width="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHA-x-GcRuAMBfmrlTKWMO48mBm8rhkqbHlBTp5gFDpqd673cFdHcXkVFKeLlktgOpA3gkhr6kAMUoPbgsAmNOg6zEJHoYjMSYQeV7AAW6rlEMgOWKKoEXJIGi3CooOBpo8IOAXYJrck8/d/android+bottom+sheet.gif" title="bottom sheet android" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div>Before making any type of bottom sheet we must add the dependency.</div>
<h2 style="text-align: left;">
Add Bottom Sheet Dependency in Android Project
</h2>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/fa2de78db3f9901189fca54138a94bd7.js"></script></div>
<div><br /></div>
<div>Let's first make a persistence bottom sheet.</div>
<h2 style="text-align: left;">How to make Persistence Bottom Sheet</h2>
<div>
First, we need to make our layout for the
<a href="https://material.io/develop/android/components/bottom-sheet-behavior/" target="_blank">bottom sheet</a>
so let's do this.
</div>
<div><br /></div>
<div>
Make a new layout file in the layout folder and name it as bottom_sheet.xml.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/c10ffb0ef6ff4d12c6c4f94896f80121.js"></script></div>
<div><br /></div>
<div>
You can make your layout as you want for the sake of simplicity we make a
simple view with textview but you can add what you like for example you can
add <a href="https://www.akshayrana.in/2020/06/what-is-recyclerview-in-android.html" target="_blank">recyclerview</a> or any other view you like.
</div>
<div><br /></div>
<div>
If you want to make this layout to be used as a bottom sheet then you have to
add these 3 properties to your layout.
</div>
<div><br /></div>
<div>
<ul style="text-align: left;">
<li>
<b>app:layout_behavior</b>, set this property value
to com.google.android.material.bottomsheet.BottomSheetBehavior
because we want our layout to behave like a bottom sheet.
</li>
<li>
<b>app:behavior_hideable</b>, set the property value to true as we want to
completely hide the bottom sheet if we swipe it down again when it is
collapsed.
</li>
<li>
<b>app:behavior_peekHeight</b>, set this property value to the value which
you want to show the view when it is collapsed.
</li>
</ul>
<div>
After making the layout for the bottom sheet we need to include this layout
in our activity layout and make activity layout root layout
to CoordinatorLayout. It is mandatory for the bottom sheet.
</div>
</div>
<div><br /></div>
<div>
After changing the layout let's add the bottom sheet layout in the activity
layout.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/9908ef2b8fef850bc3fd595a0aa81745.js"></script></div>
<div><br /></div>
<div>Our full code will look like this.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/90613b73d78860d42fdff23b51d82ffd.js"></script></div>
<div><br /></div>
<div>
Now if you run your app you can see the persistence bottom sheet fully
working.
</div>
<div><br /></div>
<div>
Now let's see how we can access our bottom sheet and change the opening and
closing of the bottom sheet in the java.
</div>
<div><br /></div>
<h3 style="text-align: left;">Open or close the Bottom Sheet in Java</h3>
<div>
To open or close the bottom sheet we will make a button in the activity layout
xml file to toggle the bottom sheet.
</div>
<div><br /></div>
<div>Now come to the activity java file and add this code.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/a5ab16fb59111e2eca234a4f2c0d365f.js"></script></div>
<div><br /></div>
<div>We can use this code for the modal bottom sheet also.</div>
<div><br /></div>
<div>Now let's see how to make a modal bottom sheet.</div>
<div><br /></div>
<div>
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b><a href="https://www.akshayrana.in/2020/07/how-to-make-dark-night-mode-theme-in.html" target="_blank">Make Dark Theme In App</a>
</b>
</span>
</div>
<h2 style="text-align: left;">How to make Modal Bottom Sheet in Android</h2>
<div>
making the modal bottom sheet is fairly simple. Add this below code in the
activity java file. We are using the same layout as we made before for the
persistence bottom sheet.
</div>
<div><br /></div>
<div>
We have added a button to the activity layout to trigger the modal bottom
sheet and in the click method, we will add this code.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/a37a25c44c5db39afdf736421852ae50.js"></script></div>
<div><br /></div>
<div>
If you click outside of the modal bottom sheet then it will slide down hide.
</div>
<div><br /></div>
<div>Now run your app see your bottom sheet.</div>
<h2 style="text-align: left;">Implement Callback of Bottom Sheet</h2>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/bc4174db85910d1292048f93e033c3c4.js"></script></div>
<div><br /></div>
<div>
<div>
If you learned something new then do share this article with your friends
and batchmates and don't forget to subscribe to our newsletter if you
haven't joined already for the latest updates.
</div>
<div><br /></div>
<div>Thanks for reading have a nice day.</div>
</div>
<div>
<div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
</div>
<div><br /></div>
<div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-22259522108634460602020-07-27T12:34:00.000+05:302020-08-06T22:24:44.845+05:30How to make Tabs with swipeable view in Android [2020]<h1 style="text-align: left;">
Make Tabs with Swipeable Layout using ViewPager2 and TabLayout
</h1>
<div class="separator" style="clear: both;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRGpR0aYhDcrUGVeGG9i8fFRhzn5b4oT8JEecF7jMPK2ENlAIf_9_Gbk4HfsEqb_f0dcGooB1c8NNrxTR5pphsrm3805gu8GXdmwMhLLGHmMa8OtNUxFMxOj7OeLNPjdtFevT29qKt-WM/s2048/Tabs-with-Swipeable-Layout-using-ViewPager2-and-TabLayout-compressed.webp" style="display: block; padding: 1em 0px;"><img alt="Swipeable View using ViewPager2 and TabLayout" border="0" data-original-height="1152" data-original-width="2048" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRGpR0aYhDcrUGVeGG9i8fFRhzn5b4oT8JEecF7jMPK2ENlAIf_9_Gbk4HfsEqb_f0dcGooB1c8NNrxTR5pphsrm3805gu8GXdmwMhLLGHmMa8OtNUxFMxOj7OeLNPjdtFevT29qKt-WM/w640-h360/Tabs-with-Swipeable-Layout-using-ViewPager2-and-TabLayout-compressed.webp" title="Swipeable View using ViewPager2 and TabLayout" width="640" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div>
Hello world, today we are going to see how to make a swipeable view using
ViewPager2 and TabLayout. We will see how to use fragment and how to sync tab layout indicator with ViewPager2 swipes. We will set the tab layout title to the tabs and then inflate our views in viewpager. Let's look at the finished app in the below gif.
</div>
<div><br /></div>
<div class="separator" style="clear: both;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAhEFK8BtwWh8n56VzkDuapDOETX06scdiMRmg4mo5se0IRwokFzikKubGyMouNph-1t632j5mNZfkXuWMe4uiQoO_PfbIhlPlSWQYwAChULf-zMSogh-nedvl-nHRJdYznfzI4M9U7oI/s534/Swipeable+View+using+ViewPager2+and+TabLayout+App.gif" style="display: block; padding: 1em 0px; text-align: center;"><img border="0" data-original-height="534" data-original-width="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAhEFK8BtwWh8n56VzkDuapDOETX06scdiMRmg4mo5se0IRwokFzikKubGyMouNph-1t632j5mNZfkXuWMe4uiQoO_PfbIhlPlSWQYwAChULf-zMSogh-nedvl-nHRJdYznfzI4M9U7oI/s0/Swipeable+View+using+ViewPager2+and+TabLayout+App.gif" /></a>
</div>
<div>
To make the swipeable views, first, we need to add a required dependency for
our project.
</div>
<div><br /></div>
<h2 style="text-align: left;">Add Dependency for TabLayout</h2>
<div>
Open your build.gradle file app level and in the dependency section and add these dependencies. We need this dependency to use TabLayout.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/bc9823d58c81f974bc121a79c4cd4d5c.js"></script></div>
<div><br /></div>
<div>
After adding and syncing the project. Let's add TabLayout and <a href="https://developer.android.com/jetpack/androidx/releases/viewpager2" target="_blank">ViewPager2</a> in
our activity XML file.
</div>
<h2 style="text-align: left;">Add TabLayout and ViewPager2 in Activity XML</h2>
<div>
Add the below code in the activity_main.xml or your activity xml file.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/3478db05c8df7ebedcbe1efe471a1220.js"></script></div>
<div><br /></div>
<div>
In the above code, we have added the TabLayout with some attributes
properties.
</div>
<div><br /></div>
<div>
We set the minimum height to the TabLayout and after that, we set the
background-color.
</div>
<div><br /></div>
<div>
Then we set the text color of the tab title which we will go to show then we add tab selected text color then we set the tab indicator color that tells us that which is active now. Then we set tab mode to fixed because we will have only 2 tabs if you have more tabs then you can add scrollable property.
</div>
<div><br /></div>
<div>ViewPager2 is simple here nothing fancy. </div>
<div><br /></div>
<div>Next, we create 2 fragments.</div>
<h2 style="text-align: left;">Make fragment for the ViewPager</h2>
<div>
First, we made a fragment folder where we will create our all the fragments.
We will make 2 fragments for our app.
</div>
<div><br /></div>
<div>
To make the fragments we will right-click on the fragment folder which we
created above then click on new then fragment and select the blank fragment.
</div>
<div><br /></div>
<div>
The first fragment name will be HomeFragment and the second fragment name will
be SettingFragment.
</div>
<div><br /></div>
<div>We removed all the code except the onCreateView method.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/20c83386af57294be82c3a21b81a8863.js"></script></div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/9c5d4e630f9df7087ee1b9ac27adeb4c.js"></script></div>
<div><br /></div>
<div>
In the fragment xml, we have just a textview just for demo purpose of course
you can add your elements and write your login in fragment java file in the
onViewCreated method.
</div>
<div><br /></div>
<div>Now we need to make an adapter for the viewpager.</div>
<div><br /></div>
<div><span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b><a href="https://www.akshayrana.in/2020/07/how-to-make-dark-night-mode-theme-in.html" target="_blank">Make Dark Theme In App</a>
</b>
</span></div>
<h2 style="text-align: left;">Make Adapter for ViewPager</h2>
<div>
Make a new java class file and extend it to FragmentStateAdapter and implement the required methods. Then we make constructor with the parameters of
FragementActivity and the List of the Map of String and Object.
</div>
<div><br /></div>
<div>
And also we made a function getTitle to get the title from the list of maps.
</div>
<div><br /></div>
<div>See the below code to understand.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/ba29f313ca710d435a9b47582b824c33.js"></script></div>
<div><br /></div>
<div>
We re passing the list of maps and this map has our fragment title and
fragment.
</div>
<div><br /></div>
<div>
In the getTitle method, we will return the title value which we will pass in
the adapter constructor.
</div>
<div><br /></div>
<div>
Now let's connect these all the fragments and the viewpager in the
MainActivity.java.
</div>
<div><br /></div>
<h2 style="text-align: left;">
Connect Adapter and TabLayout to ViewPager
</h2>
<div>Now the main thing comes.</div><div><br /></div><div><script src="https://gist.github.com/Akshay-Rana-Gujjar/5e12abfa2d0dd29501329959b6523db6.js"></script></div>
<div><br /></div>
<div>
First, we get our viewpager, and then we made a list of maps to pass in the
adapter's constructor.
</div>
<div><br /></div>
<div>
We have created a function with the arguments that returns the map of fragment
title and fragment.
</div>
<div><br /></div>
<div>
We store this returned map to the new map. the first map is for home fragment
and the second map is for setting fragment.
</div>
<div><br /></div>
<div>
Then add these maps to the list and finally, we instantiated our adapter and
pass the required parameters.
</div>
<div><br /></div>
<div>
The first parameter is activity and the second parameter is for the list.
</div>
<div><br /></div>
<div>Now let's make the tabs and sync with the viewpager.</div>
<div><br /></div>
<h2 style="text-align: left;">Make and Sync Tabs with ViewPager</h2>
<div>
To make the tabs we will use the TabLayoutMediator object and it accepts 3
parameters.
</div>
<div><br /></div>
<div>
The first parameter is for TabLayout, the second parameter is for Viewpager
which will be sync to the tabs and the third parameter is an interface of
TabLayoutMediator.TabConfigurationStrategy().
</div>
<div><br /></div>
<div>
After adding all the parameters we are setting the tab title by calling the
setText method and in the parameter we car calling the adapter's getTitle
method which we made above.
</div>
<div><br /></div>
<div>
After that, we need to call the attach method to the TabLayoutMediator.
</div>
<div><br /></div>
<div>
Now run your app and your viewpager with the tabs will work just fine.
</div>
<div><br /></div>
<div>
If you learned something new then do share it with your friends and batchmates
and don't forget to subscribe to our newsletter if you haven't joined already.
</div>
<div><br /></div>
<div>Thanks for reading have a nice day.</div>
<br />
<div>
<div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
</div>
<div><br /></div>
<div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-71586601503144809492020-07-25T12:00:00.003+05:302020-09-08T23:05:00.366+05:30Firebase Cloud FireStore Database in Android | Beginner Android Tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="text-align: left;">
<span><font size="5">How to use Firebase Cloud FireStore Database in Android</font></span>
</h1>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh2dsLWg6r3JvJ9IBlZqOY7qoR9Ipz6O5P1NTzaBBP50nBC47_wiGSQb5ZszM5uSERri0PBTj4qnXfO3vwQmfxiiHeDEva8fgod-mbDQb1DWiNLLFoNv8A77n_YK4jAusP1U68WCTWUqw/s2048/How+to+use+Firebase+Cloud+FireStore+Database.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Firebase Cloud FireStore Database in Android" border="0" data-original-height="1152" data-original-width="2048" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh2dsLWg6r3JvJ9IBlZqOY7qoR9Ipz6O5P1NTzaBBP50nBC47_wiGSQb5ZszM5uSERri0PBTj4qnXfO3vwQmfxiiHeDEva8fgod-mbDQb1DWiNLLFoNv8A77n_YK4jAusP1U68WCTWUqw/w640-h360/How+to+use+Firebase+Cloud+FireStore+Database.jpg" title="Firebase Cloud FireStore Database in Android" width="640" /></a>
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div><br /></div>
<div>
Hello World, today we are going to see how we can make a todo app using a
<b>firebase cloud firestore database</b>. The <b>Firestore database </b>is a very flexible and scalable NoSQL database to make our development very
fast. <b>Firestore</b> is very easy to use in android. FireStore can work smoothly even if your device is offline it can fetch data from the
cache in the device so that your app can work offline and update the data
when it connects to the internet again. This functionally makes your app for
interactive for the users. <b>Firestore database</b> has one more feature is
to watch realtime changes in the database and you can show updates in the
app.
</div>
<div>
<span><br /></span>
</div>
<div>
<span>Firestore database can execute queries so that you can filter your data
as per your requirement, this feature makes the firestore database more
likely to choose for your project.</span>
</div>
<div>
<span><br /></span>
</div>
<div>
<span>Firestore database stores the data in the documents and these documents
are saved in the collection. </span>Think it like the collection is a file folder that has multiple documents
and these documents have some data written on it.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69InvqzRXHNOT1rJdY5ZCy9Q5RIyjImQdlndM8gTlLmtC5mYozacILQKwEmmuhw5acgUL4vmi3G0EnfeHIjbPEXfMe3au_sCsWeG7p4PW63iSe_UH3OFtiVF-fArnce7OaFG1vSmbYBY/s500/Collection+and+Document+in+Firebase+FireStore+Database.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Collection and Document in Firebase Databse" border="0" data-original-height="500" data-original-width="500" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69InvqzRXHNOT1rJdY5ZCy9Q5RIyjImQdlndM8gTlLmtC5mYozacILQKwEmmuhw5acgUL4vmi3G0EnfeHIjbPEXfMe3au_sCsWeG7p4PW63iSe_UH3OFtiVF-fArnce7OaFG1vSmbYBY/w200-h200/Collection+and+Document+in+Firebase+FireStore+Database.jpg" title="Collection and Document in Firebase Databse" width="200" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div>
Let's check our app which will be going to build using Firebase Cloud
FireStore Database.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTq4wm8nLKO8KnvOU1dtyX-q5Rt9q4kSPFAQSSc_gobCz5JLf06Dh9uUFxHaGqoZzgx5r9oKNR0MY1nKGuSFgDQon-5FNGCFpNBGN6ajQX8ZOf6H8ofVAAUKC7mZSzdUHzIESObJfBctM/s549/Firebase+FireStore+To+Do+App.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="549" data-original-width="307" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTq4wm8nLKO8KnvOU1dtyX-q5Rt9q4kSPFAQSSc_gobCz5JLf06Dh9uUFxHaGqoZzgx5r9oKNR0MY1nKGuSFgDQon-5FNGCFpNBGN6ajQX8ZOf6H8ofVAAUKC7mZSzdUHzIESObJfBctM/s0/Firebase+FireStore+To+Do+App.gif" /></a>
</div>
<div><br /></div>
<div>Let's make our app.</div>
<div><br /></div>
<h2 style="text-align: left;">Make a new project in Firebase Console</h2>
<div>
The first thing we need to make a new project in the firebase console. Let's
head to <a href="https://console.firebase.google.com/">https://console.firebase.google.com/</a> and make a new project by clicking on the new project. Follow all the
instructions.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2KfCcQGUVLoqPmkEg3tIYDViaLNHkYwmHBhnBvcxXkwfv8umFquIDNGSTC__lcpJ5cnQsj8YRIXPbocTVyBVPoyT74kZ2lWnJ4sgJqF4DRRf9hM8wFWME5If8Lsg64K4lj67ZbGRDotI/s976/make-new-project-in-firebase.webp" style="margin-left: 1em; margin-right: 1em;"><img alt="make new project in firebase" border="0" data-original-height="589" data-original-width="976" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2KfCcQGUVLoqPmkEg3tIYDViaLNHkYwmHBhnBvcxXkwfv8umFquIDNGSTC__lcpJ5cnQsj8YRIXPbocTVyBVPoyT74kZ2lWnJ4sgJqF4DRRf9hM8wFWME5If8Lsg64K4lj67ZbGRDotI/w400-h241/make-new-project-in-firebase.webp" title="make new project in firebase" width="400" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div>
After creating the project lets add our android project. Click on the
android icon.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ze8bn4GOXBt6YK2lcone7CR-MgCZcldTmWd-DR3tmpeG3khF4kNkOun9UB5hclVV3nKliSbQouTukVcXeklra-EJRR6MySYzakoaCuihPh79z6jd_2GSIS3pYCbRL9idyZjtenYhPbE/s542/make-android-project-in-firebase-compressed.webp" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="427" data-original-width="542" height="315" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ze8bn4GOXBt6YK2lcone7CR-MgCZcldTmWd-DR3tmpeG3khF4kNkOun9UB5hclVV3nKliSbQouTukVcXeklra-EJRR6MySYzakoaCuihPh79z6jd_2GSIS3pYCbRL9idyZjtenYhPbE/w400-h315/make-android-project-in-firebase-compressed.webp" width="400" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div>and then fill your package name then app name.</div>
<div><br /></div>
<div>
Download the google-services.json file and paste this file in the app folder
of your app.
</div>
<div><br /></div>
<div>
After that follow the instructions of the firebase. Add required
dependencies and hit the sync button.
</div>
<div><br /></div>
<div>Your dependencies will look like below.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/282b2038077238cbab6407ba23ede928.js"></script></div>
<div><br /></div>
<div>We have added dependencies for firestore and <a href="https://www.akshayrana.in/2020/06/what-is-recyclerview-in-android.html" target="_blank">recyclerview</a>.</div>
<div><br /></div>
<div>Now let's move to make layout our app.</div>
<div><br /></div>
<h2 style="text-align: left;">Make Layout of the Application</h2>
<div>
To make the layout we will add this code in our activity_main.xml file.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/aebdc0cf8d46f531d2ae170d8c08da62.js"></script></div>
<div><br /></div>
<div>
In the above code, we have added an edit text, a button, and a <a href="https://www.akshayrana.in/2020/06/what-is-recyclerview-in-android.html" target="_blank">recyclerview</a>.
</div>
<div><br /></div>
<div>
add below dependency in your app level build.gradle file to use <a href="https://www.akshayrana.in/2020/06/what-is-recyclerview-in-android.html" target="_blank">recyclerview</a>
in the project.
</div>
<div><br /></div>
<div><pre>implementation 'androidx.recyclerview:recyclerview:1.1.0'</pre></div>
<div><br /></div>
<div>
If you want to know more about <a href="https://www.akshayrana.in/2020/06/what-is-recyclerview-in-android.html" target="_blank">recyclerview</a> you can check it here. </div>
<div><br /></div>
<div>Now we need to make the item layout of the <a href="https://www.akshayrana.in/2020/06/what-is-recyclerview-in-android.html" target="_blank">recyclerview</a>.</div>
<div><br /></div>
<div>Make a new layout file and add this code to it.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/ab7326dcb6638d138b519a494c75fe88.js"></script></div>
<div><br /></div>
<div>
In the above code, we have a checkbox and an imageview to act as a delete
button and set their respective ids.
</div>
<div><br /></div>
<div>
If you want to add a delete icon in your project you can easily add this by
right-clicking on drawable folded then select new and then click on the
vector assets and in the next window choose your icon and icon name then
save the icon and now you can use this icon in imageview.
</div>
<div><br /></div>
<div>After all this, we will add the functionality of our app.</div>
<div><br /></div>
<div>
Before making the functionality we need to create a database in the firebase
console. Go to your firebase project and click on develop and choose the
database and then click on create database.
</div>
<div><br /></div>
<div>
Note that there will be 2 options. One for Cloud FireStore and in the below
on that second option is for the realtime database. But we need to create a
database for Cloud FireStore.
</div>
<div><br /></div>
<div>
Now we need to make a model class (POJO object class) which will be using in
the firebase and in the <a href="https://www.akshayrana.in/2020/06/what-is-recyclerview-in-android.html" target="_blank">recyclerview</a>.
</div>
<div><br /></div>
<h2 style="text-align: left;">
Make Model Class for Firebase and RecyclerView
</h2>
<div>
We need to make a model class that will hold the data. The model class will
help to set the data and get the data using getter and setter functions. We
have to specify the data type and number of field that we want to use. See
the below code to make a model for the to-do app.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/1aa969c7ef76529ea68e110016903c15.js"></script></div>
<div><br /></div>
<div>
In the above model class if you noticed we are using an annotation
@DocumentId above the taskId. This annotation is telling that taskId field
will be using as document id of the firebase document and when we add data
to the firestore database this property will ignore to create in the
firestore database. If you are not understanding what I am saying then keep
reading you will understand.
</div>
<div><br /></div>
<div>
Then we make a task string field for holding the task value as a string and
the lat field is for either task is done or not. After that, we made the
getters and setters method to set the values and get the values.
</div>
<div><br /></div>
<div>
After making the model we will move to MainActivity.java and make adding
data to database functionality.
</div>
<div><br /></div>
<h2 style="text-align: left;">
Add data to Firebase Firestore Using Model Class
</h2>
<div>
To add the task data in the firestore we need to get task value from edit
text and on the click of the button, we will check the value if it is not
empty and then we will use firebase functions to add the data, let's see
how.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/96b12f7876298e3e9a2972b0e023dd06.js"></script></div>
<div><br /></div>
<div>
In the above code, first, we create a database instance of firestore, and
then we are getting our EditText and Button from the activity xml layout in
the onCreate method.
</div>
<div><br /></div>
<div>
Then we implement click listener on the button and this will add data in the
firestore database. In the click method first, we are getting a string from
the edit text and then check if the string is not empty. If the string is
empty then we show a toast and then return from the method.
</div>
<div><br /></div>
<div>
Then we create our task model object and set values using setter methods. We
set taskDone to false and set task string. Notice that we are not setting
the taskId as it will handle by the Firebase library.
</div>
<div><br /></div>
<div>
Now, this the point where we will add the data to the database.
</div>
<div><br /></div>
<div>
First, we get the reference of the collection by using the db.collection
method and then call the add method and pass our model which we just created
above and then we add the success listener.
</div>
<div><br /></div>
<div>In the success listener, we remove the string from the EditText.</div>
<div><br /></div>
<div>
Now if you run your app then enter a task in the EditText and click on the
add button. Check your database in the Firebase console there will be the
newly created document in your collection.
</div>
<div><br /></div>
<div>Note that collection is created automatically if it does not exist.</div>
<div><br /></div>
<div>This is how we add the data in the <b>Firestore Database</b>.</div>
<div><br /></div>
<div>
Now see how we can get the data from the database and show in the
<a href="https://www.akshayrana.in/2020/06/what-is-recyclerview-in-android.html" target="_blank">recyclerview</a>.
</div>
<div> </div>
<h2 style="text-align: left;">
Fetch Data from FireStore Database & show in RecyclerView
</h2>
<div>
For showing the data in the <a href="https://www.akshayrana.in/2020/06/what-is-recyclerview-in-android.html" target="_blank">recyclerview</a> we need to make an adapter class
for the recyclerview as we do while implement recyclerview. So let's make a
new java file and extend it to a recyclerview adapter.
</div>
<div><br /></div>
<div>
Then we need to pass our viewholder class to do that we create an inner
class in our adapter class and pass this class as generic in the adapter and
implement the all required methods.
</div>
<div><br /></div>
<div>
After creating all the classes we need to make a constructor with
parameters. These parameters are Context, List of a task model, and db
reference.
</div>
<div><br /></div>
<div>See the below code for better understanding.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/fc8968548301e8f0d1f54431b0411694.js"></script></div>
<div><br /></div>
<div>
Return the list size in the getItemCount method. Now come to the viewholder
class and write the below code.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/883300b65350d98a956fd0c41ebb5dcc.js"></script></div>
<div><br /></div>
<div>
If you remember we have created task_item.xml with a checkbox and an
imageview for the delete button. We will use these elements in the
viewholder and create their references to work with them.
</div>
<div><br /></div>
<div>
And in the onBindViewHolder method in the adapter. We are setting the
checkbox text and its check state.
</div>
<div><br /></div>
<div>
Now the main thing is to update the existing task value in the database. We
want to update the task done value in the database when user check or
uncheck the checkbox. We have to add a listener to this in the
viewholder.
</div><div><br /></div><div>Inflate our task_item.xml view in onCreateViewHolder.</div>
<div><br /></div>
<div>
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b><a href="https://www.akshayrana.in/2020/07/how-to-make-dark-night-mode-theme-in.html" target="_blank">Make Dark Theme In App</a>
</b>
</span>
</div>
<h2 style="text-align: left;">Update Value in FiresStore Database</h2>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/018832a83de5eae41ce9627e7b0a2e2c.js"></script></div>
<div><br /></div>
<div>
First, we get the current item position and then the item's task id to
update the document in the database.
</div>
<div><br /></div>
<div>
Again we get the reference to the collection then get the document reference
by passing the task id in the document method this id is the document id. If
you open you collection in the firebase console then the random string are
shown are the document ids.
</div>
<div><br /></div>
<div>We are using these ids as taskId.</div>
<div><br /></div>
<div>
After getting the reference to the document then we are calling the update
function and in the first parameter, we pass the field name which we are
going to update and the value to be set in the database.
</div>
<div><br /></div>
<div>
If you run your app and click on the checkbox then the value in the
firestore database will update.
</div>
<div><br /></div>
<div>
Now if the user wants to delete the task so let's make the delete
functionality.
</div>
<div><br /></div>
<h2 style="text-align: left;">Delete Document from FireStore Database</h2>
<div>
To delete the document from the database. As we did above to update the
value we call update method but for deleting the document, we will call the
delete method on document reference and add a success listener to remove the
task model from the list of task models and update the recyclerview.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/4550c2c90ba0ff119a92e1f4551ae7a2.js"></script></div>
<div><br /></div>
<div>
After removing the task we need to notify the adapter to update the
recyclerview. So we called to notifyDataSetChanged method.
</div>
<div><br /></div>
<div>
now at this point, we have completed the adapter code now attach the adapter
to the recyclerview. Go to your activity java file and make an adapter
construct with required parameters and set layout manager to the
recyclerview and set the adapter to the recyclerview.
</div>
<div><br /></div>
<div>
Then we fetch all the tasks and convert them to the task model add them to
the list of the task model and notify the adapter for change in the list.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/d8ffd9d8571009dc503fa9cd7c601b58.js"></script></div>
<div><br /></div>
<div>
To convert the document to our model object we will call the
document.toObject method and pass the class. This will return object of task
and add this object to the list.
</div>
<div><br /></div>
<div>After the loop ends, we notify the adapter to change the data.</div>
<div><br /></div>
<div>
If you run your app at this point and add a new task then your recyclerview
will not show the new task as haven't written that code in on add button
click we only added for the database. To add the new task in the
recyclerview we need to write the below code in the onClick method.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/415d1d6f8d868821eda92b53054410f9.js"></script></div>
<div><br /></div>
<div>
In the success listener of the firestore, we received the newly created
document id which we can use to add a new task in recyclerview. We use the
above task model object and add its task id and then pass to the list of
task models and finally notify the adapter to update the recyclerview.
</div>
<div><br /></div><div>Here is the full code of MainActivity.java</div><div><br /></div><div><script src="https://gist.github.com/Akshay-Rana-Gujjar/18b405fabf0f096fcca0840866c6ad04.js"></script></div><div><br /></div>
<div>Now our app is ready to add a task, delete and update them.</div>
<div><br /></div>
<div>
If you learned something new then do share it with your friends and
batchmates and don't forget to subscribe to our newsletter if you haven't
joined already.
</div>
<div><br /></div>
<div>Thanks for reading have a nice day.</div>
<br />
<div>
<div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
</div>
<div><br /></div>
<div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our
T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-31129729954661486092020-07-23T00:36:00.003+05:302020-08-05T17:25:50.608+05:30How to make Dark (Night) Mode Theme in Android | Android Tutorial<h1 style="text-align: left;">
How to make Dark (Night) Mode Theme in Android
</h1>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9nkNbQlS2j-T77lc0w3YZ-T-vhGhY9mWyDYCSu3ekF8vSTqbJEKEX5XBGOyUEoAhcjIh5n1gy99iXmbGrKnCWkK1cYsJaQFo0K_IPaAoQ6IDyXlkiLe-VjCwxKyXlGMvM2pYWcMcWJS8/s2048/How+to+make+Dark+%2528Night%2529+Mode+Theme+in+Android-min-compressed+%25281%2529.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="How to make Dark (Night) Mode Theme in Android" border="0" data-original-height="1152" data-original-width="2048" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9nkNbQlS2j-T77lc0w3YZ-T-vhGhY9mWyDYCSu3ekF8vSTqbJEKEX5XBGOyUEoAhcjIh5n1gy99iXmbGrKnCWkK1cYsJaQFo0K_IPaAoQ6IDyXlkiLe-VjCwxKyXlGMvM2pYWcMcWJS8/w640-h360/How+to+make+Dark+%2528Night%2529+Mode+Theme+in+Android-min-compressed+%25281%2529.jpg" title="How to make Dark (Night) Mode Theme in Android" width="640" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div>
Hello World, today we are going to see how we can <b>implement a dark theme or night mode</b> in our android application. This tutorial is going to be very simple and easy to understand. The dark theme is attractive to users and it is comfortable for low light conditions. Recently many apps adapt dark mode in their app and the output of the <b>night mode</b> is amazing as many users love <b>dark mode</b> for their app. An example of a dark theme is Whatsapp dark mode in android see the below image.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifufd2-eFILqAXCGm0U-8-d-8HmRaanbRiFB_teUDCls0_FLXEFI2Z8O6R4YrHkfB77J5OMohiccCeEhPjlfBev2kRI1sb2-AzUmH03eE2kbShBXsxvA7gpVuQg6uxhUSEPWg3i11T3zI/s600/whatsapp-dark-mode.webp" style="margin-left: 1em; margin-right: 1em;"><img alt="Whatsapp dark mode" border="0" data-original-height="337" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifufd2-eFILqAXCGm0U-8-d-8HmRaanbRiFB_teUDCls0_FLXEFI2Z8O6R4YrHkfB77J5OMohiccCeEhPjlfBev2kRI1sb2-AzUmH03eE2kbShBXsxvA7gpVuQg6uxhUSEPWg3i11T3zI/d/whatsapp-dark-mode.webp" title="Whatsapp dark mode" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div>
Let's look at how our app will look like, see the below gif for our end result
app.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjctaRDPAfm-qTLOZadlTip-z6ArX4ewhD7kKpI7o5jsS5OdARCGQZ3eANMQ7UoIOuFOG32_IqOwO9ffRDDa0yP_TZgfCwSMwKbP8tVbQE0BP1PVLLDPRpOfVzLMG6sgIxCFtBRKzYE3sc/s438/How+to+make+Dark+%2528Night%2529+Mode+Theme+in+Android.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="438" data-original-width="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjctaRDPAfm-qTLOZadlTip-z6ArX4ewhD7kKpI7o5jsS5OdARCGQZ3eANMQ7UoIOuFOG32_IqOwO9ffRDDa0yP_TZgfCwSMwKbP8tVbQE0BP1PVLLDPRpOfVzLMG6sgIxCFtBRKzYE3sc/s0/How+to+make+Dark+%2528Night%2529+Mode+Theme+in+Android.gif" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div>Let's see how we can implement dark theme in our app.</div>
<div><br /></div>
<h2 style="text-align: left;">Make layout for dark theme</h2>
<div>
First, we need to make our layout so that we can apply our dark theme to it.
</div>
<div><br /></div>
<div>If you see the above gif we used <a href="https://www.akshayrana.in/2020/06/what-is-cardview-in-android.html" target="_blank">cardview</a> to make our layout.</div>
<div><br /></div>
<div>See the below code for layout.</div>
<div><br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/4a66e0c1b9d10be321674fe3abc52740.js"></script>
</div>
<div><br /></div>
<div>
Now we need to set theme colors in the layout, for example, we need to set the background color of activity and <a href="https://www.akshayrana.in/2020/06/what-is-cardview-in-android.html" target="_blank">cardview</a> and also we need to set textview color and icon colors. But setting all the colors we need some way to set colors dynamically.
</div>
<div><br /></div>
<div>
We want to change the background color of activity to dark black color when we
apply our dark theme in the application.
</div>
<div><br /></div>
<div>
To make the dynamic values we will need to make attrs.xml file in the values
folder.
</div>
<div><br /></div>
<h2 style="text-align: left;">
Make custom attribute values for layout.
</h2>
<div>
Create a new xml file in the values folder. Right-click on values folder and
click on new then click values resource file and type attrs in the file name
field.
</div>
<div><br /></div>
<div>Your values folder should look like below:</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTdWZsg3Plxyk-bfepgas4uURmt7Sh7rx1387KlKek2WiBZUXKYeRxtYTqidBx1pVa1qab6ERB3dHW9fZb3rCL4EFy3jooBKfRFhXpu0iBsjsL9ITcl3Vx_409O7Ac1DrWg9Swea-fl8E/s175/android+studio+values+folder.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="126" data-original-width="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTdWZsg3Plxyk-bfepgas4uURmt7Sh7rx1387KlKek2WiBZUXKYeRxtYTqidBx1pVa1qab6ERB3dHW9fZb3rCL4EFy3jooBKfRFhXpu0iBsjsL9ITcl3Vx_409O7Ac1DrWg9Swea-fl8E/s0/android+studio+values+folder.png" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div>
In the attrs.xml we will declare our custom attribute values like below.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/b86b667fd84719237c5b4e4c5601b0bb.js"></script></div>
<div><br /></div>
<div>
In the above code, we have defined 7 values and their type which is color. Each
of the values, we will use in our layout file.
</div>
<div><br /></div>
<div>
But before using these values we need to assign or set these values in our
currently applied theme and also we will make our dark theme and update these
attribute values.
</div>
<div><br /></div>
<div>
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b><a href="https://www.akshayrana.in/2020/06/recyclerview-and-cardview-example-android.html" target="_blank">Cardview with Recyclerview Example</a>
</b>
</span></div>
<div><br /></div>
<h2 style="text-align: left;">
Make Dark theme in styles.xml and set attributes value.
</h2>
<div>
First, we will set attribute values for our default or light theme then we will update those attribute values in the Dark theme. Let's do this.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/c4aa662aa74e9fa192a005c56eedab16.js"></script></div>
<div><br /></div>
<div>
In the AppTheme we are setting our attribute value you are free to change as per your need. We are setting default colors. Then we made a new theme called
DarkAppTheme and now this time we are setting all the custom attribute values to the dark theme matching colors.
</div>
<div><br /></div>
<div>
We have set the app background color to black and other background colors to
dark colors and set text and icon colors according to the dark theme.
</div>
<div><br /></div>
<div>
Now the time to use these values in our layout. Open your activity XML file
and check the background and textColor values as shown below.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/d3691af5cbe6bc3125a9d98f607853d7.js"></script></div>
<div><br /></div>
<div>
If you noticed background and text color values, see how we use the attribute
values in the activity layout so that these take values from the currently
applied theme and set we set DarkAppTheme the values of the Dark theme will
update and hence our layout values will also update and our dark theme will be
in use.
</div>
<div><br /></div>
<div>Let's see our we can switch our theme from the java code.</div>
<div><br /></div>
<h2 style="text-align: left;">Set Theme to DarkAppTheme using Java</h2>
<div>
Now we have completed our XML part now its time to make logic to change the
dark theme in the app.
</div>
<div><br /></div>
<div>
To apply the dark theme we need to call the setTheme method before
setContentView function called in the onCreate function of the activity.
</div>
<div><br /></div>
<div>
If you want to apply a dark theme on click of the button as shown in the above gif. We can use this code.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/075c74ec33966c27ea01a437e9cc57af.js"></script></div>
<div><br /></div>
<div>
To toggle the theme we need to check which theme is currently applied in so
that we can change the theme to do that we can use AppCompatDelegate
class which helps us to determine which theme is currently applied by using
its static function setDefaultNightMode.
</div>
<div><br /></div>
<div>
AppCompatDelegate's setDefaultNightMode function will save the current theme
configuration and we can check that value and apply our theme according to the
check as we have shown in the above code.
</div>
<div><br /></div>
<div>
Now if you launch your app then when you click the button your nice looking
dark theme is ready to rock the world.
</div>
<div><br /></div>
<div>
Now if you want that if the user sets the theme and closes the app and
relaunch the app and the last applied theme will be used then you have to use
<a href="https://www.akshayrana.in/2020/01/shared-preferences-android.html" target="_blank">Shared Preferences to save the configuration</a> and fetch the information on the launch of the app. You can read about <a href="https://www.akshayrana.in/2020/01/shared-preferences-android.html" target="_blank">Shared Preferences here</a>.
</div>
<div><br /></div>
<div>
<div>
If you like this article do share it with your friends and batchmates and
don't forget to subscribe to our newsletter if you haven't joined already.
</div>
<div><br /></div>
<div>Thanks for reading have a nice day.</div>
</div>
<br />
<div>
<div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
</div>
<div><br /></div>
<div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-68023269570469470622020-07-20T18:37:00.003+05:302020-07-22T13:19:35.442+05:30Custom Switch in Android | Akshayrana.in | Android Tutorial<h1 style="text-align: left;">How to make Custom Switch in Android?</h1>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioKIjhjEQxklow_O9jbOJ5vrtWZAmF2Xrut7zjui8NBpyIH7PDv7w8Z08wrbHg1ZSYAtxLi-ymI8mTQL815fHIk5McuQAPsIGL78AVLzAvgtRe3WbB5UXlJ8njRCjTsp_77TC1PUT8ft0/s560/Custom+Switch+in+Android.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Custom Switch in Android" border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioKIjhjEQxklow_O9jbOJ5vrtWZAmF2Xrut7zjui8NBpyIH7PDv7w8Z08wrbHg1ZSYAtxLi-ymI8mTQL815fHIk5McuQAPsIGL78AVLzAvgtRe3WbB5UXlJ8njRCjTsp_77TC1PUT8ft0/d/Custom+Switch+in+Android.png" title="Custom Switch in Android" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div>
Hello World, Today we are going to make a custom switch. Why? Because the
default one looks so boring and ugly. Why we use a switch? As the name
suggests, the switch is used to trigger the value either it is on, or it is
off. Let's see, how our custom switch will look at the end of the tutorial.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhn5mpcn72vpP_4hV8id11kVbUAzkMqeGmW4qA4H7X3LRsNxv67xW-NAJrVmD0wPMx5s1kZMBUZJ3CcrEobcjEk3si8Ir-UzfckYS4AuBNmhWg5LYWLLg_70GQLoROW-pnAj62w8kdmV8/s656/Custom+Switch+gif.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="656" data-original-width="368" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhn5mpcn72vpP_4hV8id11kVbUAzkMqeGmW4qA4H7X3LRsNxv67xW-NAJrVmD0wPMx5s1kZMBUZJ3CcrEobcjEk3si8Ir-UzfckYS4AuBNmhWg5LYWLLg_70GQLoROW-pnAj62w8kdmV8/w225-h400/Custom+Switch+gif.gif" width="225" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div>
In the above gif, there are 3 switches. The First one is the default one and
the second and third are our custom switches. To make these custom switches we
need to follow certain steps are as follows:
</div>
<div><br /></div>
<h2 style="text-align: left;">Step 1. Add Switch to Activity Layout</h2>
<div>
First. we need to add the switch to our layout XML file. We will
add SwitchCompat to the layout.
</div>
<div><br /></div>
<div>Look at the below code for better understanding.</div>
<div><br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/ee3a3bf6d068e943569a88cead7156e4.js"></script>
</div>
<div><br /></div>
<div>
In the above code, things to be noticed are app:track and android:thumb
attributes.
</div>
<div><br /></div>
<div>
The track is the horizontal container where our thumb or round shape view is
placed and the thumb is, as I told you before, is the round shape where we
will add an image on top of it.
</div>
<div><br /></div>
<h2 style="text-align: left;">Step 2. Make Custom Track for Switch</h2>
<div><br /></div>
<div>
To make our custom track we need to make a drawable file and set the root
element as a selector. So click on the drawable folder and make a new file and
name it as track.
</div>
<div><br /></div>
<div>In our track.xml we write this code for making the custom track.</div>
<div><br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/a4215ccf1e0151396a08e645f607c853.js"></script>
</div>
<div><br /></div>
<div>
In the above code, we made two items in the selector where the first item
represents the state when the <a href="https://developer.android.com/reference/android/widget/Switch" target="_blank">switch</a> is off or not checked and the second item
represents the state when the switch is on or checked.
</div>
<div><br /></div>
<div>
In the first item, we made a shape of a rectangle and fill white color with
having corner radius with a grey color stroke or outline and in the second
item the only difference is filled color will be our accent color and stroke
will be removed but the corner radius will be the same.
</div>
<div><br /></div>
<div>Now let's make our thumb part where we will add images on the thumb.</div>
<div><br /></div>
<h2 style="text-align: left;">Step 3. Make Custom Thumb with Image. </h2>
<div>
To make custom thumb for the switch, create a drawable file in a drawable
folder and name it as the thumb.
</div>
<div><br /></div>
<div>In our thumb.xml file, we will write the below code.</div>
<div><br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/3e2b2339fd131d74d7268987d093e5b2.js"></script>
</div>
<div><br /></div>
<div>
as track.xml here we also have the root element as a selector and have the
same item tags but this time we set drawable in the attribute. These drawable
are our drawable file where we will add images. Let's add our vector icons to
use in thumb drawable.
</div>
<div><br /></div>
<h3 style="text-align: left;">Add images for thumb</h3>
<div>
Right-click on drawable then click on new then select vector assets and then
choose your icon from clip art. for demo purpose we are selecting notification
on and off icon.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxxaECcywOCqDrr3zuxVLT44qTlr-rfnAcHsCcj_1EHq7HJrw1Oycq3vJxokCzz6yfYbmrMhbWVgXFWTRuG-WQxIV5VTWR5BHEq5I5CBdbzrwVGehN2g3xpB9AzqndXCQWz7nXfwBlr6A/s56/notification-icon-on.png" style="margin-left: 1em; margin-right: 1em;"><img alt="notification on icon" border="0" data-original-height="56" data-original-width="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxxaECcywOCqDrr3zuxVLT44qTlr-rfnAcHsCcj_1EHq7HJrw1Oycq3vJxokCzz6yfYbmrMhbWVgXFWTRuG-WQxIV5VTWR5BHEq5I5CBdbzrwVGehN2g3xpB9AzqndXCQWz7nXfwBlr6A/d/notification-icon-on.png" title="notification on icon" /></a>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOZCPcgGMElP-hxvLrL7I_fIPDyomneFtUJ3m56Hw8fqOFkFPSQNl6pAuYnqcKPYmHrENHUXiAA_viI6avdfgY3WEURAFW6SOqZZB0QfspHMv5DkSJnNxgNXdIW5LJ7z5A4hjTFqXKV-c/s52/notification-off-icon.png" style="margin-left: 1em; margin-right: 1em;"><img alt="notification off icon" border="0" data-original-height="52" data-original-width="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOZCPcgGMElP-hxvLrL7I_fIPDyomneFtUJ3m56Hw8fqOFkFPSQNl6pAuYnqcKPYmHrENHUXiAA_viI6avdfgY3WEURAFW6SOqZZB0QfspHMv5DkSJnNxgNXdIW5LJ7z5A4hjTFqXKV-c/d/notification-off-icon.png" title="notification off icon" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div>
After adding the icons, we need to make drawable files for custom thumb off
and one for the thumb on which will be add in thumb.xml as drawable.
</div>
<div><br /></div>
<div>
Let's make the first file in the drawable for thumb off and set an image to
the thumb. Check the below code.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/aa9891e7016e0f69f9d9ef5edc4379d2.js"></script></div>
<div><br /></div>
<div>
If you noticed, we are using the layer-list as the root element and in the
child, we have 2 items.
</div>
<div><br /></div>
<div>
The first item is our oval (round) shape of the thumb with the size and
background color and the second item is our image drawable with 12dp padding
from the top, bottom, left, and right.
</div>
<div><br /></div>
<div>
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b><a href="https://www.akshayrana.in/2020/06/recyclerview-and-cardview-example-android.html" target="_blank">Cardview with Recyclerview Example</a>
</b>
</span>
</div>
<div><br /></div>
<div>
So this was for when the switch is off our custom thumb will look like this
now its turn for thumb true when the switch is on.
</div>
<div><br /></div>
<div>
Create a new file with the name switch_thumb_true and the code will be like
below.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/ff89c1d8a3a9daa9d21ef171f129b46f.js"></script></div>
<div><br /></div>
<div>
Like thumb false, this code is similar to it but the differences are we added
the stroke to the round shape and of course change the image drawable.
</div>
<div><br /></div>
<div>
Now we have made the all necessary files now its time to run our app and your
custom switch is ready. Tada!!!!
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMhqE__lNPgytKIyXp4ahLZhnge_I9w-AnWGZenAvqNoRaAPu8ImacdTCxhhyphenhyphen6Y6kR8LDuYcD7qhycbDR8elQxrJgNXu0-PxFGPWeg2u52vtkKwJ3V3zZyJufZ0xobfKSdwVcHlwncFnE/s200/custom+switch+android.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="114" data-original-width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMhqE__lNPgytKIyXp4ahLZhnge_I9w-AnWGZenAvqNoRaAPu8ImacdTCxhhyphenhyphen6Y6kR8LDuYcD7qhycbDR8elQxrJgNXu0-PxFGPWeg2u52vtkKwJ3V3zZyJufZ0xobfKSdwVcHlwncFnE/s0/custom+switch+android.jpg" /></a></div><div><br /></div>
<div><br /></div>
<div>
This switch is our middle one if you want to make track height small then you
need to do some extra work. Keep reading...
</div>
<div><br /></div>
<h2 style="text-align: left;">
How to make track height smaller than the thumb.
</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir0fVwgT1DU94dMqCvF0XXdWUhusQvNnT6eZoYhlK9eY6Zw6u0ZrzwdLVoV6vgVnwEuPHhyIXSOALeYGLtOLOFIGFmFuR4pe2btCfa2uo115iE7nqXZghd4KWD4dpkTkk5_03RWZ5BvZo/s100/Webp.net-resizeimage.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="smaller track than thumb switch" border="0" data-original-height="49" data-original-width="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir0fVwgT1DU94dMqCvF0XXdWUhusQvNnT6eZoYhlK9eY6Zw6u0ZrzwdLVoV6vgVnwEuPHhyIXSOALeYGLtOLOFIGFmFuR4pe2btCfa2uo115iE7nqXZghd4KWD4dpkTkk5_03RWZ5BvZo/d/Webp.net-resizeimage.jpg" title="smaller track than thumb switch" /></a></div><div><br /></div><div><br /></div>
<div>
To make a smaller track, we need to make 2 files for the track on and track
off and set to selector file as drawable as we did for the thumb on and off.
</div>
<div><br /></div>
<div>First, change your track.xml like the below code.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/4129ca627148a581eebcccbe15ff97bc.js"></script></div>
<div><br /></div>
<div>
Now this time we removed the shape code and add drawable files. Now make both
files and let's see their code.
</div>
<div><br /></div>
<div>For the first track_off.xml</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/5b226cf071c77bc9b35d00e1717aca91.js"></script></div>
<div><br /></div>
<div>
We are using the layer-list as root element and then the first item has a
shape with the same code on previous track code but the twist is we have just
added a rectangle shape and add 12sp padding to the top and the bottom of the
second shape to make track height smaller than the thumb.
</div>
<div><br /></div>
<div>The same thing needs to be done in the track_on.xml</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/d7629afa3c4f23f8e6445d9ccc078b93.js"></script></div>
<div><br /></div>
<div>
After setting these files to track.xml run your app and your track height will
be small.
</div>
<div><br /></div>
<div>
<div>
If you like this article do share it with your friends and batchmates and
don't forget to subscribe to our newsletter if you haven't joined already.
</div>
<div><br /></div>
<div>Thanks for reading have a nice day.</div>
</div>
<br />
<div>
<div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
</div>
<div><br /></div>
<div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>
<div><br /></div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-80105302415796389772020-07-14T21:36:00.001+05:302020-07-14T21:36:35.713+05:30How to make custom toast in Android with Example<h1 style="text-align: left;">Android Custom Toast With Example</h1>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnpc4GQfqeUHXkLS_YK8J7bzB1CeYrwy0Ytg9oxQrbqposB5cvc-Jh-JvDNrHElex-Nd4XImbRPRblqQcHpvSr3SbZJrnadkQt-2MA-j2IAa1ig3Ny9Sh_pAYroDEzzBbWwGZ9ZQdeevo/s560/Android+Custom+Toast+With+Example.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Android Custom Toast With Example" border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnpc4GQfqeUHXkLS_YK8J7bzB1CeYrwy0Ytg9oxQrbqposB5cvc-Jh-JvDNrHElex-Nd4XImbRPRblqQcHpvSr3SbZJrnadkQt-2MA-j2IAa1ig3Ny9Sh_pAYroDEzzBbWwGZ9ZQdeevo/d/Android+Custom+Toast+With+Example.png" title="Android Custom Toast With Example" /></a>
</div>
</div>
<div><br /></div>
<div>
Hello World, today we will be going to see how we can make custom toast and in
this tutorial, we will see custom toast with an example. See below as an
example.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNY2Brre5FhbQFssTqDL9cfp2h1yVTDWsSnyb0C-5DGzdxRpkyq-Ip4AWBGmN6f1ma_Je_V-SY2n7C086Ebqmgq0-VM8tsJhPLH-OWUCYlM9qnS9sE_CSDXjvmk2XIqGJAOdYOpMw5Jus/s656/20200714_200456_001_1.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Android Custom Toast gif" border="0" data-original-height="656" data-original-width="368" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNY2Brre5FhbQFssTqDL9cfp2h1yVTDWsSnyb0C-5DGzdxRpkyq-Ip4AWBGmN6f1ma_Je_V-SY2n7C086Ebqmgq0-VM8tsJhPLH-OWUCYlM9qnS9sE_CSDXjvmk2XIqGJAOdYOpMw5Jus/d/20200714_200456_001_1.gif" title="Android Custom Toast gif" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div>Before starting let's see.</div>
<div><br /></div>
<h2 style="text-align: left;">What is Toast? When to use it?</h2>
<div>
Toast is a view that contains text which notifies the user with some
information.
</div>
<div><br /></div>
<div>We can use toast when we want to notify the user.</div>
<div><br /></div>
<h2 style="text-align: left;">Making Custom Toast with Example</h2>
<div>To make custom toast we need to follow certain steps as follows.</div>
<div><br /></div>
<h3 style="text-align: left;">Step 1. Create a Custom Layout for Toast</h3>
<div>the first step is to make a layout file for our toast.</div>
<div><br /></div>
<div>
To make a layout file, right-click on layout folder under res and select new
-> layout resource file.
</div>
<div><br /></div>
<div>
we will name this file as custom_toast.xml and in this file, we will make our layout which will b shown in the <a href="https://developer.android.com/guide/topics/ui/notifiers/toasts" target="_blank">toast</a>. Check the below code for the layout file.
</div>
<div><br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/eafc8a51669af07de51508d9b9c190c5.js"></script>
</div>
<div><br /></div>
<div>
In the above code, we set the id to the parent view and we added an imageview
and a textview.
</div>
<div><br /></div>
<div>We are keeping things simple so that you can understand better.</div>
<div><br /></div>
<div>our layout looks like this below.</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm7-VpDjGyLhSDpG7-oI8ryYuSJ6O2XC5VW7DU2hbFDvJ3tcn7miOFkY-q9Z362SM9qlm8Pg3LSlH58BGVbHYpT0s04DNesCex_UOJ4kkCrraNp4gr9mxzoWNGsw-2Q_X82hXf60vsl0o/s377/custom+toast+layout.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="217" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm7-VpDjGyLhSDpG7-oI8ryYuSJ6O2XC5VW7DU2hbFDvJ3tcn7miOFkY-q9Z362SM9qlm8Pg3LSlH58BGVbHYpT0s04DNesCex_UOJ4kkCrraNp4gr9mxzoWNGsw-2Q_X82hXf60vsl0o/s320/custom+toast+layout.png" /></a>
</div>
<div><br /></div>
<div><br /></div>
<h3 style="text-align: left;">Step 2. Set layout file to the Toast</h3>
<div>
To trigger the toast we made a button in the activity layout and calling the
makeToast function on click.
</div>
<div><br /></div>
<div>Let's see the code in the makeToast function.</div>
<div><br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/4082a8d5662f9736cf5d468be6c30f99.js"></script>
</div>
<div><br /></div>
<div>
In the above code, when we click the button this function triggers and in the
function first we are making an empty toast or initialize the toast and pass
the context.
</div>
<div><br /></div>
<div>
In the next line, we are inflating our custom toast layout using
getLayoutInflater() and then calling inflate method which accepts 2
parameters.
</div>
<div><br /></div>
<div>
The first parameter is out layout file reference and the second parameter is the root view group that is our custom layout parent view so that we find the view by using its id and cast it as ViewGroup. Then we are specifying the toast duration as usual.
</div>
<div><br /></div>
<div>
Finally, the next step is setting this layout to the custom toast. Using the
setView method we are setting the layout to the toast and then show the toast
as we do with default toast.
</div><div><br /></div><div>
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b><a href="https://www.akshayrana.in/2020/01/snackbar-in-android.html" target="_blank">How to make SnackBar?</a>
</b>
</span>
</div>
<div><br /></div>
<div>
Now run your app and click on the button you will see your custom toast.
</div>
<div><br /></div>
<div>
Now you can customize your layout file as per your requirement and make your
custom toast more beautiful.
</div>
<div><br /></div>
<div>
If you like this article do share it with your friends and batchmates and
don't forget to subscribe to our newsletter if you haven't joined already.
</div>
<div><br /></div>
<div>Thanks for reading have a nice day.</div>
<div><br /></div>
<div>
<div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
</div>
<div><br /></div>
<div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-14873316746017214852020-07-14T02:14:00.001+05:302020-07-14T02:20:26.727+05:30Working with Bottom Navigation bar in Android [Full Guide]<h1 style="text-align: left;">How to make Bottom Navigation bar in Android</h1>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Bottom Navigation bar in Android" border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIJoYl5ab087dH-5HVPro1s-DMTDCZ5XzpZY3LkrDZ9Nw3IULFvl0U46ms_uFCfCuBi0tYI1r8pa0nYLqX5WVjj9v9es-PZDm0ntFhpGyTVM2651baNMujjl54Xpd3wk_skhAlfLkkQW8/d/Bottom+Navigation+Bar+in+Android.png" title="Bottom Navigation bar in Android" />
</div>
<div><br /></div>
<div>
Hello World, Today we are going to learn how we can make a nice <b>bottom navigation bar in android</b>. We will see how we can implement <b>bottom navigation</b> and how to work with fragments and many other things and trust me you will enjoy this tutorial. Before making our <b>bottom navigation bar</b> lets look at our final result. See the below gif.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Bottom Navigation Bar in android" border="0" data-original-height="480" data-original-width="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQnjjliCQ_4vEPnzPnSaqUYv_ESaoQCyeUB8a88x3zr6CWjJidYyZngwu4VQ2o01c4hdbC43U5IuTVZS90ey8i5ARoZJZhvwl4re6hyphenhyphenK1bGLpu7gvisB7yv8PynUDdG9DyxqFVRP1iEbM/d/bottom+navigation+bar+in+android.gif" title="Bottom Navigation Bar in android" />
</div>
<div><br /></div>
<div>
This is a clean and <b>material design based bottom navigation bar</b>. So let's see
how to code this.
</div>
<div><br /></div>
<h2 style="text-align: left;">Add Bottom Navigation Bar Dependency</h2>
<div>
To make the bottom nav bar, first, we need to add the dependency for the
bottom navigation bar.
</div>
<div><br /></div>
<div>Open your build.gradle file and add this dependency.</div><div><br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/e72683c04f19401128d0e38cd48b25ea.js"></script>
</div>
<div>
After adding the dependency hit the sync button and after syncing the project,
we can use BottomNaigationView in our layout file.
</div>
<div><br /></div>
<h2 style="text-align: left;">Add BottomNavigationView in Layout</h2>
<div>
Open your layout file and in the layout XML, we need to add 2 things. The
first thing is FrameLayout, which will contain our fragments and the second
thing is <a href="https://developer.android.com/reference/com/google/android/material/bottomnavigation/BottomNavigationView" target="_blank">BottomNavigationView</a>.
</div>
<div><br /></div>
<div>See the below code.</div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/4fb8d726d79c5b6139c3ce107c4d645b.js"></script></div>
<div><br /></div>
<div>Explanation:</div>
<div><br /></div>
<div>
First, we have ConstraintLayout as parent layout and then in children we have,
FrameLayout and BottomNavigationView.
</div>
<div><br /></div>
<div>
Nothing is fancy here except BottomNavigationView. Have you noticed
the app:menu="@menu/bottom_nav_menu". In this line, we have created a
menu for our bottom nav which we will see later. Let's move further.
</div>
<div><br /></div>
<div>
Next, we have app:itemIconTint and ;app:itemTextColor which has the
same value @color/bottom_nav_item_selector. So what this property means
and what is the value. These properties or attributes help us to change the
nav icon color. </div><div><br /></div><div>If you noticed the bottom nav icon color they are white in
color and the active screen has solid white color and rest are having off
white color. How you can customize these bottom navigation bar icons? I will
tell you later in this tutorial.
</div>
<div><br /></div>
<div>
Next is app:labelVisibilityMode and the value is "labeled". This property
is responsible for weather showing text below of the icons in Bottom
Navigation Bar. There are other values are as follows:
</div>
<div>
<ul style="text-align: left;">
<li>Selected</li>
<li>Unlabeled</li>
<li>Auto</li>
</ul>
Selected: Text will be shown only selected navigation item.
</div><div><br /></div>
<div>Unlabeled: Text will be hidden in navigation.</div>
<div><br /></div><div>
Auto: Icon text will be shown if there are 3 or less items in navigation and
text will be shown only at the selected item when there are 4 or more items in
navigation.
</div>
<div><br /></div>
<div>Now let's see how to add items or menu in the bottom navigation.</div>
<div><br /></div>
<h2 style="text-align: left;">How to make menu for BottomNavigationView?</h2>
<div>
To make menu for the bottom navigation bar, first, we need to make a menu
folder under the res folder.
</div><div><br /></div>
<div>
To make a folder under res, right-click on res folder in android studio and
then click new then click on Android Resource Directory.
</div><div><br /></div>
<div>
Then a popup window comes and click on resource type and select menu and hit
OK.
</div><div><br /></div>
<div>
Now your menu folder is created. Now we need to make our menu resource file.
To do that we need to right-click on the menu folder and click on new ->
Menu Resource File.
</div><div><br /></div>
<div>
Now we name our menu file same as in BottomNavigationView in activity layout
file which is bottom_nav_menu.
</div><div><br /></div><div>
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b><a href="https://www.akshayrana.in/2020/02/gradient-status-bar-and-toolbar-android.html" target="_blank">Gradient Status bar and Toolbar</a>
</b>
</span>
</div>
<div><br /></div>
<div>In this file, we will add out menu item as shown below code.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/cda16cabca69772f1ac06c5ca1381d89.js"></script></div>
<div>
In the above code, we made 4 items for our bottom navigation. Each item has an
id, an icon, and title. Simple.
</div><div><br /></div>
<div>Now see how we can customize the icon color of items.</div>
<h2 style="text-align: left;">
How to Change Icon Color of BottomNavigationView?
</h2>
<div>
To change icon color when an item is selected in the bottom navigation bar
like below.
</div>
<div class="separator" style="clear: both; text-align: center;"><img alt="bottom nav bar items" border="0" data-original-height="57" data-original-width="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW7Mtp9wJ6Jp36PI6zbyWzCSpPZMbV0cOpVuDuzVR0J4YsvWJbD2p9QovwId4l_6RF-hjlN2fRDbypzFd1EoQkaPj2DLuw3rMl2c7MZBseFFRtnEVXbO_cwL2GiGtcFISrSlFdOgrSAHA/d/bottom-nav-items.jpg" title="bottom nav bar items" /></div><div><br /></div>
<div>
You will need to make your own color selector XML file. Follow the tutorial.
</div>
<div>
First, make color directory under the res folder. Right click on res folder
and select new -> Android Resource Directory.
</div><div><br /></div>
<div>Then select resource type to color and hit enter.</div><div><br /></div>
<div>
After making the color directory we need to make color resource file. Right
click on color folder and then new -> color resource file and name that
file bottom_nav_item_selector anf hit ok.
</div>
<div>
In this file, we will write code for changing the color of icon color of
items.see the below code.
</div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/00b60193f481faa8ccae6c3758f43e53.js"></script></div>
<div><br /></div><div>
In the above code, android:state_checked="true" is the item where you
want to add color for a selected item and other is for non selected items.
</div><div><br /></div>
<div>
Pass this file in app:itemIconTint and app:itemTextColor of
BottomNavigationView in your layout XML.
</div><div><br /></div>
<div>Now let's make fragments for each item of the bottom navbar.</div>
<div><br /></div>
<h2 style="text-align: left;">Make Fragments for Bottom Nav Bar</h2>
<div>
To make a fragment, just like you create a new activity in an android studio
same you right-click on package folder and select new -> fragment ->
fragment (blank).
</div><div><br /></div>
<div>
We have 4 items in nav so we will make 4 fragments e.g HomeFragment,
TrendFragment, AccountFragment and last SettingFragment.
</div>
<div><br /></div>
<div>
After making the fragment now let's see how to change fragment on click of the
items.
</div>
<h3 style="text-align: left;">
How to change or open fragment on Navigation Item click</h3>
<div>
To set click listener for BottomNavigationView, we have a method <b>setOnNavigationItemSelectedListener</b>
of BottomNavigationView.
</div>
<div>Open your MainActivity.java and add below code.</div><div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/494ef3ef17e67aefc53cf284df6530dd.js"></script></div>
<div>
In the above code, first, we are getting our <b>BottomNavigationView</b> and then we
are calling our openFragment method and in this method, we are changing
the fragments.
</div><div><br /></div>
<div>
First. we are opening HomeFragment on the start of the activity and then we
add the setOnNavigationItemSelectedListener method to bottomNav.
</div><div><br /></div>
<div>
in the onNavigationItemSelected, we are using switch statement and
checking the clicked item id and according to that, we are opening the
corresponding fragment. In the case of switch these are the ids of the menu
which we created earlier.
</div>
<div><br /></div>
<div>Now run your app and your bottom navigation bar will work fine.</div>
<div><br /></div>
<div>
If you enjoy this tutorial then do share it on your facebook or maybe your
WhatsApp group or even your friends and batchmates.
</div><div><br /></div>
<div>Thank you for reading have a nice day.</div><div><br /></div>
<div><div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div></div>
<div><br /></div>
<div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-66918160453799993982020-06-25T22:02:00.002+05:302020-06-25T22:02:57.914+05:30Skeleton content loading animation in android | Facebook Shimmer<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
What is Facebook Shimmer
</h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Skeleton content loading animation in android" border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM8W_6PQdhmc4FRrPjxwJn3UBngHdeTYZET4wtXJNcbs8bwoZ09t2xy9VjKdZFW2XUoWEeZU_vI-FxlBVbb0BcbWWvHIiPt0ip5hNRbeRC3oCrZQPy6NpRQHI5orgaLGbOxNApPRvBsCE/d/Skeleton+content+loading+animation+in+android.png" title="Skeleton content loading animation in android" />
</div>
<span></span>
<div class="separator" style="clear: both; text-align: left;">
Today we are going to see what is Facebook shimmer and how to use it?<br />See
below example to understand Facebook shimmer.
</div>
<div class="separator" style="clear: both; text-align: left;"><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="content loading animation" border="0" data-original-height="656" data-original-width="368" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5p9CK9rgH9toz9jV8DfOMP0Z3dplbQUvABysMWma4XUubIkJryB3MaKsQHiBlmNOVSFrTx-3DtDX30t6qRE9jJSMZtHI5ej3FvevkLC73dmvWqRVUnl3uCAnLUmVbrJ85Edi-g6TeWf4/d/Shimmer+loading+animation+in+android.gif" title="content loading animation" />
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<p style="text-align: left;">
The Facebook shimmer is used to show or indicate the user that the content
is loading from somewhere which takes sometimes so that users need to wait.
While content is loading, it is necessary to show the user an indication
that content is loading and it is bad practice to leave screen blank which
confuses user what is happening in the app or maybe the user thinks the app
is hanging.
</p>
</div>
<h2 style="text-align: left;">How to use Facebook Shimmer</h2>
<p style="text-align: left;">
So enough talking, let do some code on how to make content loading animation
using facebook shimmer library. See below <b>facebook shimmer android example</b>
</p>
<p style="text-align: left;">
To use facebook shimmer first we need to add the dependency to your project.
See below to add facebook shimmer dependency.
</p>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/a4367c37ef92b4262326c6c35d0f8b0e.js"></script>
</div>
<div>
After adding dependency, let's create our layout. For demo purposes, we are
creating our layout some like below.
</div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="cardview layout" border="0" data-original-height="490" data-original-width="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XErr0pYifxKF8R5Myq1Nf_KEkjwj0FrRXGPMNdcBYU55Wk9uHNOKBDti2TLjicrWYuj3FJRyt-9yc_GO-Vy-zUYE-5CJjUEp509uv6n0L08UR8XyNMABYoTgysBI4CPAZWwrXT1u5Aw/d/cardview-layout-for-shimmer-effect.jpg" title="cardview layout" />
</div>
<div><br /></div>
<div>
To make the above layout we are using this code.
<br />
<script src="https://gist.github.com/Akshay-Rana-Gujjar/74a2dc64cfe61cd184fb5e5bd93961d2.js"></script>
</div>
<div>You can make your own layout according to your need.</div>
<div>
Note: we use
<a href="https://www.akshayrana.in/2020/06/what-is-cardview-in-android.html" target="_blank">cardview</a>
for making this layout you can read here about
<a href="https://www.akshayrana.in/2020/06/what-is-cardview-in-android.html" target="_blank">how to use cardview in android</a>.
</div>
<div>After the layout, we need to add code for facebook shimmer effect.</div>
<div>
First, we need to add ShimmerFrameLayout as parent container of the shimmer
effect we can simply copy our main layout and with minor changes, we have done
with our shimmer layout part. See below code and remember to set the
visibility of main layout to gone.
</div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/7097387db2650a652559a862b6dd0be0.js"></script>
</div>
<div>
Notice the ids we have assigned to the ShimmerFrameLayout
(facebookShimmerLayout).
</div>
<div>Now, this all for layout part now its time to come to java part.</div>
<div>See the below code.</div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/916163535ae250e317cd5b5753055438.js"></script>
</div>
<div>
First, we are getting our main container which is cardview and then
ShimmerFrameLayout.
</div>
<div>
To start the shimmer animation we need to call the startShimmer method of
ShimmerFrameLayout
</div>
<div><span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b><a href="https://www.akshayrana.in/2020/06/recyclerview-and-cardview-example-android.html" target="_blank">Recyclerview and Cardview example</a>
</b>
</span></div>
<div>
if you run your app at this point, your shimmer effect will show but it will
not end as we never stopping it.
</div>
<div>
To stop the shimmer we need to call stopShimmer methods of ShimmerFrameLayout.
</div>
<div>
For showing some delay and faking data loading we are using handler then we
stop the shimmer and change its visibility and also change the visibility of
the main container to visible.
</div>
<div><br /></div>
<div>
You can use this effect with
<a href="https://www.akshayrana.in/2020/06/what-is-recyclerview-in-android.html" target="_blank">recyclerview</a>
and change its visibility.
</div>
<div><br /></div>
<div>
Thank you for reading this article on the skeleton shimmer effect in android.
If you learn something new then share this article with your batchmates and
friends
</div>
<div><br /></div>
<div>
<div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
</div>
<div><br /></div>
<div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-6847076473176527052020-06-22T20:18:00.002+05:302020-06-22T20:20:26.314+05:30What is RecyclerView in Android?<h2 style="text-align: left;">RecyclerView in Android</h2>
<div class="separator" style="clear: both; text-align: center;"><img alt="RecyclerView in Android" border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIjSo5c55ZaDbutt6EDueYUpTFxk-apnv-FmNf-WT1QfTEn7GD9-jabrlhSYld3yczRVsLkB1xoJyFQn9KEaagH_pSVlD7lQlVU-Pp4v0Jvb7T8g5dvMZV8Oh2TZyNh_6PPZO9sPppJI/d/RecyclerView+in+Android.png" title="RecyclerView in Android" /></div><div>Hello world, today we are going to learn what is recyclerview, what are its advantages, and what are recyclerview examples? Let's start...</div>
<div><br /></div>
<h3 style="text-align: left;">What is RecyclerView?</h3>
<div>
RecyclerView helps us to make a repetitive and group of views. It can be a
list of views in the form of a list view or in the gird type of view. Think it
about as a loop of views where you can populate your data dynamically in the
child's views. Recyclerview can be used as a listview of textview but with
different text. You can also use
<a href="https://www.akshayrana.in/2020/06/recyclerview-and-cardview-example-android.html" target="_blank">cardview with recyclerview</a>
to make your UI look professional.
</div>
<div><br /></div>
<div>
Check this tutorial on
<a href="https://www.akshayrana.in/2020/06/recyclerview-and-cardview-example-android.html" target="_blank">how to make simple recyclerview using cardview?</a>
</div>
<div><br /></div>
<div>
According to the <a href="https://developer.android.com/" rel="nofollow" target="_blank">android official site</a>, what is recyclerview?
</div>
<div><br /></div>
<div>
<div>
The RecyclerView widget is a more advanced and flexible version of ListView.
</div>
<div><br /></div>
<div>
<i>In the RecyclerView model, several different components work together to
display your data. The overall container for your user interface is a
RecyclerView object that you add to your layout. The RecyclerView fills
itself with views provided by a layout manager that you provide. You can
use one of our standard layout managers (such as LinearLayoutManager or
GridLayoutManager), or implement your own.</i>
</div>
</div>
<div><br /></div>
<h3 style="text-align: left;">Advantages of RecyclerView</h3>
<div>The advantages of recyclerview are as follows:</div>
<div>
<ul style="text-align: left;">
<li>Make dynamic views using recyclerview</li>
<li>Don't need to make all the child views</li>
<li>Less code as compared if you make a group of the same views</li>
<li>Set listeners to the child elements in recyclerview.</li>
<li>you can make vertical as well as horizontal scroll list of view</li>
<li>Choice from 3 types of layout manager</li>
<li>Less memory consumption for better performance</li>
<li>Can animate items of recyclerview </li>
</ul>
<div>These are some advantages but not least.</div>
</div>
<div><br /></div>
<h3 style="text-align: left;">RecyclerView Layout Manager</h3>
<div>
If we compare recyclerview with listview then we have 2 extra types of the
list to show a view that is grid view and staggered grid view.
</div>
<div><br /></div>
<div>
So basically we have 3 layout managers to manipulate the layout of
recyclerview. These layout managers are as follows:
</div>
<div>
<ol style="text-align: left;">
<li>Linear Layout Manager</li>
<li>Grid Layout Manager</li>
<li>Staggered Grid Layout Manager</li>
</ol>
<div>
Let's see the examples app which uses a different layout manager in their
app.
</div>
</div>
<div><br /></div>
<div><span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b><a href="https://www.akshayrana.in/2020/06/recyclerview-and-cardview-example-android.html" target="_blank">Recyclerview and Cardview example</a>
</b>
</span></div>
<div><br /></div>
<h3 style="text-align: left;">Layout manager Examples</h3>
<div>
Here I have listed some example apps so that you can identify their layout
manager.
</div>
<h4 style="text-align: left;">Linear Layout Manager Example</h4>
<div>
Linear layout manager is very common to use and it can be found almost every
app.
</div>
<div><br /></div>
<div>
Linear layout manager takes the full width of the device to make a single row
like structure.
</div>
<div><br /></div>
<div>Some apps that use linear layout manager are:</div>
<div><br /></div>
<p style="text-align: left;"><b>1. Whatsapp recent chat list.</b></p>
<p style="text-align: left;">
In the below screenshot of Whatsapp, every recent chat takes full length of
device to make list type structure.
</p>
<p style="text-align: left;"></p><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both; text-align: center;"><img alt="Whatsapp recent chat screen" border="0" data-original-height="900" data-original-width="506" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXrczT-zju8U0Ae-vtzINnABWAqXDvZ07VpiNr8tx8JpyR_69PX6rYL2I7_m1tqoiqQDqYUDr9gNF9e9VATtGT8BzqWNL_AChSEsHoRewiu809Mjd_mDWsujRPGCI-PXLeXEg8yi0F18s/w180-h320/whatsapp-recent-chat-linear-layout.jpg" title="Whatsapp recent chat screen" width="180" /></div></div><br /><p></p>
<p style="text-align: left;"><b>2. Youtube Video Feed</b></p>
<p style="text-align: left;">
See the below screenshot and see how every child takes full-screen width to
the recyclerview.
</p>
<div class="separator" style="clear: both; text-align: center;"><img alt="Youtube App home screen" border="0" data-original-height="585" data-original-width="270" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXtWh9KBtU4VZHiZRVo31AR7GyxgjM033vJBfCpLqK-Dwk6r4wCxCbRZuPP18FxiamRkvTrxbZdmM2I5ARaIj63gskIQAoX-HitadWxVrqaP__OVrPofFa0unY-Pcx0BvyMnVpAcRFSXM/w148-h320/YouTube-home-linear-layout.jpg" title="Youtube App home screen" width="148" /></div><p style="text-align: left;"><br /></p>
<p style="text-align: left;">
I hope you now understand and now able to identify the linear layout manager
next time.
</p>
<h4 style="text-align: left;">Grid Layout Manager</h4>
<div>
As the name suggests a grid-like structure in the app. In the linear layout
manager where item takes full width but in grid layout manager item can be 2
or more in a row.
</div>
<div><br /></div>
<div>Let's see these examples for better understanding.</div>
<div><br /></div>
<p style="text-align: left;"><b>1. Instagram Profile Screen</b></p>
<div>
In the below example, when you open your profile screen on Instagram you can
see your all posts by you. These posts are the best example of the grid layout
manager.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;"><img alt="Instagram profile screen" border="0" data-original-height="585" data-original-width="270" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVGyoIomHWTKaEfN3ztSrIh-ym1golpd6-y3lkI54G61SzdJCod1ofJ_D-aZqzJv8kTaQAAyggj2m7OZnlcVAwtJkB4ZG5fRneA2zP2aCOL_jPYvtTpOxd9zbvDDVmfhmCa7Ym0lWPWoA/w148-h320/Instagram-profile-grid-layout.jpg" title="Instagram profile screen" width="148" /></div><div><br /></div>
<div><br /></div>
<p style="text-align: left;"><b>2. Youtube Explore Screen</b></p>
<p style="text-align: left;">
This is a very good example of the grid layout manager. See how the trending category is showing in the grid form.
</p>
<div class="separator" style="clear: both; text-align: center;"><img alt="Youtube App Trending screen" border="0" data-original-height="746" data-original-width="335" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYurslMWj0t6OP2jXZraKQaXHB4Iy7f-_aDhxiOqIBFzKC74C9JpBpZIHqMChHWllbeGE2PXYZ1Z1rYsBrT_MA1s5Lw34zS2sPOO8HM_ekucIcugCUFHfU7I0-x1nQj17T9nsl4p-rLY/w144-h320/YouTube-trending-category-grid-view.jpg" title="Youtube App Trending screen" width="144" /></div><p style="text-align: left;"><br /></p>
<h4 style="text-align: left;">Staggered Grid Layout Manager</h4>
<div>
Staggered Grid Layout Manager is similar to grid layout but the key difference
is that its item's height can be different from each other. Let's see the
below image for better understanding.
</div>
<div><br /></div>
<div><b>1. Pinterest Feed</b></div>
<p style="text-align: left;">
See how every item has a different height and make beautiful grids.
</p>
<div class="separator" style="clear: both; text-align: center;"><img alt="Pinterest feed screen" border="0" data-original-height="585" data-original-width="270" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwc8VFPwJo55Wy8QFQ0QBEgEnchWxZ1KCUqJ3RXj1ss_x9EIo_VrnFKADsqSxrylPrffHprJ2I7BJBhbINLKsODZ26IOo5tPnr5joOodIDpOzxlrMp6WENr0EkBR4dOjvlUCyNrzcMKAQ/w148-h320/Pinterest-staggered-grid-layout.jpg" title="Pinterest feed screen" width="148" /></div><p style="text-align: left;"><br /></p>
<p style="text-align: left;">
This is it. I hope you learn something new if so then don't forget to share this article on your Facebook or Whatsapp or anywhere you want. Thank you for
reading.
</p>
<p>
</p><div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
<div><br /></div>
<div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-85575662897986419852020-06-21T12:15:00.008+05:302020-06-21T12:24:58.698+05:30Recyclerview and Cardview example in Android [Beginner Level]<h2 style="text-align: left;">Working with Recyclerview and Cardview</h2>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Recyclerview and Cardview example in Android" border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFd86-lxqNzm0jStDdGA58EqFOKV7dgIk67yHe7Ns0AAvfhmktMyRCnlht9yjjH1d7T3luEItxUQGAxIERS77lWI_qhVT8kMF1UASMxur3kz2e31O8m-0FXGyTIE4Kynx5_tmgEAji3-w/d/Recyclerview+and+Cardview.png" title="Recyclerview and Cardview example in Android" />
</div>
<div><br /></div>
<div><br /></div>
<div>
Hello World, Today we are going to see <a href="https://www.akshayrana.in/2020/06/recyclerview-and-cardview-example-android.html">how we can make a simple recyclerview with cardview in android studio</a>. In this article, you will learn <a href="https://www.akshayrana.in/2020/06/recyclerview-and-cardview-example-android.html">how to work with recyclerview</a>, what is recyclerview layoutmanager? See the below gif for understanding what we are going to build.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg83jar6hQwpa1iNPf3Jpsggk-5WRs4UFQgv8oFc-c_K7DxsxN0jwXcSCP3m8_Qu0OZXKYccBwxC63zhM_h4Y6o4py7Z1kwqbj7BmmSvKSyodiNFdXzVKti6GLoGLmQ4FqUXl7cARRbrUA/s656/Recyclerview+and+Cardview.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="656" data-original-width="368" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg83jar6hQwpa1iNPf3Jpsggk-5WRs4UFQgv8oFc-c_K7DxsxN0jwXcSCP3m8_Qu0OZXKYccBwxC63zhM_h4Y6o4py7Z1kwqbj7BmmSvKSyodiNFdXzVKti6GLoGLmQ4FqUXl7cARRbrUA/s320/Recyclerview+and+Cardview.gif" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div>Let's start...</div>
<div><br /></div>
<h3 style="text-align: left;">What is Recyclerview in Android?</h3>
<div>
Recyclerview is an advanced version of the listview. It is used to make the repeated view and recycle them to save more memory. Recyclerview is way more efficient than listview. Recyclerview easily handles a large set of views and is very flexible. Recyclerview is like a container that renders a large set of views very efficient manner. Recyclerview is optimized to work with a large number of views and save lots of memory so that your app will freeze or hang the device.
</div>
<div><br /></div>
<div>
According to the
<a href="https://developer.android.com/" rel="" target="_blank">official android site</a>:
</div>
<div><br /></div>
<div>
<div>
<i>The RecyclerView widget is a more advanced and flexible version of
ListView.</i>
</div>
<div>
<i><br /></i>
</div>
<div>
<i>In the RecyclerView model, several different components work together to display your data. The overall container for your user interface is a
RecyclerView object that you add to your layout. The RecyclerView fills itself with views provided by a layout manager that you provide. You can
use one of our standard layout managers (such as LinearLayoutManager or
GridLayoutManager), or implement your own.</i>
</div>
</div>
<div><br /></div>
<h3 style="text-align: left;">What is Cardview in Android?</h3>
<div>
<a href="https://www.akshayrana.in/2020/06/what-is-cardview-in-android.html" target="_blank">CardView</a>
is a widget provided by the android to build a new look and efficient UI. You can make your app look more professional see examples below.
<a href="https://www.akshayrana.in/2020/06/what-is-cardview-in-android.html" target="_blank">Cardview</a>
is an amazing concept which makes your user experience better than old android
UI. Cardview was released with Android version 5.0 which is android lollipop.
</div>
<div><br /></div>
<div>
I have already explained
<a href="https://www.akshayrana.in/2020/06/what-is-cardview-in-android.html" target="_blank">what is cardview</a>, you can read about it
<a href="https://www.akshayrana.in/2020/06/what-is-cardview-in-android.html" target="_blank">here</a>.
</div>
<div><br /></div>
<div>Enough talking now let's go to the coding part. Yay!</div>
<div><br /></div>
<h3 style="text-align: left;">Using Cardview in RecyclerView with example</h3>
<div><a href="https://www.akshayrana.in/2020/06/recyclerview-and-cardview-example-android.html">Making recyclerview with cardview</a> is very simple. We need to follow certain
steps which are listed below.
</div>
<div><br /></div>
<h4 style="text-align: left;">
Step 1. Add required Dependencies in your project.
</h4>
<div>
We use below dependency in our project to <a href="https://www.akshayrana.in/2020/06/recyclerview-and-cardview-example-android.html">use recyclerview and cardview</a>.
</div>
<div><br /></div>
<div>
As we are
<a href="https://www.akshayrana.in/2020/01/load-image-from-url-in-android.html" rel="" target="_blank">loading images from the internet</a>
we also use
<a href="https://bumptech.github.io/glide/" rel="nofollow" target="_blank">glide dependency</a>
in our project, if you want to learn how to use glide then you can read
<a href="https://www.akshayrana.in/2020/01/load-image-from-url-in-android.html" target="_blank">this article</a>.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/38c43d9392475813e8e985d4166d0462.js"></script></div>
<div><br /></div>
<h4 style="text-align: left;">
Step 2. Make Data Model Class for Holding Data
</h4>
<div>
First, we need to make a way to hold data that we are going to use populating
in the recyclerview items.
</div>
<div><br /></div>
<div>
Make a new java file in the package and we name it as ProfileModel.java.
</div>
<div><br /></div>
<div>And in this file, we add below code:</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/733aacc521af0f06dd8b9f3eaa50745b.js"></script></div>
<div><br /></div>
<div>
In the above code, we have a class name ProfileModel which has a private string
variables firstName, lastName, photo, bottomColor.
</div>
<div><br /></div>
<div>
After that, we have a construct with all the variables as parameters to
initialize our field variables.
</div>
<div><br /></div>
<div>
And then, we make the getter method for each and all the variables to get its
values.
</div>
<div><br /></div>
<div>Simple and straight forward.</div>
<div><br /></div>
<h4 style="text-align: left;">
Step 3. Make an item layout file for recyclerview.
</h4>
<div>
In this step, we will make a layout for our a single row of recyclerview so
that recyclerview uses this layout and make copies of items and add data in
the layout if you are unable to understand what I said then don't worry you
will understand later.
</div>
<div><br /></div>
<div>
To make the item layout click on the layout folder under res folder in your project and click on new and then click on the layout resource file. We will name this as profile_item and hit enter.
</div>
<div><br /></div>
<div>See below, what our main components for our item layout.</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dzTCuZoyUbymvVRPIWPWWPm357UPLmmM9KskSIHJKoWwKAy1ciHGmMEdJQRjkfUjFRt3lHq7vOe4jVfX2uDyw' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div><div><br /></div>
<div><br /></div>
<div>
We have a cardview as the main container and an imageview that shows the profile picture and a textview to display the name of the person and in the
bottom a solid color border to make a decoration in the cardview.
</div>
<div><br /></div>
<div>To make this layout we are using the below code.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/34bfffa4c1ff17db5ea37074dd0b60ad.js"></script></div>
<div><br /></div>
<div>
We specific the height of the cardview and make rounded border any using
cardCornerRadius attribute.
</div>
<div><br /></div>
<div>
To use multiple views in the cardview we need to have a container layout in
the cardview.
</div>
<div><br /></div>
<div>
We can't use cardview as a container we must add a layout for multiple views
as child.
</div>
<div><br /></div>
<div>
Next is, to make image round or circular we can use cardview and take advantage of cardCornerRadius attribute. Have you noticed in this cardview we are not using and container because we are not using multiple views we are using only ImageView as a child so no need to add any container.
</div><div><br /></div>
<div>
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b><a href="https://www.akshayrana.in/2020/06/how-to-save-image-to-storage-using.html" target="_blank">Save Image to storage using Glide</a>
</b>
</span>
</div>
<div><br /></div>
<div>
After that, we added a textview to display name and in the last add a
view for showing a border as decoration.
</div>
<div><br /></div>
<div>We have also set the id to all the views for later use.</div>
<div><br /></div>
<h4 style="text-align: left;">
Step 4. Make the Adapter class for recyclerview.
</h4>
<div>
In this step, we will make an adapter class that will help to populate the
data in the view and make item layout copies in the recyclerview.
</div>
<div><br /></div>
<div>Let's start by making a new java file and name it as ProfileAdapter.</div>
<div><br /></div>
<div>
After that, we need to extend this class with RecyclerView.Adapter.
</div>
<div>
<br class="Apple-interchange-newline" />
<script src="https://gist.github.com/Akshay-Rana-Gujjar/854fb59b61a25022ba2bb12b50838b7d.js"></script>
</div>
<div><br /></div>
<div>
At this point, you will see the error in you code. Don't worry and keep going
with the article.
</div>
<div><br /></div>
<div>
Now, we need to create another class for view holder but this one is going to
be an inner class of the ProfileAdapter class and this class will extends
RecyclerView.ViewHolder.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/ad5a75fe91909a210f598c68844e0ed9.js"></script></div>
<div><br /></div>
<div>
At this point, you will see an error in the ProfileViewHolder, to resolve this error you need to make a default constructor with the View parameter and call the super constructor. See the below code.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/01abbd1e516c7678d0f8c5ad402cc1ac.js"></script></div>
<div><br /></div>
<div>
Now in the ProfileViewHolder class, we will make declare all the view which we want to populate the data. So we declare an ImageView for the photo, a
TextView for user name, and View for bottom line background color.
</div>
<div><br /></div>
<div>
After that, we will initialize them in the contractor with their corresponding ids using the itemView variable from constructor parameter. See the below code.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/52a0b7d4b12485b60be101e03a696b51.js"></script></div>
<div><br /></div>
<div>
Now come to adapter class, we made our viewholder class now its time to make
use of it in the adapter class as generic as below.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/fc97b20ab044fafe81a5ff3afec03da8.js"></script></div>
<div><br /></div>
<div style="text-align: left;">
Now we need to implement the required methods these methods are as follows:
</div>
<div style="text-align: left;"><br /></div>
<div style="text-align: left;">
<ul style="text-align: left;">
<li>onCreateViewHolder</li>
<li>onBindViewHolder</li>
<li>getItemCount</li>
</ul>
<div>These are the mandatory methods of a Recyclerview adapter.</div>
<div><br /></div>
<div>Implement them like below.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/4b88989a126a9c07b5faee959a9aefcb.js"></script></div>
</div>
<div><br /></div>
<div>
We need to make a constructor for our adapter class so that we can pass data
from our activity to adapter class.
</div>
<div><br /></div>
<div>Make a constructor like below.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/85f1aa421f90e357f52be5b1d306e542.js"></script></div>
<div><br /></div>
<div>
In the above code, we are getting context and data as in the list and save the
values to the global variables.
</div>
<div><br /></div>
<div>
Now come to the methods, let's start with the third method getItemCount.
</div>
<div><br /></div>
<div>
in this method, you have to return the number of items you want to make in the
recyclerview.
</div>
<div><br /></div>
<div>
So we simply return our data's length or size. in this case, we use the size
method of the list as we will get our data in the list.
</div>
<div><br /></div>
<div>
Now come to the first method, this method class for the first time when we pass an adapter to recyclerview. In this method, we will inflate our item layout which we previously made. See the code for the reference.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/aa3996367c97736051117ad4c0b260d9.js"></script></div>
<div><br /></div>
<div>
And this comes the last method, onBindViewHolder method is called when view binds with the recyclerview and in this method, we write our logic for populating the data in the view. see below for better understanding.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/283615f6dd8a3a516f17464464988346.js"></script></div>
<div><br /></div>
<div>and this ends the adapter part and probably the longest one.</div>
<div><br /></div>
<div>The whole code should look like this.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/c25e92781838b3d3c99e78768651944c.js"></script></div>
<div><br /></div>
<h4 style="text-align: left;">
Step 5. Set Layout Manager and Adapter to RecyclerView.
</h4>
<div>
Now we can set layout manager and adapter but before doing this we need to prepare our list of data and initialize recyclerview after that we can set all the things. See the code below.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/76a62cb07297d3dc4111210e4b2a336c.js"></script></div>
<div><br /></div>
<div>
and that's it now run your app and take a look at amazing recyclerview with
cardview.
</div><div><br /></div><div>If you like this article, do share this article with your batchmates and friends.</div><div><br /></div><div>And also you can subscribe to our newsletter.</div><div><br /></div>
<div>
<div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
</div>
<div><br />
</div><div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-8509632259320598582020-06-19T21:39:00.006+05:302020-07-15T18:46:09.392+05:30Save Image to storage using Glide in Android<h2 style="text-align: left;">Save Image using Glide</h2>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Save Image using Glide" border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicrfb3oRdK3xTPSwiuOE770ejkCPKMWwT1EDCyWvuGsyJx8qwx1uaOxTwHgbwzbUyOre-Ibca6LijNMCS1O7TBdOlZhTtMGALdU5EHxWKmF7WS2xOdxfa1XOYFSLmqkT_e7j01J9uH-tU/d/Save+Image+to+storage+using+Glide.png" title="Save Image using Glide" />
</div>
<div><br /></div>
<div>
Hello World, Today we are going to see how we can
<b>save the image using the Glide library</b>. Sometimes we are already using
glide dependency in our android project to load images from link and we want
to download the same image in the android device. In that case, we can utilize
glide to save that bitmap to our android storage. Continue reading on this
article to see how to download images using
<a href="https://bumptech.github.io/glide/" rel="nofollow" target="_blank">glide dependency</a>.
</div>
<div><br /></div>
<h2 style="text-align: left;">Glide Download Image to File</h2>
<div>
Before we go deep in, I want you to read first
<a href="https://www.akshayrana.in/2020/01/load-image-from-url-in-android.html" target="_blank">how to load image from URL using glide</a>. In that article, I have explained how you can use glide in your
project.
</div>
<div><br /></div>
<div>
Okay, now I am assuming that you know how to use glide to load image from URL.
</div>
<div><br /></div>
<div>I have made this layout to make it easy to understand all the things.</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Download image from glide" border="0" data-original-height="362" data-original-width="293" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpKYf2oWJPfiyfz4r2yS7nIqrZYiEeM-6V1k3QnkzJQ-1cMnmOtOCm_9FP0Zyu6WkBaim9MhkwNo7HsjyDGhQHUMf-DjToYTLV68qzn9khlPC2iwBwrEmgdqkL_Mtnh1x1v8pR-NZgucs/w259-h320/imageview+and+download+button+for+glide.png" title="Download image from glide" width="259" />
</div>
<div><br /></div>
<div><br /></div>
<div>
In the above layout, it is self-explanatory but let me explain here is an
imageview with a button to download the image on click.
</div>
<div><br /></div>
<div>Let's see the logic behind the click button. Check the below code.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/4bba9a06db126d6d0c42dc86f54d9c18.js"></script></div>
<div><br /></div>
<div>
In the above code, on the click of a button, we are calling the donwloadImage
method which accepts link as a string.
</div>
<div><br /></div>
<div>Below is the code in the donwloadImage method.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/bba0df1fbcc88ee48e32b50697899682.js"></script></div>
<div><br /></div>
<div>
First, we are verifying whether we have permission to write in internal
storage or not.
</div>
<div><br /></div>
<div>
Note: Remember to add <span style="background-color: white; font-family: "dejavu sans mono"; font-size: 11.3pt;"><</span><span style="color: navy; font-family: "dejavu sans mono"; font-size: 11.3pt; font-weight: bold;">uses-permission </span><span style="color: #660e7a; font-family: "dejavu sans mono"; font-size: 11.3pt; font-weight: bold;">android</span><span style="color: blue; font-family: "dejavu sans mono"; font-size: 11.3pt; font-weight: bold;">:name</span><span style="color: green; font-family: "dejavu sans mono"; font-size: 11.3pt; font-weight: bold;">="android.permission.WRITE_EXTERNAL_STORAGE"</span><span style="background-color: white; font-family: "dejavu sans mono"; font-size: 11.3pt;">/> </span>in your android manifest file.
</div>
<div><br /></div>
<div>The code of verifyPermissions method looks like this.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/c269ef0d50746563e51f69bc49cf047d.js"></script></div>
<div><br /></div>
<div>Basically, we are checking permission on runtime.</div>
<div><br /></div>
<div>Now back to the downloadImage method.</div>
<div><br /></div>
<div>
Next, we are taking the folder path where we will save our image and store
that value to dirPath variable and then convert it into File Object for
later use.
</div>
<div><br /></div>
<div>
After that, we are retrieving the file name from the user but you are free to
choose whatever you want to be your file name.
</div>
<div><br /></div>
<div>
Now comes the main part of this article, we load the image exactly how we load
the image using glide but the twist is that as you can see in the into()
method we are passing CustomTarget abstract class and implements its
methods.
</div>
<div><br /></div>
<div>
In the onResourceReady method, we are getting the image as Drawable and
then we are converting it in Bitmap.
</div>
<div><br /></div>
<div>
Now we have our image as Bitmap and we can perform the saving operation of
image.
</div>
<div><br /></div>
<div>
After getting the bitmap, we are calling the saveImage method by passing
some parameters.
</div>
<div><br /></div>
<div>
The first parameter is a bitmap, the second parameter is the directory path as
File (which we previously made the variable) and the last and third parameter
is file name.
</div>
<div><br /></div>
<div>Let's see whats in the saveImage method.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/94807932e0e44be571895ce0566ba195.js"></script></div>
<div><br /></div>
<div>
First, we create a directory where we are going to save the image. for that
first, we look if the directory already exists or not and if it does not exist
then we will make a new directory.
</div>
<div><br /></div>
<div>
On successfully directory creation we save that check as boolean
in successDirCreated variable and then on the behalf of that perform the
actions.
</div><div><br /></div><div>
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b><a href="https://www.akshayrana.in/2020/06/how-to-customize-rating-bar-in-android.html" target="_blank">Custom Rating Bar in Android</a>
</b>
</span>
</div>
<div><br /></div>
<div>
Then we make an Object of File to pass it in the OutputStream. After passing
the file object in outputstream then we will call the compress method of
Bitmap and passing some parameters. Let's see what parameters are they?
</div>
<div><br /></div>
<div>
The first parameter is an image format that we want to save. Here we are using Bitmap.CompressFormat.JPEG for jpg images. The second parameter is image quality and we set it to 100 as we don't want to lose any quality of an image and the last parameter is our outputstream variable.
</div>
<div><br /></div>
<div>
After all this work, when we successfully saved the image we need to close the outputstream by calling its close method. Then we notify the user for the image saved. That's how you can save an image using glide in android.
</div>
<div><br /></div>
<div>Hopefully, this helped you in some way.</div>
<div><br /></div>
<div>
Thanks for reading this article and if you like this article then do share it with your batch mates or friends. You can also subscribe to our newsletter for updates on android and other technology.
</div>
<div><br /></div>
<div>
<div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
</div>
<div><br /></div>
<div><br /></div>
<div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-63694235068679220142020-06-18T23:24:00.008+05:302020-07-15T18:46:35.961+05:30Customize rating bar in android<h2 style="text-align: left;">Custom Rating Bar in Android</h2>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Custom Rating Bar in Android" border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQaOo4YxLhv9ZY70Lh_If8QYEG7Ci6zmn5p2g5hv-8f2_vcHXismLECWinCZ4rR_8d9esPf6JCB8TlIGd1vXaUr5bznKFxeaM_IiQcMYRrqsBJ-8phXBkRbW2YsbWse5dasH9LurosbBE/d/Custom+Rating+Bar+in+Android.png" />
</div>
<div><br /></div>
<div><br /></div>
<div>
Hello World, Today we are going to see
<b>how to customize rating bar in android</b> for example:
</div>
<div>
how to make <b>small rating bar</b> or how to change the
<b>color of rating bar</b> or how to completely change rating bar appearance
and <b>set rating change listener</b> etc.
</div>
<div><br /></div>
<h2 style="text-align: left;">
How to change rating bar size or make rating bar small
</h2>
<div>
Making a small rating bar is simple but before making a small rating bar,
let's look at how the default rating bar looks if we add it in our layout?
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Default Rating Bar" border="0" data-original-height="145" data-original-width="492" height="94" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfpVss7B6OwqpRFPkCikQ6Y_RwPI_hVS6e74XfcTjnQ6ssYux20LlkoIHeCzvD-RawtnLEZ-XZCCeip_Bg6kOINxkxr0tF28frYc8WDg_hxqRbkRLwVgpprjsmRmQIh5LXRsF4s4bR4b8/w320-h94/default+rating+bar.png" width="320" />
</div>
<div><br /></div>
<div><br /></div>
<div>
The default rating bar is big and looks ugly, to make it look small and make
stars color golden or yellow we use below code:
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/28e439f120e9e339797d17ead86726e2.js"></script></div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="default rating bar and small rating bar" border="0" data-original-height="133" data-original-width="387" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSM58il51nkpLb0cnh8oXbkEbjGQ_Nhn9oDZ8yK87uGhUkF1AwpDNaqQwmZxYc1wA7DWxYjqMj3Nmd8JO8Vtaehjizig7oDjZADYRmaLvXKE4mPG3djgMEp7dxS_Ym1Rlmz5SiSMgpV5Q/w320-h110/small+rating+bar.jpg" width="320" />
</div>
<div><br /></div>
<div><br /></div>
<div>
Now, this looks perfect, right? But wait what if I tell you that you can use any image instead of stars in the rating bar? excited! Stay with this article and you will catch it later.
</div>
<div><br /></div>
<div>
Now let's see how we can add a listener to the rating bar do that whenever a
user give rating we can at accordingly.
</div>
<div><br /></div>
<h2 style="text-align: left;">Set Listener for Rating bar</h2>
<div>
To add a rating change listener we need to add the below code in our
activity java file.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/e6e0116082ff68e1ee88abf5a4881496.js"></script></div>
<div><br /></div>
<div>
in the first line, we are getting our rating bar widget by using the
findViewById method then we are setting the <span style="background-color: white; font-family: "dejavu sans mono"; font-size: 11.3pt;"><b>setOnRatingBarChangeListener</b> </span>and passing interface in the parameter and implement <span style="background-color: white; font-family: "dejavu sans mono"; font-size: 11.3pt;"><b>onRatingChanged </b></span>method and in the parameters, we are getting our rating in float value as the
second parameter.
</div>
<div><br /></div>
<div>
After getting the rating value by the user we are displaying it in the toast.
Of course, you can use this rating according to your need.
</div><div><br /></div>
<div><span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b><a href="https://www.akshayrana.in/2020/06/what-is-cardview-in-android.html" target="_blank">CardView in Android</a>
</b>
</span></div>
<h2 style="text-align: left;">Custom Rating Bar in Android</h2>
<div>
By default rating bar shows stars as a rating but there are some cases we need to add our own graphics. Let's say you want a rating bar instead of stars we need hearts. something like below:
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;"><img alt="heart bar" border="0" data-original-height="87" data-original-width="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iRm7EVHFuL-ZTgM7aPQRAJTgYGtQelIfESwdSrQw8FL-UByTn1fBzTWYp0_Tv5TvSa7tkNKIdaV3jXoolI8AWqhBuMKNY5uQ6F57Wf5CjrM7OePFIpGdChnqOGPC_Xd7_Z3BARXgM5s/d/custom+rating+bar+in+android.png" /></div><div><br /></div>
<div><br /></div>
<div>
To make a custom rating bar like above. We need to perform certain steps as
follows:
</div>
<div><br /></div>
<div>
Step 1. Copy your images in the drawable folder and remember image size should
be according to the size you want.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;"><img alt="custom rating bar images" border="0" data-original-height="112" data-original-width="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidscUZUt5meJwmT43PHteKnwGmROhKK5ZB6Ejee1OHZ-jultDgLLpSjLTaePsTgjn_Wz3d-UyS21ndqwF16uN2-j6lpqDt9MKOWuzyjPbPoR9XoMQmcY2d7gZeg8gEFCe-i0qLjgb1jeY/d/drawable+folder.png" /></div><div><br /></div>
<div><br /></div>
<div>
Step 2. Make XML for the rating bar selector in the drawable folder like
below.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;"><img alt="drawable folder" border="0" data-original-height="197" data-original-width="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhewkDFlnduMG8zXK4aQk5hKCu0MoUXwlDmNedjnBrbO9QEcCW1UNGgxXrra8zMZ_wPhfa4sFtuaNQZbaT0DBzetNNThOtfm6SxVyM8YgnV_PmhrufYJGkcEqeY9lJtqG0d08T0k_nynb8/d/rating+bar+selector.jpg" /></div><div><br /></div>
<div><br /></div>
<div>
We made two files, one for the fill or highlighted part and one for the empty
or un-highlighted part.
</div>
<div><br /></div>
<div>See the below files and their respective code.</div>
<div><br /></div>
<div>rating_fill.xml for fill part</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/3abe1c6475a3b96b23d4c476a322434c.js"></script></div>
<div><br /></div>
<div>rating_empty.xml for the empty part.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/0b16458ec67d0091bd3f5a242dc6c7c5.js"></script></div>
<div><br /></div>
<div>
Step 3. Now, we have created our selector files, now we need to integrate them
together.
</div>
<div><br /></div>
<div>
To do that we need to make a new xml file in drawable and write the below
code.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/8428fba0700db6a9e2a6f293ab5ee452.js"></script></div>
<div><br /></div>
<div>
In the above code, we are making a layer list and giving the reference all the
above filling and empty selectors.
</div>
<div><br /></div>
<div>Congrats we have completed 90% of work,</div>
<div><br /></div>
<div>
Step 4. After creating all the files now, we need to define a new style in
styles.xml under res ->values folder for our custom rating bar.
</div>
<div><br /></div>
<div>
Open your styles.xml, and add below code inside the resources element.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/5b97ab241a8f9f69a6671d632ea7bebd.js"></script></div>
<div><br /></div>
<div>Your styles.xml should look like this.</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/14025124aa63d5b27b3097f08505124f.js"></script></div>
<div><br /></div>
<div>And this comes to the last and final step.</div>
<div><br /></div>
<div>
Step 5. Add your custom style to the rating bar. Now set style in rating bar
and give reference to our custom rating bar style which we created above. See
below for reference.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/64697240f2d1f80058a1b74e8cc3a368.js"></script></div>
<div><br /></div>
<div>
Now if you run your app, you will see your custom <a href="https://developer.android.com/reference/android/widget/RatingBar" target="_blank">rating bar</a> in action.
</div>
<div><br /></div>
<div>Okay here are some tips because you came this so far.</div>
<div><br /></div>
<div>
Tip 1. Always use image files that are png, don't use vector graphic else you
will get only one icon.
</div><div><br /></div><div>Tip 2. Use image size 24px by 24px for better rating bar size.</div>
<div><br /></div>
<div>
Tip 3. If you want to disable rating from user input then you can disable it
by using attribute <span style="color: #660e7a; font-family: "dejavu sans mono"; font-size: 11.3pt; font-weight: bold;">android</span><span style="color: blue; font-family: "dejavu sans mono"; font-size: 11.3pt; font-weight: bold;">:isIndicator</span> and set it to true.
</div>
<div><br /></div>
<div>
That's all for today folks. Thank you for reading and if you learned something
new then don't forget to share this article with your batch mates and
friends.
</div>
<div><br /></div>
<div>
<div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
</div>
<div><br /></div>
<div>
Hey, if you are still here then don't forget to subscribe to our newsletter
below if you haven't already.
</div>
<div><br /></div>
<div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-27671801926731535912020-06-12T02:14:00.011+05:302020-06-15T13:22:02.327+05:30What is CardView in Android?<h2 style="text-align: left;"><font size="6">CardView in Android</font></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO40HzV0WCiAqtT26Hjsax_832ugYV7xKRDz_2QNfKPTVhdrfAVnp67rPFzhrLhXFqY8PdMBi9kxZDotkwKL3glwCbL7l5iTsKfZiUwvxYFT6HG9fQehgUxT9xJSRcs0gkUXjXRzzXytM/s560/Cardview+in+android.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cardview in android featured image" border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO40HzV0WCiAqtT26Hjsax_832ugYV7xKRDz_2QNfKPTVhdrfAVnp67rPFzhrLhXFqY8PdMBi9kxZDotkwKL3glwCbL7l5iTsKfZiUwvxYFT6HG9fQehgUxT9xJSRcs0gkUXjXRzzXytM/d/Cardview+in+android.png" /></a>
</div>
<div><br /></div>
<div>
Hello World, Today we are going to see <b>what is cardview in android</b> and
what it's advantages.
</div>
<div><br /></div>
<div>
<b>CardView</b> is a widget provided by the android to build a new look and
efficient UI. You can make your app look more professional see examples below.
Cardview is an amazing concept which makes your user experience better than
old android UI. Cardview was released with Android version 5.0 which is
android lollipop.
</div>
<div><br /></div>
<div>
According to
<a href="https://www.android.com/" rel="nofollow" target="_blank">Android's Official Site</a>, what is
<b><a href="https://developer.android.com/guide/topics/ui/layout/cardview" rel="nofollow" target="_blank">cardview</a></b>:
</div>
<div><br /></div>
<div>
<i>CardView API as an easy way for you to show information inside cards that
have a consistent look across the platform. These cards have a default
elevation above their containing view group, so the system draws shadows
below them. Cards provide an easy way to contain a group of views while
providing a consistent style for the container.</i>
</div>
<div>
<i><br /></i>
</div>
<h2 style="text-align: left;">What are the advantages of CardView?</h2>
<div><br /></div>
<div>
Before the cardview, if we want to make something look like a card we mostly
use framelayout but the problem with framelayout was that we need to write a
lot of code to make simple changes but this was solved when cardview released
and it has some more advantages as follows.
</div>
<div><br /></div>
<div>
<ul style="text-align: left;">
<li>Cardview has elevation property for controlling shadow</li>
<li>Set the border or corner radius of the card</li>
<li>Changing background color is easy</li>
<li>Ripple effect on cardview looks super cool</li>
</ul>
<div>These are some of the advantages but not the least.</div>
</div>
<div><br /></div>
<div>
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also:
<b><a href="https://www.akshayrana.in/2020/01/load-image-from-url-in-android.html" target="_blank">Load Image from URL in Android</a>
</b>
</span>
<br />
</div>
<div><br /></div>
<div>How to add cardview in Android Project</div>
<div><br /></div>
<div>
To use cardview in your android project, first, we need to add cardview
dependency in the gradle file.
</div>
<div><br /></div>
<div>add below line to add cardview dependency:</div>
<div><br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/a463172d36b710ec7f5d44509a665493.js"></script>
</div>
<div><br /></div>
<div>
After pasting the above code hit the sync button at the top right of the
screen corner, this will download the dependency on the project and you can
use cardview.
</div>
<div><br /></div>
<div>
After successfully syncing, open your layout XML file and you can now use
cardview like below.
</div>
<div><br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/cc3ec4bc4a3eac97d33fb4af1277bbcc.js"></script>
</div>
<div><br /></div>
<div>Below are some cardview android examples:</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJDmuMpYDBspBksmUH6dP5DDgWZmnosdceaL8_gkYGkXX0vRPxQFAGP-719Vna2HLp1XRlPwz_ztfaE27BANoTsMjWcxIyjnHZPVsp2KB5wvc6rzZfQqSynYrZzE9roPIq7m29WEnd_gs/s611/cardview-android-example.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cardview android example" border="0" data-original-height="406" data-original-width="611" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJDmuMpYDBspBksmUH6dP5DDgWZmnosdceaL8_gkYGkXX0vRPxQFAGP-719Vna2HLp1XRlPwz_ztfaE27BANoTsMjWcxIyjnHZPVsp2KB5wvc6rzZfQqSynYrZzE9roPIq7m29WEnd_gs/w320-h213/cardview-android-example.png" title="Cardview android example 1" width="320" /></a>
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixJphWs3rOFjl1yXwjNrSggLShZH7dtM5B_8e6UFJRmtbtWW_AJG3TWg1OGfV_F7xLIYTQGgHo-AHLEBMAI5YR27B_539B6xwqve_LQeSpne-PECfhPHsJ5PieuiDeaQ3ZfY8ACSuyGBk/s352/cardview-android-example-2.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cardview android example 2" border="0" data-original-height="352" data-original-width="306" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixJphWs3rOFjl1yXwjNrSggLShZH7dtM5B_8e6UFJRmtbtWW_AJG3TWg1OGfV_F7xLIYTQGgHo-AHLEBMAI5YR27B_539B6xwqve_LQeSpne-PECfhPHsJ5PieuiDeaQ3ZfY8ACSuyGBk/w278-h320/cardview-android-example-2.png" title="Cardview android example 2" width="278" /></a>
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-fDech11AW0cOoeLFjUqIlvECjFbnQgySDlf8ZHatg3I8S0s4uo5zYWQG5a1UhivQyRJ44GzfhQLE2HkUdM10pUtVbTvElkNW2d_NsfnZfCR7TGPPrBuqZ7lSUdaUtfoFmNdec7m8UEk/s441/cardview-android-example-3.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cardview android example 3" border="0" data-original-height="441" data-original-width="387" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-fDech11AW0cOoeLFjUqIlvECjFbnQgySDlf8ZHatg3I8S0s4uo5zYWQG5a1UhivQyRJ44GzfhQLE2HkUdM10pUtVbTvElkNW2d_NsfnZfCR7TGPPrBuqZ7lSUdaUtfoFmNdec7m8UEk/w281-h320/cardview-android-example-3.png" title="Cardview android example 3" width="281" /></a>
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div><br /></div>
<div>And this is the end of this tutorial.</div>
<div><br /></div>
<div>If you like this article don't forget to subscribe to our newsletter.</div>
<div><br /></div>
<div>Enter your email id for subscribe.</div>
<div><br /></div>
<div id="form-parent" style="display: inline-block; text-align: center;">
<p>Subscribe to our Newsletter</p>
<div style="border-radius: 7px; border: 1px solid rgb(125, 208, 190); display: inline-block; padding: 5px;">
<input id="blogger-email" style="background: transparent; border-radius: 5px; border: 0px; padding: 5px;" type="text" /><button onclick="subscribe()" style="background: rgb(48, 173, 173); border-radius: 5px; border: 1px solid rgb(47, 185, 185); color: lightyellow; padding: 10px 15px;">
Subscribe
</button>
</div>
<br />
<small style="display: inline-block; font-size: 10px; padding-top: 10px;">By subscribing to our newsletter you're agreeing with our T&C.</small><style>
#blogger-email:focus{outline:none;}
</style>
</div>
<script>
var GEBI=document.getElementById.bind(document);var url="https://script.google.com/macros/s/AKfycbw-XiqSrNd0Rmp_t_CsBZg7FoLF2WbnpAa-SMDTVRYSGNh82Tw/exec";var si="1U6XNpwyylQCaSjffJ6l8Cx9zIdDHzDu8kJNxFE2MMNo";function subscribe(){var e=GEBI("blogger-email").value;if(!e.length)return alert("Please enter your email.");var t=new XMLHttpRequest;t.onreadystatechange=function(){GEBI("form-parent").innerHTML="You Subscribed Successfully!"};t.open("POST",url,true);t.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var a={};a.col1=e;a.col2=(new Date).getTime();a.col3=location.pathname+location.search;a.si=si;t.send(JSON.stringify(a))}
</script>
<br />
<div>Share this Article 👇</div>
<div class="addthis_inline_share_toolbox"></div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-72504185567622882932020-05-13T14:15:00.006+05:302020-05-13T14:33:25.988+05:30How to customize button in android<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
How to customize button in android
</h2>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_mFyvn_zh99X01hDEoOO6XO_pkjEm4BmIPDFCeVmHKtcWLlR3hJu_0XCfaizog-9CykVri2BsuEozcmoMKtE8y5CyxxgsNakGDhzqIcNyo6f_tWZc2oUV4WVc0x0SdrbsyNSwKfcdQLk/" style="margin-left: 1em; margin-right: 1em;"><img alt="Custom Button in Android" border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_mFyvn_zh99X01hDEoOO6XO_pkjEm4BmIPDFCeVmHKtcWLlR3hJu_0XCfaizog-9CykVri2BsuEozcmoMKtE8y5CyxxgsNakGDhzqIcNyo6f_tWZc2oUV4WVc0x0SdrbsyNSwKfcdQLk/d/Custom+Button+in+Android.png" title="Custom Button in Android" /></a></div><div><br /></div>
<div>
Hello, Today we are going to see how we can customize the button in android.
We will see how we can make a rounded corner button with background color
and also see how we can gradient to the button.
</div>
<div>
<br />
</div>
<div>
See the below gif for both examples.
</div>
<div>
<br />
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUTPx2ANhPVqgRbGHG7bq0f7b1plFacdRPmcgJ-Nagfe4fFmQPXe1DONCNIlfDzldX98Ku7LUdN3mUCaITL6rYWQyTWx2RtoCJ5GBD9cQZU0ds5XkvzQqaBRYInHw45h_nYpf20BdKjAk/" style="margin-left: auto; margin-right: auto;"><img alt="gradient button in android" border="0" data-original-height="207" data-original-width="486" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUTPx2ANhPVqgRbGHG7bq0f7b1plFacdRPmcgJ-Nagfe4fFmQPXe1DONCNIlfDzldX98Ku7LUdN3mUCaITL6rYWQyTWx2RtoCJ5GBD9cQZU0ds5XkvzQqaBRYInHw45h_nYpf20BdKjAk/w200-h85/gradient-button-in-android.jpg" title="gradient button in android" width="200" /></a>
</td>
</tr>
<tr>
<td class="tr-caption" style="text-align: center;">
Gradient Button in Android
</td>
</tr>
</tbody>
</table>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXyqZGsFsQ3kPyQVZaBty6SiUm67SQyiB19cdQQMuZChqfN6nssZVRCBzYSrQ2YqxWIOpZfGdDodxb7oDgDQbBW5ti7uzwkZ_Nn71z7INDhzZ6qOQnKml0Ohx3usoNvEiwHfsFZ3N-fac/" style="margin-left: auto; margin-right: auto;"><img alt="background color of button in android" border="0" data-original-height="197" data-original-width="506" height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXyqZGsFsQ3kPyQVZaBty6SiUm67SQyiB19cdQQMuZChqfN6nssZVRCBzYSrQ2YqxWIOpZfGdDodxb7oDgDQbBW5ti7uzwkZ_Nn71z7INDhzZ6qOQnKml0Ohx3usoNvEiwHfsFZ3N-fac/w200-h78/change-background-color.jpg" title="background color of button in android" width="200" /></a>
</td>
</tr>
<tr>
<td class="tr-caption" style="text-align: center;">
Background Color button in Android <br />
</td>
</tr>
</tbody>
</table>
<div><br /></div>
<div>
First, let's see </div>
<h3 style="text-align: left;">
How to change button background color in android
</h3>
<div>Follow these steps to change your button background in android.</div>
<div>To apply or change the background color of a button in android, we need to
make a button in our layout and a new drawable file.</div>
<div><br /></div>
<div>
We have added our button in layout as below,
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/ed81688fee4b0a235008f5effb59d385.js"></script></div>
<div><br /></div>
<div><br /></div>
<div>
we will make a drawable file and write the code for the background of the
button.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB8A_-vm2uc9Jbo41htLWniOC0R4oBpYyfm7MG3hGxJut5NilZ7mMfpMOkyXEUHdVnzjJt4CI9_UHLFdFW6rkssVtP7kB4yjKGlNFMbZmO42g9_qESJutjhzYFGNROlD8NikDzAhKcuho/" style="margin-left: 1em; margin-right: 1em;"><img alt="make-drawable-file-in-android" border="0" data-original-height="768" data-original-width="1366" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB8A_-vm2uc9Jbo41htLWniOC0R4oBpYyfm7MG3hGxJut5NilZ7mMfpMOkyXEUHdVnzjJt4CI9_UHLFdFW6rkssVtP7kB4yjKGlNFMbZmO42g9_qESJutjhzYFGNROlD8NikDzAhKcuho/w400-h225/make-drawable-file-in-android.jpg" title="make-drawable-file-in-android" width="400" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjspPbMyQ7r30QoGZLSUL0pFV0Rm00cfHnC0uJoMIZG-yvMCaGo4AU8XIR1uOyGD4xEBTx5SqWrm8dxgK7kqCjYMuekrwUl5mjhwbTDddti6pOzJ4Lmy6WWl3lskH1pyx6Mt4DiSpSMK2k/" style="margin-left: 1em; margin-right: 1em;"><img alt="make-drawable-file-in-android" border="0" data-original-height="768" data-original-width="1366" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjspPbMyQ7r30QoGZLSUL0pFV0Rm00cfHnC0uJoMIZG-yvMCaGo4AU8XIR1uOyGD4xEBTx5SqWrm8dxgK7kqCjYMuekrwUl5mjhwbTDddti6pOzJ4Lmy6WWl3lskH1pyx6Mt4DiSpSMK2k/w400-h225/make-drawable-file-in-android-2.jpg" title="make-drawable-file-in-android" width="400" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyIOevOsC0jn_2ByiUI2V9x2w-ZQQL26vUQJoSLWPvLeOu2q4kSZkE2JuWl42Q1qTtZxGXUUlTlAit18y8KJC-vc_qAF69C0_UIlb6A5jDhLfQQalIUQ2u6s93htoSNrN86uLnG5nqlN4/" style="margin-left: 1em; margin-right: 1em;"><img alt="make-drawable-file-in-android" border="0" data-original-height="768" data-original-width="1366" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyIOevOsC0jn_2ByiUI2V9x2w-ZQQL26vUQJoSLWPvLeOu2q4kSZkE2JuWl42Q1qTtZxGXUUlTlAit18y8KJC-vc_qAF69C0_UIlb6A5jDhLfQQalIUQ2u6s93htoSNrN86uLnG5nqlN4/w400-h225/make-drawable-file-in-android-3.jpg" title="make-drawable-file-in-android" width="400" /></a></div><div><br /></div>
<div><br /></div>
<div>
After creating the file. Add this code in the drawable file, here we have
named this file as bg_btn.xml.
</div>
<div><br /></div>
<div><script src="https://gist.github.com/Akshay-Rana-Gujjar/1dd6f740a9d3ca16c61d00f230e0db5c.js"></script></div>
<div><br /></div>
<div>
In the above code, first, we specify the shape of the button by setting the root element as shape and pass attribute shape and set its value to rectangle. Ater the shape, we added a child element solid and set attribute color to red.
</div>
<div><br /></div>
<div>
Now we have created our button background, now we have to apply these
settings to the button.
</div>
<div><br /></div>
<div>
Open your activity layout file in the layout folder and pass a background
attribute in a button child and set its value to that drawable file we
have made earlier, see below code for reference. </div>
<div><br /></div>
<div>
We have added some padding and change the text color to white so that it
will look good and attractive button in android
</div>
<div><br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/e48632b6bf1545e5592d428c328203ac.js"></script>
</div>
<div><br /></div>
<div>
Now you can view your custom button preview in the preview window and if you run
your app on the android mobile, you will see your custom button.
</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeFK2swn7S1Qg3Jzk4rcD4VdaKk2lSYiFZb6T423LF4FLVeWNyT-lNQTgy2bSC7AEXZTpFA_4rqsn9_QpEupL1bo-rqFxQGIl7Zd-_2mrqYiWYyAKve2u69a6FawbrSiv-1EXZ9280H8A/" style="margin-left: 1em; margin-right: 1em;"><img alt="change background color in android" border="0" data-original-height="174" data-original-width="507" height="69" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeFK2swn7S1Qg3Jzk4rcD4VdaKk2lSYiFZb6T423LF4FLVeWNyT-lNQTgy2bSC7AEXZTpFA_4rqsn9_QpEupL1bo-rqFxQGIl7Zd-_2mrqYiWYyAKve2u69a6FawbrSiv-1EXZ9280H8A/w200-h69/change-background-color-only.jpg" title="change background color in android" width="200" /></a></div><div><br /></div>
<br />
Now let's see how we can make a rounded corner button in android.
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<h3 style="text-align: left;">
<b>Custom Rounded Corner Button in Android</b>
</h3>
<div dir="ltr" style="text-align: left;" trbidi="on">
To make the rounded corner button in android, we need to add a new child
element in our drawable file which we have made before.
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
Open up your drawable file and add this code:
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<script src="https://gist.github.com/Akshay-Rana-Gujjar/5252908e03e524a74de11496225e59da.js"></script>
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
This new child element in our drawable file is pretty self-explanatory, as you
can see we have added corner element and set its radius attribute to 15sp to
make button rounded corner in app.
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
We don't need to change anything in the activity layout file,
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
Now run your app and you will see your rounded corner button in android.
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
But isn't this button looks boring?
</div><div dir="ltr" style="text-align: left;" trbidi="on"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Bul-V9VGEew0qrdYGFrmJjlGnM4U7wKTCJ3LPbY_mEnB-d4DAZFrxPQFZzE_jnAnS0l7R3wyLcShfRBI-MMICwRDg1V0bcbe7yyZgqs9kzg92PZMPgpTW2znUOIZrQhkznvYI5JhkqM/" style="margin-left: 1em; margin-right: 1em;"><img alt="change background color with rounded corner" border="0" data-original-height="197" data-original-width="506" height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Bul-V9VGEew0qrdYGFrmJjlGnM4U7wKTCJ3LPbY_mEnB-d4DAZFrxPQFZzE_jnAnS0l7R3wyLcShfRBI-MMICwRDg1V0bcbe7yyZgqs9kzg92PZMPgpTW2znUOIZrQhkznvYI5JhkqM/w200-h78/change-background-color.jpg" title="change background color with rounded corner" width="200" /></a></div><div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
What about to add the gradient color in the button. Sounds goods right?
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<h3 style="text-align: left;">How to make Gradient Button in Android</h3>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
To make the gradient button in android we need to edit our bg_btn.xml file.
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
Open your file and add this code:
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<script src="https://gist.github.com/Akshay-Rana-Gujjar/d20ac2ee19b67b8f5b899b7d7482dfcc.js"></script>
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
As you can see a new child element gradient and it has 2 properties or
attributes.
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
The first attribute is for start color of gradient and the second is for the
second color for the button.
</div><div dir="ltr" style="text-align: left;" trbidi="on"><br /></div><div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
We set the value as hex color, you can search on the internet for different
colors you like.
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br />
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also: <b><a href="https://www.akshayrana.in/2020/02/gradient-status-bar-and-toolbar-android.html" target="_blank">Gradient Status bar and Toolbar in Android</a></b> </span>
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div><div dir="ltr" style="text-align: left;" trbidi="on">
Now our button looks more attractive and professional.
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgVns3pRxiv2_LnaU9vN-8Bwa78AL8fgQB0Im_uweduFKDh5X1linlCHOWySvNe95ngNRihft2SM7dl9gp5H4Qcq_AhUlD7PBki7AGA-p8tI6LCFo6xdpPynVmrNNw3MlsUc0lUu7vdsM/"><img alt="gradient button in android" border="0" data-original-height="207" data-original-width="486" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgVns3pRxiv2_LnaU9vN-8Bwa78AL8fgQB0Im_uweduFKDh5X1linlCHOWySvNe95ngNRihft2SM7dl9gp5H4Qcq_AhUlD7PBki7AGA-p8tI6LCFo6xdpPynVmrNNw3MlsUc0lUu7vdsM/w200-h85/gradient-button-in-android.jpg" title="gradient button in android" width="200" /></a></div><div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
Hope you learned from this article. If you enjoy this article do share on
Facebook, on Whatsapp, share it with your friends and your mates.
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
Thank you for your time. Happy Coding. :)</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-70894633338719015022020-03-31T02:01:00.007+05:302021-07-31T12:54:19.979+05:30How to make splash screen in Android in 2021 [Best Guide]<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="text-align: left;">
How to make splash screen in Android</h1>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9H8aE7R1sIJfa51onJYqoa-YYqWh1VZahaNt_1C2y0Wc6n2CaqPwzP2Yco5ysljlUaz60Tsq58vug4sII06uFeukc3FTPAJdoEEpCFCMYpKFwjcgnQctkBSCAQbyz8cfIG9TpF1wJtK8/s1600/Splash+Screen+in+android.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Splash Screen in android" border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9H8aE7R1sIJfa51onJYqoa-YYqWh1VZahaNt_1C2y0Wc6n2CaqPwzP2Yco5ysljlUaz60Tsq58vug4sII06uFeukc3FTPAJdoEEpCFCMYpKFwjcgnQctkBSCAQbyz8cfIG9TpF1wJtK8/s1600/Splash+Screen+in+android.png" title="Splash Screen in android" /></a></div>
<br /></div>
<div>
Hello World, Today we are going to see how we can make a beautiful <b>Splash Screen</b> in your Android App. </div>
<br />
Before start coding let's see, According to Wikipedia <a href="https://en.wikipedia.org/wiki/Splash_screen" rel="nofollow" target="_blank">what is splash screen</a>:<br />
<br />
<i>A splash screen is a graphical control element consisting of a window containing an image, a logo, and the current version of the software. A splash screen usually appears while a game or program is launching. </i><br />
<i><br /></i>
<i>A splash page is an introduction page on a website.[1][2] A splash screen may cover the entire screen or web page, or may simply be a rectangle near the center of the screen or page. The splash screens of operating systems and some applications that expect to be run in full screen usually cover the entire screen.</i><br />
<br />
So basically a Splash Screen is when you start an app the first screen with some graphics is a Splash Screen. See below as an example of the Whatsapp splash screen.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUy5ZOS-90YDezQjeO9jtirOSsqOj03EeSTbG_v6rCknFoDczkLpPtR-WV-TAuTf6f0fHsM87MM_Ou7oEl08c3gn-cggTYAM4TGl4aH_ZxubAygZeyyOf0AgNQxWL_0wQVwzHYYP87NkQ/s1600/WhatsApp+splashsreen.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Whatsapp SplashScreen" border="0" data-original-height="1600" data-original-width="739" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUy5ZOS-90YDezQjeO9jtirOSsqOj03EeSTbG_v6rCknFoDczkLpPtR-WV-TAuTf6f0fHsM87MM_Ou7oEl08c3gn-cggTYAM4TGl4aH_ZxubAygZeyyOf0AgNQxWL_0wQVwzHYYP87NkQ/s200/WhatsApp+splashsreen.jpg" title="Whatsapp SplashScreen" width="91" /></a></div>
<br />
<h2 style="text-align: left;">
How to add a Splash screen in an App</h2>
<div>
In android, the Splash screen is an activity with a timer to open the next activity it is as simple as that.</div>
<div>
<br /></div>
<div>
So let's create a new activity in our app and we name it as SplashScreenActivity.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguKVcCjRq_YXITLeUrXGxRLoDNUkDxTPi-MYWvfyOXmfa1jt31YkMpQHoaORxFxM-edewqFtOQxp5bs0Bd3Sp86cQJLkRCyVyiz1b25piiahrK9Jxv3XsexVAAQlo0oR3tqPhLWGpWbMM/s1600/create+new+activity+in+android+studio.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="642" data-original-width="900" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguKVcCjRq_YXITLeUrXGxRLoDNUkDxTPi-MYWvfyOXmfa1jt31YkMpQHoaORxFxM-edewqFtOQxp5bs0Bd3Sp86cQJLkRCyVyiz1b25piiahrK9Jxv3XsexVAAQlo0oR3tqPhLWGpWbMM/s400/create+new+activity+in+android+studio.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Now by default, we have launching activity is MainActivity we need to change launching activity with SplashScreenActivity. To do this go to your manifest.xml file and cut the main activity's intent filter and paste in splash screen activity.</div>
<div>
<br /></div>
<div>
See below.</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcoFYFJZoKFveBbhsmEKvLpMrJVh4FYiLnuABJhuaD4b66s-azTmkg0NwrFkEYAN8HsErjiZBaUxMtE_1Ew-7LEjJUasJ2i4SSDuYTVIlkUc1k1jMPmshC9gh0AZJqJua7pSRvvxu8WsI/s1600/splashscreen+manifest.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Android Manifest xml" border="0" data-original-height="524" data-original-width="694" height="481" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcoFYFJZoKFveBbhsmEKvLpMrJVh4FYiLnuABJhuaD4b66s-azTmkg0NwrFkEYAN8HsErjiZBaUxMtE_1Ew-7LEjJUasJ2i4SSDuYTVIlkUc1k1jMPmshC9gh0AZJqJua7pSRvvxu8WsI/s640/splashscreen+manifest.png" title="Android Manifest xml" width="640" /></a></div>
<br />
<br />
<br />
Now if we run our app and launch it, The Splash Screen Activity will be called.<br />
<br />
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also: <b><a href="https://www.akshayrana.in/2020/01/pass-data-between-activities.html" target="_blank">Pass Data between Activities</a></b> </span><br />
<br />
Okay, now we will design our splash screen as per our requirement.<br />
<br />
I am adding a textview and app logo in the splash screen see below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglaxOnL1LSVV5YTfP21kbvSL18OnuKBb_ACF5meE0qPo2qcqLSMJ4BkZlyIZwQJt6ozaWTThv5abFQBBU2eUfSDA9Z_eDndP4gRwWl1eh7Eonx57of7Hly_EXnOiuChrijmbG8f0qoKk0/s1600/splashscreen+preview.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Android Activity xml" border="0" data-original-height="474" data-original-width="270" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglaxOnL1LSVV5YTfP21kbvSL18OnuKBb_ACF5meE0qPo2qcqLSMJ4BkZlyIZwQJt6ozaWTThv5abFQBBU2eUfSDA9Z_eDndP4gRwWl1eh7Eonx57of7Hly_EXnOiuChrijmbG8f0qoKk0/s320/splashscreen+preview.png" title="Android Activity xml" width="182" /></a></div>
<br />
<br />
Now if we run we can see our designed splash screen.<br />
<br />
Now we need to add a timer that will trigger our next activity.<br />
<br />
To add a delay or timer we will use Handler Class in android and use its postDelayed method and pass the Runnable interface and implement its run method.<br />
<br />
In the run method, we will call our next activity and finish SplashScreenActivity.<br />
<br />
See the below code.<br />
<br />
<script src="https://gist.github.com/Akshay-Rana-Gujjar/7e74c7e32028c03646d2f36eb0b2a06e.js"></script><br />
<br />
After passing the runnable interface we need to pass time in milliseconds, here we are passing 2000 which means 2 seconds.<br />
<br />
Now run your app and check your splash screen.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7cnqXeejyQD-7dQhtgur3RAhaLJv5BNOCwurL4qBB6eByeoNDI8OcUod4ard4nAv4TjPNldf6A98KarSkPYVZ-z4TzTIgKHkWCMVd_0KpUnWLTnRaVTiuxngjKcJShdGd0QDPblll0dg/s1600/splash+screen.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Android Splash Screen" border="0" data-original-height="656" data-original-width="369" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7cnqXeejyQD-7dQhtgur3RAhaLJv5BNOCwurL4qBB6eByeoNDI8OcUod4ard4nAv4TjPNldf6A98KarSkPYVZ-z4TzTIgKHkWCMVd_0KpUnWLTnRaVTiuxngjKcJShdGd0QDPblll0dg/s320/splash+screen.gif" title="Android Splash Screen" width="179" /></a></div>
<br />
<b><span style="color: white;"><font size="1">splash screen in android github, splash screen in android tutorials point, splash screen in android javatpoint, android studio splash screen animation, advanced splash screen in android, splash screen in android geeksforgeeks</font></span></b><br />
<br />
<br />
Your Splash screen is ready to rock. Hope you learned something new.<br />
<br />
Thank you or reading. Have a nice day.</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-8204296277986087002020-02-16T14:00:00.001+05:302020-05-20T13:11:44.317+05:30Gradient Status bar and Toolbar in Android<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
<span style="font-size: large;">How to make Gradient Toolbar and Status bar in Android</span></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkVRpEIUhE4DmkMAauo3EF9Xs7ekCAbMLcwiFA5ZwT7l4iBgLNGAoFQG43RHL0wdj9VoBiabAHxgh4pwj8I4tvrTOENMGPNUzjbikugJ8dQCnOBj-8A-6f81Gukcb5rZz1jodxQ31QiJo/s1600/Gradient-Toolbar-and-Statusbar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkVRpEIUhE4DmkMAauo3EF9Xs7ekCAbMLcwiFA5ZwT7l4iBgLNGAoFQG43RHL0wdj9VoBiabAHxgh4pwj8I4tvrTOENMGPNUzjbikugJ8dQCnOBj-8A-6f81Gukcb5rZz1jodxQ31QiJo/s1600/Gradient-Toolbar-and-Statusbar.png" /></a></div>
<br />
<br />
Hello there, Today we are going to learn how we can make an amazing custom toolbar with gradient effect and also apply the gradient to the status bar like below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9YneHWYNogGO5TmK79XUB_nqfXFCpS_FWBS6ee1xDvOcwsJvB2wXnU4PBnoSFD2Y0UZxxnPBi7-a8UFZJr7NPjVZEf31acNxgrkkof9pGKn9VvDrxRhKrVfcQzfQPHCVLl0zDkk4NJAM/s1600/gradient-in-toolbar-android.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1153" data-original-width="1080" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9YneHWYNogGO5TmK79XUB_nqfXFCpS_FWBS6ee1xDvOcwsJvB2wXnU4PBnoSFD2Y0UZxxnPBi7-a8UFZJr7NPjVZEf31acNxgrkkof9pGKn9VvDrxRhKrVfcQzfQPHCVLl0zDkk4NJAM/s320/gradient-in-toolbar-android.jpg" width="299" /></a></div>
<br />
<br />
First, let's create a new project or open your existing one.<br />
<br />
To make gradient to status bar and toolbar we need to edit our styles.xml file to make it no action bar theme and apply fullscreen so that we can add our custom status bar.<br />
<br />
See below snippet of styles.xml and edit your like this.<br />
<br />
Open res folder then open values folder and select style.xml.<br />
<br />
<script src="https://gist.github.com/Akshay-Rana-Gujjar/9fb28f9f82267b17d0e279cb2277bed0.js"></script><br />
<br />
First, we need to change the parent attribute and replace the value with Theme.AppCompat.Light.NoActionBar by doing this default action bar will remove.<br />
<br />
Now we add some property in the styles.xml<br />
<br />
<script src="https://gist.github.com/Akshay-Rana-Gujjar/9597e650ad870a51686fa060d2d5b55d.js"></script><br />
<br />
This will give us the ability to add a custom status bar.<br />
<br />
For the custom toolbar, we need to make a custom layout file.<br />
<br />
To do that we create a new layout file by right click on the layout folder and then click on new and then click on the layout resource folder.<br />
<br />
We will name this file as custom_toolbar.<br />
<br />
In this file, we will add a toolbar widget in the linear layout and set the height to action bar size and set id as toolbar. Also, we set the height of linear layout to 80sp and set gravity to bottom because the height of the default status bar is 24sp and the action bar size is 80sp - 24sp = 56sp.<br />
<br />
Our file will look like this below.<br />
<br />
<script src="https://gist.github.com/Akshay-Rana-Gujjar/a49d6fcd7633b50b2965e678e7b004a6.js"></script><br />
<br />
To add the gradient to our toolbar and status bar we need to create gradient drawable so let's create a drawable file.<br />
<br />
Right-click on the drawable folder then click on new and then drawable resource file and we name this file as gradient_toolbar.<br />
<br />
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
See also: <b><a href="https://www.akshayrana.in/2020/01/pass-data-between-activities.html" target="_blank">Pass Data between Activities</a></b> </span>
<br />
<br />
Now copy below code and paste it in your gradient_toolbar file.<br />
<br />
<script src="https://gist.github.com/Akshay-Rana-Gujjar/21e72839806107928addd2a863035565.js"></script><br />
<br />
In the above code, we are creating a new gradient background for our toolbar.<br />
<br />
To set this background to toolbar we need to open our custom_toolbar.xml file and add background attribute to the linear layout.<br />
<br />
Now we have completed our custom toolbar part now its time to apply this toolbar on our activity.<br />
<br />
To do this open your activity xml file and include your custom_toolbar.xml file like this.<br />
<br />
<script src="https://gist.github.com/Akshay-Rana-Gujjar/5d673642f859553639dac22ebffb478c.js"></script><br />
<br />
After including the file we need to set the toolbar to action bar in your activity java file.<br />
<br />
Open your activity java file and get toolbar by using findViewById and pass the toolbar id we set in custom_toolbar.xml file and call the setSupportActionBar method and pass our toolbar.<br />
<br />
<script src="https://gist.github.com/Akshay-Rana-Gujjar/e97494f45e93992dd82a71cd32761c31.js"></script><br />
<br />
If you run your app you will see the gradient has applied successfully but the color of title in the toolbar is in black color which makes our toolbar look ugly. To make it look amazing we are adding white color to the toolbar title by calling method setTitleTextColor of toolbar widget and pass the Color.WHITE static variable.<br />
<br />
<script src="https://gist.github.com/Akshay-Rana-Gujjar/d0649f8e98d527d47336d5e08b612c09.js"></script><br />
<br />
Now run your app and your beautiful and good looking custom toolbar will show up.<br />
<br />
If you learn something new then share this article with your friends and mates. Thank You and have a nice day.</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comNew York, NY, USA40.7127753 -74.005972839.9423093 -75.296866299999991 41.483241299999996 -72.7150793tag:blogger.com,1999:blog-4214960432169050117.post-36317884393508897592020-01-26T20:52:00.000+05:302020-02-27T01:59:15.279+05:30JSON Rest API in Android <div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
<span style="font-size: x-large;">How to use JSON Rest API in Android App</span></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3wQydYWSt19Rj4CnCHtJPXybBPyRMsQBQVzO-vagHH1DnnvU9ODXSxVC8uDn8ZNOMGdVPbmN4P_4AnBWGgJgQoSp5Zvyojivm4zvc00VCCnbp8Xq9U7-I4fn48G4leKXXQ-2R28J3Uf4/s1600/JSON-API-in-Android.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3wQydYWSt19Rj4CnCHtJPXybBPyRMsQBQVzO-vagHH1DnnvU9ODXSxVC8uDn8ZNOMGdVPbmN4P_4AnBWGgJgQoSp5Zvyojivm4zvc00VCCnbp8Xq9U7-I4fn48G4leKXXQ-2R28J3Uf4/s1600/JSON-API-in-Android.png" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Hello guys, Today we are going to see how we can consume JSON API in Android or we can say consume REST API in Android.</div>
<div>
<br /></div>
<div>
First, let's see what is REST API?</div>
<div>
<br /></div>
<div>
According to <a href="http://restfullapi.net/">restfullapi.net</a>: </div>
<div>
<span style="background-color: white; font-family: , "blinkmacsystemfont" , "segoe ui" , "roboto" , "helvetica neue" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px;"><br /></span></div>
<div>
<i><span style="background-color: white; font-family: , "blinkmacsystemfont" , "segoe ui" , "roboto" , "helvetica neue" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px;">REST is acronym for </span><span style="background-color: white; box-sizing: border-box; font-family: , "blinkmacsystemfont" , "segoe ui" , "roboto" , "helvetica neue" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px; font-weight: 600;">RE</span><span style="background-color: white; font-family: , "blinkmacsystemfont" , "segoe ui" , "roboto" , "helvetica neue" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px;">presentational </span><span style="background-color: white; box-sizing: border-box; font-family: , "blinkmacsystemfont" , "segoe ui" , "roboto" , "helvetica neue" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px; font-weight: 600;">S</span><span style="background-color: white; font-family: , "blinkmacsystemfont" , "segoe ui" , "roboto" , "helvetica neue" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px;">tate </span><span style="background-color: white; box-sizing: border-box; font-family: , "blinkmacsystemfont" , "segoe ui" , "roboto" , "helvetica neue" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px; font-weight: 600;">T</span><span style="background-color: white; font-family: , "blinkmacsystemfont" , "segoe ui" , "roboto" , "helvetica neue" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px;">ransfer. It is architectural style for </span><span style="background-color: white; box-sizing: border-box; font-family: , "blinkmacsystemfont" , "segoe ui" , "roboto" , "helvetica neue" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px; font-weight: 600;">distributed hypermedia systems</span><span style="background-color: white; font-family: , "blinkmacsystemfont" , "segoe ui" , "roboto" , "helvetica neue" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px;"> and was first presented by Roy Fielding in 2000 in his famous </span><a href="https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm" rel="noopener noreferrer" style="background-color: white; box-sizing: border-box; color: #0366d6; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; text-decoration-line: none; transition: all 0.1s ease-in-out 0s;" target="_blank">dissertation</a><span style="background-color: white; font-family: , "blinkmacsystemfont" , "segoe ui" , "roboto" , "helvetica neue" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px;">.</span></i></div>
<div>
<i><span style="background-color: white; font-family: , "blinkmacsystemfont" , "segoe ui" , "roboto" , "helvetica neue" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px;"><br /></span></i></div>
<div>
So basically we can fetch data and create data on the server.</div>
<div>
<br /></div>
<div>
Now let's make a working example on JSON API.</div>
<div>
<br /></div>
<div>
First, we have to create a new project in the android studio if you already not created it.</div>
<div>
<br /></div>
<div>
Our end result app will look like this.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFdv_eZvDK4PI_1WBfZ32A8s7nxXTwA192IGKJIBFsP8CfwtaeQL715jWgvMXdyUZ85lg3Ac9wVVJxOIO-LIKuDSoupsatsIgJj-wz_3E_M0jcYLlHk06kCW0yWxdtLF40j3oMEv8dM3I/s1600/rest-api-in-android-min.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="675" data-original-width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFdv_eZvDK4PI_1WBfZ32A8s7nxXTwA192IGKJIBFsP8CfwtaeQL715jWgvMXdyUZ85lg3Ac9wVVJxOIO-LIKuDSoupsatsIgJj-wz_3E_M0jcYLlHk06kCW0yWxdtLF40j3oMEv8dM3I/s1600/rest-api-in-android-min.gif" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
To make this UI, we are using android recyclerview and cardview. To use them we need to add the dependency to our project.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/a6e2894d23ab160b08f32fa13967057e.js"></script></div>
<div>
<br /></div>
<div>
After adding the dependency hit the sync button.</div>
<div>
<br /></div>
<div>
We need internet permission as we will fetch the data from the internet.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/16521c38b8deeb94ac175929761b691a.js"></script></div>
<div>
<br /></div>
<div>
For demo purposes, we are using <a href="https://jsonplaceholder.typicode.com/" rel="nofollow">https://jsonplaceholder.typicode.com/</a> user API it is free to use.</div>
<div>
<br /></div>
<div>
This is the single user object of user API.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/20df38b7c8b80389563623de575d9a78.js"></script></div>
<div>
<br /></div>
<div>
Now, let's open our activity xml file and add a recyclerview like this.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/c57ef1e316a4143f0b9af154b988b0c9.js"></script></div>
<div>
<br /></div>
<div>
We have added the id to our recyclerview as userRecyclerView.</div>
<div>
<br /></div>
<div>
After that, we need to request the data through API using get method.</div>
<div>
<br /></div>
<div>
To do this we are using the library for networking.</div>
<div>
<br /></div>
<div>
Add this dependency to your project and hit the sync button.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/6ec8a633f5010499b7f27f54e3f5ae29.js"></script></div>
<div>
<br /></div>
<div>
Now open your activity java file and initialize android networking as shown below.</div>
<div>
<br /></div>
<div>
After that, we initialize our recyclerview.</div>
<div>
<br /></div>
<div>
To send get request from the android networking library we use this code.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/1026b3814c4375910376494aec83fb25.js"></script></div>
<div>
<br /></div>
<div>
In the onResponse method of JSONArrayRequestListener, if the get request return successfully then we will get our response in that method as JSON array.</div>
<div>
<br /></div>
<div>
In that method, first, we are checking if the response is not null and then we initialize our adapter for recyclerview, we will discuss adapter later in this post.</div>
<div>
<br /></div>
<div>
After initializing the adapter, we set the linear layout manager for the recyclerview then we set our adapter by using the setAdapter method and pass our adapter.</div>
<div>
<br /></div>
<div>
Now we have to make a single item layout file for our recyclerview. To do that, create a new layout file in the layout folder and name it as user_list_item.</div>
<div>
<br /></div>
<div>
in the user list item xml, we have added a cardview and in the cardview, we added 3 textview, 1 is for user's name, 1 for user's username and last for user's phone number. See below code.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/c8c0f68db8152d9432fb812fc376467e.js"></script></div>
<div>
<br /></div>
<div>
Now let's create our adapter class.</div>
<div>
<br /></div>
<div>
Create a new java file in your package, we name it as UserAdapter and extend with RecyclerView.Adapter class and add our custom view holder generic which we have created within the adapter class as shown in the below code.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/48e6801d8ac15f98fd1dd91c863dd59b.js"></script></div>
<div>
<br /></div>
<div>
In the Adapter, we must implement these methods.</div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>onCreateViewHolder</li>
<li>onBindViewHolder</li>
<li>getItemCount</li>
</ul>
In the ViewHolder class, we have to create a construct by passing the view parameter. In the constructor, we are initializing all the items of our single-row item.<br />
<br />
<span style="border-radius: 15px; border: 1px solid grey; padding: 15px;">
See Also: <a href="https://www.akshayrana.in/2020/01/how-to-test-app-without-android-emulator.html" target="_blank">Test your app without Android Emulator</a></span></div>
<div>
<br /></div>
<div>
Now come to our adapter methods, to get data from our activity to adapter we created a construct and pass 2 parameters, 1st parameter is for the context of the activity and 2nd parameter is for the JSON array of response.</div>
<div>
<br /></div>
<div>
After that, in the onCreateViewHolder, we are returning the object of our view holder class UserViewHolder and in the parameter, we inflate our single row item layout file.</div>
<div>
<br /></div>
<div>
And in the onBindViewHolder, we are setting the values according to their fields and in the getItemCount method, we return the length of the user JSON array.</div>
<div>
<br /></div>
<div>
Now run your app and launch it and wait for some time depending on your internet connection speed and you will see your data will be displayed.<br />
<br />
To send post request use this format.<br />
<br />
<script src="https://gist.github.com/Akshay-Rana-Gujjar/b21e057fcb7a64d085ab639c42ddcaac.js"></script></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
If you have any questions or query you can mail me and if you like this article please share it with your friends and mates. Thank you for reading hope you learned something new. </div>
<div>
<br /></div>
<div>
Have a nice day :)</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
</div>
<div>
<span style="font-size: x-large;"><br /></span></div>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-21015614937527130172020-01-19T02:00:00.000+05:302020-01-19T11:38:51.505+05:30How to test app without android emulator<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
How to test Android Applications without Emulator</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyQlodiPascud2xcpSuhs2CSRQJ2_XgKlkrK1EQDagdZahTR9C5VZK5bbVLJOewln5tYy0vyCmtmNgmYktRsVw62IkFRmASBKBw9CZ0hyhwzEVIaKIbHUfgBCaqzDbwz5BsOQOrK_M0Ws/s1600/How-to-Test-app-without-emulator.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyQlodiPascud2xcpSuhs2CSRQJ2_XgKlkrK1EQDagdZahTR9C5VZK5bbVLJOewln5tYy0vyCmtmNgmYktRsVw62IkFRmASBKBw9CZ0hyhwzEVIaKIbHUfgBCaqzDbwz5BsOQOrK_M0Ws/s1600/How-to-Test-app-without-emulator.png" /></a></div>
<br />
<br />
Today we are going to see how we can <b>test</b> our <b>android applications</b> instead of using emulator we can use our <b>real device</b>.<br />
<br />
To use the real device for testing we need to connect our device with our pc, to do that we have 2 choices. The first choice is by using <b>USB cable</b> we can connect our real device to pc and the second method, which is my favorite, that we can connect our device <b>wirelessly</b> (No use of USB or any cable).<br />
<br />
Let's see how we can do these methods one by one.<br />
<br />
To perform these methods first we need to enable USB Debugging from the developer options.<br />
<br />
Go to the system settings and go at the last there is an option called developer option like below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-dmE0nYO3dlUGiGSidCtI6imj4KKp1cBy8vAQjLSfdWpB1e1VzVbT0ix2JGtaIbUl2y9xGNYMAqNtoS7S4uTIFLts3LCEDWgkLE9CRTVxfRiRK0NreqEAM46c23-B1IXH3DON1-vy-WU/s1600/developer-options-setting.jpg.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="172" data-original-width="493" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-dmE0nYO3dlUGiGSidCtI6imj4KKp1cBy8vAQjLSfdWpB1e1VzVbT0ix2JGtaIbUl2y9xGNYMAqNtoS7S4uTIFLts3LCEDWgkLE9CRTVxfRiRK0NreqEAM46c23-B1IXH3DON1-vy-WU/s1600/developer-options-setting.jpg.png" /></a></div>
<br />
<br />
If there is no option is showing then you have to unlock this option by going to about phone option then click on software information and then click quickly 5 to 6 times on build number label. Now you able to see the developer option.<br />
<br />
After clicking the developer show scroll down to the USB Debugging option.<br />
<br />
If it is not enabled then click on it and enable it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihHZQMww2d8f_hdiRECRz8rVUhQbM0HkcfPStfDTS-TBXt1Fd4bt8KgfquJ8VDibV7P-fM15pkystQbMTQOwFGiI0xBJKJFIXqhoAdpWquwPduU_zkqKyRLrtqXgyDOeYxli8f0RyXvzg/s1600/usb-debugging-option.jpg.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="718" data-original-width="492" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihHZQMww2d8f_hdiRECRz8rVUhQbM0HkcfPStfDTS-TBXt1Fd4bt8KgfquJ8VDibV7P-fM15pkystQbMTQOwFGiI0xBJKJFIXqhoAdpWquwPduU_zkqKyRLrtqXgyDOeYxli8f0RyXvzg/s1600/usb-debugging-option.jpg.png" /></a></div>
<br />
<br />
Now we are ready to go ahead.<br />
<br />
<h3 style="text-align: left;">
Run Application using the USB cable</h3>
<br />
To run an app on your device connect you USB to your phone and then open your android studio.<br />
<br />
After connecting your phone to your system via a cable. Hit the run button in the Android Studio and pop will be shown on your mobile screen. Click on allow to allow the installation of app by your computer system.<br />
<br />
After doing that, wait for some time after the build your app will be launched successfully and you can see all the logs of the device in the logcat.<br />
<br />
Now, this the part where we use a USB cable to test the app now see the second method.<br />
<br />
<h3 style="text-align: left;">
Run an Application without a USB cable (wirelessly)</h3>
<br />
To run your app wirelessly on your device, you must connect your device on the same network where your system or pc is connected.<br />
<br />
That means you must be on the same local network or wifi.<br />
<br />
So now I am assuming that both the device mobile device and computer system are on the same network.<br />
<br />
To use your mobile phone wirelessly we need to enable ADB on our mobile device.<br />
<br />
To do that we need to open our platform tool folder in the file explorer.<br />
<br />
If you are using windows then you have to go to this directory.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyXk2q44N42jliqUez3oI1HaWz2juZCNV8khfBIPaYUt2sdq-P1N5KqjTxqg00pNXQrDUCP3HRZ_cHhH4tvy5v5HjKC9fOJPRU9K8MGb-IKYhl6RKWb091YKArvYGDkyPDpS3toilPGPs/s1600/android-sdk-path.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="659" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyXk2q44N42jliqUez3oI1HaWz2juZCNV8khfBIPaYUt2sdq-P1N5KqjTxqg00pNXQrDUCP3HRZ_cHhH4tvy5v5HjKC9fOJPRU9K8MGb-IKYhl6RKWb091YKArvYGDkyPDpS3toilPGPs/s1600/android-sdk-path.png" /></a></div>
<br />
<br />
Or if you are using Linux or Mac then go to where you install your Android SDK and there will be a folder named as platform-tools.<br />
<br />
After opening the directory, we need to open a terminal on that path. If you are on windows, click on the address bar and type cmd and press enter. This will open cmd in that location.<br />
<br />
If you are on Linux or Mac, you can use the cd command.<br />
<br />
Now to need USB cable only one time to enable adb in your device.<br />
<br />
So, connect your device via USB cable and then type this command in that terminal or cmd- <i>adb tcpip 5555</i><br />
<i><br /></i>
Press enter and wait to finish the execution of the command.<br />
<br />
After completing the commands, remove your USB cable.<br />
<br />
Now we need the local IP address of the device. Go to the wifi settings in the system settings and click on your connected wifi this will show the local IP address of your device.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUEcCOCOjL4khLimcD03HqfBXACtL8XbXIMOniw9uzjX0jqTeNEv6j6mdUSYXbnhz5XtAcfmUfRuMf3CYCUE-ou82o1tHKdi4HxHx2X5RHBERhY8gjshyphenhyphenyWAMKwxA4OBaouuJJA02bMjo/s1600/find-ip-address-in-android.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="741" data-original-width="1080" height="439" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUEcCOCOjL4khLimcD03HqfBXACtL8XbXIMOniw9uzjX0jqTeNEv6j6mdUSYXbnhz5XtAcfmUfRuMf3CYCUE-ou82o1tHKdi4HxHx2X5RHBERhY8gjshyphenhyphenyWAMKwxA4OBaouuJJA02bMjo/s640/find-ip-address-in-android.jpg" width="640" /></a></div>
<br />
<br />
After getting the IP address, in my case it is 192.168.0.110, type this command in your terminal- <i>adb connect <ip_address_of device></i><br />
<br />
After hitting the enter your device will connect successfully with your pc wirelessly and your device will show in the android studio as is was shows when you were connecting your mobile via USB cable.<br />
<br />
Now run your app and it will install and launch your app wirelessly.<br />
<br />
Bonus tip: If you are not connected on wifi then you can use your mobile hotspot and the IP of your mobile will be 192.168.43.1. Use this IP address of your mobile to connect.<br />
<br />
Now, this comes to the end of this tutorial. Hope you learn something new. If yes then do share this article with your friends and mates and tell them this awesome trick.<br />
<br />
Have a nice day.</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-45387581237886307782020-01-17T22:51:00.004+05:302020-01-17T22:51:54.377+05:30Snackbar in Android<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
<span style="font-size: x-large;">How to make Snackbar in Android</span></h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinP9x5sPh8u1E9l11ADLZtdBY_N-Wyyhp1T07PM5H6s5VUiSLim3XuFZ5aRs-29PorGoed5iFeTWWZvuSh9qXaoWrI1CVwfGbi77HcWAugOEt-e2AkzDPDaZfMhxsSqVPvVBmrr5utowo/s1600/How-to-make-snackbar-in-android.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinP9x5sPh8u1E9l11ADLZtdBY_N-Wyyhp1T07PM5H6s5VUiSLim3XuFZ5aRs-29PorGoed5iFeTWWZvuSh9qXaoWrI1CVwfGbi77HcWAugOEt-e2AkzDPDaZfMhxsSqVPvVBmrr5utowo/s1600/How-to-make-snackbar-in-android.png" /></a></div>
<br />
Today. we are going to learn how to make a <b>Snackbar in Android</b>.<br />
<br />
There are many ways to show short information but generally, we use toast messages and we have a snackbar.<br />
<br />
Before going to implementation we should know the difference between the toast and snackbar.<br />
<br />
If you want to show the only information then you should use toast but if you want to show some information with some action to be performed then it is recommended to use a <b>snackbar with action</b>.<br />
<br />
You can customize the position of toast but the snackbar only shows from the bottom of the screen.<br />
<br />
Now let's see how we can make a simple snackbar and also snackbar with the actin button.<br />
<h3 style="text-align: left;">
How to make a simple snackbar?</h3>
<div>
Let's start by making a new project in the android studio if you not created already.</div>
<div>
<br /></div>
<div>
After that, we need to add a dependency to our project.</div>
<div>
<br /></div>
<div>
Add this dependency and hit the sync button.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/3e6e237465c0baf3c8d06d3e8899ea6f.js"></script></div>
<div>
<br /></div>
<div>
After adding the dependency, go to the activity xml file and add the id to the parent layout and also we added a button to trigger the snackbar.<br />
<br />
<script src="https://gist.github.com/Akshay-Rana-Gujjar/99ea1af89474579263920c4e4ab08509.js"></script></div>
<div>
<br /></div>
<div>
Now, open your activity java file and add this code.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/e3c3ebbbed8884b45485362f01e8db40.js"></script></div>
<div>
<br /></div>
<div>
First, we initialize a button with the findViewById method and set a click listener to it.</div>
<div>
<br /></div>
<div>
In the listener, we are getting the parent view by findViewById and pass the parent layout id.</div>
<div>
<br /></div>
<div>
After that, We are showing the <b>snackbar</b> which has three parameters, one is for a view where we are passing the parent view variable, second is a text which will be shown in the snackbar and the last parameter is for the duration just like toast has.</div>
<div>
<br /></div>
<div>
After passing the parameters, we need to call show function to show the snackbar.<br />
<br />
Now, run your app and see the nice and beautiful snackbar like below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGd5hI-jBeQc2_iLIQDFXWk3UO7zqcSPjTZgcY8gEkVs5ifl1iQbkK_qFf5ZiAIYPdPG4hx5rA47rlCt2DkwTgxVvXzojyG-mNc_ukw3bl6AfHe_hLuT8Cf9rp_e1XNUg6aK7cGzLe1mI/s1600/simple-snackbar-in-android.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="361" data-original-width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGd5hI-jBeQc2_iLIQDFXWk3UO7zqcSPjTZgcY8gEkVs5ifl1iQbkK_qFf5ZiAIYPdPG4hx5rA47rlCt2DkwTgxVvXzojyG-mNc_ukw3bl6AfHe_hLuT8Cf9rp_e1XNUg6aK7cGzLe1mI/s1600/simple-snackbar-in-android.gif" /></a></div>
<br />
<br />
<h3 style="text-align: left;">
How to make a snackbar with an action button?</h3>
Making a snackbar with an action button is very easy if you know how to make simple snackbar we need to just follow the above steps and call this function of snackbar like below.<br />
<br />
<script src="https://gist.github.com/Akshay-Rana-Gujjar/d1fbf6eb6f94c6c41189af024703a854.js"></script><br />
<br />
In this function, first, we need to pass text which we will show on the button.<br />
<br />
After that, we add a click listener just like we add in a simple button in android and write our logic.<br />
<br />
We are showing a toast message on the click of the snackbar button.<br />
<br />
After this, run your app and see how the action button will appear along with the snackbar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8ELEpFu7JZWck945JOwBK0Fnulsy9USWCPVMC-GeRKVtqYari8qlD4ddW1_2GwmpplLOa12M0WEcy1RxZssdvWbrLyKd3jNLAsQhG6L_8rSzjuCNrD3hq7cEKlFoSTLgHb6H-gK_Y1c/s1600/snackbar-with-action-button.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="380" data-original-width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8ELEpFu7JZWck945JOwBK0Fnulsy9USWCPVMC-GeRKVtqYari8qlD4ddW1_2GwmpplLOa12M0WEcy1RxZssdvWbrLyKd3jNLAsQhG6L_8rSzjuCNrD3hq7cEKlFoSTLgHb6H-gK_Y1c/s1600/snackbar-with-action-button.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
That's it for today. If you learn something new then do share with your friends and mates.</div>
<br />
Thank You for reading. Have a good day :)</div>
</div>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-70950354987939338022020-01-12T17:29:00.000+05:302020-01-12T19:25:36.928+05:30LocalBroadcastManager in Android<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
<span style="font-size: x-large;">What is LocalBroadcastManager and How to use LocalBroadcastManager in Android</span></h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5jqHUuNIehC3euryNhieqRWRRBCLjebHAsACMonY0c5WeNVMCv3bf_JtTbx5Z3zYgt6hANyjVTiQXMmqNhsuaf5KtCJaopQKKPCo4D-3kkwvaFNoktGDsaZFnIgmSaooqhIpHTANUiNA/s1600/what-is-localbroadcastmanager-how-to-use-localbroadcast.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5jqHUuNIehC3euryNhieqRWRRBCLjebHAsACMonY0c5WeNVMCv3bf_JtTbx5Z3zYgt6hANyjVTiQXMmqNhsuaf5KtCJaopQKKPCo4D-3kkwvaFNoktGDsaZFnIgmSaooqhIpHTANUiNA/s1600/what-is-localbroadcastmanager-how-to-use-localbroadcast.png" /></a></div>
<br />
<br />
Today, we are going to learn what is <b>localbroadcastmanager</b> and how to use it our application.<br />
<br />
Let's start.<br />
<br />
<h3 style="text-align: left;">
Whats is LocalBroadcastManager? </h3>
</div>
<div>
<b>Just like Global Broadcast</b> receiver where we receive various broadcasts from different applications. </div>
<div>
<br /></div>
<div>
For example, we can the listener broadcast for battery percentage when it very low or we can set various listeners for various events.</div>
<div>
<br /></div>
<div>
We can also make our custom broadcast and can set the receiver from other applications and can communicate between different applications.</div>
<div>
<br /></div>
<div>
But what <b>if you only want that your custom broadcast can only listen within the application</b> to pass some <b>sensitive data</b> something like user data or some transaction information.</div>
<div>
<br /></div>
<div>
The problem with <b>global broadcast is</b> that it is <b>system-wide</b> and <b>can be vulnerable</b> which can be very harmful especially when we are working with some sensitive data.</div>
<div>
<br /></div>
<div>
By using local broadcast we can <b>pass data from one point to another point within the application</b> without informing the system-wide.</div>
<div>
<br /></div>
<div>
Let's see an example to understand it better.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
How to use LocalBroadcastManager?</h3>
<div>
Here is an example where we are consuming <b>LocalBroadcastManager in our application</b> to show the use of it.</div>
<div>
<br /></div>
<div>
First, we have a text view to show the message and a button to start an activity from where we will change the first activity text view value by using localbroadcastmanager.</div>
<div>
<br /></div>
<div>
<b>Check this gif here.</b></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh93wWFi2tlEBzxJsJ_d_WmsdR2EdVlBKazxfgipWRKzCcNyzNnM1r9Hbmi8OVUnfiACSkDaHcRNiKEWpNtglnQ2PmskdfcJc7Ory9EdzFzD1IM5405n0o5gPSPG022-H-egesmx9ykic/s1600/what-is-localbroadcastmanager-how-to-use-localbroadcast.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="413" data-original-width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh93wWFi2tlEBzxJsJ_d_WmsdR2EdVlBKazxfgipWRKzCcNyzNnM1r9Hbmi8OVUnfiACSkDaHcRNiKEWpNtglnQ2PmskdfcJc7Ory9EdzFzD1IM5405n0o5gPSPG022-H-egesmx9ykic/s1600/what-is-localbroadcastmanager-how-to-use-localbroadcast.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
<br /></div>
<div>
Create a new project in the android studio if you not created already.</div>
<div>
<br /></div>
<div>
To use localbroadcastmanager in your application we need to <b>add this dependency</b> in our application. </div>
<div>
<br /></div>
<div>
Open your build.gradle (Module: app) file and add this line in the dependencies section.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/d3112c1ce6a5a94f462dbb4eaee7cdf6.js"></script></div>
<div>
<br /></div>
<div>
After adding the dependency hit the sync button.</div>
<div>
<br /></div>
<div>
After that, open your activity xml file and <b>add a text view and a button</b>.</div>
<div>
<br /></div>
<div>
Like this.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/e31d3a21d2f672537e895b08e962bee1.js"></script></div>
<div>
<br /></div>
<div>
Here, we set the id textView to our text view and starSecondActivity to button.</div>
<div>
<br /></div>
<div>
Now open your activity java file and add this code in the file.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/e82aba25aa7682d886334029955b0596.js"></script></div>
<div>
<br /></div>
<div>
First, we declare TextView at the first and in the onCreate method, we initialize the text view by using the findViewById method.</div>
<div>
<br /></div>
<div>
After that, we initialize the button and then set the click listener to start the activity.</div>
<div>
<br /></div>
<div>
Now it <b>comes the main part,</b> we are initializing the <b>localBroadcastManager</b> and initialize the <b>broadcast receiver </b>and set that receiver to localBrasdcastManager.</div>
<div>
<br /></div>
<div>
In the receiver, we are getting the data that we can send along with the intent.</div>
<div>
and then set that data to our text view and show a toast.</div>
<div>
<br /></div>
<div>
This was the receiver part now it comes where we send the broadcast with some data.</div>
<div>
<br /></div>
<div>
To do this we need to create second activity and we name it as SecondActivity.</div>
<div>
<br /></div>
<div>
Open the second activity xml file and add a button to send the broadcast like below.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/2b210793d60189519e2476a089c83fbe.js"></script></div>
<div>
<br /></div>
<div>
We set the id to the button as setButton.</div>
<div>
<br /></div>
<div>
After adding the button, open your java file and initialize the button and set the click listener and in the listener we write the code to <b>send a broadcast</b>. Like below.</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Akshay-Rana-Gujjar/1c689d43641dcbe47b6ac63981fe9a00.js"></script></div>
<div>
<br /></div>
<div>
In the button listener, we initialize the LocalBroadcastManager and then we <b>set new intent</b> for local broadcast with our <b>custom action</b> name as "CUSTOM_ACTION". You can change it and set custom action name whatever you like.</div>
<div>
<br /></div>
<div>
Now, put the data in the intent by using the <b>putExtra method</b> which accepts two parameters as key-value like data. We set the key as "DATA" and set the value "New Value from Second Activity". </div>
<div>
<br /></div>
<div>
You are free to change these values according to your choice.</div>
<div>
<br /></div>
<div>
Now its time to send the local broadcast by using the sendBroadcast method of LocalBroadcastManager and pass our intent in the parameter of sendBroadcast.</div>
<div>
<br /></div>
<div>
After sending the broadcast we need to specify which broadcast we should listener in our first activity.</div>
<div>
<br /></div>
<div>
To do this, we need to open our first activity java file and <b>register receiver</b> with custom intent action after our broadcast receiver like this.<br />
<br />
<script src="https://gist.github.com/Akshay-Rana-Gujjar/cde02f3553bed6912cd910b34cb8f8d2.js"></script></div>
<div>
<br /></div>
<div>
In the above code, we are calling the registerReceiver method which accepts parameters, the first parameter is for our BroadcastReceiver and the second is for the intent filter with the name of our intent action name as we set our action as "CUSTOM_ACTION" as above.<br />
<br />
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;">
<b>See also: <a href="https://www.akshayrana.in/2020/01/pass-data-between-activities.html" target="_blank">Pass data one activity to other activity</a></b></span></div>
<div>
<br /></div>
<div>
Now run our application, after launching the application you will see the text view with the text of hello world and a button, click on the button to start the second activity and click on the Set button.</div>
<div>
<br /></div>
<div>
After clicking you will see a toast message which says "Text Set!" and if you press the back button, your first activity t<b>ext view has changed</b> with the data we send with the local broadcast.</div>
<div>
<br /></div>
<div>
Now, this comes to the end of the tutorial, thank you for reading.</div>
<div>
<br /></div>
<div>
If you learned something new, share this article on what is LocalBroadcastManager and how to use it, with your friends and mates.</div>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.comtag:blogger.com,1999:blog-4214960432169050117.post-12655106724739193142020-01-09T20:45:00.000+05:302020-01-09T20:55:34.060+05:30Twitter Like Button in Android<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
<span style="font-size: x-large;">How to make Twitter like button in Android</span></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAVM83Z7vJR9i-tbUrLAM46DRrwY0ropuiUYUUiIFWbMkXnksJfltHiEMVMCJXlVcC7bHFzR4gHYsZTB0XUeqsi5auw5rXYEpAHNQ5W4bSc88DGXVUqVn4hXqdJxctNEi-HU7MKcONJiA/s1600/How_to_make_twitter_like_button_with_animation.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAVM83Z7vJR9i-tbUrLAM46DRrwY0ropuiUYUUiIFWbMkXnksJfltHiEMVMCJXlVcC7bHFzR4gHYsZTB0XUeqsi5auw5rXYEpAHNQ5W4bSc88DGXVUqVn4hXqdJxctNEi-HU7MKcONJiA/s1600/How_to_make_twitter_like_button_with_animation.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Today, we gonna learn <b>how to make like button</b> the same as <b>Twitter</b> has on their website with animation. See the below gif.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrVUyquo3DSIL5QDvTIKPQ32kzQzFrLERICPKUgB8lsAqEJbN-qdi5JnO3FiNCkqiQSgMtbiLIFZkTaPyCFI0GHZZAoFH0vUfiZTPfVvIZJP9uuXgvFPD761IOuW8C40kem3m5CzhTkHI/s1600/twiter-like-button-in-android.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="396" data-original-width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrVUyquo3DSIL5QDvTIKPQ32kzQzFrLERICPKUgB8lsAqEJbN-qdi5JnO3FiNCkqiQSgMtbiLIFZkTaPyCFI0GHZZAoFH0vUfiZTPfVvIZJP9uuXgvFPD761IOuW8C40kem3m5CzhTkHI/s1600/twiter-like-button-in-android.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Let's get started. First, create a new project in Android Studio if you not created already.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
After creating the project, we need to add some dependencies to our project.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So first, open your build.gradle (Project: <app_name>) file and add below line in allprojects repositories section as shown below.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<script src="https://gist.github.com/Akshay-Rana-Gujjar/012ce671ba42e61e3a73fade13bc8bc7.js"></script></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now after that, we need to open our build.gradle (Module: app) and this dependency.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<script src="https://gist.github.com/Akshay-Rana-Gujjar/3a31c363731b4acf84f75e40d59dcfc8.js"></script></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This is all our dependency part. Now hit the sync now button at the top right corner.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This will add the dependency in our project. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now we can move forward and open an activity xml file and this code in our layout for the like button.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<script src="https://gist.github.com/Akshay-Rana-Gujjar/afdb35dd1f1f8153ed0a1009e28bc851.js"></script></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Our activity xml file has ConstraintLayout as parent layout so we have to add constraints attributes.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
As you can see in our like button we have icon_type attribute has heart value. You can add thumb or star. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You can customize as per your requirements.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now after adding the like button in the xml file, we need to add a listener to our like button to know when the button clicked or like and unliked.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
To do that, go to your activity java file and <b>add the listener</b> to the like button.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<script src="https://gist.github.com/Akshay-Rana-Gujjar/09227a7973ee3c7c5a80019412d3a479.js"></script></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
In the above code, we get our like button from xml file using the findViewById method.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
After getting the like button we are setting the <b>onLikeListener</b> method which accepts an interface as a callback and implements two methods one is liked method and unLiked method.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
In the <b>liked method</b>, we are showing the toast when a user like the button and,</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
In the <b>unLiked method</b>, we are shoeing toast when the user hits the unlike.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="border-radius: 10px; border: 1px solid grey; padding: 10px;"><b>See also: <a href="https://www.akshayrana.in/2020/01/image-slider-in-android.html" target="_blank">make an Image Slider in Android</a></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now run your app and check your app and notice the beautiful animation when you like the button.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You can <a href="https://github.com/jd-alexander/LikeButton#attributes" rel="nofollow" target="_blank">check all attributes for like button here</a>.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Hope you learned something new. If you like this article share it with your friends and mates.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Thank you.</div>
</div>
Adminhttp://www.blogger.com/profile/13373761912579562769noreply@blogger.com