Android Gridview with continuous horizontal scrollbar demo

I did this example as I was practicing Android Gridview.

Below is the screenshot of how the demo looks.

It uses AsyncTask to fetch list of all installed apps in the device and shows them in a GridView.

By default, Gridview does vertical scrollbar when the GridView items are more than it can show in its initial view.

So, the trick here is to include GridView inside LinerLayout element which is included inside HorizontalScrollView element.

And have GridView width large enough to include all elements horizontally so that vertical scrollbar does not appear.

Full source code available at Github.

https://github.com/syuraj/GridView_With_HorizontalScrollbar_Demo

It is developed using Android Studio 0.4.6.

Fastly - an Android app to launch local apps quickly

I have released the first version of an Android app called ‘Fastly - search local apps’. 

image

In the home screen of the app, most frequently used apps are shown.

Keyboard is open by default.

As user begins typing, the list is filtered by the typed letters and the user can tap the desired app to launch.

The app kills itself if it goes to background, e.g. when user taps another app icon.

 image

image

Android app on Google Play

source code at github

image

Android app: TradingView Candlestick charts

Another weekend and another Android app.

"TradingView CandleStick charts" renders candlestick charts of your stocks from TradingView.com.

https://play.google.com/store/apps/details?id=com.siristechnology.candlestick

Built using Android Studio 0.4.6.

Uses Sqlite database to store stock watchlist.

Uses default WebViewClient provided by Android to display chart from TradingView.com

All required HTML files are included with the app.

No registration required. No ads either.

Full source code available at github.

https://github.com/syuraj/CandleStick_Charts_from_TradingView

Suggestions welcome.

My first Android app: OneStock - a stock news and data app

It is my first Android app.

https://play.google.com/store/apps/details?id=info.suvaya.onestock.app

It intends to deliver financial news, data and charts on a single stock or company.

Its intended for hard core traders who mostly trade only one stock.

It fetches financial news from Yahoo Finance.

Interactive CandleStick chart from TradingView.com

And feed from StockTwits.com.

It is developed using Android studio 0.4.6.

Source code at https://github.com/syuraj/OneStock

Host of new features are coming soon. Stay tuned.

Chrome Extension: Add or Remove JavaScript or CSS Libraries dynamically

It is my first Google Chrome Extension.

It allows web designers and developers to quickly inject or remove JavaScript or CSS libraries in a web page.

