Develop Reference

Android ViewBinding <merge> layout issues [duplicate]

This question already has answers here:
View Binding - How do I get a binding for included layouts?
(8 answers)
Closed 1 year ago.
I defined a layout in this way:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<eo.view.batterymeter.BatteryMeterView
android:id="#+id/batteryMeter"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="16dp"
app:layout_constraintBottom_toTopOf="#id/colorInputView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<include layout="#layout/include_battery_meters_with_indicator" />
<eo.view.colorinput.ColorInputView
android:id="#+id/colorInputView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/batteryMeter" />
</androidx.constraintlayout.widget.ConstraintLayout>
this's the layout file included:
<?xml version="1.0" encoding="utf-8"?>
<merge 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"
tools:showIn="#layout/activity_color_edit">
<eo.view.batterymeter.BatteryMeterView
android:id="#+id/chargingBatteryMeter"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
app:layout_constraintBottom_toBottomOf="#id/batteryMeter"
app:layout_constraintEnd_toStartOf="#id/criticalBatteryMeter"
app:layout_constraintStart_toStartOf="#id/batteryMeter"
app:layout_constraintTop_toTopOf="#id/batteryMeter" />
<eo.view.batterymeter.BatteryMeterView
android:id="#+id/criticalBatteryMeter"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="24dp"
app:layout_constraintBottom_toBottomOf="#id/chargingBatteryMeter"
app:layout_constraintEnd_toStartOf="#id/unknownBatteryMeter"
app:layout_constraintStart_toEndOf="#id/chargingBatteryMeter"
app:layout_constraintTop_toTopOf="#id/chargingBatteryMeter" />
<eo.view.batterymeter.BatteryMeterView
android:id="#+id/unknownBatteryMeter"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="24dp"
app:layout_constraintBottom_toBottomOf="#id/chargingBatteryMeter"
app:layout_constraintEnd_toEndOf="#id/batteryMeter"
app:layout_constraintStart_toEndOf="#id/criticalBatteryMeter"
app:layout_constraintTop_toTopOf="#id/chargingBatteryMeter" />
<androidx.constraintlayout.widget.Group
android:id="#+id/indicatorBatteryMeterGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:constraint_referenced_ids="chargingBatteryMeter,criticalBatteryMeter,unknownBatteryMeter" />
</merge>
In the source code i deflate the layout:
private lateinit var binding: ActivityColorEditBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityColorEditBinding.inflate(layoutInflater)
val view = binding.root
setContentView(view)
setupActionBar()
setupBatteryMeters()
setupColorInput()
}
For some reason items inside included file are not bound and thus references to such items are not working, for example in this method binding.indicatorBatteryMeterGroup is not recognized:
private fun setupBatteryMeters() {
when (colorType) {
ColorType.INDICATOR -> {
setupIndicatorBatteryMeters()
binding.batteryMeter.isInvisible = true
binding.indicatorBatteryMeterGroup.isVisible = true
}
else -> {
setupBattery(binding.batteryMeter)
binding.indicatorBatteryMeterGroup.isVisible = false
binding.batteryMeter.isVisible = true
}
}
}

Give your include element an ID:
<include layout="#layout/include_battery_meters_with_indicator"
android:id="#+id/battery_meters" />
Then you can access them as a property of a property of your binding, for instance, binding.batteryMeters.criticalBatteryMeter.
Don't put an ID on the merge element. IIRC, this causes it not to work properly. The ID has to be on the include.

How create a button by programmatically for a GridLayout

I'm triying to create a GridLayout by programmatically in Kotlin. My code for the XML is this:
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#46FF4433"
tools:context=".MainActivity">
<androidx.gridlayout.widget.GridLayout
android:id="#+id/grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rowCount="5">
app:columnCount="3"
</androidx.gridlayout.widget.GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I want to set 15 buttons into my Grid. My mainActivity is this:
val gridLayout: GridLayout = findViewById(R.id.grid)
for (i in 1..10){
val button = Button(this)
button.text = "Boton: " + i
button.setBackgroundColor(Color.parseColor("#ffffff"));
gridLayout.addView(button)
}
But I need each button be like this:
<Button
android:id="#+id/button1"
app:layout_gravity="fill"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="Button 1"
android:background="#ffffff"
/>
I think it has something to do with the layout param but I don't know how to set those atributes.

