Wednesday, April 18, 2018

Create a Fragment App with Android Studio 3.1

This is a follow up from my previous Android Fragments in an Activity.

This example, demonstrates how Fragments are created and loaded by an Activity class. Android Studio 3.1.1 is the IDE with Java 1.8.0 and an emulator is created with API 23. All this is running on Centos 7.

Step 1: Create an Empty project with vertical orientation

Open Android Studio and create a new project.
Application name: My Fragment
Click Next

Click Checked for Phone and Tablet
Minimum SDK: choose API 23:Android 6.0 (Marshmallow)
Click Next

Choose "Basic Activity"
Click Next

Activity Name: MainActivity
Layout Name: activity_main
Title: MainActivity

Click checked Use a Fragment

Click "Finish"

This will provide a template to quickly create the rest of Fragments to be used with this Activity.

A total of 23 files are created in the app/src/main folder. By the time all steps are completed, there should be 29 files created in app/src/main folder.
=== Listing of 25 files at start of the project===
app/src/main/res/drawable/ic_launcher_background.xml
app/src/main/res/values/colors.xml
app/src/main/res/values/strings.xml
app/src/main/res/values/dimens.xml
app/src/main/res/values/styles.xml
app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
app/src/main/res/drawable-v24/ic_launcher_foreground.xml
app/src/main/res/mipmap-hdpi/ic_launcher_round.png
app/src/main/res/mipmap-hdpi/ic_launcher.png
app/src/main/res/mipmap-mdpi/ic_launcher_round.png
app/src/main/res/mipmap-mdpi/ic_launcher.png
app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
app/src/main/res/mipmap-xhdpi/ic_launcher.png
app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
app/src/main/res/mipmap-xxhdpi/ic_launcher.png
app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
app/src/main/res/layout/content_main.xml
app/src/main/res/layout/activity_main.xml
app/src/main/res/menu/menu_main.xml
app/src/main/java/com/example/nicholas/myfragment/MainActivity.java
app/src/main/AndroidManifest.xml
===
Project Structure of application - Newly create project




A default project contains the following layouts
activity_main.xml
  • CoordinatorLayout
    • AppBarLayout
    • Toolbar
    • an include layout tag
    • FloatingActionButton
content_main.xml
  • ConstraintLayout 
  • TextView.
Edit the layout/activity_main.xml
In the CoordinatorLayout tag, insert following line before tools:context

tools:orientation="vertical"

Step 2: Add the buttons

Edit the file values/strings.xml and add within the <resources> tag

<string name="digital">Digital</string>
<string name="analog">Analog</string>

<string name="textclock">Text Clock</string>

Edit content_main.xml and remove the whole TextView tag. Replace with 2 buttons where you can just drag and drop the buttons from the widget list. Add a FrameLayout where we will position our Fragment layouts. Edit the button code as follows

<Button
        android:id="@+id/button_analog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/analog"
        />
<Button
        android:id="@+id/button_digital"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/digital"
        app:layout_constraintTop_toBottomOf="@+id/button_analog"
        />

<Button
        android:id="@+id/button_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/textclock"
        app:layout_constraintTop_toBottomOf="@+id/button_digital"
        />

<FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="280dp"
        android:layout_height="495dp"
        android:layout_marginStart="8dp"
        app:layout_constraintStart_toEndOf="@+id/button_analog"
>
    </FrameLayout>


Let build and run the project.

Click the Run App button (green play button) or press Shift+F10. I am using an API 23 emulator for my test applications. Create the Android emulator if it is not done yet.




Step 3: Create Analog Fragment

Click File ->New ->Fragment ->Fragment (Blank). Fill following values
Fragment Name: AnalogFragment
Fragment Layout Name: fragment_analog

Leave all other options checked.
Click Finish

In AnalogFragment.java, replace import android.support.v4.app.Fragment with

import android.app.Fragment;

I plan to provide support only to Android API 23 and above.

Lets explore the Design editor.
Edit layout/fragment_analog.xml and click the tab Design. Notice that the default is FrameLayout.



On the left is the Palette, in the middle is the screen design + blueprint, on the right is the Attributes list. In the Design area, click the menu to choose API 23. Right click any where on the design and choose Convert FrameLayout to ConstraintLayout. Click "Ok".

Delete the default TextView in the design.


From the Palette, notice there is no AnalogClock which means it will have to be manually added. Click the Text tab and insert the following

<AnalogClock
        android:id="@+id/analogClock"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent"
         />


Step 4: Connect MainActivity with Analog Fragment

I have broken down the steps further in this step. Edit MainActivity class.

1. Add following member variables

Button analogButton;

2. Edit protected void onCreate(Bundle savedInstanceState), add after the line setSupportActionBar(toolbar)

analogButton = (Button) findViewById(R.id.button_analog);
analogButton.setOnClickListener(this);


There should be a wriggly red line at the text "this", click once then press Alt+Enter. Choose "Make MainActivityFragment implement android,view.View.OnClickListener". Choose "onClick(v:View):void" and press "OK".

