fragment_music_constraint_in_progress.xml 17.2 KB
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/default_margin">

    <!--Guideline de gauche, avec une marge de 12dp-->
    <android.support.constraint.Guideline
        android:id="@+id/left_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="@dimen/default_margin" />

    <!--Guideline de droite, avec une marge de 12dp-->
    <android.support.constraint.Guideline
        android:id="@+id/right_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_end="@dimen/default_margin" />

    <!--Header-->

    <!--Utilisation d'un ratio de 2/1. Le ratio de l'ImageView devient prioritaire sur celui
        de l'iamge source. le "H" devant permet d'indiquer que le ratio s'applique à la hauteur, par rapport
        à la largeur qui elle est définie en MATCH_CONSTRAINT. -->
    <ImageView
        android:id="@+id/header_imageview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:contentDescription="@string/Music_Screen_Title"
        android:scaleType="centerCrop"
        android:src="@drawable/header_placerholder"
        app:layout_constraintDimensionRatio="H, 2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!--Utilisation d'un biais vertical et horizontal. On place le titre à 10% de la largeur du header
        et à 90% de la hauteur du header. -->
    <TextView
        android:id="@+id/title_textview"
        style="@style/TextAppearance.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/Music_Screen_Title"
        app:layout_constraintBottom_toBottomOf="@+id/header_imageview"
        app:layout_constraintHorizontal_bias="0.1"
        app:layout_constraintLeft_toLeftOf="@+id/header_imageview"
        app:layout_constraintRight_toRightOf="@+id/header_imageview"
        app:layout_constraintTop_toTopOf="@+id/header_imageview"
        app:layout_constraintVertical_bias="0.8" />

    <!--Authentication block-->

    <!--Adaptation de la technique pour le background avec des contraintes.
        Le fonctionnement reste similaire.-->
    <!--Les contraintes de droite et de gauche se font par rapport aux Guidelines. De cette façon,
        il n'est pas nécessaire de répéter les marges à chaque élément.-->
    <ImageView
        android:id="@+id/auth_background_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="@dimen/default_margin"
        android:background="@drawable/rounded_shadows"
        app:layout_constraintBottom_toBottomOf="@+id/advice_textview"
        app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
        app:layout_constraintTop_toBottomOf="@+id/header_imageview"
        app:layout_constraintRight_toLeftOf="@+id/right_guideline" />

    <TextView
        android:id="@+id/login_textview"
        style="@style/TextAppearance.Label"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginStart="@dimen/default_margin"
        android:layout_marginTop="@dimen/large_margin"
        android:text="@string/Music_Screen_User_Label"
        app:layout_constraintLeft_toLeftOf="@+id/auth_background_view"
        app:layout_constraintTop_toBottomOf="@+id/header_imageview" />

    <TextView
        android:id="@+id/password_textview"
        style="@style/TextAppearance.Label"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginStart="@dimen/default_margin"
        android:layout_marginTop="@dimen/default_margin"
        android:text="@string/Music_Screen_Password_Label"
        app:layout_constraintLeft_toLeftOf="@+id/auth_background_view"
        app:layout_constraintTop_toBottomOf="@+id/login_edittext" />

    <EditText
        android:id="@+id/login_edittext"
        style="@style/TextAppearance.Edition"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_marginEnd="@dimen/default_margin"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginRight="@dimen/default_margin"
        android:layout_marginStart="@dimen/default_margin"
        android:hint="@string/Music_Screen_User_Hint"
        app:layout_constraintBaseline_toBaselineOf="@+id/login_textview"
        app:layout_constraintLeft_toRightOf="@+id/password_textview"
        app:layout_constraintRight_toRightOf="@+id/auth_background_view" />

    <EditText
        android:id="@+id/password_edittext"
        style="@style/TextAppearance.Edition"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_marginEnd="@dimen/default_margin"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginRight="@dimen/default_margin"
        android:layout_marginStart="@dimen/default_margin"
        android:hint="@string/Music_Screen_Password_Hint"
        android:inputType="textPassword"
        app:layout_constraintBaseline_toBaselineOf="@+id/password_textview"
        app:layout_constraintLeft_toRightOf="@+id/password_textview"
        app:layout_constraintRight_toRightOf="@+id/auth_background_view" />

    <TextView
        android:id="@+id/advice_textview"
        style="@style/TextAppearance.Indication"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/default_margin"
        android:layout_marginLeft="@dimen/large_margin"
        android:layout_marginRight="@dimen/default_margin"
        android:layout_marginTop="@dimen/small_margin"
        android:paddingBottom="@dimen/default_margin"
        android:text="@string/Music_Screen_Password_Indication"
        app:layout_constraintLeft_toLeftOf="@+id/password_edittext"
        app:layout_constraintRight_toRightOf="@+id/auth_background_view"
        app:layout_constraintTop_toBottomOf="@+id/password_textview"
        android:layout_marginStart="@dimen/large_margin" />

    <!--Authentication buttons-->

    <!--Ici on veut que les boutons se répartissent équitablement dans la largeur.
        Pour cela on utilise un LinearLayout avec un widget Space et un poids. -->
    <LinearLayout
        android:id="@+id/button_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
        app:layout_constraintTop_toBottomOf="@+id/advice_textview"
        app:layout_constraintRight_toLeftOf="@+id/right_guideline">

        <Space
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <Button
            android:id="@+id/reset_button"
            style="@style/FlatButton.Primary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/default_margin"
            android:paddingRight="@dimen/default_margin"
            android:text="@string/Music_Screen_Reset_Button" />

        <Space
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <Button
            android:id="@+id/validation_button"
            style="@style/FlatButton.Primary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/default_margin"
            android:paddingRight="@dimen/default_margin"
            android:text="@string/Music_Screen_Validation_Button" />

        <Space
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />
    </LinearLayout>

    <!--Loading -->

    <android.support.v4.widget.ContentLoadingProgressBar
        android:id="@+id/progressbar"
        style="@style/Widget.AppCompat.ProgressBar"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:visibility="gone"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button_layout" />

    <!--bloc de consommation-->

    <!--Idem ici : le background est placé par rapport aux Guidelines-->
    <ImageView
        android:id="@+id/consumption_background_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/rounded_reverse_shadows"
        app:layout_constraintBottom_toBottomOf="@+id/consumption_start_textview"
        app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
        app:layout_constraintRight_toLeftOf="@+id/right_guideline"
        app:layout_constraintTop_toBottomOf="@+id/consumption_title_textview" />

    <TextView
        android:id="@+id/consumption_title_textview"
        style="@style/TextAppearance.Subtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginStart="@dimen/default_margin"
        android:layout_marginTop="@dimen/large_margin"
        android:text="@string/Music_Screen_Consumption_Subtitle"
        app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
        app:layout_constraintTop_toBottomOf="@+id/button_layout" />

    <!--Comme pour les boutons, on utilise un LinearLayout avec un widget Space et un poids dessus, cette
        fois pour placer l'ImageView au bon endroit (pourcentage par rapport à la largeur de l'écran).
        Le poids du Space est modifié dynamiquement dans le code.-->
    <LinearLayout
        android:id="@+id/consumption_marker_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginRight="@dimen/default_margin"
        android:layout_marginTop="@dimen/default_margin"
        android:orientation="horizontal"
        android:weightSum="1"
        app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
        app:layout_constraintTop_toBottomOf="@+id/consumption_title_textview"
        app:layout_constraintRight_toLeftOf="@+id/right_guideline"
        android:layout_marginStart="@dimen/default_margin"
        android:layout_marginEnd="@dimen/default_margin">

        <Space
            android:id="@+id/consumption_marker_position"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.6" />

        <ImageView
            android:id="@+id/consumption_marker_imageview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/Content_Desc_Pin_Indication"
            android:src="@drawable/icon_pin" />
    </LinearLayout>

    <TextView
        android:id="@+id/consumption_start_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/small_margin"
        android:paddingBottom="@dimen/small_margin"
        android:text="@string/Consumption_Min"
        android:textColor="@android:color/white"
        app:layout_constraintLeft_toLeftOf="@+id/consumption_marker_layout"
        app:layout_constraintTop_toBottomOf="@+id/consumption_marker_layout" />

    <TextView
        android:id="@+id/consumption_end_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/small_margin"
        android:paddingBottom="@dimen/small_margin"
        android:textColor="@android:color/white"
        app:layout_constraintRight_toRightOf="@+id/consumption_marker_layout"
        app:layout_constraintTop_toBottomOf="@+id/consumption_marker_layout"
        tools:text="200 min" />

    <!--Last song block-->

    <TextView
        android:id="@+id/last_song_title_textview"
        style="@style/TextAppearance.Subtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginStart="@dimen/default_margin"
        android:layout_marginTop="@dimen/large_margin"
        android:background="@drawable/rounded_top_shadows"
        android:text="@string/Music_Screen_Last_Song_Subtitle"
        app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
        app:layout_constraintTop_toBottomOf="@+id/consumption_start_textview" />

    <!--On utilise une combinaison de plusieurs LinearLayout ici car les placements
        sont proportionnel les uns par rapoprt aux autres, et impossible à faire avec des règles d'alignement.
        Le background est géré via ce LinearLayout du coup. -->
    <LinearLayout
        android:id="@+id/last_song_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginRight="@dimen/default_margin"
        android:background="@drawable/rounded_reverse_shadows"
        android:orientation="horizontal"
        android:padding="@dimen/default_margin"
        app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
        app:layout_constraintTop_toBottomOf="@+id/last_song_title_textview"
        app:layout_constraintRight_toLeftOf="@+id/right_guideline"
        android:layout_marginStart="@dimen/default_margin"
        android:layout_marginEnd="@dimen/default_margin">

        <!--On fige les tailles ici pour conserver une image carré pour la pochette d'album.-->
        <ImageView
            android:id="@+id/last_song_cover"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:layout_marginRight="@dimen/default_margin"
            android:contentDescription="@string/Content_Desc_Album_Picture"
            android:src="@drawable/icon_vinyl" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:id="@+id/last_song_name"
                style="@style/TextAppearance.Info.Primary"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                tools:text="Winter's Wolves" />

            <TextView
                android:id="@+id/last_song_band"
                style="@style/TextAppearance.Info.Secondary"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                tools:text="The Sword" />

            <TextView
                android:id="@+id/last_song_album"
                style="@style/TextAppearance.Info.Secondary"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                tools:text="Age of Winters" />

        </LinearLayout>

        <ImageView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin"
            android:background="@android:color/white" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:orientation="vertical">

            <TextView
                android:id="@+id/last_song_duration"
                style="@style/TextAppearance.Info"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="top"
                tools:text="Durée : 3 min 56" />

            <TextView
                android:id="@+id/last_song_year"
                style="@style/TextAppearance.Info"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                tools:text="Année : 2016" />

            <TextView
                android:id="@+id/last_song_type"
                style="@style/TextAppearance.Info"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="bottom"
                tools:text="Genre : Death Metal" />

        </LinearLayout>
    </LinearLayout>
</android.support.constraint.ConstraintLayout>