They use ActionBar
(transparent), with a title of the album and one icon (search).
The action bar overlays an ImageView
for the artist. Below that is an image of the album we're viewing. To the right of the album is album information displayed in TextView
's and several options available just to the right of the album cover (either Button
's or ImageView
's). This is likely a RelativeLayout
since things are laid out relative to other items on the screen.
Under the album info is the list of songs for this album in a ListView
. Each list view item is fairly simple collection of TextView
's and an ImageView
for album options. There's an ImageView
that shows on a row only if the song is currently playing.
Note: When scrolling down in the list of songs, the album and artist information is pushed off the screen so that you can focus on the most relevant information. This would be a custom implementation to add this behavior.
At the very bottom of the screen, there is a custom view that allows you to play/pause the current song or open the full song view that has a host of other options.
Note: This view is persistent throughout the application even if you browse other albums.
There's a lot going on in this design!
Twitter also uses an action bar with icons, no title, and an overflow menu. They use a tab controller just below the action bar for the different tweet streams, which has a indicator for the current tab.
Your tweet stream is displayed in a ListView
. Each tweet is has several pieces of data, such as text views and images that represent retweets, authors, time since posting, etc.
At the bottom of the screen, they have a custom view that combines two buttons for posting images and an EditText
(custom implementation) for entering a new tweet.
Clicking on most options takes you to another activity.
There are many valid ways to break down a design. Each choice has consequences or benefits when we build out the application.
In our class implementation, we'll be using two Fragments
laid out in a LinearLayout
with android:orientation="vertical"
.
The DisplayFragment
will handle the display. We'll use an EditText
to display the numbers entered into the calculator as well as calculations.
The ButtonFragment
will contain and control the calculator buttons. We'll use a RelativeLayout
to position many Button
's for operations and numbers.