Posts

Showing posts from October, 2020

Convert Website Into An Android App | #7 Adding a progress bar

Image
เคนเคฎ เค…เคชเคจเฅ‡ App เค•เฅ‹ Advance เคฌเคจเคพเคจเฅ‡ เค•เฅ‡ เคฒเคฟเค เคนเคฎ เค‰เคธเคฎเฅ‡ Progress Bar เคฒเค—เคพ เคธเค•เคคเฅ‡ เคนเฅˆเค‚ เคœเคฟเคธเคธเฅ‡ User เคธเคฎเค เคชเคพเคเค‚เค—เฅ‡ เค•เฅ€ Page เค…เคญเฅ€ Load เคนเฅ‹ เคฐเคนเคพ เคนเฅˆ! 1. เคจเคฟเคšเฅ‡ เคฆเคฟเค เคนเฅเค Code เค•เฅ‹ Image เคฎเฅ‡เค‚ เคฆเคฟเค–เคพเค เค…เคจเฅเคธเคพเคฐ activity_main.xml  เคฎเฅ‡เค‚ Paste เค•เฅ€เคœเคฟเคฏเฅ‡! <ProgressBar android :id ="@+id/progressBar" android :layout_width ="55dp" android :layout_height ="55dp" android :indeterminate ="false" android :max ="100" android :progress ="20" android :progressTint ="@color/colorAccent" app :layout_constraintBottom_toBottomOf ="parent" app :layout_constraintEnd_toEndOf ="parent" app :layout_constraintStart_toStartOf ="parent" app :layout_constraintTop_toTopOf ="parent" /> 2. เคซเคฟเคฐ เคธเฅ‡ เคนเคฎเฅ‡ เคจเคฟเคšเฅ‡ เคฆเคฟเค เคนเฅเค Code เค•เฅ‹ Image เคฎเฅ‡ เคฆเคฟเค–เคพเค เค…เคจเฅเคธเคพเคฐ  MainActivity.java เคฎเฅ‡เค‚ Paste เค•เฅ€เคœเคฟเคฏเฅ‡เฅค private ProgressBar progressBar ; เค…เคฌ เค†เคช...

Convert Website Into An Android App | #6 Add Swipe down to Refresh functionality

Image
 เคนเคฎ  เค…เคชเคจเฅ‡ App เคฎเฅ‡เค‚ Swipe Down เค•เคฐเคจเฅ‡ เคชเคฐ Refresh เคนเฅ‹ เคœเคพเคฏเฅ‡ เคœเฅˆเคธเฅ‡ เค•เฅ€ chrome browser เคฏเคพ เคซเคฟเคฐ YouTube เคฎเฅ‡เค‚ เคนเฅ‹เคคเคพ เคนเฅˆ! เคตเฅˆเคธเคพ Function เคฒเค—เคพ เคธเค•เคคเฅ‡ เคนเฅˆเค‚ เค‡เคธเค•เฅ‡ เคฒเคฟเค เคจเคฟเคšเฅ‡ Process เคฆเคฟเคฏเคพ เค—เคฏเคพ เคนเฅˆ- 1. เคธเคฌเคธเฅ‡ เคชเคนเคฒเฅ‡ เค†เคชเค•เฅ‹ activity_main.xml เคฎเฅ‡เค‚ เคœเคพเคจเคพ เคนเฅˆ เค”เคฐ เคจเคฟเคšเฅ‡ เคฆเคฟเค เคนเฅเค Code เค•เฅ‹ Image เคฎเฅ‡เค‚ เคฆเคฟเค–เคพเค เคนเฅเค เคธเฅเคฅเคพเคจ เคชเคฐ Paste เค•เคฐเคจเคพ เคนเฅˆ! <androidx.swiperefreshlayout.widget.SwipeRefreshLayout android :id ="@+id/swipeContainer" android :layout_width ="match_parent" android :layout_height ="match_parent" > <WebView android :layout_width ="fill_parent" android :layout_height ="fill_parent" android :id ="@+id/webView" android :layout_alignParentTop ="true" android :layout_alignParentLeft ="true" android :layout_alignParentStart ="true" android :layout_alignParentBottom ="true" android :layout_alignParentRight ="true" android :layout_alignParent...

