Develop Reference

Legends get cut off with pie chart in MPAndroidChart?

I am using MPAndroid chart library to show pie chart in my app
The legends / chart description labels are not wrapping below one another
I used pieChart.legend.isWordWrapEnabled=true but it doesn't work out
This is my xml
<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"
tools:context=".equity.EquityFragment">
<include
android:id="#+id/pageTitleLayout"
layout="#layout/page_title" />
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/pieChart"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pageTitleLayout" />
<include
android:id="#+id/loader"
layout="#layout/view_progress_loader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
</androidx.constraintlayout.widget.ConstraintLayout>
And this is code
private fun createChart(chartData:List<EquityPieChart>){
val pieEntry= chartData.map { PieEntry(it.equity,it.name) }
val rnd = Random()
val colors = mutableListOf<Int>()
for (i in chartData.indices){
colors.add(Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256)))
}
val dataSet=PieDataSet(pieEntry,getString(R.string.equity_title))
dataSet.colors=colors
binding.pieChart.data = PieData(dataSet)
binding.pieChart.isDrawHoleEnabled=false
binding.pieChart.legend.isWordWrapEnabled=true
binding.pieChart.invalidate()
}
this is the UI i get in device

The text of legends are too big to be fit inside the graph. One way is to keep them outside the graph.
The following attribute can be added to achieve this job:
setDrawInside()
Please use this code:
Legend l = pieChart.getLegend();
l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
l.setDrawInside(false);
l.setXEntrySpace(4f);
l.setYEntrySpace(0f);
l.setWordWrapEnabled(true);
This will set the legend outside the graph.

I ended up doing like this with the help of flexboxlayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".equity.EquityFragment">
<include
android:id="#+id/pageTitleLayout"
layout="#layout/page_title" />
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/pieChart"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/chartLabels"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pageTitleLayout" />
<com.google.android.flexbox.FlexboxLayout
android:id="#+id/chartLabels"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:flexWrap="wrap"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<include
android:id="#+id/loader"
layout="#layout/view_progress_loader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
</androidx.constraintlayout.widget.ConstraintLayout>
Legend layout
<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="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="25dp"
android:padding="2dp">
<View
android:id="#+id/legendBox"
android:layout_width="10dp"
android:layout_height="10dp"
android:background="#color/primary_500"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/legendTitle"
app:layout_constraintTop_toTopOf="#+id/legendTitle"/>
<com.google.android.material.textview.MaterialTextView
android:id="#+id/legendTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
tools:text="xxxxjdsfjsdfj"
android:layout_marginStart="3dp"
app:layout_constraintStart_toEndOf="#+id/legendBox"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Kotlin code
private fun createChart(chartData: List<EquityPieChart>) {
val pieEntry = chartData.map { PieEntry(it.equity) }
val rnd = Random()
val colors = mutableListOf<Int>()
for (i in chartData.indices) {
colors.add(Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256)))
}
val dataSet = PieDataSet(pieEntry, getString(R.string.equity_title))
dataSet.colors = colors
dataSet.valueTextSize = 14f
dataSet.setDrawValues(false)
dataSet.valueTextColor = ContextCompat.getColor(requireContext(), android.R.color.white)
binding.pieChart.data = PieData(dataSet)
binding.pieChart.isDrawHoleEnabled = false
binding.pieChart.description = Description().apply { text="" }
binding.pieChart.invalidate()
binding.pieChart.animateY(1400, Easing.EaseInOutQuad);
binding.pieChart.legend.isEnabled = false
creatChartLabels(colors,chartData)
}
private fun creatChartLabels(colors:List<Int>,chartData: List<EquityPieChart>){
for (i in chartData.indices) {
val view=ItemLegendBinding.inflate(layoutInflater)
view.legendBox.setBackgroundColor(colors[i])
view.legendTitle.text=chartData[i].name
binding.chartLabels.addView(view.root)
}
}
output

Can't make ScrollView fill whole parent in a popup