Take a look at GridLayout.LayoutParams and GridLayout.Spec. You can do something like the following:
val button = Button(this)
val lp = GridLayout.LayoutParams()
lp.setGravity(Gravity.FILL)
// GridLayout.spec is immutable, so one can be applied more than once.
// There are several other versions of GridLayout.spec which may be applicable.
lp.rowSpec = GridLayout.spec(row, 1.0f) // row start, weight
lp.columnSpec = GridLayout.spec(col, 1.0f) // column start, weight
button.layoutParams = lp
I haven't tested this, but it should get your started.

Android CollapsingToolbar/ AppBarLayout scroll behind status bar behaviour top padding

I'd like to use CoordinatoryLayout, AppBarLayout and CollapsingToolbarLayout to create a layout that resembles the below example from Google Calendar.
The key things I'm trying to replicate:
Scrolling the content behind the status bar
Rounded corners at the top of the scroll container
Enough room at the top of the screen for the header to not look squashed
The Question
Google Calendar appears to be growing the scroll container as the user scrolls. How would I go about doing this or something similar to achieve the look I'm after?
I've put together a quick example of what I'm trying to build:
activity_scrolling.xml
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
tools:context="uk.co.exampleapplication.ScrollingActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:id="#+id/lay_header"
layout="#layout/layout_header" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/scroll_header_background"
android:elevation="16dp"
android:paddingBottom="12dp">
<TextView
android:id="#+id/sectionTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:text="Title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/filter_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="22dp"
android:layout_marginEnd="16dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".ScrollingActivity"
tools:showIn="#layout/activity_scrolling">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:text="#string/large_text" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
layout_header.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingHorizontal="16dp"
android:paddingTop="60dp"
android:paddingBottom="40dp"
app:layout_collapseMode="parallax"
tools:ignore="HardcodedText">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:text="Title"
android:textColor="#FFF"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Subtitle"
android:textColor="#FFF"
android:textSize="16sp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title" />
</androidx.constraintlayout.widget.ConstraintLayout>
scroll_header_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp" />
<solid android:color="#FFFFFF" />
<size
android:width="64dp"
android:height="64dp" />
</shape>
My attempt is included below. The header scrolls behind the toolbar as desired but I'd like some additional top padding above my views (about the height of the top inset/ status bar would be sufficient). Google Calendar appears to be solving this by having the container grow as the user scrolls.

Implement an AppBarLayout.OnOffsetChangedListener that will adjust top padding on the ConstraintLayout that holds the TextView and the Button. (Call this view "viewToGrow".) You can also do other things in the listener like change the corner radius of the drawable as the appbar scrolls.
The following example adjusts top padding to give the header more room. This padding is increased as the appbar scrolls up and decreases as it scrolls down. The demo app also removes the corner radius of the drawable during the final 15% of the appbar scroll.
ScrollingActivity
class ScrollingActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_scrolling)
val viewToGrow: View = findViewById(R.id.viewToGrow)
val baseTopPadding = viewToGrow.paddingTop
// Determine how much top padding has to grow while the app bar scrolls.
var maxDeltaPadding = 0
val contentView = findViewById<View>(android.R.id.content)
ViewCompat.setOnApplyWindowInsetsListener(contentView) { _, insets ->
maxDeltaPadding = insets.systemWindowInsetTop
insets
}
// Get key metrics for corner radius shrikage.
var backgroundRadii: FloatArray? = null
var maxRadius: FloatArray? = null
val backgroundDrawable = (viewToGrow.background as GradientDrawable?)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N && backgroundDrawable != null) {
backgroundRadii = backgroundDrawable.cornerRadii
maxRadius = floatArrayOf(backgroundRadii!![0], backgroundRadii[1])
}
// Set up the app bar and the offset change listener.
val appBar: AppBarLayout = findViewById(R.id.app_bar_layout)
val appBarTotalScrollRange: Float by lazy {
appBar.totalScrollRange.toFloat()
}
appBar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { _, verticalOffset ->
// Add/remove padding gradually as the appbar scrolls.
val percentOfScrollRange = (-verticalOffset / appBarTotalScrollRange)
val deltaPadding = maxDeltaPadding * percentOfScrollRange
val newTopPadding = baseTopPadding + deltaPadding.toInt()
if (newTopPadding != viewToGrow.paddingTop) {
viewToGrow.setPadding(
viewToGrow.paddingLeft,
newTopPadding,
viewToGrow.paddingRight,
viewToGrow.paddingBottom
)
// Change the drawable radius as the appbar scrolls.
if (backgroundRadii != null && maxRadius != null) {
val radiusShrinkage = if (percentOfScrollRange > (1.0f - CORNER_SHRINK_RANGE)) {
(1.0f - percentOfScrollRange) / CORNER_SHRINK_RANGE
} else {
1.0f
}
backgroundRadii[0] = maxRadius[0] * radiusShrinkage
backgroundRadii[1] = maxRadius[1] * radiusShrinkage
backgroundRadii[2] = maxRadius[0] * radiusShrinkage
backgroundRadii[3] = maxRadius[1] * radiusShrinkage
backgroundDrawable!!.cornerRadii = backgroundRadii
}
}
})
}
companion object {
const val CORNER_SHRINK_RANGE = 0.15f
}
}

