<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:background="#4a4a4a"> 
    
    <!-- Player Header -->
    <LinearLayout 
        android:id="@+id/player_header_bg"
        android:layout_width="fill_parent"
        android:layout_height="60dip"
        android:background="@layout/bg_player_header"
        android:layout_alignParentTop="true"
        android:paddingLeft="5dp"
        android:paddingRight="5dp">
        
        <!-- Song Title -->
        <TextView 
            android:id="@+id/songTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textColor="#04b3d2"
            android:textSize="16sp"
            android:paddingLeft="10dp"
            android:textStyle="bold"
            android:text="@string/pl_no_song"
            android:layout_marginTop="10dp"/>
        
        <!-- Playlist button -->
        <ImageButton 
            android:contentDescription="@string/pl_desc_playlist"
            android:id="@+id/btnPlaylist"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:src="@drawable/pl_playlist"
            android:background="@null"/>
    </LinearLayout>
    
    <!-- Song Thumbnail Image -->
    <LinearLayout 
        android:id="@+id/songThumbnail"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:gravity="center"
        android:layout_below="@id/player_header_bg">
    	<ImageView
    	    android:contentDescription="@string/pl_desc_thumb" 
    	    android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:src="@drawable/pl_adele"/>    
    </LinearLayout>
    
    <!-- Player Footer -->
    <LinearLayout 
        android:id="@+id/player_footer_bg"
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:background="@layout/pl_bg_player_footer"
        android:gravity="center">
    	
        <!-- Player Buttons -->
        <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:background="@layout/pl_rounded_corner"
            android:paddingLeft="10dp"
            android:paddingRight="10dp">
            <!-- Previous Button -->
            <ImageButton
                android:contentDescription="@string/pl_desc_previous" 
                android:id="@+id/btnPrevious" 
                android:src="@drawable/pl_previous"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@null"/>
            <!-- Backward Button -->
            <ImageButton 
                android:contentDescription="@string/pl_desc_backward"
                android:id="@+id/btnBackward"
                android:src="@drawable/pl_backward"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@null"/>
            <!-- Play Button -->
            <ImageButton 
                android:contentDescription="@string/pl_desc_play"
                android:id="@+id/btnPlay"
                android:src="@drawable/pl_play"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@null"/>
            <!-- Forward Button -->
            <ImageButton 
                android:contentDescription="@string/pl_desc_forward"
                android:id="@+id/btnForward"
                android:src="@drawable/pl_forward"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@null"/>
            <!-- Next Button -->
            <ImageButton 
                android:contentDescription="@string/pl_desc_next"
                android:id="@+id/btnNext"
                android:src="@drawable/pl_next"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@null"/>
        </LinearLayout>
    </LinearLayout>
    
    <!-- Progress Bar/Seek bar -->
    <SeekBar
        	android:id="@+id/songProgressBar"
	         android:layout_width="fill_parent"
	         android:layout_height="wrap_content"
	         android:layout_marginRight="20dp" 
	         android:layout_marginLeft="20dp"
	         android:layout_marginBottom="20dp"
	    	 android:layout_above="@id/player_footer_bg"
	    	 android:thumb="@drawable/pli_seek_handler"
	    	 android:progressDrawable="@drawable/pl_seekbar_progress"
	    	 android:paddingLeft="6dp"
	    	 android:paddingRight="6dp"/>
    
    <!-- Timer Display -->
    <LinearLayout 
        android:id="@+id/timerDisplay"
        android:layout_above="@id/songProgressBar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginBottom="10dp">
        <!-- Current Duration Label -->
        <TextView 
            android:id="@+id/songCurrentDurationLabel"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="left"
            android:textColor="#eeeeee"
            android:textStyle="bold"/>
        <!-- Total Duration Label -->
        <TextView 
            android:id="@+id/songTotalDurationLabel"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="right"
            android:textColor="#04cbde"
            android:textStyle="bold"/>
    </LinearLayout>
    
    <!-- Repeat / Shuffle buttons -->
    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/timerDisplay"
        android:gravity="center">
        <!-- Repeat Button -->
        <ImageButton 
            android:contentDescription="@string/pl_desc_repeat"
            android:id="@+id/btnRepeat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pl_repeat"
            android:layout_marginRight="5dp"
            android:background="@null"/>
        
        <!-- Shuffle Button -->        
         <ImageButton 
            android:contentDescription="@string/pl_desc_rand"
            android:id="@+id/btnShuffle" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pl_shuffle"
            android:layout_marginLeft="5dp"
            android:background="@null"/>
    </LinearLayout>
</RelativeLayout>