I'm trying to make a help popup. Since the help tips will be different according to which screen you click the help button from, I want to put the text inside a scroll just in case. My layout looks like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/helpPopupTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="10dp"
android:gravity="center"
android:text="#string/help_popup_title"
android:textColor="?attr/colorOnBackground"
android:textSize="24sp"
android:textStyle="bold" />
<ScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="10dp"
android:layout_weight="1"
android:fillViewport="true">
<TextView
android:id="#+id/helpTips"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/help_tips"
android:textSize="20sp" />
</ScrollView>
<Button
android:id="#+id/footerButton"
style="#style/RoundedButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="10dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="20dp"
android:text="#string/footer_button_text" />
It's basically a title, the scroll, and a button. My problem is, when the popup shows up, the scroll is just as tall as the text inside of it.
This is how it looks
This is how I build the dialog:
val dialogView = LayoutInflater.from(this).inflate(R.layout.help_popup, null)
val dialogBuilder = AlertDialog.Builder(this).setView(dialogView)
dialogView.findViewById<TextView>(R.id.helpPopupTitle).setText(R.string.help_popup_title)
dialogView.findViewById<TextView>(R.id.helpTips).setText(R.string.help_tips)
val dialog = dialogBuilder.create()
dialog.setCanceledOnTouchOutside(true)
dialogView.findViewById<Button>(R.id.footerButton).setOnClickListener {
dialog.dismiss()
}
dialog.show()
val displayMetrics = DisplayMetrics()
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.R) {
val display = display
display?.getRealMetrics(displayMetrics)
} else {
#Suppress("DEPRECATION")
val display = windowManager.defaultDisplay
#Suppress("DEPRECATION")
display.getMetrics(displayMetrics)
}
val width = displayMetrics.widthPixels
val height = displayMetrics.heightPixels
val popupWidth = width * 0.9
val popupHeight = height * 0.85
dialog.window!!.setLayout(popupWidth.toInt(), popupHeight.toInt())
It is really messy, but so far it works since what I want is a popup that covers most of the screen but not entirely. I've looked in other threads but most just say "just put android:fillViewport="true" and the scroll will fill the parent" but it doesn't work for me, maybe I messed up something while building the popup. Any help?
EDIT: After trying the answer provided by gioravered the weight is actually working and the scroll fills the parent. The only problem is that now the layout is slightly offcentered.
Popup after the edit

Keep your LinearLayout, but add an ID for the root view (mainLayout):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mainLayout"
android:orientation="vertical">
<TextView
android:id="#+id/helpPopupTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="10dp"
android:gravity="center"
android:text="#string/help_popup_title"
android:textColor="?attr/colorOnBackground"
android:textSize="24sp"
android:textStyle="bold" />
<ScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="10dp"
android:layout_weight="1"
android:fillViewport="true">
<TextView
android:id="#+id/helpTips"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/help_tips"
android:textSize="20sp" />
</ScrollView>
<Button
android:id="#+id/footerButton"
style="#style/RoundedButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="10dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="20dp"
android:text="#string/footer_button_text" />
</LinearLayout>
What you did was changing the size of the dialog window.
Instead, let's change the size of the Layout itself.
val dialogView = LayoutInflater.from(this).inflate(R.layout.popup, null)
val dialogBuilder = AlertDialog.Builder(this).setView(dialogView)
val dialog = dialogBuilder.create()
dialog.setCanceledOnTouchOutside(true)
dialogView.findViewById<Button>(R.id.footerButton).setOnClickListener {
dialog.dismiss()
}
dialog.show()
val displayMetrics = DisplayMetrics()
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.R) {
val display = display
display?.getRealMetrics(displayMetrics)
} else {
#Suppress("DEPRECATION")
val display = windowManager.defaultDisplay
#Suppress("DEPRECATION")
display.getMetrics(displayMetrics)
}
val screenWidth = displayMetrics.widthPixels
val screenHeight = displayMetrics.heightPixels
val popupWidth = screenWidth * 0.9
val popupHeight = screenHeight * 0.85
val mainLayout = dialogView.findViewById<LinearLayout>(R.id.mainLayout)
val params = (mainLayout.layoutParams as? FrameLayout.LayoutParams)?.apply {
width = popupWidth.toInt()
height = popupHeight.toInt()
gravity = Gravity.CENTER;
}
mainLayout.layoutParams = params
The change is this line:
dialogView.findViewById<LinearLayout>(R.id.mainLayout).layoutParams =
Since the layout is the parent layout it will determine the size of the dialog.

