170821Ago - CHAPTER 4

170821Ago - CHAPTER 4

Here again after a hard weekend due to the terrorist attacks in BCN and other places of the world, added to natural disasters and accidents (train in India)... Maybe that's why I had apocalyptic nightmares and I have not rested well.

In this monday morning I go to add input capabilities for the application.

I've thought of a scrolling panel with buttons for the main actions. With this I will practice:

- Screen split in several areas.
- Horizontal scroll area in the screeen bottom.
- Add buttons into this area.
- To program events to respond the user action.

Let's go with the first task: split the screen...

Well, we are using an ConstraintLayout, this is to do a specific design, setting concrete positions and sizes.

There are other designers like LinearLayout that places objects automatically one after another(we're using it inside scroll views)

There is also RelativeLayout to put objects in position relative to others, etc.

In a ConstraintLayout we must set positions and sizes manually, in pixels or "dp", these are sizes independent of the device resolution (same size in all devices)

We can also use the "match_parent" helper to use the size of the parent container and the "wrap_content" to use the space required for the content we are going to show.

But then... how can we split the screen into two percentage areas, 85% for content and 15% for buttons for example?... we must use the Guideline object. It is an invisible objet that we set with percentage values before using as reference to establish sizes and positions. Let's add one at the beginning:

<android.support.constraint.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/bottom_guideline" app:layout_constraintGuide_percent="0.85" android:orientation="horizontal"/>

Later we will see how to use it...

Let's now go with the second task: Horizontal scroll. For that we must use a HorizontalScrollView.
Note that is not enough to use a ScrollView and configure the android:scrollbars="vertical" because this does a vertical scroll with a horizontal bar, ie the scroll bar moves horizontally but content always moves vertically.

Inside the HorizontalScrollView we put a LinearLayout as a container for buttons. Think that within ScroollView/HorizontallScrollView you can put only one object, so if you have several you must group in a container: LinearLayout is good for that.

Each button is a tag like this:

<Button android:id="@+id/btnInfo" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Info" android:onClick="showInfo"/>

See how we to indicate the name for the method of our activity that respond to the event:

android:onClick="showInfo".

The full content of our activity_main.xml is:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="homebrew.dhtejada.androidblog.mysuperapp.MainActivity" android:weightSum="1" android:id="@+id/activity_main"> <android.support.constraint.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/bottom_guideline" app:layout_constraintGuide_percent="0.85" android:orientation="horizontal"/> <ScrollView android:visibility="visible" android:layout_width="368dp" android:layout_height="0dp" android:keepScreenOn="true" android:scrollbarStyle="insideInset" android:id="@+id/scrollView1" android:scrollbars="vertical" <div="" class="codehilite">

    tools:layout_editor_absoluteX="8dp"
    app:layout_constraintBottom_toTopOf="@+id/bottom_guideline">

    <TextView
        android:id="@+id/sample_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</ScrollView>
<HorizontalScrollView android:visibility="visible"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:keepScreenOn="true"
    android:scrollbarStyle="insideInset"
    android:id="@+id/scrollView2"
    android:scrollbars=""
    app:layout_constraintTop_toTopOf="@+id/bottom_guideline"
    tools:layout_editor_absoluteX="8dp">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
            <Button android:id="@+id/btnInfo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Info"
                android:onClick="showInfo"/>
            <Button android:id="@+id/btnConfig"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Config"
                android:enabled="false"/>
            <Button android:id="@+id/btnFiles"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Files"
                android:onClick="showFiles"/>
            <Button android:id="@+id/btnPictures"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Pictures"
                android:enabled="false"/>
            <Button android:id="@+id/btnMusic"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Music"
                android:enabled="false"/>

    </LinearLayout>
</HorizontalScrollView>

</android.support.constraint.ConstraintLayout>

We have several buttons disabled until we have programmed that funcionalities.

We go to see how to change the MainActivity.java:

package homebrew.dhtejada.androidblog.mysuperapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}

public void showInfo(View view){
    TextView tv = (TextView) findViewById(R.id.sample_text);
    MySystemInfo si=new MySystemInfo(getApplicationContext())
            //.checkCapabilities()
            .customCapabilities()
            .addBuidInfo()
            .addEnvironmentInfo()
            .addBatteryInfo()
            .printReport(tv);
}

public void showFiles(View view){
    TextView tv = (TextView) findViewById(R.id.sample_text);
    tv.setText("TODO File browser. "+ view.getId() + "button was clicked!");
}

[...]

}

As you see showInfo and showFiles are methods that are called when the user click the buttons.

The "view" param is a reference to the object that sends the event, a button: But all UI objects are inherited from the View class.

That's all for today, enjoy!!!