Convert Website Into An Android App | #5 Go back functionality and Animation

Image
เค…เค—เคฐ เค†เคช เคšเคพเคนเคคเฅ‡ เคนเฅˆเค‚ เค•เฅ€ User Back เค•เคฐเฅ‡ เคคเฅ‹ เคชเคฟเค›เคฒเฅ‡ Page เคชเคฐ เคšเคฒเคพ เคœเคพเคฏเฅ‡ เค”เคฐ เค…เค—เคฐ Last Page เค† เคœเคพเคฏเฅ‡ เคคเฅ‹ User เคธเฅ‡ เคชเฅ‚เค›เฅ‡ "Are you sure. You want to close this app" เค”เคฐ Yes or No เค•เคพ option เค† เคœเคพเคฏเฅ‡! เคคเฅ‹ เคจเคฟเคšเฅ‡ เค‰เคธเค•เคพ Process เคฆเคฟเคฏเคพ เค—เคฏเคพ เคนเฅˆ! 1. เคจเคฟเคšเฅ‡ เคฎเฅ‡เค‚ เคฆเคฟเค  เค—เค Code เค•เฅ‹  MainActivity.java ( app > java > domain > MainActivity.java ) เคฎเฅ‡เค‚ Image เคฎเฅ‡ เคฆเคฟเค–เคพเค เคนเฅเค เคธเฅเคฅเคพเคจ เคชเคฐ Paste เค•เฅ€เคœเคฟเคฏเฅ‡! //set back button functionality @Override public void onBackPressed () { //if user presses the back button do this if ( webview .isFocused() && webview .canGoBack()) { //check if in webview and the user can go back webview .goBack() ; //go back in webview } else { //do this if the webview cannot go back any further new AlertDialog.Builder( this ) //alert the person knowing they are about to close .setTitle( "EXIT" ) .setMessage( "Are you sure. You want to close this app?" ) .setPositiveButton( "Yes" , new DialogInterface...

Convert Website Into An Android App | #4 Check User Is Connected To The Internet

