Android Arsenal – Arquitectura

  aplicación 
 
  clase     :    MeowApp  () {
      //  El sistema Android establecería automáticamente la dirección del diseño. 
      //  (Ejemplo: "en": LayoutDirection.LTR "fa": LayoutDirection.RTL). 
    
      //  El idioma de nuestra aplicación de ejemplo principal es el inglés. 
      anular   diversión    getLanguage  ( contexto :    Contexto? )  =    " en [1945903030] "   //  o cualquier idioma como (" fa "," fr "," ar ", etc.) 
    
      //  El tema de nuestra aplicación de ejemplo está configurado por el modo claro / oscuro (día / noche) del sistema Android. 
      anular   diversión    getTheme  ( contexto :    Contexto? )  = 
          if  (context.isNightModeFromSettings () )  MeowController .  Tema .  NOCHE   más     MeowController .  Tema .  19659023] diversión    onCreate  () {
         Súper  .onCreate ()
        bindMeow {  //  Importarlo desde el paquete miau. 
            it.isDebugMode  =    BuildConfig .  DEPURACIÓN 
              //  Establezca otras propiedades aquí. 
            it.onException  =  {  //  Solo error no fatal 
                  //  Inicie sesión en Fabric o en cualquier otro sistema de gestión de fallos. Simplemente use `evitarExcepción` en lugar de` intente {} catch {} `
            }
        }
    }
} 

  Puede actualizar el idioma y el tema desde el hilo de la interfaz de usuario utilizando  MeowController  instancia global. 

  importación    meow.controller 
  
controller.updateLanguage (meowActivity, string)
controller.updateTheme (meowActivity, theme) 

  La aplicación de muestra tiene la funcionalidad anterior. intente instalar Meow-Sample.apk. 
  ?  Arquitectura MVVM 
  MVVM es Model-View-ViewModel que definimos en la aplicación de Android como un modelo de datos - View (Activity, Fragment, DialogFragment, BottomSheetDialogFragment) - MeowViewModel. 
  Siga los pasos a continuación para tener una actividad con MVVM Architecture. 
  1. Cree su propio ViewModel extensible  MeowViewModel . 

  clase    MainViewModel  aplicación [] :    Aplicación )    (aplicación) [19659091] 2. Proporcione su modelo de pantalla en appModule en  Aplicación .  
  val  appModule  =    Módulo  (  " Módulo de aplicación ]  falso ) {
    bindAutoTag < MainViewModel > () con el proveedor {
         MainViewModel  (kodein.direct.instance ())
    }
} 


  bindAutoTag ()  se importó del paquete  meow.ktx. * . 

  3. Crear diseño XML con estructura  Enlace de datos . 

  < diseño >
    < datos >
        < variable 
              nombre  =   " ViewModel " 
             tipo  =   " MainViewModel "  />
    </  datos >
    < Diseño lineal  />   <! -  u otra vista  -> 
