I want to leverage ViewStub to optionally show a portion of UI. When the root of my inflated item is ConstraintLayout then it doesn't render.
But if that root is MaterialCardView then it displays as intended.
<!-- my_fragment.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"
android:id="#+id/fragmentRootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ViewStub
android:id="#+id/fragmentViewStub"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inflatedId="#+id/fragmentViewStub"
android:layout="#layout/item"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<!-- item.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"
android:id="#+id/itemRootLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textview.MaterialTextView
android:id="#+id/itemLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/itemLabelText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
/* MyFragment.kt */
#AndroidEntryPoint
class MyFragment : Fragment(R.layout.my_fragment) {
private val viewModel: MyViewModel by viewModels()
private val viewBinding: MyFragmentBinding by viewLifecycleLazy {
MyFragmentBinding.bind(requireView())
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
viewBinding.fragmentViewStub.inflate()
}
}
I've tried matching the ViewStub's id/inflatedId attributes and programmatically setting dimensions/constraints but neither solved the issue.
What am I overlooking about making these pieces work together?
Forgot to update with my answer/oversight. This worked as expected in both cases all along.
Nightmode was enabled and the behavior of MaterialCardView has automatic contrast between its card and content. Meanwhile, when ConstraintLayout inverts its theme the label appears to be missing but is indeed present, as white text on white background.
I don't know if it is a bug or i am making some mistake but when i set Explode animation when opening an Activity it animates like a Slide animation from top to bottom. I did some trial and error and it turns out that when i use a custom background color in the root layout in the xml file this unexpected behavior occures. When i remove the background color everything works as expected.
Can anyone tell me what's going on here??? Because it is important for me to set background color in the root layout.
Here's a sample of my xml code:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" // This causes the unexpected behavior.
tools:context=".ExplodeActivity">
<ImageView
android:id="#+id/imageView2"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="100dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/b" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
This is the ExplodeActivity 's onCreate method where i am assigning the animation:
class ExplodeActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_explode)
val enterTransition = Explode()
enterTransition.duration = 500
window.enterTransition = enterTransition
}
}
Here's the previous activity's code which responsible for starting the ExplodeActivity:
val options = ActivityOptions.makeSceneTransitionAnimation(this).toBundle()
val intent = Intent(this, ExplodeActivity::class.java)
startActivity(intent, options)
I'm am new to Kotlin I try to create a Shopping List app and I encountered a problem with a RecycleView inside a fragment.
In the fragment, I have a button that a user click and adds Item to the list but I got error when I tried to add the layout manager inside the OnCreateView function.
I tried this:
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = inflater.inflate(R.layout.fragment_shopping_list, container, false)
rv_shoppinglist.layoutManager = LinearLayoutManager(context) \\ this is where i get ERR
return view
}
and i got an ERR -> java.lang.IllegalStateException: rv_shoppinglist must not be null
So i added this line rv_shoppinglist.layoutManager = LinearLayoutManager(context)
on different function
override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
rv_shoppinglist.layoutManager = LinearLayoutManager(activity)
}
and now the app works and when I user add the item to the list it does show the items on the RecycleView but instead of displaying them line underline it's displaying them with a screen size gap
Image:
edit:
This is the XML file for RV_CHILD:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
And this is an XML file for shopping_fragment
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragments.shopping_list">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_shoppinglist"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_shoppiglist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:src="#drawable/ic_plus"
android:layout_margin="16dp" />
</RelativeLayout>
</FrameLayout>
You need to set relative layouts height to wrap_content otherwise it will take up the whole screen
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
As a commenter pointed out, it appears that your viewholder layout height (RV_CHILD in your case) is set to match_parent when it should probably be wrap_content
I am wondering why adding viewBinding to my app, makes the XML root display in full screen when running the app. The root doesn't display in full screen in the designer view inside Android Studio.
Due to the root displaying in full screen, I had to add android:gravity="center" to vertically align the children in the center. While I don't think this should be a problem, I'm still interested in knowing why this is the case.
I have the following code;
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_gravity="center_vertical"
android:background="#color/colorAccent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="1"
android:textSize="30sp" />
<Button
android:id="#+id/roll_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/roll"/>
</LinearLayout>
package com.example.diceroller
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.diceroller.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val binding = ActivityMainBinding.inflate(layoutInflater)
binding.rollButton.text = "testBind"
setContentView(binding.root)
}
}
I am not sure but I think that when You execute this setContentView(binding.root) You are setting a linear layout as fullscreen.
setContentView Android Docs
Set the activity content to an explicit view. This view is placed directly into the activity's view hierarchy. It can itself be a complex view hierarchy. When calling this method, the layout parameters of the specified view are ignored. Both the width and the height of the view are set by default to ViewGroup.LayoutParams#MATCH_PARENT. To use your own layout parameters, invoke setContentView(android.view.View, android.view.ViewGroup.LayoutParams) instead.
To do make it looks like in the preview You can write this code.
XML:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<data>
</data>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="#color/colorAccent"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="1"
android:textSize="30sp" />
<Button
android:id="#+id/roll_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Roll" />
</LinearLayout>
</FrameLayout>
</layout>
MainActivity.kt:
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
binding = ActivityMainBinding.inflate(layoutInflater)
binding.rollButton.text = "Test Roll"
setContentView(binding.root)
}
}
Tip: To convert fast Your layout to data binding layout use: Alt + Enter ➡ Convert to data binding layout
I'm looking for an Android dialog component like this screenshot:
Apologies for the white dialog on a white background but hopefully you can see the nice elevation shadow, the rounded corners, and importantly the close button on the top right of the dialog.
(The screenshot is taken from a tab-less version of the Chrome app).
Does anyone know of a library/snippet that achieves this, or something like it? Thanks.
edit:
Some background info which hopefully will make the question clearer: I have a scrolling activity which has a lot of content - text and data - in which I would like to show further details/images via clickable text/image. Yes I could use an AlertDialog but I much prefer the look of the dialog window in the screenshot.
you can try this layout
<LinearLayout 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"
xmlns:tools="http://schemas.android.com/tools"
tools:background="#B4CCCCCC"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
app:cardCornerRadius="5dp"
app:cardElevation="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</RelativeLayout>
</androidx.cardview.widget.CardView>
Well, following the suggestion above, this is the result of a rough test of a basic activity, containing a CardView, with the Theme.Holo.Dialog theme:
And using a CardView does show the rounded corners and elevation nicely, as required, but there is a big problem - the original layout (the one from where the dailog is called) isn't seen underneath and below the dialog, this area of the screen is blank. So it's not acting like a dialog. A custom dialog, based on DialogFragment, is the only way forward, and that is my next objective.
Hmm, I've failed. This is the best I can come up with:
The dialog is now acting like a dialog, placed above the user screen, and the CardView widget, as suggested above, is fine, but the DialogFragment places it within a white rectangular window. Not what I wanted. In case someone else feels the urge to take up the challenge, here is my layout xml, the dialog class and the code snippet that calls it:
dialog_bigly.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="550dp">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.6">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text=" Dialog Title here"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:id="#+id/txtDialog_title"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" app:srcCompat="#drawable/ic_do_not_disturb"
android:id="#+id/btnDialog_close" android:layout_gravity="right" android:clickable="true"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" app:srcCompat="#drawable/test_image207x344"
android:id="#+id/ivDialog_Image"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
DialogBig.kt
package ...
import ...
class DialogBig: DialogFragment() {
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val builder = AlertDialog.Builder(activity!!)
val inflater = activity!!.layoutInflater
val dialogView = inflater.inflate(R.layout.dialog_bigly, null)
val txtTitle = dialogView.findViewById<TextView>(R.id.txtDialog_title)
val imgImage = dialogView.findViewById<ImageView>(R.id.ivDialog_Image)
val btnClose = dialogView.findViewById<ImageView>(R.id.btnDialog_close)
builder.setView(dialogView)
btnClose.setOnClickListener { dismiss() }
txtTitle.text = "dialog bigly title"
return builder.create()
}
}
and finally code snippet
btn_test.setOnClickListener {
//create a new bigly dialog
val dialog = DialogBig()
dialog.show(supportFragmentManager, "testing")
}
I have finally found a solution (one month later). #Bunny suggests making the background of the dialog fragment transparent.
Specificially, in the onCreateView of the DialogFragment class, add:
dialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
This works, but with the restriction that it has to be a 'drawable' background. But first of all, the result - a dialog with rounded corners:
Okay, the code is as follows. Here is my 'rounded_corners.xml' shape:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="30dp" />
<padding
android:bottom="16dp"
android:left="16dp"
android:right="16dp"
android:top="16dp" />
</shape>
Which is used in the dialog fragment layout, dialog_bigly.xml, within the base CardView widget:
<?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"
android:id="#+id/base_card"
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#drawable/rounded_corners"
android:orientation="vertical"
app:cardCornerRadius="20dp"
app:cardElevation="10dp" >
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/txtDialog_title"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="2dp"
android:fontFamily="#font/open_sans"
android:text="Dialog Title here"
app:layout_constraintBottom_toBottomOf="#+id/btnDialog_close"
app:layout_constraintEnd_toStartOf="#+id/btnDialog_close"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/btnDialog_close"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginEnd="8dp"
style="#style/Widget.AppCompat.ActionButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_red_close_24x24" />
<ImageView
android:id="#+id/ivDialog_Image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintTop_toBottomOf="#+id/txtDialog_title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:srcCompat="#drawable/test_image185x285" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
And lastly here is the DialogBig.kt kotlin code:
package ...
import ...
class DialogBig: DialogFragment() {
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val builder = AlertDialog.Builder(activity!!)
val inflater = activity!!.layoutInflater
val dialogView = inflater.inflate(R.layout.dialog_bigly, null)
val txtTitle = dialogView.findViewById<TextView>(R.id.txtDialog_title)
val imgImage = dialogView.findViewById<ImageView>(R.id.ivDialog_Image)
val btnClose = dialogView.findViewById<ImageView>(R.id.btnDialog_close)
builder.setView(dialogView)
btnClose.setOnClickListener { dismiss() }
txtTitle.text = "my bigly dialog test title"
return builder.create()
}
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
dialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
return super.onCreateView(inflater, container, savedInstanceState)
}
}
Although I don't really understand how this works, I'm glad to have found a solution. I think part of the issue is trying to get access to the fragment holder container in the depths of the DialogFragment class to apply the transparency, rather than simply the fragment layout itself.