3. Add onClick(View v) method
FragmentManager manager = getFragmentManager();
FragmentTransaction transaction = manager.beginTransaction();
if(v==analogButton){
        f = new AnalogFragment();
}
transaction.replace(R.id.fragment_container, f);

transaction.commit();

4. Edit the class declaration with the AnalogFragment

public class MainActivity extends AppCompatActivity implements View.OnClickListener,
        AnalogFragment.OnFragmentInteractionListener  {


Implement AnalogFragment's OnFragmentInteractionListener, add the method near the end of the class.

public void onFragmentInteraction(Uri uri) {
        //
}



Compile and run.

Step 5: Create Digital Fragment

Repeat steps 3 and 4 above but change the Analog to Digital. Below is the code to display a digital clock

<DigitalClock
    android:id="@+id/analogClock"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:background="#9a0"
    android:padding="24dp"
    android:textColor="#eff"
    android:textSize="25sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"

    app:layout_constraintTop_toTopOf="parent"
    />




Step 6: Create TextClock Fragment

Repeat steps 3 and 4 above but change the Analog to TextClock. Below is the code to display a digital clock

<TextClock
    android:id="@+id/analogClock"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:background="#9a0"
    android:padding="24dp"
    android:textColor="#eff"
    android:textSize="25sp"
    android:textStyle="bold"
    android:format12Hour="HH:MM:ss EEEE"
    android:format24Hour="EE H:mm:ss"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"

    app:layout_constraintTop_toTopOf="parent" 
    />


Here is the complete source code for MainActvity.java

1:  package com.example.nicholas.myfragment;  
2:  import android.app.Fragment;  
3:  import android.app.FragmentManager;  
4:  import android.app.FragmentTransaction;  
5:  import android.net.Uri;  
6:  import android.os.Bundle;  
7:  import android.support.design.widget.FloatingActionButton;  
8:  import android.support.design.widget.Snackbar;  
9:  import android.support.v7.app.AppCompatActivity;  
10:  import android.support.v7.widget.Toolbar;  
11:  import android.view.View;  
12:  import android.view.Menu;  
13:  import android.view.MenuItem;  
14:  import android.widget.Button;  
15:  public class MainActivity extends AppCompatActivity implements View.OnClickListener,  
16:      AnalogFragment.OnFragmentInteractionListener, DigitalFragment.OnFragmentInteractionListener,  
17:      TextClockFragment.OnFragmentInteractionListener {  
18:    Button analogButton, digitalButton, textClockButton;  
19:    Fragment f;  
20:    @Override  
21:    protected void onCreate(Bundle savedInstanceState) {  
22:      super.onCreate(savedInstanceState);  
23:      setContentView(R.layout.activity_main);  
24:      Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);  
25:      setSupportActionBar(toolbar);  
26:      analogButton = (Button) findViewById(R.id.button_analog);  
27:      analogButton.setOnClickListener(this);  
28:      digitalButton = (Button) findViewById(R.id.button_digital);  
29:      digitalButton.setOnClickListener(this);  
30:      textClockButton = (Button) findViewById(R.id.button_textclock);  
31:      textClockButton.setOnClickListener(this);  
32:      FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);  
33:      fab.setOnClickListener(new View.OnClickListener() {  
34:        @Override  
35:        public void onClick(View view) {  
36:          Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)  
37:              .setAction("Action", null).show();  
38:        }  
39:      });  
40:    }  
41:    @Override  
42:    public boolean onCreateOptionsMenu(Menu menu) {  
43:      // Inflate the menu; this adds items to the action bar if it is present.  
44:      getMenuInflater().inflate(R.menu.menu_main, menu);  
45:      return true;  
46:    }  
47:    @Override  
48:    public boolean onOptionsItemSelected(MenuItem item) {  
49:      // Handle action bar item clicks here. The action bar will  
50:      // automatically handle clicks on the Home/Up button, so long  
51:      // as you specify a parent activity in AndroidManifest.xml.  
52:      int id = item.getItemId();  
53:      //noinspection SimplifiableIfStatement  
54:      if (id == R.id.action_settings) {  
55:        return true;  
56:      }  
57:      return super.onOptionsItemSelected(item);  
58:    }  
59:    @Override  
60:    public void onClick(View v) {  
61:      FragmentManager manager = getFragmentManager();  
62:      FragmentTransaction transaction = manager.beginTransaction();  
63:      if(v==analogButton){  
64:        f = new AnalogFragment();  
65:      } else if (v==digitalButton){  
66:        f = new DigitalFragment();  
67:      } else if (v==textClockButton) {  
68:        f = new TextClockFragment();  
69:      }  
70:      transaction.replace(R.id.fragment_container, f);  
71:      transaction.commit();  
72:    }  
73:    @Override  
74:    public void onFragmentInteraction(Uri uri) {  
75:      //  
76:    }  
77:  }  