</  formato > 

  4. Crear actividad / fragmento (extiende  MeowActivity / MeowFragment ) +  DataBinding  +  ViewModel . 
  ‍‍‍  MainActivity necesita  Kodein Dependency Injection y ViewDataBinding and View Model. Vea este ejemplo: 


  clase    MainActivity  :    MeowActivity  < ActivityMainBinding > () {
      //  ActivityMainBinding es generado por Androidx Lifecycle DataBinding Utils. 
    
      privado   val  viewModel :    MainViewModel  de instanciaViewModel ()
     anular   diversión    layoutId  ()  =    R  .layout.activity_main
    
     anular   diversión    initViewModel  () {  //  Establecer el modelo de vista en enlace. 
        binding.viewModel  =  viewModel
    }
} 

  Acceso a vistas con DataBinding 
  Puede acceder a vistas como este código: 

  < com . [Google.android.material.appbar.MaterialToolbar
     Android :  id  =   " @ + id / toolbar " [19659009]
      style  =   " @ @ style / Meow.Toolbar  " /> 


  clase    MainActivity  :    MeowActivity  < ActivityMainBinding > () {
     anular   diversión    layoutId  ()  =    R  .layout.activity_main
     anular   diversión    onCreate  ( savedInstanceState :    Bundle? ) {
          //  ... 
        binding.toolbar.title  =    " título_personalizado "    //  Usar variable de enlace 
    }
} 

  Ahora tienes un negocio con la arquitectura MVVM. En el ejemplo anterior, puede reemplazar  MeowActivity  con  MeowFragment  para obtener el fragmento MVVM. 
  ?  REST API: Retrofit + OKHttp + Coroutine + Moshi 
  Meow algunas herramientas para llamar a las acciones de REST API del servidor desde la aplicación de Android con  Retrofit . Las conexiones del cliente se crearán con  OKHttp .  Moshi  nos ayuda a serializar las respuestas json. Hemos reemplazado  RxJava  con  Coroutine  para la gestión de subprocesos múltiples. 
  Crea abejas que se extiende  MeowApi 

  clase    AppApi  (
     aplicación var    :    aplicación ,
    baseUrl :    Cadena   =    " http: //api-url.any/api/v1/ " 
) :    MeowApi  (baseUrl) 

  Secuencias / patrones de API comunes 
  Le mostraremos cómo llamar a una solicitud y obtener una respuesta. Luego, los datos se mostraron en la interfaz de usuario analizando los datos. Algunas acciones relacionadas con la API REST pueden tener un flujo / patrón. Definimos estos esquemas como: 

   Índice : La respuesta con una simple solicitud del servidor puede analizarse como un modelo de modelo de datos. 
   Detalle : La respuesta con una simple solicitud del servidor puede analizarse como un modelo de datos. 
   Formulario : la respuesta con solicitud avanzada (enviar un formulario) desde el servidor puede analizarse como un modelo de datos. 

  Ejemplo  Índice  API [19659020] Por ejemplo, el servidor proporciona esta respuesta JSON cuando llamamos  / api / v1 / persons  con el método GET: 


  [
  {
      " id " :  1 ,
      " nombre de usuario " :   " oneHamidreza " ,
      " alias " :   " Hamidreza Etebarian " 
  },
  
  {
      " id " :  2 ,
      " nombre de usuario " :   " samdh82 " ,
      " alias " :   " Ali Modares " 
  }
] 

  Modelo de datos 
  Cree una clase de datos para la respuesta JSON que use la anotación Moshi  @Json . 

  @JsonClass  ( generateAdapter   =    verdadero )
 datos [19659023] Clase [19659022] persona  (
     @Json  ( nombre   =    " id " )  var  id ] Int  = 0,
     @Json  ( nombre   =    " nombre de usuario " )  var  nombre de usuario ] String?   =    nulo ,
     @Json  ( nombre   =    " alias " )  var  alias ] String?   =    nulo ) {
    
      //  El adaptador de lista RecyclerView requiere DiffCallBack. 
      clase    DiffCallback  :    DiffUtil .  ItemCallback  <> > () {
         anular   diversión    areItemsTheSame  ( oldItem :    Persona   newItem : [1945903722]] =  oldItem.id  ==  newItem.id
         anular   diversión    areContentsTheSame  ( oldItem :    Person   newItem : [1945903722]] =  oldItem  ==  nuevoItem
    }
} 

  Interfaz de API de modificación 
  Define una interfaz que contiene acciones de API en reposo. Meow Framework utiliza  Coroutine  para llamar a las acciones API Rest, por lo que debe escribir  para suspender el prefijo  para las funciones. 

  interfaz    PersonApi  {
     @GET  (  " personas " )   //  No es necesario escribir la ruta absoluta. OKHTTP agrega esta cadena al final de la API baseUrl. 
      suspender   diversión    getPersonIndex  () : [196590154] Lista  < Persona ]>
} 

  Llame a la acción API desde ViewModel usando  safeCallApi () . Actualice su clase ViewModel de esta manera: 

  clase    PersonIndexViewModel  ( override   var    app :    App ) ] [19659240]] MeowViewModel  (aplicación) {
      //  Define las variables LiveData. use `SingleLiveData` para observar solo cuando se modifique. 
      var  eventLiveData  =    SingleLiveData  < MeowEvent  *  *  >> ()
     var  listLiveData  =    SingleLiveData  < Lista  < Persona  >> ()
     var  customLiveData  =    SingleLiveData  < Cadena > ()
    
     diversión    callApi  () {
        safeCallApi (
            liveData  =  eventLiveData,
            apiAction  =  { AppApi  (aplicación) .createServiceByAdapter < PersonApi > (). getPersonIndex ()}
        ) {_, es  - > 
              //  Si la conexión fue exitosa y Retrofit puede analizar los datos JSON como una lista de modelos, esta línea se ejecutará. 
              //  De lo contrario, MeowEvent.Api.Error se publicará en eventLiveData. 
            
              //  Puede verlo manualmente o usar MeowFlow. 
            listLiveData.postValue (en)
        }
    }
} 

  Diseño XML 
  Crea  activity_sample_index.xml  que tiene  RecyclerView  para mostrar los elementos como Lista. 

  < diseño    x 19ns9  Android  =   " http://schemas.android.com/apk/res/android "  >
    < datos >
        < variable 
              nombre  =   " ViewModel " 
             tipo  =   " PersonIndexViewModel "  />
      <! -  Recuerde que el tipo viewModel debe estar con el paquete  -> 
    </  datos >
    
    < FrameLayout 
          Android :  layout_width  =   " match_parent " 
         android :  layout_height  =   " match_parent " >
        
        < androidx  .recyclerview.widget.RecyclerView
             Android :  id  =   " @ + id / recyclerView " [19659009]
              style  =   " @ style / Meow.RecyclerView.Linear  "
             meow_items  =   " @ {viewModel.listLiveData} "  />
            
        < miao  .widget.MeowProgressBar
             Android :  id  =   " @ + id / progressbar " [19659009]
              style  =   " @ style / Meow.ProgressBar.Medium.Primary  " />
     
    </  FrameLayout >
