Android app useful layouts

Align buttons horizontally

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Btn1"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Btn2"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Btn3"/>
</LinearLayout>

Align button rows vertically inside scrollview

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn2"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn3"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn2"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn3"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn2"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn3"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn2"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn3"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn2"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn3"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn2"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn3"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn2"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn3"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn2"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn3"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn2"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn3"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn2"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn3"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn2"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn3"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn2"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Btn3"/>
        </LinearLayout>
    </LinearLayout>
</ScrollView>

EditText and its unit next to it

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Edit here"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:text="€"/>
</LinearLayout>

Ripple effect on TextView

Ripple effect. See here also.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:focusable="true"
    android:clickable="true"
    android:layout_height="wrap_content"
    android:foreground="?android:attr/selectableItemBackground">
    <LinearLayout android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
    </LinearLayout>
</FrameLayout>

Footer of the scrollview

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:padding="@dimen/common_padding"
              android:orientation="vertical">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <!-- contents -->

        </LinearLayout>
    </ScrollView>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        android:orientation="horizontal">

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/cancel"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/ok"/>
    </LinearLayout>
</LinearLayout>

How to start machine learning with Keras (Ubuntu, Linux)

Prerequisites

• 64-bit desktops or laptops
• Ubuntu 16.04
• Tensorflow official, Keras official

See here about the requirements.

Python3.5 or 3.6

We will use Python3.5. Why? Because it is the easiest. Python3.5 is pre-installed by default. Check what version of python is in your ubuntu:

$ python3.5 --version

Python 3.5.2

Also check pip too:

$ sudo python3.5 -m pip install --upgrade pip
$ sudo python3.5 -m pip --version

pip 10.0.1 from /usr/local/lib/python3.5/dist-packages/pip (python 3.5)

Maybe python3.6 is pre-installed in Ubuntu18. Python3.6 is also ok.

Install Tensorflow and Keras

You DO have Nvidia GPU?

If you have Nvidia GPU, you can use tensorflow GPU version. GPU version is much faster than the CPU version. If you don't have Nvidia GPU, install the CPU version (which is described below.) Cuda and cuDNN are not necessary for CPU version.

Although there are some bugs related to Nvidia GPU driver in Ubuntu...(like nomodeset things) You can google with "Ubuntu nomodeset nvidia" to see what the bug is. To install Nvidia driver in Ubuntu, you need to add nomodeset option in the boot option (otherwise ubuntu is not booting with Nvidia card), and after that, install a proper driver, then re-boot ubuntu.

Maybe you can see here for how to install Ubuntu along with Nvidia GPU driver.

Cuda9.0

To use Nvidia GPU for tensorflow, you need Cuda9.0. Other versions of Cuda can not be used.So we will download & install Cuda9.0 from the official website. Don't install Cuda9.1 because it can not be used for Tensorflow. Always check the requirement on the website of Tensorflow.

Follow their guidance to install it.

If you use deb file, maybe you need to install it like this:

$ sudo apt-get install cuda-9.0

cuDNNv7.0

Also you need cuDNN v7.0. Other versions can not be used, so don't download v7.1. Download it from here: https://developer.nvidia.com/rdp/cudnn-archive

Tensorflow-gpu

Install as follows:

$ sudo python3.5 -m pip install tensorflow-gpu

And install Keras also:

$ sudo python3.5 -m pip install keras

You DON'T have GPU?

If you don't have Nvidia GPU, we need to use CPU version of Tensorflow. We will install Tensorflow CPU version and Keras with pip. Please make sure you are using Python3's pip. You can check which pip is being used by "pip --version". Run the following command to install Tensorflow on command prompt or powershell:

$ sudo python3.5 -m pip install tensorflow

And install Keras also:

$ sudo python3.5 -m pip install keras

Other modules

Install other necessary modules with pip:

$ sudo python3.5 -m pip install matplotlib
$ sudo python3.5 -m pip install h5py
$ sudo python3.5 -m pip install numpy

Try first machine learning

Now we will run machine learning scripts. Save the following as "test.py":

#!/usr/bin/env python
# -*- coding: UTF-8 -*-

from keras.datasets import mnist
from keras.models import Sequential
from keras.layers.core import Dense, Activation
from keras.utils import np_utils

# Get the default MNIST data
(X_train, y_train), (X_test, y_test) = mnist.load_data()

X_train = X_train.reshape(60000, 784) / 255
X_test = X_test.reshape(10000, 784) / 255

y_train = np_utils.to_categorical(y_train)
y_test = np_utils.to_categorical(y_test)

# Network
model = Sequential([
        Dense(512, input_shape=(784,)),
        Activation('sigmoid'),
        Dense(10),
        Activation('softmax')
    ])

# Compile
model.compile(loss='categorical_crossentropy', optimizer='sgd', metrics=['accuracy'])

# Learning
model.fit(X_train, y_train, batch_size=200, verbose=1, epochs=20, validation_split=0.1)

# Forecast
score = model.evaluate(X_test, y_test, verbose=1)
print('test accuracy : ', score[1])

On the command prompt or powershell, move to the directory and run the script:

$ python3.5 test.py

