Android Beginners’ Session Two

Android Layouts

In this lesson we will be working with layouts and implementing them. The two layouts we will implement will be Constraint Layout and Linear Layout. Hopefully in my presentation I explained them both well but if you want more information click on the respective links above. In the code there will be “TODO’s” to follow for what to implement and check it is working before moving on. To find the TODO’s look in the bottom right corner of Android Studio and click TODO.

Switch to branch ‘layout_implement’, command in terminal  git checkout layout_implement or use Android Studio to switch if Git integration is setup.

Follow this naming convention when creating Id’s for your views. “What_Where_Description”

Implementing Linear Layout

Go to the “res -> layout -> activity_linear_layout_login.xml” or just click on TODO(1). From there you need to create your login screen using either the Design tab or Text tab. Most likely it will be a combination of both. You will need to create two textviews for the layout. One for the username and one for password. Here is an example -

<TextView
  android:text=
"@string/layout_login_username"
  android:layout_width=
"wrap_content"
  android:layout_height=
"wrap_content"
  android:id=
"@+id/txt_view_lin_username"
  />

Make sure to look at your layout as you create it to make sure it is right. You will also need two edittexts for the layout. Here is an example -

<EditText
  android:layout_width=
"match_parent"
  android:layout_height=
"wrap_content"
  android:inputType=
"textPersonName"
  android:ems=
"10"
  android:id=
"@+id/edit_txt_lin_user_name"
  android:hint=
"@string/layout_login_username" />

And finally add a button to click to sign the person in.

Once you’ve done that go to LinearLayoutLogin.java and give reference to your button for the ‘signInBtn’ object. Remember the reference is the id that you gave your button. After that go to MainActivity and remove the commented out code for LinearLayoutLogin and run your code. Here is an example of my Linear Layout-

Screen Shot 2017-02-02 at 6.52.20 PM.png

Implementing Constraint Layout

Now go to activity_constraint_layout_login.xml, this is where you will implement the layout for the constraint layout. This layout should be completely done through the Design tab. You will need the same objects as used in the previous layout. For the constraint layout each side of the view must be constrained to something either the side of the screens or another object.

Once you have each object added the way you want create Id’s for each view.

After that go to ConstraintLayoutLogin and add reference to your button, same as before.

Then go to MainActivity and comment out the LinearLayout starting function and uncomment the constraint layout starting function. Should now be able to run your code and see your layout.  Below is an example of my Login Screen -

 Screen Shot 2017-02-02 at 6.51.59 PM.png

Add more to ListView (Advanced)

In this part you will be adding a rating to the threads in the listview that you see after you sign in. I have already wrote all the other code necessary you just need to create the layout for it. You can choose to use Linear Layout or Constraint Layout either one will work. Go to ‘listview_layout.xml’ and in there you need to add two Textviews and provide them with Id’s.

After you finish with the layout go to the adapter package and click on ThreadAdapter. Uncomment about four lines of code by the TODO and add the reference id for the textviews.

Last thing to do is go to the fragments folder and go to ThreadsListFragment. From there uncomment the first line and comment out the second. From there you should be able to see the ratings.

If you want to do more things just ask someone or if you have question on how other parts of the code work please ask!