</  diseño > 

  MeowActivity / MeowFragment + MeowFlow 
  Utilice  MeowFlow  para administrar automáticamente eventos desde ViewModel. 

  [
 
] 
 
  [ ] MeowActivity  < ActivitySampleIndexBinding > () {
      //  ... 
    
      privado   val  viewModel por instancia < PersonIndexViewModel > ()
     anular   diversión    layoutId  ()  =    R  .layout.activity_sample_index
    
     anular   diversión    initViewModel  () {
        binding.viewModel  =  viewModel
        callApiAndObserve ()
    }
    
     privado   diversión    callApiAndObserve  () {
         MeowFlow .  GetDataApi  < Persona > ([ this ) {  //  Debe pasar el tipo de respuesta API. Por ejemplo: `Persona`. 
            viewModel.callApi ()
        }.  para aplicar  {
            errorHandlerType  =    MeowFlow .  ErrorHandlerType .  TOAST    //  El manejo de errores será con toast (). 
            progressBarInterface  =  encuadernación. barra de progreso
        } .observeForIndex (viewModel.eventLiveData, viewModel.listLiveData)
        
          //  Opcional: llame a la función safeObserve para ver los cambios de liveData de forma segura. 
        viewModel.customLiveData.safeObserve ( this ) {
              //  Acceda al valor de liveData con el parámetro relativo. 
        }
    }
} 

   MeowFlow  es una clase de soporte que observa  eventLiveData  y maneja automáticamente los errores de la API. El manejo de errores se puede establecer con  errorHandlerType . Tipos admitidos:  TOAST   SNACKBAR   EMPTY_STATE . Por ejemplo, cuando  errorHandlerType  es  Toast  los errores se muestran en formato tostado. Consulte strings_error.xml para editar los mensajes de error. 
  Mostrar respuesta de API en  RecyclerView  
   item_person.xml  describe el diseño de cada fila de la lista y puede establecer las propiedades con  Estructura de enlace de datos . Defina el diseño de esta manera: 

  < diseño >
    < datos >
        < variable 
              nombre  =   " modelo " 
             tipo  =   " Persona "  />
    </  datos >

    < Diseño lineal >
        < TextView     android :  texto  =   " @ {model.alias} "  />
    </  LinearLayout >
</  diseño > 

  Recomendamos utilizar  MeowAdapter . Echemos un vistazo a este ejemplo: 

  clase    PersonAdapter  :    MeowAdapter  < Modelo   ViewHolder > (. . DiffCallback  ()) {
     anular   diversión    onCreateViewHolder  ( padre :    ViewGroup   viewType :    Int ]:    ViewHolder  {
         val  enlace  =    ItemPersonBinding  .inflate ( LayoutInflater  .from (parent.context), parent,  false )
         return    MeowViewHolder  (encuadernación. Raíz) {posición, modelo  - > 
            Unión.  deje que  {
                it.setVariable ( BR  .model, modelo)
                it.executePendingBindings ()
            }
        }
    }
} 

  Finalmente, conecte el adaptador a  RecyclerView . 

  clase    PersonIndexActivity  :    MeowActivity  < ActivitySampleIndexBinding [(19459045]>
     anular   diversión    onCreate  ( savedInstanceState :    Bundle? ) {
          //  ... 
        binding.recyclerView.adapter  =    PersonAdapter  ()
    }
} 

  Ahora tiene una actividad que se conecta a la API REST    y analiza la respuesta (si el código de respuesta es HttpCode.OK (200)) y muestra los elementos en un  RecyclerView  como una lista. El ejemplo anterior se puede usar para otros tipos de modelos / secuencias REST API (como  Detalle   Formulario ). Para obtener más detalles, consulte el paquete API en el módulo de ejemplo  . 
  ?  Meow KTX (extensiones de Kotlin) 
  Hemos desarrollado algunas extensiones de Kotlin que pueden ayudarnos a crear aplicaciones de Android. Simplemente importe el paquete  meow.ktx  que incluye lo siguiente: 
  Ⓜ  Configuración de diseño de material 
  Actualizar el tema de la aplicación en  styles.xml  con  DayNight  Tema material. Más detalles están disponibles en el sitio web oficial de diseño de materiales. 

  < estilo    nombre  =   " AppTheme "   padre  = [19659008] " Theme.MaterialComponents. DayNight.NoActionBar  ">
      <! -  Atributos originales de AppCompat.  -> 
      <! -  Definir colores en colors.xml  -> 
    
    < elemento    nombre  =   " colorPrimary " > YOUR_PRIMARY_COLOR </  elemento >
    < elemento    nombre  =   " colorSecondary " > YOUR_SECONDARY_COLOR </  elemento >
        
    < elemento    nombre  =   " Android: colorBackground " > @ color / meow_background </  elemento >
      <! -  Nuevos atributos de MaterialComponents.  -> 
    < elemento    nombre  =   " colorPrimaryVariant " > YOUR_PRIMARY_VARIANT_COLOR </  elemento >
    < elemento    nombre  =   " colorSecondaryVariant " > YOUR_SECONDARY_VARIANT_COLOR </  elemento >
    < elemento    nombre  =   " colorOnPrimary " > YOUR_ON_PRIMARY_COLOR </  elemento >
    < elemento    nombre  =   " colorOnSecondary " > YOUR_ON_SECONDARY_COLOR </  elemento >
    < elemento    nombre  =   " colorSurface " > @ color / meow_surface </  elemento >
    < elemento    nombre  =   " colorOnSurface " > @ color / meow_on_surface </  elemento >
    < elemento    nombre  =   " colorOnBackground " > @ color / meow_on_background </  elemento >
    < elemento    nombre  =   " colorError " > @ color / meow_error </  elemento >
    < elemento    nombre  =   " colorOnError " > @ color / meow_on_error </  elemento >
    < elemento    nombre  =   " scrimBackground " > @ color / mtrl_scrim_color </  elemento >
</  estilo > 

   ? [1945967] Material Texto Estilos + Fuente usando  Meow.TextAppearance  Estilo [19654527] Haga el mismo estilo que styles_text_appearances.xml. [19659013] Debe aplicar los estilos en  AppTheme . 


  < estilo    nombre  =   " AppTheme "   padre  =   " Theme.MaterialComponents. DayNight.NoActionBar  ">
  < elemento    nombre  =   " textAppearanceHeadline1 " [19659009]> @ style / App.TextAppearance.Headline1 </  element >
  < elemento    nombre  =   " textAppearanceHeadline2 " [19659009]> @ style / App.TextAppearance.Headline2 </  element >
  < elemento    nombre  =   " textAppearanceHeadline3 " [19659009]> @ style / App.TextAppearance.Headline3 </  element >
  < elemento    nombre  =   " textAppearanceHeadline4 " [19659009]> @ style / App.TextAppearance.Headline4 </  element >
  < elemento    nombre  =   " textAppearanceHeadline5 " [19659009]> @ style / App.TextAppearance.Headline5 </  element >
  < elemento    nombre  =   " textAppearanceHeadline6 " [19659009]> @ style / App.TextAppearance.Headline6 </  element >
  < elemento    nombre  =   " textAppearanceSubtitle1 " [19659009]> @ style / App.TextAppearance.Subtitle1 </  element >
  < elemento    nombre  =   " textAppearanceSubtitle2 " [19659009]> @ style / App.TextAppearance.Subtitle2 </  element >
  < elemento    nombre  =   " textAppearanceBody1 " [19659009]> @ style / App.TextAppearance.Body1 </  elemento >
  < elemento    nombre  =   " textAppearanceBody2 " [19659009]> @ style / App.TextAppearance.Body2 </  elemento >
  < elemento    nombre  =   " textAppearanceCaption " > @ style / App.TextAppearance.Caption </  elemento >
  < elemento    nombre  =   " textAppearanceButton " > @ style / App.TextAppearance.Button </  elemento >
  < elemento    nombre  =   " textAppearanceOverline " > @ style / App.TextAppearance.Overline </  elemento >
</  estilo > 


  ?  Componentes del material 
  Avisos 




  Puede mostrar la ventana de advertencia con la función  alert ()  en  MeowActivity / MeowFragment . 

  diversión    testAlert  () {
    alerta ( R  .string.alert_title,  R  .string.alert_message)
        .setPositiveButton ( R  .string.ok) {d, _  - > 
            tostadaL ( R  .string.alerts_warn_ok_clicked)
            d.dismiss ()
        }
        .setNegativeButton ( R  .string.cancel) {d, _  - > 
            tostadaL ( R  .string.alerts_warn_cancel_clicked)
            d.dismiss ()
        }.exhibir()
} 

  Cargando aviso 
   
  Un diálogo con  MeowLoadingView  para mostrar la barra de progreso con el texto en Diálogo. 

  diversión    testLoadingAlertDialog  (
    loadingAlert ( R  .string.loading_title_custom) .Show ()
} 

 Ulteriori informazioni al riguardo su AlertsFragment.kt. 
 Pulsante 
 Ci sono alcuni stili personalizzati relativi a  Materiale Button . 







 Style 
 Usage 




 Meow .Button 
 Pulsante regolare con  primario  colore di sfondo 


 Meow.Button.Outlined 
 pulsante bordato con  trasparente  colore di sfondo e  stroke_color.xml  colore contorno 


 Meow.Button.Flat 
 Pulsante piatto con  trasparente  colore di sfondo 


 Meow.Button.Unelevated 
 Pulsante normale con  colore di sfondo primario  con  0dp  elevazione 


 Meow.Button.IconOnly 
 Un pulsante Meow che mostra non ha testo 



 Usalo in questo modo nel layout XML: 

 < LinearLayout >
    < Pulsante 
         stile  =  " @ stile / Meow.Button " 
         android :  text  =  " SomeRegularButton "  />
    < Pulsante 
         stile  =  " @ stile / Meow.Button " 
         Android :  textColor  =  "?  colorOnSecondaryVariant " 
         Android :  Testo  =  " SomeCustomizedButton " 
         app :  backgroundTint  =  "? ColorSecondaryVariant "  />
</  LinearLayout > 

 Ulteriori informazioni su Material Card Component e fragment_cards.xml. 
 CardView 
 Esistono alcuni stili personalizzati correlati a  Material CardView  . 



 Stile 
 Uso 




 Meow.CardView 
 Scheda normale con superficie   colore di sfondo 


 Meow.CardView.Outlined 
 Scheda bordata con superficie  ] colore di sfondo e  stroke_color.xml  colore contorno 



 Usalo in questo modo nel layout XML: 

 < com  .google.android.material.card.MaterialCardView
     stile  =  " @ stile / Meow.CardView " 
     app :  contentPadding  =  " 16dp " >
         <! -  Inserisci qui le tue opinioni  -> 
    </com.google.android.material.card.MaterialCardView>

