Créé en 2020 et modifié le 10 Sep 2020

Android kotlin – amélioration de l’interface

Partie 1 – mise en forme

Livrable : oless/mission3/…

On va améliorer l’interface

Images

  • ajouter le logo à la description de votre hôtel
    • ajouter un répertoire drawable dans res s’il n’existe pas
    • ajouter votre image dans drawable juste en deposant le fichier
    • ajouter le code en indiquant le nom de votre image sans l’extension
<ImageView
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:src="@drawable/ic_launcher_background" />

Couleurs

  • changer les couleurs en fonctions de votre charte graphique dans res/values/colors.xml
  • ajouter une nouvelle couleur colorDescription pour un bouton
  • affecter cette couleur au bouton permettant de lancer la description de l’hôtel
android:background="@color/colorDescription"

Styles

  • ajouter dans le fichier res/value/styles.xml
<style name="typo">
  <item name="android:textStyle">bold</item>
      <item name="android:textSize">20sp</item>
  </style>
  • ajouter ce style à Réservation de activity_form_reservation
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Réservation"
    style="@style/typo"/>

On peut hériter un style

<style name="typo.purple">
     <item name="android:textColor">purple</item>
 </style>

########################

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Réservation"
style="@style/typo.purple"/>

 

  • ajouter ce style aux EditView du formulaire, on supprimera android:layout_width
<style name="FormEditView">
        <item name="android:layout_width">200dp</item>
    </style>

Remarque : on pourra également modifier le thème AppTheme pour modifier les couleurs du background, du menu etc.

 

 

Partie 2 – dialog de confirmation

Livrable : oless/mission3/…

  • réaliser une classe kotlin ConfirmReservationFragment. Indiquer que activity ne doit pas être null avec !!
class ConfirmReservationFragment: DialogFragment(){
    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        var builder = AlertDialog.Builder(activity)
        builder.setMessage("Confirmer la reservation")
            .setPositiveButton("ok", object: DialogInterface.OnClickListener{
            override fun onClick(dialog: DialogInterface?, id: Int) {
                Log.i(TAG,"confirm")
            }})
            .setNegativeButton("non",DialogInterface.OnClickListener{dialog,id ->
                Log.i(TAG,"annul")
            })       
        return builder.create()
    }
}
  • modifier la classe pour ajouter le listener de la validation
class ConfirmReservationFragment: DialogFragment(){
    interface ConfirmDeleteListener{
        fun onDialogPositiveClick()
        fun onDialogNegativeClick()
    }

  var listener:ConfirmDeleteListener?=null

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        var builder = AlertDialog.Builder(activity)
        builder.setMessage("Confirmer la reservation")
            .setPositiveButton("oui", object: DialogInterface.OnClickListener{
            override fun onClick(dialog: DialogInterface?, id: Int) {
                Log.i(TAG,"confirm")
                listener?.onDialogPositiveClick()
            }})
            .setNegativeButton("non",DialogInterface.OnClickListener{dialog,id ->
                Log.i(TAG,"annul")
                listener?.onDialogNegativeClick()
            })
        return builder.create()
    }
}
  • modifier MainActivity pour lancer ConfirmReservation
button_confirm.setOnClickListener{
                
                /*val intent = Intent(this, ActivityReservationConfirm::class.java)
                val reservation= Reservation(nom_view.toString(),   LocalDate.parse(dateDebut_view.text),LocalDate.parse(dateFin_view.text))
                intent.putExtra("reservation",reservation) 
                startActivity(intent)*/

                val fragment = ConfirmReservationFragment()
                fragment.listener = object :ConfirmReservationFragment.ConfirmDeleteListener{
                    override fun onDialogPositiveClick() {
                       Log.i("FormActivity", "onDialogPositiveClick()")
                       
                    }
                    override fun onDialogNegativeClick() {
                        Log.i("FormActivity", "onDialogNegativeClick()")
                    }
                }
                fragment.show(supportFragmentManager,"confirmzaza")

               
        }
  • modifier ReservationFormActivity pour lancer ConfirmReservationFragment seulement si le formulaire est validé

 

 