Image
 1. User Internet เคธเฅ‡ connected เคนเฅˆ เคฏเคพ เคจเคนเฅ€เค‚ เค‰เคธเค•เฅ‹ Check เค•เคฐเคจเฅ‡ เค•เฅ‡ เคฒเคฟเค เค†เคชเค•เฅ‹ เคธเคฌเคธเฅ‡ เคชเคนเคฒเฅ‡  app > manifests > AndroidManifest.xml เคฎเฅ‡เค‚ เคœเคพเคจเคพ เคนเฅˆ! 2. เคซเคฟเคฐ เคจเฅ€เคšเฅ‡ เคฆเคฟเค เคนเฅเค Code เค•เฅ‹ Image เคฎเฅ‡เค‚ เคฆเคฟเค–เคพเค เคนเฅเค เคธเฅเคฅเคพเคจ เคชเคฐ Paste เค•เคฐ เคฒเฅ‡เคจเคพ เคนเฅˆ! <uses-permission android :name ="android.permission.ACCESS_NETWORK_STATE" />  3. เค…เคฌ เค†เคชเค•เฅ‹  MainActivity.java    ( app > java > Package Name > MainActivity.java)  เคฎเฅ‡เค‚ เคœเคพเคจเคพ เคนเฅˆ เคซเคฟเคฐ เคจเฅ€เคšเฅ‡ เคฆเคฟเค เคนเฅเค Code เค•เฅ‹ Image เคฎเฅ‡เค‚ เคฆเคฟเค–เคพเค เค…เคจเฅเคธเคพเคฐ Package Name เค•เฅ‹ เค›เฅ‹เฅœเค•เคฐ เคฌเคพเค•เคฟ เคธเคญเฅ€ Code เค•เฅ‡ เคธเฅเคฅเคพเคจ เคชเคฐ Paste เค•เคฐ เคฆเฅ‡เคจเคพ เคนเฅˆ! import android.app.AlertDialog ; import android.content.Context ; import android.content.DialogInterface ; import android.net.ConnectivityManager ; import android.net.NetworkInfo ; import android.os.Bundle ; import android.util.Log ; import android.webkit.WebView ; import android.webkit.WebViewClient ; import androidx.appcompat.app.AppCompatActivity ; public class MainActivity extends AppCompatActivity { String websiteURL = "htt...

Convert Website Into An Android App | #3 Changing App icon and colours and delete action bar

Image
 1. Colours เค•เฅ‹ Change  and Action bar เค•เฅ‹ Delete เค•เคฐเคจเฅ‡ เค•เฅ‡ เคฒเคฟเค Colors.xml and styles.xml Tab เค•เฅ‹ เคจเคฟเคšเฅ‡ เคฆเคฟเค เค…เคจเฅเคธเคพเคฐ Double  tap  เค•เคฐเค•เฅ‡ Open เค•เคฐ เคฒเฅ€เคœเคฟเค!  app > res > values > colors.xml app > res > values > styles.xml 2. เค…เคฌ เคนเคฎ เคœเคฟเคธ เคญเฅ€ color เค•เฅ‹ change เค•เคฐเคจเคพ เคšเคพเคนเคคเฅ‡ เคนเฅˆเค‚ เคนเคฎเฅ‡ เค‰เคธเค•เฅ‡ color code เค•เฅ‹ เคจเคฟเคšเฅ‡ เคฆเคฟเค–เคพเค เค…เคจเฅเคธเคพเคฐ change เค•เคฐ เคฒเฅ‡เคจเคพ เคนเฅˆ! 3. เค…เค—เคฐ เคนเคฎ เค…เคชเคจเฅ‡ App เคฎเฅ‡เค‚ acction bar เคจเคนเฅ€เค‚ เคšเคพเคนเคคเฅ‡ เคนเฅˆเค‚ เคคเฅ‹ เคจเคฟเคšเฅ‡ เคฆเคฟเค–เคพเค เคนเฅเค เคธเฅเคฅเคพเคจ เคชเคฐ DarkActionBar  เค•เฅ‹ Change เค•เคฐเค•เฅ‡ No ActionBar Type เค•เคฐ เคฒเฅ‡เคจเคพ เคนเฅˆ! 3. เค…เคฌ เค…เคชเคจเฅ‡ App เค•เคพ Icon Change เค•เคฐเคจเฅ‡ เค•เฅ‡ เคฒเคฟเค " app > res > right click on res > new > Image Asset" เคฎเฅ‡ เคœเคพเคจเคพ เคนเฅˆ, เคจเคฟเคšเฅ‡ Image เคฎเฅ‡เค‚ เคญเฅ€ เคฆเคฟเค–เคพเคฏเคพ เค—เคฏเคพ เคนเฅˆ! 4. เคซเคฟเคฐ เคฏเคนเคพเค เคชเคฐ เค…เคชเคจเคพ Icon Set เค•เคฐเคจเฅ‡ เค•เฅ‡ เคฌเคพเคฆ Next เคชเคฐ Click เค•เฅ€เคœเคฟเคฏเฅ‡! เค†เคชเค•เฅ‹ เค‡เคธเค•เฅ‡ เคจเคพเคฎ เคฎเฅ‡เค‚ เค•เฅ‹เคˆ เคญเฅ€ Change เคจเคนเฅ€เค‚ เค•เคฐเคจเคพ เคนเฅˆ! 5. เค‰เคธเค•เฅ‡ เคฌเคพเคฆ เค†เคชเค•เฅ‹ Finish เคชเคฐ Click เค•เคฐเคจเคพ เคนเฅˆ!           เค…เคฌ เค†เคชเค•เฅ‡ App เคฎเฅ‡เค‚ Icon set เคนเฅ‹ เคšเฅเค•เคพ เคนเฅˆ เคเค• เคฌเคพเคฐ เค‡เคธเฅ‡ Test เค•เคฐเค•เฅ‡ เคฆเฅ‡เค– เคฒเฅ€เคœเคฟเคฏเฅ‡!