Learn more about it at Material Card Component and fragment_cards.xml.




Checkbox
There are some customized styles that is related to Material CheckBox.



Style
Usage




Meow.Checkbox
Checkbox with accent_color button tint


Meow.Checkbox.Primary
Checkbox with primary button tint


Meow.Checkbox.Secondary
Checkbox with secondary button tint


Meow.Checkbox.OnPrimary
Checkbox with onPrimary button tint & textColor


Meow.Checkbox.OnSecondary
Checkbox with onSecondary button tint & textColor



Use it like this in XML Layout :

<com.google.android.material.checkbox.MaterialCheckBox
    style="@style/Meow.Checkbox"
    android:text="@string/checkbox_text" />  

Learn more about it at Material Checkbox Component and fragment_checkboxes.xml.
Floating Action Button
Use it like this in XML Layout :

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
    
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        style="@style/Meow.RecyclerView.Linear"
        app:meow_items="@{viewModel.listLiveData}" />
        
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        style="@style/Meow.FloatingActionButton"
        android:onClick="@{viewModel::onClickedFab}"
        app:icon="@drawable/ic_add"
        app:layout_anchor="@id/recyclerView"
        app:layout_anchorGravity="bottom|center_horizontal" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Learn more about it at Material Floating Action Button Component and fragment_fab_simple.xml.