Align programmatically elements in a ConstraintLayout

I create in Kotlin, a TextView, an EditText and a Button in a ConstraintLayout, and i would like to have them in center horizontally, and one below the others vertically, but whatever i tried they are still at top-left.
For now i have :
val layout = findViewById<ConstraintLayout>(R.id.mainLayout)
layout.removeAllViews()
//Here i try to set my alignments
var layoutParams = ConstraintLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT)
layoutParams.leftToLeft = ConstraintLayout.LayoutParams.MATCH_PARENT
layoutParams.rightToRight = ConstraintLayout.LayoutParams.MATCH_PARENT
layoutParams.topToTop = ConstraintLayout.LayoutParams.MATCH_PARENT
layoutParams.bottomToBottom = ConstraintLayout.LayoutParams.MATCH_PARENT
layoutParams.verticalBias = 0.05f
val tv_dynamic = TextView(this)
tv_dynamic.text = "Text :"
tv_dynamic.layoutParams = layoutParams
layout?.addView(tv_dynamic)
layoutParams.verticalBias = 0.15f
val et_dynamic = EditText(this)
et_dynamic.setText("...")
et_dynamic.layoutParams = layoutParams
layout?.addView(et_dynamic)
layoutParams.verticalBias = 0.3f
val b_dynamic = Button(this)
b_dynamic.text = "Ok"
b_dynamic.setOnClickListener(View.OnClickListener(){ changenamevalidate(et_dynamic.text.toString())} )
b_dynamic.layoutParams = layoutParams
layout?.addView(b_dynamic)
I have based my settings on a xml TextView i already have :
<androidx.constraintlayout.widget.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/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<TextView
android:id="#+id/TextViewTeam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Team Name!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.05" />
</androidx.constraintlayout.widget.ConstraintLayout>

Add a android:layoutgravity="center_horizontal" attribute to your ConstraintLayout, like this:
<androidx.constraintlayout.widget.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/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<TextView
android:id="#+id/TextViewTeam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Team Name!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.05" />
</androidx.constraintlayout.widget.ConstraintLayout>

Shared element comes to front of all view when activity transition

Hello everyone i have little problem about shared element.
I have using shared element at activity transition.
When click to recyclerView item that view comes to front of all view.
as you can see when i click to lowermost picture
begin transition fragment --> activity
private fun itemClicked(pos: Int, view: View) {
val intent = Intent(context, DetailActivity::class.java)
val title = view.findViewById<TextView>(R.id.title)
val photo = view.findViewById<ImageView>(R.id.photo)
intent.putExtra(IMAGE_TRANSITION_NAME, photo.transitionName)
intent.putExtra(TITLE_TRANSITION_NAME, title.transitionName)
val pair1 =
Pair.create(
photo as View,
ViewCompat.getTransitionName(photo).toString()
)
val pair2 =
Pair.create(
title as View,
ViewCompat.getTransitionName(title).toString()
)
val options = activity?.let {
ActivityOptionsCompat.makeSceneTransitionAnimation(it, pair2, pair1)
}
startActivity(intent, options?.toBundle())
}
my custom view holder
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp"
app:contentPaddingBottom="0dp"
app:contentPaddingLeft="0dp"
app:contentPaddingRight="0dp"
app:contentPaddingTop="0dp"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/root_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/photo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:maxLines="2"
app:autoSizeMaxTextSize="#dimen/primary_text_medium"
app:autoSizeMinTextSize="#dimen/primary_text_small"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/photo"
tools:text="Deniz subaşı" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>