Click events not working inside Custom PopupWindow

I am using PopupWindow with a custom view having 2 TextViews, I am trying to response against click event but click event is not triggering, following is the code that I am using
/* Get the binding object */
val binding: XYZBinding = XYZBinding.inflate(
LayoutInflater.from(applicationContext),
null,
false
)
binding.clickHandler = this
/* Set the popup menu window */
popupWindow = PopupWindow(binding.root)
popupWindow.contentView = LayoutInflater.from(applicationContext)
.inflate(R.layout.popup_menu_gang, null, false)
popupWindow.isTouchable = true
popupWindow.isFocusable = true
popupWindow.isOutsideTouchable = true
popupWindow.width = WindowManager.LayoutParams.WRAP_CONTENT
popupWindow.height = WindowManager.LayoutParams.WRAP_CONTENT
popupWindow.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
popupWindow.setOnDismissListener(PopupWindow.OnDismissListener {
window.attributes.alpha = alpha
window.addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND)
window.decorView.invalidate()
})
popupWindow.showAsDropDown(binding.layoutHeader.imageViewMenu)
I have also tried a direct onClickListener but it doesn't work as well
binding.textViewGangPopupRenameButtons.setOnClickListener(View.OnClickListener {
Toast.makeText(applicationContext, "working", Toast.LENGTH_SHORT).show()
})
Following is the xml I am using
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<import type="xyz.BaseActivity" />
<variable
name="clickHandler"
type="BaseActivity" />
</data>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_marginEnd="16dp"
app:cardCornerRadius="16dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textViewGangPopupDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:fontFamily="#font/montserrat_medium"
android:onClick="#{(view) -> clickHandler.onClick(view)}"
android:paddingStart="16dp"
android:paddingTop="16dp"
android:paddingEnd="16dp"
android:paddingBottom="8dp"
android:text="#string/delete"
android:textColor="#color/textColorBlue"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textViewGangPopupRenameButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:fontFamily="#font/montserrat_medium"
android:onClick="#{(view) -> clickHandler.onClick(view)}"
android:paddingStart="16dp"
android:paddingTop="8dp"
android:paddingEnd="16dp"
android:paddingBottom="16dp"
android:text="#string/rename_buttons"
android:textColor="#color/textColorBlue"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textViewGangPopupDelete" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</FrameLayout>
</layout>

Set the Id of Your Text View with the PopupView.. Like this
` val layoutInflater = activity!!
.getSystemService(AppCompatActivity.LAYOUT_INFLATER_SERVICE) as
LayoutInflater
val popupView: View =
layoutInflater.inflate(R.layout.custom_grid_bottomnav, null)
val popupWindow = PopupWindow(
popupView,
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT
)
// popupWindow.dismiss()
val tx = popupView.findViewById<TextView>(R.id.text1) //change
tx.setOnClickListener(object : View.OnClickListener {
override fun onClick(v: View?) {
//Do what you want
}
}`

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.

Changing width and height in ConstraintLayout programmatically doesn't work

I would like to change the following UI to be full screen programmatically.
<android.support.constraint.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/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
>
<TextView
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ONE"
android:background="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="#+id/two"
/>
<TextView
android:id="#+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TWO"
android:background="#android:color/holo_blue_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#+id/one"
/>
</android.support.constraint.ConstraintLayout>
In my Kotlin file:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val param = ConstraintLayout.LayoutParams(0, 0)
one.layoutParams = param
two.layoutParams = param
}
}
Both TextView disappears after I set the width and height to 0 instead of being scratched fullscreen.
Desired UI

You're doing it wrong. You've to apply a new ConstraintSet like:
val constraintSet1 = ConstraintSet()
constraintSet1.clone(yourConstraintLayout)
val constraintSet2 = ConstraintSet()
constraintSet2.clone(yourConstraintLayout)
constraintSet2.constrainWidth(R.id.one, 0)
constraintSet2.constrainWidth(R.id.two, 0)
constraintSet2.constrainHeight(R.id.one, 0)
constraintSet2.constrainHeight(R.id.two, 0)
// to switch to full screen
constraintSet2.applyTo(yourConstraintLayout)
// to get back to your original screen
constraintSet1.applyTo(yourConstraintLayout)