Insert n Items in a Gridlayout responsively - android-gridlayout

I want to insert a variable number of ImageButtons into a Gridlayout.
(1) My first Idea would be doing this repetition in xml like
<GridLayout>
<RepeatNTimes n="#/class/property">
<ImageButton \>
</RepeatNTimes>
</GridLayout>
But I don't know such a Tag.
(2) The next Idea would be to use a separate xml-File for the ImageButtons. This does not work easily, because they need Grid-Layout-Specific attributes.
<android.support.v7.widget.GridLayout
android:id="#+id/xmlgrid"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:columnCount="2">
Necessary parameters for ImageButton.
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:adjustViewBounds="true"
app:layout_columnWeight="1"
android:background="#android:color/transparent"
android:scaleType="fitXY"
app:srcCompat="#drawable/ic_peg_2" />
(3) Another Idea would be to insert everything programmatically, which is certainly not the most elegant way. But I did not get the Parameters working correctly
ImageButton b = new ImageButton(getContext());
b.setImageResource(Const.BLACK_PEG);
b.setBackgroundColor(Color.TRANSPARENT);
b.setAdjustViewBounds(true);
b.setScaleType(ImageButton.ScaleType.FIT_XY);
// Layout Params
GridLayout.LayoutParams p = new GridLayout.LayoutParams();
p.columnSpec = GridLayout.spec(GridLayout.UNDEFINED, 1, 1f);
b.setLayoutParams(p);
xmlgrid.addView(b);
Wrong position when adding button programmatically

Related

Wrap Content UILabel in xCode

I am trying to make a cell that will have two UILabels at the same line.
Like this:
User Name: blablabla
Where User Name is the first UILabel and blablabla is the second UILabel.
I want the first UILabel to be wrap content and the second one to have its content extended until the super view's trailing.
I tried to look for an answer to my question around StackOverflow, but I could not find one. Does someone know how can I achieve that?
I want something just like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/first_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="User Name:"/>
<TextView
android:id="#+id/second_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="bla bla bla"/>
</LinearLayout>
or like this
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/first_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="User Name:"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/second_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="bla bla bla"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/first_label"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
Try to change content compression resistance priority
Look at these snapshots:
Labels with default content compression resistance priority
I changed content compression resistance priority for label blablabla blablabla, from 750 to 749.
Result is:
you can do this by :
yourLabel.lineBreakMode = NSLineBreakMode.byWordWrapping
You should try the following solution.
For first label.
Add top, left, bottom, width constraint.
Now set number of lines to 0 and Autoshrink to Minimum font size shown as below. You should set your required minimum font size.
For second label
Add top, left, bottom, right.
Now set number of lines to 0 and Autoshrink to Minimum font size shown as below. You should set your required minimum font size.
These changes will make first label's font autoshirnk upto your minimum font size. And will also make the second label to extent the content.

Corrupt Graphics on Pixel XL and Xiaomi Mi 6

I have a minimal sample project that produces corrupt graphics on a Google Pixel XL and a Xiaomi Mi6, but works correctly on a Samsung Galaxy S6.
Setting android:hardwareAccelerated=false fixes the corrupt graphics but leads to issues with animations and scrolling leaving trails.
The sample project uses MvvmCross, however I have been able to reproduce the behaviour without MvvmCross.
The project code can be found at https://github.com/stevedcc/Xamarin_Broken_Graphics.git
View:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/mainLogo"
android:src="#drawable/company_logo_1"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:adjustViewBounds="true" />
<ImageView
android:id="#+id/main_image"
android:layout_width="wrap_content"
android:layout_height="350dp"
android:layout_below="#drawable/main_image1"
android:adjustViewBounds="true"
android:src="?attr/main_image"/>
<TextView
android:id="#+id/mainScanText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/main_image"
android:gravity="center"
android:textSize="24sp"
android:text="Title" />
</RelativeLayout>
Styles:
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<attr name="company_logo" format="reference" />
<attr name="main_image" format="reference"/>
<attr name="company_color" format="reference" />
<attr name="splash_background" fromat="reference" />
<color name="company_color_1">#7f7f7f</color>
<style name="CompanyTheme"
parent="#android:style/Theme.Material.NoActionBar">
<item name="company_logo">#drawable/company_logo_1</item>
<item name="main_image">#drawable/main_image1</item>
<item name="android:colorBackground">#000000</item>
<item name="company_color">#color/company_color_1</item>
</style>
</resources>
Expected Result as displayed by a Galaxy S6
Actual Result as displayed by a Pixel XL
Can anyone tell me how to fix the Corrupt graphics?
I found the answer myself:
<item name="android:colorBackground">#000000</item>
leads to the issue, if replaced by
<item name="android:colorBackground">#android:color/black</item>
then the project works.

How to set different font size for text of label nodes in gexf format

I'm having a problem with label size. I need my graph to show text of node labels with different font sizes.
This is not work:
<node id="155" label="text text" font-size="10000px">
viz:color r="0" g="255" b="0"/>
</node>
And this make another size for node and not for text of label:
<node id="155" label="text text">
<viz:color r="0" g="255" b="0"/>
<viz:size value="17"/>
</node>
Thanks!
There is no way to specify node label font sizes in gexf. This is not covered by the specification. Perhaps the reason is that you can modify this from within Gephi to match your preferences

How can I trace an image to generate an SVG pattern?

I have an image (in jpg and svg format) that I'd like to generate a pattern I can use as a fill for an SVG image I am working on. Is there any tool or technique to accomplish this?
Sure just put the image (jpg or svg) in a pattern.
<defs>
<pattern id="image1" width="100%" height="100%">
<image xlink:href="image.jpg" width="100" height="100" />
</pattern>
</defs>
Then you can use it as a fill attribute like this: fill="url(#image1)" />

LinearGradient for path SVG

I need to fill a path which is created dynamically using javascript. I've created a gradient for that and used that to fill my path, but nothing happened. What's wrong with my code?
$('svg').prepend('<defs id="gradient"></defs>');
$('#gradient').append('<linearGradient id="yellow" x1="0%" y1="0%" x2="100%" y2="0%"> </linearGradient>');
$('#yellow').append('<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />');
$('g:nth-child(2n+1) path').attr('fill','url(#gradient)');`
Your fill points to a defs element and not the linearGradient. The id="gradient" should be on the linearGradient element - or alternatively make the fill url(#yellow)

Resources