Partie 3 – datePicker

Livrable : oless/mission3/…

on va ajouter un calendrier lors du click des champs date

  • ajouter ce code à FormReservation en ajustant l’id dateDebut_view de l’EditView si celui ci n’est pas le même.
var cal = Calendar.getInstance()
        val dateSetListener = object : DatePickerDialog.OnDateSetListener {
            override fun onDateSet(view: DatePicker, year: Int, monthOfYear: Int,
                                   dayOfMonth: Int) {
                cal.set(Calendar.YEAR, year)
                cal.set(Calendar.MONTH, monthOfYear)
                cal.set(Calendar.DAY_OF_MONTH, dayOfMonth)               
                val sdf = SimpleDateFormat("yyyy-MM-dd", Locale.FRANCE)
                dateDebut_view.setText(sdf.format(cal.time))
            }
        }

        dateDebut_view.setOnClickListener(object : View.OnClickListener {
            override fun onClick(view: View) {             
                DatePickerDialog(this@ReservationFormActivity,
                    dateSetListener,
                    // set DatePickerDialog to point to today's date when it loads up
                    cal.get(Calendar.YEAR),
                    cal.get(Calendar.MONTH),
                    cal.get(Calendar.DAY_OF_MONTH)).show()
            }

        })

 

  • tester en cliquant deux fois sur le EditView
  • reproduire le datePicker pour dateFin_view

 

Partie 4 – OptionMenu

Livrable : oless/mission3/…

 

On va ajouter un menu

  • créer un repertoire res->new android ressource directory->menu
  • créer un fichier main_menu à l’intérieur
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_home"
        android:icon="@drawable/home"
        android:title="home"
        app:showAsAction="always" />
    <item
        android:id="@+id/action_reservation"
        android:icon="@drawable/reservation"
        android:title="reservation"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_description"
        android:icon="@drawable/description"
        android:title="description"
        app:showAsAction="never" />
</menu>

Remarque : always, toujours dans le menu, ifRoom si ya de la place, never dans les 3 points

  • créer trois VectorAsset correspondant à home/reservation/description en choisissant parmis les cliparts ou intégrant vos images dans drawable.
  • ajouter les fonctions à MainActivity
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.main_menu,menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            R.id.action_home->{
                Toast.makeText(this,"Home",Toast.LENGTH_SHORT).show()}
            R.id.action_reservation->{
                Toast.makeText(this,"reservation",Toast.LENGTH_SHORT).show()}
        }
        return true
    }

 

  • ajouter le toast lorsque l’on clique sur description
  • ajouter le menu aux autres activity
  • permettre d’afficher l’activité correspondante lors du click d’un item du menu

 

 

 

Informations

Mesure

dp ( basé sur densité de l'ecran)
sp (pour caractere, basé sur densité de l'ecran, 'adapte à la config utilisateur)
wrap_content
match_parent

LinearLayout

inclusion d’un autre layout

<include layout="@layout/blabla"
android:layout_with="match_parent"
android:layout_height="wrap_content" />

ajouter un poids à un objet

supprimer
android:layout_height="wrap_content"

mettre
android:layout_height="0dp"
android:layout_weight="0.2"

RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@id/icon"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="10dp"
        />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@id/title"
        android:text="Titre"
        android:layout_alignTop="@id/icon"
        android:layout_toRightOf="@id/icon"
        />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/subtitle"
        android:text="sous titre"
        android:layout_alignLeft="@id/title"
        android:layout_below="@id/title"
        />

</RelativeLayout>

ToolBar

def appcompat_version = "1.2.0"
    implementation "androidx.appcompat:appcompat:$appcompat_version"
    // For loading and tinting drawables on older versions of the platform
    implementation "androidx.appcompat:appcompat-resources:$appcompat_version"
<androidx.appcompat.widget.Toolbar
       android:id="@+id/my_toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       android:background="@color/colorPrimary"
       />
override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        setSupportActionBar(my_toolbar)