Extended Floating Action Button
A FAB that supports android:text property. Use it like this in XML Layout :

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    style="@style/Meow.FloatingActionButton.Extended"
    android:onClick="@{viewModel::onClickedFab}"
    android:text="@string/fab_extended_text"
    app:icon="@drawable/ic_add"
    app:layout_anchor="@id/recyclerView"
    app:layout_anchorGravity="bottom|center_horizontal" />

Learn more about it at Material Extended Floating Action Button Component and fragment_fab_simple.xml.
Radio Group
There are some customized styles that is related to Material Radio Group.



Style
Usage




Meow.RadioGroup.Horizontal
RadioGroup with Horizontal Radio Buttons


Meow.RadioGroup.Vertical
RadioGroup with Vertical Radio Buttons



Radio Button
There are some customized styles that is related to Material Radio Button.



Style
Usage




Meow.RadioButton.Vertical
Vertical RadioButton with accent_color button tint


Meow.RadioButton.Horizontal
Horizontal RadioButton with accent_color button tint


Meow.RadioButton.Vertical.Primary
Vertical RadioButton with primary button tint


Meow.RadioButton.Horizontal.Primary
Horizontal RadioButton with primary button tint


Meow.RadioButton.Vertical.Secondary
Vertical RadioButton with secondary button tint


Meow.RadioButton.Horizontal.Secondary
Horizontal RadioButton with secondary button tint


Meow.RadioButton.Vertical.OnPrimary
Vertical RadioButton with onPrimary button tint & textColor


Meow.RadioButton.Horizontal.OnPrimary
Horizontal RadioButton with onPrimary button tint & textColor


Meow.RadioButton.Vertical.OnSecondary
Vertical RadioButton with onSecondary button tint & textColor


Meow.RadioButton.Horizontal.OnSecondary
Horizontal RadioButton with onSecondary button tint & textColor



Use it like this in XML Layout :





<RadioGroup style="@style/Meow.RadioGroup.Vertical">
    <com.google.android.material.radiobutton.MaterialRadioButton
        style="@style/Meow.RadioButton.Vertical.Primary"
        android:text="@string/radio_buttons_option_a" />
             
    <com.google.android.material.radiobutton.MaterialRadioButton
        style="@style/Meow.RadioButton.Vertical.Primary"
        android:text="@string/radio_buttons_option_b" />
</RadioGroup>

Learn more about it at Material Radio Button Component and fragment_radio_buttons.xml.
Snack Bars
You can show Snack Bars with snackL() or snackS() functions in MeowActivity/MeowFragment.

fun testSnackbars(){
    // Shows Snack Bars with LENGTH_SHORT. 
    snackS(R.string.snackbars_message)
    // Shows Snack Bars with LENGTH_LONG.
    snackL(R.string.snackbars_message)
    // Shows Snack Bars with LENGTH_INDEFINITE.
    snackI(R.string.snackbars_message)
      
    // Shows Snack Bars with LENGTH_LONG with action button.
    snackL(
        message = R.string.snackbars_message,    
        resActionText = R.string.snackbars_action,
        
        // Optional - if you want to set custom textAppearances to message and action, set this attributes.
        messageTextAppearanceId = R.style.textAppearance_Snack_Message,
        actionTextAppearanceId = R.style.textAppearance_Snack_Action
    ) {
        // Callback for action button click
    }
}

Learn more about it at SnackBarsFragment.
Switch
There are some customized styles that is related to Material Switch.



Style
Usage




Meow.Switch
Switch with accent_color button tint


Meow.Switch.Primary
Switch with primary button tint


Meow.Switch.Secondary
Switch with secondary button tint


Meow.Switch.OnPrimary
Switch with onPrimary button tint & textColor


Meow.Switch.OnSecondary
Switch with onSecondary button tint & textColor



Use it like this in XML Layout :

<com.google.android.material.switchmaterial.SwitchMaterial
    style="@style/Meow.Switch"
    android:text="@string/switch_text" />

Learn more about it at Material Switch Component and fragment_switches.xml.
TabLayout + ViewPager2
If you want to show contents into a ViewPager, we recommend to use ViewPager2. TabLayout is the indicator of ViewPager state. Follow below steps to have a View with Swipe Gesture.
1. Define XML layout like this :

<layout>
    <data />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            style="@style/Meow.TabLayout.Surface" />
            
        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewpager"
            style="@style/Meow.ViewPager" />    
    
    </LinearLayout>  
</layout>  

2. Create Custom Pager Adapter that extends MeowPagerAdapter

class MyPagerAdapter(
    fragmentManager: FragmentManager,
    lifecycle: Lifecycle) : MeowPagerAdapter(fragmentManager, lifecycle) {
        // Replace this with the array of Fragments that you want to show into ViewPager.
        private val fragmentArray = Array<Fragment>(3) { ChildFragment.newInstance(it) }
        override fun getFragments() = fragmentArray
}

3. Bind Adapter to ViewPager2 & Attach TabLayout to ViewPager2

fun onCreate(savedInstanceState: Bundle?) {
    // ...
    binding.apply {
        binding.viewPager.adapter = MyPagerAdapter(childFragmentManager, lifecycle)
        TabLayoutMediator(tabLayout, viewpager) { tab, position ->
            tab.text = "Tab Title #" + (position + 1) // Set Tab titles here.
        }.attach()
        
        // Optional - If you want to show Material Badge on TabLayout.
        tabLayout.getTabAt(0)?.orCreateBadge?.apply {
            isVisible = true
            number = 10
        }
    }
}  

Now you have ViewPager2 + TabLayout in an Activity/Fragment.
There are some customized styles that is related to Material TabLayout.



Style
Usage