[chrome web store link: https://chrome.google.com/webstore/detail/add-remove-libraries/ifdmfkolcflpmfkphcgcbhhaljnaobgi]


image

 

First of all, I built a boilerplate Chrome Extension using a tool from http://extensionizr.com.

It is pretty slick. It saved me some learning time.

I just had to modify a HTML file used for popup when the extension icon is clicked in the toolbar and a JavaScript file that runs in the background of main window.

Full source code is available at github.

[github link: https://github.com/syuraj/Add_Remove_Libraries]

Fastest way to debug an Android application

Android emulator that comes with Eclipse ADT or Android Studio is terribly slow.

Genymotion does slightly better by creating an instance in Oracle VM Virtualbox.

But still it uses your development machine resources and is not as fast as we expect to.

So, the fastest way to use a real Android Phone.

These are the general steps that can you get started with debugging Android app in a Nexus phone.

  • Tap Build Number 7 times @ Settings => About Phone => Build Numberimage
  • You will now see “Developer Options”  under settings.

  • image
  • Enable USB Debugging under Developer options

  • Install ADB driver (for Nexus phones, http://developer.android.com/sdk/win-usb.html)
  • image
  • Plug in your Android phone. Make sure you connect as Media Device.
  • image

  • Executing “adb devices” command from your “<SDK>/platform-tools” directory.
  • You will be prompted to verify RSA key form your connected machine, confirm that.
  • Now you are all set, you should be able to directly run your app from Android Studio and choose your Android device.
  • image

Bootstrap with jQuery Wookmark demo

Bootstrap is a JavaScript and CSS library for faster and easier web development. It has been fantastic so far. It does the hard work of prettying up menus, drop downs, buttons and tables with minimal input from a developer. Basically any developer could be a good website designer. Yes designing icons and images still has to be done by designers. Bootstrap has been a phenomena ever since twitter released it more than a year ago.

I have created a sample application which uses Bootstrap to build the page layout, top bar and drop down menus. It then uses jQuery wookmark plugin to build Pinterst-style board with pictures. Currently it uses an API provided by wookmark  o pull beautiful images and show then in the board.

This is a very basic demo and could be helpful if you are thinking of getting started with bootstrap and wookmark.

https://github.com/syuraj/BootstrapWookmarkDemo

It uses bootstrap 2.3.0, jQuery 1.8.3 and jQuery wookmark .1 available at the time of building this demo.

I hope you guys enjoy the demo. Let me know your thoughts on comments. Below is a screenshot of the application.

image

LG Nexus 4 phone still has a battery problem

It is the latest android phone from Google without the loads of bloatwares from vendors. And yes, $300 for a high-end top notch smartphone is a steal.

But, the fact is the fact, it still has battery issues. Yes, it is of course much better than those Samsung Galaxy S2 and older likes. But, if you compare with Galaxy S3, it seriously lags. I see my friend with S3 playing games all day long. However, same cannot be said about me with Nexus 4. I have to conservatively use it to keep it alive. If I can avoid hard core games like Need for Speed, then it can sustain a normal day with frequent email checks, facebook wall trolling and some arcade game play.

At the end, I absolutely love it and highly recommend it. At least I don’t have to worry about charging all the time as I had to when I had Galaxy S2.

Facebook web app authentication made super easy

First, you have to create an web app at https://developers.facebook.com/apps and set canvas URL along with other details as always.

And that is all you need to do. There is no need to call their api for authentication. Instead FB will directly post a signed request to the canvas URL you provided while creating the app as soon as the app is loaded. Then, you can decrypt the signed request using secret key and ‘HMAC-SHA256’  algorithm. You can also use libraries like csharpsdk.org to do the job.

After decryption, you will get user_id, user details (country, age, language), OAuth token and some timestamps. Then you can use user_id for identification and token for further communication.

However, if the user has not authorized the app you will get null for user_id and token. Then, you can ask for authorization by redirecting to the authorization URL (e.g. https://graph.facebook.com/oauth/authorize?client_id={0}&redirect_uri={1}&scope={2}). 

You have to pass redirect_uri so that, FB returns the user to previous location and you can continue from there.

This is a very nice move by Facebook as it reduces dependency on external Facebook libraries vastly.

A small Facebook App that I created using above described technique is available at codeplex at http://jackpot.codeplex.com.

Also, it will be hosted at https://apps.facebook.com/badhshala.

Reference: https://developers.facebook.com/docs/howtos/login/signed-request/

Image with semi-transparent border

This is a simple CSS trick you can use to have image with semi-transparent border. Browsers do not support opacity property for border. 

This example includes the border inside the image itself as shown below.

Image with semi-transparent border

Basically, I had to create 2 containers, one inside another.

<div id=”container”>
        <div id=”inner-container”>
        </div>
    </div>

Then added CSS as shown below. The outer container has image as background and inner container has opacity. The width & height of inner container including border is equal to width & height of outer container, which gives an illusion of a single image with semi-transparent border.

#container
{
    width: 150px;
   height: 113px;
    background-image: url(‘http://www.w3schools.com/css/klematis.jpg’);
    background-repeat: no-repeat;
}
#container #inner-container
{
    border: 10px solid;
    width: 130px;
    height: 93px;
    opacity: 0.5;
}

However, you can use rgba format like following example to have semi-transparent border. But, the border will be outside the image.

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

ref: http://stackoverflow.com/questions/4062001/css3-border-opacity