To Documents

Composable Parameters

What are Composables?

• A Jetpack Compose composable is
  
  1. an item that is displayed in the layout of an Android app,
  2. represented in Kotlin code by a function,
  3. the analog of a widget, represented by XML code in a Views app.
• This is a table showing the View widget analogs of some built in composables:
  

  Composable	View Widget
  Column or Row	LinearLayout
  Text	TextView
  Image	ImageView
  Button	Button
  TextField	EditText
  CheckBox	CheckBox
  RadioButton	RadioButton
  Slider	SeekBar
  DropdownMenu	Spinner
  DatePicker	CalendarView
  LazyColumn or LazyRow	ScrollView or HorizontalScrollView
  Box	FrameLayout

The Modifier Function

• Modifier functions can be applied to any built in composable. Recommendation: make modifier the first optional parameter.
• Here are some common Modifier functions and some of their parameters:
  

  Modifier Function	Parameters	Description
  .size( )	width, height	Sets specific dimensions in dp units.
  .padding( )	all,horizontal,vertical start,end,top,bottom	Adds space around the element in dp units.
  .fillMaxWidth( )	fraction : Float Default max fraction is 1.0,	Makes the element fill available horizontal space.
  .background( )	color : Color object	Sets background of element.
  .clickable( )	enabled : true, onClick : ( ) -> Unit	Makes element clickable. Button has its own onClick parameter.
  .offset( )	x, y : Float	Sets offset of element.

• Modifier are chained together when called, for example:
  

  Column(modifier=Modifier
         .padding(all=20.dp)
         .background(color=Color.Silver)
         .fillMaxWidth( ))
  

• The order of the parameters matters.

Parameters Specific to Individual Composables

* denotes a manditory parameter.

1. Text

• text * : The string to be displayed in the Text element.
  color : Sets the color of the text using a Color object.
  fontSize : Sets the font size for the text in sp units.
  fontWeight : Sets the text to FontWeight.Bold or FontWeight.Light.
  fontStyle : Sets the text to FontWeight.Italic or FontWeight.Normal.
  fontFamily : Sets the font family used to render the text.
  letterSpacing : Sets the spacing between characters in the text in sp units.
  

2. Image

• painter * : a painterResource that uses an image from the Drawable resource folder.
  contentDescription * : A string describing the image, like an HTML alt attribute.
  alignment : How to position the image within its parent, e.g., Crop, Fit, FillBounds.
  contentScale : Determines how the image is resized to fit within its parent.
  alpha : Sets the opacity of the image from 0.0f to 1.0f.
  

3. Button

• onClick * : A lambda function that executes when the button is clicked.
  enabled : A Boolean value that determines whether the button is interactive.
  shape : Determines the shape of the button's outer container, for example a RoundedCornerShape or CircleShape object.
  colors : A ButtonColors object that sets the background and contents colors.
  border : Adds a border stroke to the button using a BorderStroke object.
  content : A composable lambda that specifies the contents of the button, usually a Text composable.

4. TextField

• value * : The text displayed in the textfield, typically held in a state variable.
  onValueChange * : A callback lambda that fires when the user change the text value. Use this to update the textfield text value.
  enabled : Set to true to set textfield is grayed out.
  readOnly : Set to true if the textfield is read only.
  textStyle : Customizes the font, color, and size of the input of the input.
  placeHolder : A hint that is only displayed when there is no text in the textfield.