Meow.TabLayout.Surface
TabLayout with surface background color


Meow.TabLayout.Primary
TabLayout with primary background color


Meow.TabLayout.Secondary
TabLayout with primary background color


Meow.TabLayout.PrimarySurface
TabLayout with primary background color in DAY mode and surface background color in NIGHT Mode



Learn more about it at Material TabLayout Component.
TextView
Use it like this in XML Layout :

<TextView
    style="@style/Meow.TextView"
    android:text="@string/some_text"
    android:textAppearance="?textAppearanceBody1"
    android:textColor="@color/on_background_high" />

Learn more about it at fragment_textviews.xml.
Colors for texts based on Material Colors which contains EMPHASIS_HIGH , EMPHASIS_MEDIUM , DISABLED states.



Color
Value




@color/on_background_high
onBackground color with %87 transparency


@color/on_background_medium
onBackground color with %60 transparency


@color/on_background_disabled
onBackground color with %38 transparency


@color/on_surface_high
onSurface color with %87 transparency


@color/on_surface_medium
onSurface color with %60 transparency


@color/on_surface_disabled
onSurface color with %38 transparency


@color/on_primary_high
onPrimary color with %87 transparency


@color/on_primary_medium
onPrimary color with %60 transparency


@color/on_primary_disabled
onPrimary color with %38 transparency


@color/on_secondary_high
onSecondary color with %87 transparency


@color/on_secondary_medium
onSecondary color with %60 transparency


@color/on_secondary_disabled
onSecondary color with %38 transparency



Top App Bar using Material Toolbar
Use it like this in XML Layout :

<layout>
    <data/>
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">    

         <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:liftOnScroll="true">
            
            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                style="@style/Meow.Toolbar.Surface" />
            
          </com.google.android.material.appbar.AppBarLayout>  
      
    <!-- Main Layout -->
    
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>

There are some customized styles that is related to Material Toolbar.



Style
Usage




Meow.Toolbar.Surface
Toolbar with surface background color


Meow.Toolbar.PrimarySurface
Toolbar with primary background color in DAY mode and surface background color in NIGHT Mode


Meow.Toolbar.Primary
Toolbar with primary background color


Meow.Toolbar.Secondary
Toolbar with secondary background color



Learn more about it at Material Top App Bars Component.
? Meow Custom Widgets
Meow Circle ImageView
Meow CircleImageView Attributes:



Attributes
Descriptions




meow_strokeColor
The stroke color of image


meow_strokeWidth
The stroke width of image



Use it like this in XML Layout :

<meow.widget.MeowCircleImageView
    android:layout_width="56dp"
    android:layout_height="56dp"
    app:meow_strokeColor="@color/white"
    app:meow_strokeWidth="2dp"
    app:srcCompat="@drawable/avatar" />

Learn more about it at fragment_imageviews.xml.
Meow Dash View
There are some styles that is related to Dash View.



Style
Usage




Meow.Dash.Horizontal
DashView with Horizontal orientation


Meow.Dash.Horizontal.Primary
DashView with Horizontal orientation and primary color


Meow.Dash.Horizontal.PrimaryVariant
DashView with Horizontal orientation and PrimaryVariant color


Meow.Dash.Horizontal.PrimarySurface
DashView with Horizontal orientation and PrimarySurface color


Meow.Dash.Horizontal.Secondary
DashView with Horizontal orientation and secondary color


Meow.Dash.Horizontal.SecondaryVariant
DashView with Horizontal orientation and SecondaryVariant color


Meow.Dash.Horizontal.OnPrimary
DashView with Horizontal orientation and OnPrimary color


Meow.Dash.Horizontal.OnSecondary
DashView with Horizontal orientation and OnSecondary color


Meow.Dash.Horizontal.OnSurface
DashView with Horizontal orientation and OnSurface color


Meow.Dash.Vertical
DashView with Vertical orientation


Meow.Dash.Vertical.Primary
DashView with Vertical orientation and primary color


Meow.Dash.Vertical.PrimaryVariant
DashView with Vertical orientation and PrimaryVariant color


Meow.Dash.Vertical.PrimarySurface
DashView with Vertical orientation and PrimarySurface color


Meow.Dash.Vertical.Secondary
DashView with Vertical orientation and secondary color


Meow.Dash.Vertical.SecondaryVariant
DashView with Vertical orientation and SecondaryVariant color


Meow.Dash.Vertical.OnPrimary
DashView with Vertical orientation and OnPrimary color


Meow.Dash.Vertical.OnSecondary
DashView with Vertical orientation and OnSecondary color


Meow.Dash.Vertical.OnSurface
DashView with Vertical orientation and OnSurface color



Meow Dash Attributes:



Attributes
Descriptions




meow_dash_gap
Dash Gap


meow_dash_length
Dash length


meow_dash_thickness
Dash thickness


meow_dash_color
Dash color



Use it like this in XML Layout :

 <meow.widget.MeowDashView
    app:meow_dash_gap="4dp"
    app:meow_dash_length="8dp"
    app:meow_dash_thickness="2dp" />

Learn more about it at fragment_dash.xml.
Meow Divider
There are some styles that is related to Divider.



Style
Usage




Meow.Divider.Horizontal
Divider with Horizontal orientation


Meow.Divider.Vertical
Divider with Vertical orientation


Meow.Divider.Horizontal.OnPrimary
Divider with Horizontal orientation and primary divider background type


Meow.Divider.Horizontal.OnSecondary
Divider with Horizontal orientation and secondary divider background type


Meow.Divider.Horizontal.OnSurface
Divider with Horizontal orientation and surface divider background type