Then the machine learning (deep learning) will be started: 

It is classifying handwritten digit images. The accuracy is 88.85%. Great!

Other scripts of machine learning?

You can find more examples on the github page of keras-team.

How to start machine learning with Keras (Windows)

Prerequisites

• 64-bit, x86 desktops or laptops
• Windows 7 or later (I'm using Windows8.1)
• Tensorflow official, Keras official

Install Python3.6

Tensorflow is necessary for machine learning with Keras but Tensorflow needs Python3.5 or 3.6. We will use Python3.6. Install it from here: https://www.python.org/downloads/release/python-363/

Scroll down until you find the following: 

Then you will get an installer. Double-click on it. 

Don't forget to tick "Add Python3.6 to PATH". It is not ticked by default. 

Open command prompt or windows powershell. If it was already open, please re-open the command prompt or powershell. Then run the following command:

python --version

If the version information is displayed like this, you installed the python successfully. 

Just in case, check if pip is working also.

pip --version

pip 10.0.1 from c:\users\shu\appdata\local\programs\python\python36\lib\site-packages\pip (python 3.6)

Install Tensorflow and Keras

You DO have Nvidia GPU?

If you have Nvidia GPU, you can use tensorflow GPU version. GPU version is much faster than the CPU version. If you don't have Nvidia GPU, install the CPU version (which is described below.) Cuda and cuDNN are not necessary for CPU version.

Cuda9.0

To use Nvidia GPU for tensorflow, you need Cuda9.0. Other versions of Cuda can not be used.So we will install Cuda9.0 from the official website. Don't install Cuda9.1 because it can not be used for Tensorflow. Always check the requirement on the website of Tensorflow.

Follow their guidance to install it.

cuDNNv7.0

Also you need cuDNN v7.0. Other versions can not be used, so don't download v7.1. Download it from here: https://developer.nvidia.com/rdp/cudnn-archive

Seems like cuDNN v7.0 for Windows8.1 is missing. I think cuDNN v7.0 for Windows7 can be used in that case.

Tensorflow-gpu

Install as follows:

pip install tensorflow-gpu

And install Keras also:

pip install keras

You DON'T have GPU?

If you don't have Nvidia GPU, we need to use CPU version of Tensorflow. We will install Tensorflow CPU version and Keras with pip. Please make sure you are using Python3's pip. You can check which pip is being used by "pip --version". Run the following command to install Tensorflow on command prompt or powershell:

pip install tensorflow

And install Keras also:

pip install keras

Other modules

Install other necessary modules with pip:

pip install matplotlib
pip install h5py
pip install numpy

Try first machine learning

Now we will run machine learning scripts. Save the following as "test.py":

#!/usr/bin/env python
# -*- coding: UTF-8 -*-

from keras.datasets import mnist
from keras.models import Sequential
from keras.layers.core import Dense, Activation
from keras.utils import np_utils

# Get the default MNIST data
(X_train, y_train), (X_test, y_test) = mnist.load_data()

X_train = X_train.reshape(60000, 784) / 255
X_test = X_test.reshape(10000, 784) / 255

y_train = np_utils.to_categorical(y_train)
y_test = np_utils.to_categorical(y_test)

# Network
model = Sequential([
        Dense(512, input_shape=(784,)),
        Activation('sigmoid'),
        Dense(10),
        Activation('softmax')
    ])

# Compile
model.compile(loss='categorical_crossentropy', optimizer='sgd', metrics=['accuracy'])

# Learning
model.fit(X_train, y_train, batch_size=200, verbose=1, epochs=20, validation_split=0.1)

# Forecast
score = model.evaluate(X_test, y_test, verbose=1)
print('test accuracy : ', score[1])

On the command prompt or powershell, move to the directory and run the script:

python test.py

Then the machine learning (deep learning) will be started: 

It is classifying handwritten digit images. The accuracy is 88.94%. Great!

Other scripts of machine learning?

You can find more examples on the github page of keras-team.

React.js Basics

Start React.js

Add these lines to html to use React.js.

<script src="http://fb.me/react-0.13.3.js"></script> 
<script src="http://fb.me/JSXTransformer-0.13.3.js"></script> 

Pre-compile with jsx

To use React.js, you need to compile code. (If the code is not pre-compiled, the code can be automatically compiled and executed if you use jsx transformer:

<script src="http://fb.me/react-0.13.3.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.3.js"></script>

But it is not recommended to use the un-compiled code in the production because of the performance problem.)

At first, install react-tools.

$ npm install -g react-tools

(If you don't have npm, install npm before this.)

Then create "src" and "build" folder in your current directory.

This is the React code:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Save this as helloWorld.js in src directory that was created in the current directory.

Compile the react as follows. This compiles jsx file of currrent directory and save the compiled file in dest directory:

$ jsx --harmony src/ build/

harmony option turns on JS transformations such as ES6 Classes etc. This command will generate compiled code to build directory. If you see inside the compiled file, it has javascript code.

You can call the compiled javascript like this:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
     <div id="root"></div>
  </body>
</html>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="./build/helloWorld.js"></script>

For React.js cdn links, see here.

You see the html file from a browser: