Android kotlin – amélioration de l’interface
Intro
- réaliser la charte graphique de votre application
- ajouter un logo
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)