Meow.Divider.Vertical.OnPrimary
Divider with Vertical orientation and primary divider background type


Meow.Divider.Vertical.OnSecondary
Divider with Vertical orientation and secondary divider background type


Meow.Divider.Vertical.OnSurface
Divider with Vertical orientation and surface divider background type



Meow Divider Attributes:



Attributes
Descriptions




meow_orientation
Orientation: vertical or horizontal


meow_background_type
Types: background,surface,secondary,primary



Use it like this in XML Layout :

You just need use style.?


<meow.widget.MeowDivider style="@style/Meow.Divider.Horizontal" />

Learn more about it at fragment_dividers.xml.
Meow Empty State
There are some styles that is related to Empty State.



Style
Usage




Meow.EmptyState
EmptyState default style with icon size and icon tint


Meow.EmptyState.OnBackground
EmptyState with title and description OnBackground color


Meow.EmptyState.OnPrimary
EmptyState with title and description OnPrimary color


Meow.EmptyState.OnSecondary
EmptyState with title and description OnSecondary colore


Meow.EmptyState.OnSurface
EmptyState with title and description OnSurface color



Meow Empty state Attributes:



Attributes
Descriptions




meow_icon
Icon resource


meow_iconSize
Icon size


meow_iconTint
Icon tint color


meow_title
Title text


meow_titleTextColor
Title text color


meow_desc
Description text


meow_descTextColor
Description text color


meow_primaryActionText
Button text



Use it like this in XML Layout :

<meow.widget.MeowEmptyState
    android:id="@+id/emptyState"
    style="@style/Meow.EmptyState.OnBackground" />


Not Completed yet!.

Meow Hint Button
There are some styles that is related to Hint Button.



Style
Usage




Meow.HintButton
HintButton default style with icon color



Meow HintButton Attributes:



Attributes
Descriptions




meow_hint
Hint text


meow_hintColor
Hint text color


meow_hintTextAppearance
Hint textAppearance


meow_title
Title text


meow_titleColor
Title text color


meow_titleTextAppearance
Title textAppearance


meow_icon
Icon resource


meow_iconColor
Icon color



Use it like this in XML Layout :

<meow.widget.MeowHintButton
    style="@style/Meow.HintButton"
    app:meow_hint="@string/date"
    app:meow_icon="@drawable/ic_date"
    app:meow_title="@string/date_num" />

Learn more about it at fragment_form.xml.
Meow PinView
There are some styles that is related to PinView.



Style
Usage




Meow.PinView.Filled
PinView Filled box style


Meow.PinView.Outlined
PinView Outlined box style



Meow PinView Attributes:



Attributes
Descriptions




meow_hint
Hint text


meow_hintColor
Hint text color


meow_hintTextAppearance
Hint textAppearance


meow_count
Length of pin (box count)


meow_textColor
Boxes text color


meow_textAppearance
Boxes textAppearance


meow_icon
Icon resource


meow_iconTint
Icon color


meow_showBack
Show clear boxes text


meow_errorTextAppearance
Error textAppearance


meow_boxStyle
Styles: outlined or filled



Use it like this in XML Layout :

<meow.widget.MeowPinView
    android:id="@+id/pv"
    style="@style/Meow.PinView.Filled"
    app:meow_hint="@string/enter_code"
    app:meow_icon="@drawable/ic_dialpad" />

Learn more about it at fragment_form.xml.
Meow ProgressBar
There are some styles that is related to ProgressBar.



Style
Usage




Meow.ProgressBar.Small
Small ProgressBar


Meow.ProgressBar.Small.Primary
Small ProgressBar with primary color


Meow.ProgressBar.Small.PrimaryVariant
Small ProgressBar with PrimaryVariant color


Meow.ProgressBar.Small.PrimarySurface
Small ProgressBar with PrimarySurface color


Meow.ProgressBar.Small.Secondary
Small ProgressBar with secondary color


Meow.ProgressBar.Small.SecondaryVariant
Small ProgressBar with SecondaryVariant color


Meow.ProgressBar.Small.OnPrimary
Small ProgressBar with OnPrimary color


Meow.ProgressBar.Small.OnSecondary
Small ProgressBar with OnSecondary color


Meow.ProgressBar.Small.OnSurface
Small ProgressBar with OnSurface color


Meow.ProgressBar.Medium
Medium ProgressBar


Meow.ProgressBar.Medium.Primary
Medium ProgressBar with primary color


Meow.ProgressBar.Medium.PrimaryVariant
Medium ProgressBar with PrimaryVariant color


Meow.ProgressBar.Medium.PrimarySurface
Medium ProgressBar with PrimarySurface color


Meow.ProgressBar.Medium.Secondary
Medium ProgressBar with secondary color


Meow.ProgressBar.Medium.SecondaryVariant
Medium ProgressBar with SecondaryVariant color


Meow.ProgressBar.Medium.OnPrimary
Medium ProgressBar with OnPrimary color


Meow.ProgressBar.Medium.OnSecondary
Medium ProgressBar with OnSecondary color


Meow.ProgressBar.Medium.OnSurface
Medium ProgressBar with OnSurface color


Meow.ProgressBar.Large
Large ProgressBar


Meow.ProgressBar.Large.Primary
Large ProgressBar with primary color


Meow.ProgressBar.Large.PrimaryVariant
Large ProgressBar with PrimaryVariant color


Meow.ProgressBar.Large.PrimarySurface
Large ProgressBar with PrimarySurface color


Meow.ProgressBar.Large.Secondary
Large ProgressBar with secondary color


Meow.ProgressBar.Large.SecondaryVariant
Large ProgressBar with SecondaryVariant color


