steem android app update, introducing new ui and image downloader

Repository

https://github.com/hispeedimagins/steem

---

I am rebranding. Take a look at the utopian task and get me some icons.

Task request

I am also changing the app name. From steemer to steem? Have better suggestions. Do tell me in the comments.

steemer is and will remain the first native android app which is and will be forever completely free for the people to use.

Why free?

Because @steemit needs it. A quick way to interact with the blockchain. One that will not eat into the users rewards.

---

New features

---

Image download and view

This is a feature I have been hoping to implement for a long time now and well here it is. All images from the post can now be simple clicked on to open into a new activity where all the images from that post are loaded for you to view in full and click on.

Here are the images of how it looks before we discuss how it was implemented.

This is the image of how the post looks. Click on the Image loads the next screen.

Tadaaa. Here are all the image from the post loaded for you to view. Simple click on the images below to view them in full.

More images available if you scroll. Click on them to view them in the larger Image holder.

Click on the download button and the image in the large Image holder will be saved to your phone.

It all looks simple now that it is made but it was not entirely easy to make this. Let us dive into the breif way of how it was made.

1. The article is processed and then made available to view to the user using a webview as they display the html correctly. So the first step was to edit the js being used to place a click listener on all images and then load all the available images in the webview.

2. Step two would be to now pass a list of those Image urls from the webview to the android app so it can then make the new activity. To pass the data we use a webview interface and the parameter where the Image is got is gived the type of a string array. Lists will not work. You could just convert to json and reconvert back but that is too much processing power.
   this is what the function looks like.

public void imageClicked(String url, String[] urls){
    ArrayList<String > v =new ArrayList<String >();
              for (int i =0;i<urls.length;i++) {
                   v.add(urls[i]);
               }
        Etc.....

1. Step 3 is to now load the list of image urls into a recyclerview, load the images in them view glide and set the first image in the large Image view.

commits

1. Update kotlin version, add activity to manifest
2. The main activity is added, ui for it, recyclerview class additions, bind helpers and processors
3. Javascript additions, webview interface additions and static field setter
4. add the ability to download and save the images, request permissions

New app ui colour and update

The app ui has been looking drab and crummy for a while now. Something had to be done. But what?

1. Well the first thing is to add better colours so new colours for the primary and secondary were chosen. They are bright and catch your attention. Yet look good.

2. The font of the app too has been changed to use a lighter version along with different font types where needed. Along with this, the size of the icons below a post is reduced so it makes it look more elegant.

3. The overflow menu over each post is now moved to give more room for the name and the tag fields.

4. The article view in the article section is moved to make it look like the preview.

Here are the results

So how do we do all of this?

1. Well the first thing is to add the colours in the colors.xml file of android.
2. Add the fonts via android studio.
3. Update the style.xml files to use the new colours. The app has two themes, white and dark. I am using dark but the same colours are now used for the white theme as well.
4. Edit the individual files as needed for different fonts and ui placements.

It is a lot of work just sounds easy here.

commit

Style files,icon files and colours including activity files

Image loader ui

Yup this may seem trivial but really makes a huge difference in the app. Throughout the app I use glide to load images. It is recommended by google, is extensible (not that I have), easy to use, maintains a cache and handles memory loading and unloading as well.

It also has an option to set a place holder while the image loads from the network. Now all this while we have been using an ugly infinity image as the place holder. We cannot use the normal progress bar.

My workaround uses another feature of android to get the perfect implementation.

So how do we get this perfect way? First thing is we make an animated vector. These vectors can be animated by andoid when you load it from their class. The way to animate is slightly complicated and not in the scope of this article. If you want to know then comment below.

AnimatedVectorDrawableCompat.create(con,R.drawable.animated_loader)

This is how you load it into an object, then when needed you simply run the start function when needed.

so we simply load this into an object and load that object into the glides placeholder function then start it. Glide unloads this when the image is loaded.

commit

1. Image loader vector ui and its implementation in other classes

Bug Fixes and Performance improvements

---

Fix a bug where articles from trending would crash and some profile images would not load

Articles in trending would crash as a database Id was passed for no reason. This is now stopped.

Some images from the profile would not load as I was using the profile image from the profile api and that was not perfect so have changed over to the steemit image api.

---

GitHub account https://github.com/hispeedimagins

---

Since this app was not open source when I started it, I did not comment much. Only after I have put it on Github have I started adding comments. Though after last time I have started commenting the entire app. The current comments are held up as the monumental task of converting to androidx coincided so cannot be submitted as of now.

---

Want to contact me?

Discord server for steemer - https://discord.gg/GkNZCGu

My discord username - hispeedimagins#6619

email - [email protected]