Done.

Tuesday, April 17, 2018

Upgrade Android Studio to 3.1

New in Android Studio v3.1.1 on Stable channel are
  • For those who use C++, there is a CPU performance profiler that troubleshoot codes with the  simpleperf tool. 
  • Better lint support to check quality of codes for Kotlin (an alternative JAVA language). From the command line, lint can be accessed with the tool gradlew lint.
  • Improved  SQLite's and Room's table query and creation.
  • The default compiler uses D8 dexer which have the capability to make codes much smaller and more accurate step debugging.
  • Improved build output window to trace errors in a tree view.
  • Upgrade to the IntelliJ Idea 3.3 platform. This is the base platform of which Android Studio IDE is built.
  • Improved network profiler to trace network request on multi-threaded traffic.
The new version patch size is 456MB. Can hardly spot any difference from previous versions but its running much more smoother.

Android Studio 3.1.1 Workspace


Here is the current PC setup
  • Android Studio version: 3.0.1 (build 171.4443003) 
  • Centos 7.4 (64 bits) Linux 3.10.0 x86_64 amd64
  • OpenJDK 64-bit v1.8.0_161
  • Gradle 4.3.1
  • Apache Ant 1.9.6

This is how I upgraded to Android Studio 3.1.1

Check for updates


Canary or Stable channels can be check with the following steps.
Open Android Studio menu and click File ->Settings ->Preferences. On left panel choose Appearance & Behavoir ->System Setting ->Updates. Choose the Stable Channel from Automatically check updates for.

Click Check Now. This should retrieve latest update on the Stable Channel.

Step 1: Update Android Studio

Choose to update from the popup window when Android Studio is open.


Do the steps above if you have not retrieved the updates information. Click Update and Restart.


Alternatively, at the bottom of the Android Studio start page, click "Check" if you do not find the update option.

Once update starts, this will begin with download of the required files.

Step 2: Configuration

After it has installed the update, choose to import my settings from a previous version (keep existing configuration) from the window Import Studio Settings from: choose the option below and click "Ok"

Previous version (~/.AndroidStudio3.0/config)

Step 3: Update Plugin and other components

Close all emulators then open an existing project. This will have the usual build checks, once the gradle has started processing, the following window will appear.


Click Update to update Android Gradle Plugin to version 3.1.1 and Gradle to version 4.4. Wait until the Gradle project sync in progress... is completed.

At the window IDE and Plugin Updates, click "update". To update currently installed SDK and it tools, click "Update now".


Once completed download, click Finish. In my case it took 1.5GB of downloads.


Next up: Will write on creating a Fragment type application with Android Studio 3.1.
Done.

Friday, April 13, 2018

Howto Install Evernote on Linux Mint


One of the tools to capture my notes on a PC and Android mobile device is Evernote. Searching online today, it is clear that Evernote is not available on Linux (Mint), however it has been implied that their API is sufficient for anyone to develop a version of Evernote (Evernote on Linux). This means no Evernote application on Linux. Good news for the Linux community as the API documentations are available at https://dev.evernote.com/

Nixnote by baumgarr provides you access to Evernote on Linux Mint along with a user manual in PDF. Download the version suitable for you at https://sourceforge.net/projects/nevernote/files

Nixnote2 on Linux Mint


My set up (inxi -S)
Kernel: 4.10.0-38-generic x86_64 (64 bit)
Distro: Linux Mint 18.3 Sylvia
Desktop: Cinnamon 3.6.7



Step 1: Download nixnote

Locate the file online from Sourceforge and download. The file I downloaded to my Download folder is

nixnote2-2.0.2_amd64.deb

Step 2: Install from command prompt


$ cd ~/Download
$ sudo apt install ./nixnote2-2.0.2_amd64.deb
$ apt install libcurl3 libcurl3-nss

This installed the dependency packages libcurl3, libpoppler-qt5-1 and tidy.

Troubleshoot: Error

QSqlDatabase: QSQLITE driver not loaded
QSqlDatabase: available drivers:
ERROR 2018-04-13 00:50:37.788 ( sql/databaseconnection.cpp @ 44 ) Error opening database:  QSqlError(-1, "Driver not loaded", "Driver not loaded")


Solution: At CLI type

$ apt install lua5.2-sql-sqlite3
$ apt install libqt4-sql-sqlite

Step 3: Run Nixnote

At the Desktop Menu ->Internet ->Nixnote2

Troubleshoot: Nothing appears after click Nixnote2.

At CLI the error shows:

nixnote2: error while loading shared libraries: libpoppler-qt4.so.4: cannot open shared object file: No such file or directory

Solution: Open CLI and type


$ apt install libpoppler-qt4-4
$ nixnote2

Usage

Once its started, Click in the menu File ->Add another user. Key in your new user name.
Click File ->User Account Maintenance. Choose the new user.
Click Tools ->Synchronised

Wait for it to download from Evernote.

Blog Archive