Meow.ProgressBar.Large.OnPrimary
Large ProgressBar with OnPrimary color


Meow.ProgressBar.Large.OnSecondary
Large ProgressBar with OnSecondary color


Meow.ProgressBar.Large.OnSurface
Large ProgressBar with OnSurface color



Meow ProgressBar Attributes:



Attributes
Descriptions




meow_showOnInit
Specify that the progress can be show on Initialization



Use it like this in XML Layout :

<meow.widget.MeowProgressBar
    style="@style/Meow.ProgressBar.Small.Primary"
    app:meow_showOnInit="true" />

Learn more about it at fragment_progress_bars.xml.
Meow Rating Bar
There are some styles that is related to RatingBar.



Style
Usage




Meow.RatingBar
RatingBar with default style


Meow.RatingBar.Indicator
RatingBar with enabled Indicator style (just show and not clickable)



Meow RatingBar Attributes:



Attributes
Descriptions




meow_numStars
The number of stars


meow_minimumStars
The minimum selected stars


meow_rating
Show while when use it


meow_starPadding
Stars padding


meow_drawableEmpty
Stars drawable when is empty


meow_drawableFilled
Stars drawable when is filled


meow_isIndicator
Specify that it is indicator or not


meow_scrollable
Specify that it is scrollable or not


meow_clickable
Specify that it is clickable or not


meow_clearRatingEnabled
Specify that clearRating is enabled or not


meow_starWidth
Stars Width


meow_starHeight
Stars Height


meow_stepSize
Step Size



Use it like this in XML Layout :

<meow.widget.MeowRatingBar
    style="@style/Meow.RatingBar" 
    app:meow_drawableEmpty="@drawable/ic_star"
    app:meow_drawableFilled="@drawable/ic_star_fill"
    app:meow_numStars="5"
    app:meow_stepSize="0.5" />

Learn more about it at fragment_rating_bars.xml.
Meow FormView (a cool widget?)

With this widget, you no longer need to check the form fields (like editTexts and spinners) one by one.

Use it like this in XML Layout :

<meow.widget.MeowFormView
    android:id="@+id/fv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:resetForm="true">
    
    <!-- You can add MeowTextField,MeowSpinner,Button and other views in this layout -->
    
</meow.widget.MeowFormView>

You can call validate() function to validate all widgets which are in MeowFormView as children :

binding.fv.validate {
    // When MeowFormView validate all widgets with their validate type, this line runs.
}

Learn more about it at fragment_form.xml.
Meow Spinner
There are some styles that is related to Spinner.



Style
Usage




Meow.Spinner.Outlined
Spinner with outlined style


Meow.Spinner.Outlined.Dense
Spinner with outlined dense style


Meow.Spinner.Filled
Spinner with Filled style


Meow.Spinner.Filled.Dense
Spinner with Filled dense style




If you want to use Validation Feature, you should add MeowSpinner to FormView Layout.




Attributes
Descriptions




meow_validateType
Types: empty,optional


meow_errorEmpty
Error empty Text (when spinner was empty you can show your customize error)



Use it like this in XML Layout :

<meow.widget.MeowSpinner
    style="@style/Meow.Spinner.Outlined"
    android:hint="@string/select"
    app:meow_validateType="empty" />

And for add Item in MeowSpinner : Supports : title , description and icon

 binding.spinner
    .addItem(R.string.item1, R.string.description1, R.drawable.ic_error)
    .addItem(R.string.item2, R.string.description2, R.drawable.ic_error)
    .addItem(R.string.item3, imageViewResId = R.drawable.ic_error)
    .addItem(R.string.item4, imageViewResId = R.drawable.ic_error)
    .addItem(R.string.item5, R.string.description3)
    .addItem(R.string.item6, R.string.description4)
    .addItem(R.string.item7)
    .addItem(R.string.item8)
    .build()

Learn more about it at Material Exposed Dropdown Menu Component and fragment_form.xml.
Meow TextField
There are some styles that is related to TextField.



Style
Usage




Meow.TextField.Outlined
TextField with outlined style


Meow.TextField.Outlined.Dense
TextField with outlined dense style


Meow.TextField.Filled
TextField with Filled style


Meow.TextField.Filled.Dense
TextField with Filled dense style



Meow TextField Attributes:

For use validation Feature you should add MeowTextField to FormView Layout.
If the error text is blank, the default message will be displayed.




Attributes
Descriptions




meow_validateType
Types: empty,mobile,mobileLegacy,email,optional


meow_errorEmpty
Error empty Text (when textfield was empty you can show your customize error)


meow_errorMobile
Error invalid mobile number


meow_errorMobileLegacy
Error invalid mobile legacy (persian) number


meow_errorEmail
Error invalid email


meow_textSize
TextField text size


meow_inputType
Default android TextInputLayout input type



Use it like this in XML Layout :

<meow.widget.MeowTextField
    style="@style/Meow.TextField.Filled"
    android:hint="@string/email"
    app:errorEnabled="true"
    app:meow_inputType="textEmailAddress"
    app:meow_validateType="email"
    app:startIconDrawable="@drawable/ic_android" />

Learn more about it at Material TextField Component and fragment_form.xml.
? ‍R8/Proguard
Just include rules of proguard-rules.pro at your application Proguard config file.
? Contributing
If you want to contribute to this project, just send an email to oneHamidreza@gmail.com with Meow-Framework-Contributing subject.
License
Copyright 2020 Hamidreza Etebarian
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

  .










Compartir

 Facebook
 Twitter
 Stumbleupon
 LinkedIn
 Pinterest