Using Constraint Layout in Jetpack Compose Desktop - android

I have a new Jetpack Compose desktop project in Intellij setup using the new project wizard. I would like to use ConstraintLayout like in Android, so I add the following line
implementation("androidx.constraintlayout:constraintlayout:2.1.4")
in the build.gradle, like so:
sourceSets {
val jvmMain by getting {
dependencies {
implementation(compose.desktop.currentOs)
implementation("androidx.constraintlayout:constraintlayout:2.1.4")
}
}
val jvmTest by getting
}
However I still can't access constraint layout.
Based off the answer in this question, it seems like it is possible to use constraint layout in desktop. What am I doing wrong?

ConstraintLayout is currently (Feb 2023) not implemented for Jetpack Compose Desktop

Related

Which is better way to declare color between in resource file and assign a color to val directly when I use Jetpack Compose?

When I create a new Jetpack Compose project using the Android Studio wizard, I find color in both the resource XML file and Kotlin file.
I need to use colors for both Compose fun and Non compose fun, which is the better way between Code A and Code B?
Code A
val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
Code B
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
</resources>
If the project has both Jetpack compose code and view-based code.
Use the colors directly from the XML resource file.
colorResource
colorResource(R.color.purple_200)
The above code can access the XML color resources from Compose functions.
This way is okay if you are migrating a View-based project to Jetpack Compose.
But, if you are starting a new complete Compose project or after complete migration of a view-based project to Jetpack compose, it is recommended to use the colors from the Colors.kt file.
Note:
This answer is not opinion based.
Jetpack compose can access colors from XML resources properly.
But the other way (accessing color using code in a View-based system) is not possible.
We have to consider the component theme, feature theme, dark or light mode, etc as well.

Nativescript placeholder-color style on TextField doesn't work

How can I set the placeholder-color on a TextField in Nativescript (6.1.2) with Angular and nativescript-theme-core (2.0.24)?
I've tried setting _app-common.scss
TextField {
placeholder-color: red;
}
but that doesn't work.
This playground with angular works however: https://play.nativescript.org/?template=play-ng&id=x9Gf79&v=2 but it has another file structure than my project.
It also works if I do this instead:
.input {
placeholder-color: red;
}
I also found some variables that I tried to override that didn't work either:
_app-variables.scss
$text-field-hint-color: red !default;
$placeholder-color: red !default;
Why doesen't it work when I try to style the TextField? And what is the correct way to do this?
#jarrodwhitley have reason is working implementing like this:
<TextField style="placeholder-color:white" [(ngModel)]="userName" hint="User Name..." color="white">
It isn't super clear, but looking at the documentation it appears that placeholder-color is a "Root View CSS Class". Meaning, you wouldn't set it directly on the text field itself, but on the top-level view which contains it.
https://docs.nativescript.org/ui/styling#user-interface-styling
I would have totally expected that it would need to be set on the element that I was trying to style. I suspect that this means that all text fields within a given view have to have the same styling.
Hope this helps!

Prevent android studio to create more than a tag in xml files

In the new android studio 3.3 or 3.2 if we create a for example button auto generate create a text like
<Button android:layout_width="" android:layout_height=""/>
but I would like something more like this
<Button
android:layout_width=""
android:layout_height=""/>
like old versions of Android studio is there a setting or something for that?
That is related to XML code wrapping. By default it should be on wrap always but maybe it's not in your Android Studio or they changed that in newer versions. Anyway you can find that by click on:
Preferences -> Code Style (expand it) -> XML -> Android(Tab) ->
Here you can find Layout Files and below options like: Wrap always, Don't wrap, Wrap if long etc. So set it on Wrap always and Apply changes and your XML code from now on should be wrapped.
It hints something that says reduce intent with 4 spaces. Try to configure that :)
Or use the hard way by pressing enter for the new row.

Using android vector Drawables on pre Lollipop crash

I'm using vector drawables in android prior to Lollipop and these are of some of my libraries and tool versions:
Android Studio : 2.0
Android Gradle Plugin : 2.0.0
Build Tools : 23.0.2
Android Support Library : 23.3.0
I added this property in my app level Build.Gradle
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
It is also worth mentioning that I use an extra drawable such as LayerDrawable(layer_list) as stated in Android official Blog (link here) for setting drawables for vector drawables outside of app:srcCompat
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/search"/>
</level-list>
You’ll find directly referencing vector drawables outside of
app:srcCompat will fail prior to Lollipop. However, AppCompat does
support loading vector drawables when they are referenced in another
drawable container such as a StateListDrawable, InsetDrawable,
LayerDrawable, LevelListDrawable, and RotateDrawable. By using this
indirection, you can use vector drawables in cases such as TextView’s
android:drawableLeft attribute, which wouldn’t normally be able to
support vector drawables.
When I'm using app:srcCompat everything works fine, but when I use:
android:background
android:drawableLeft
android:drawableRight
android:drawableTop
android:drawableBottom
on ImageView, ImageButton, TextView or EditText prior to Lollipop, it throws an expection:
Caused by: android.content.res.Resources$NotFoundException: File res/drawable/search_toggle.xml from drawable resource ID #0x7f0200a9
LATEST UPDATE - Jun/2019
Support Library has changed a bit since the original answer. Now, even the Android plugin for Gradle is able to automatically generate the PNG at build time. So, below are two new approaches that should work these days. You can find more info here:
PNG Generation
Gradle can automatically create PNG images from your assets at build time. However, in this approach, not all xml elements are supported. This solution is convenient because you don't need to change anything in your code or in your build.gradle. Just make sure you are using Android Plugin 1.5.0 or higher and Android Studio 2.2 or higher.
I'm using this solution in my app and works fine. No additional build.gradle flag necessary. No hacks is necessary. If you go to /build/generated/res/pngs/... you can see all generated PNGs.
So, if you have some simple icon (since not all xml elements are supported), this solution may work for you. Just update your Android Studio and your Android plugin for Gradle.
Support Library
Probably, this is the solution that will work for you. If you came here, it means your Android Studio is not generating the PNGs automatically. So, your app is crashing.
Or maybe, you don't want Android Studio to generate any PNG at all.
Differently from that "Auto-PNG generation" which supports a subset of XML element, this solution, supports all xml tags. So, you have full support to your vector drawable.
You must first, update your build.gradle to support it:
android {
defaultConfig {
// This flag will also prevents Android Studio from generating PNGs automatically
vectorDrawables.useSupportLibrary = true
}
}
dependencies {
// Use this for Support Library
implementation 'com.android.support:appcompat-v7:23.2.0' // OR HIGHER
// Use this for AndroidX
implementation 'androidx.appcompat:appcompat:1.1.0' // OR HIGHER
}
And then, use app:srcCompat instead of android:src while loading VectorDrawables. Don't forget this.
For TextView, if you are using the androidx version of the Support Library, you can use app:drawableLeftCompat (or right, top, bottom) instead of app:drawableLeft
In case of CheckBox/RadioButton, use app:buttonCompat instead of android:button.
If you are not using the androidx version of the Support Library and your minSdkVersion is 17 or higher or using a button, you may try to set programmatically via
Drawable icon = AppCompatResources.getDrawable(context, <drawable_id>);
textView.setCompoundDrawablesWithIntrinsicBounds(<leftIcon>,<topIcon>,<rightIcon>,<bottomIcon>);
UPDATE - Jul/2016
They re-enabled that VectorDrawable in
Android Support Library 23.4.0
For AppCompat users, we’ve added an opt-in API to re-enable support Vector Drawables from resources (the behavior found in 23.2) via AppCompatDelegate.setCompatVectorFromResourcesEnabled(true) - keep in mind that this still can cause issues with memory usage and problems updating Configuration instances, hence why it is disabled by default.
Maybe, build.gradle setting is now obsolete and you just need to enable it in proper activities (however, need to test).
Now, to enable it, you must do:
public class MainActivity extends AppCompatActivity {
static {
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}
...
}
Original Answer - Apr/2016
I think this is happening because Support Vector was disabled in the latest library version: 23.3.0
According to this POST:
For AppCompat users, we’ve decided to remove the functionality which let you use vector drawables from resources on pre-Lollipop devices due to issues found in the implementation in version 23.2.0/23.2.1 (ISSUE 205236). Using app:srcCompat and setImageResource() continues to work.
If you visit issue ISSUE 205236, it seems that they will enable in the future but the memory issue will not be fixed soon:
In the next release I've added an opt-in API where you can re-enable the VectorDrawable support which was removed. It comes with the same caveats as before though (memory usage and problems with Configuration updating).
I had a similar issue. So, in my case, I reverted all icons which use vector drawable from resource to PNG images again (since the memory issue will keep happening even after they provide an option to enable it again).
I'm not sure if this is the best option, but it fixes all the crashes in my opinion.
I had the same problem.
But doing a lot of R&D I got the answer.
For Imageview and ImageButton use,app:srcCompat="#drawable/...."
and for other views like Button, Textview, instead of using "drawableLeft/right..." in the XML, specify drawables programmitically as :
button.setCompoundDrawablesWithIntrinsicBounds(AppCompatResources.getDrawable(mContext,R.drawable.ic_share_brown_18dp), null, null, null);
And use "AppCompatResources" to get the drawable.
To elaborate on the other very good answers, here is a diagram that can help you. It is valid if you have Support Library from 23.4.0 to at least 25.1.0.
The answer from Guillherme P is pretty awesome. Just to make a small improvement, you don't need to add that line in every activity, if you added it once in the Application class it will work as well.
public class App extends Application {
static {
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}
REMEMBER: You still need to have enabled the use of the support library in gradle:
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
Also, make sure you are using a support library version greater than v23.4, when Google added back the support for Drawable Containers for VectorDrawables (release note)
Update
And for code changes:
Make sure to update to app:srcCompat every place that accepts the android:src attribute (the IDE will warn you if it's invalid like for the <bitmap> tag).
For drawableLeft, drawableStart, drawableRight, drawableEnd attributes used in TextView and similar views, you will have to set them programmatically for now. An example of setting drawableStart:
Drawable drawable = AppCompatResources.getDrawable(
getContext(),
R.drawable.your_vector_drawable);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
textView.setCompoundDrawablesRelativeWithIntrinsicBounds(drawable, null, null, null);
}
I had the same problem. And fix it by removing
vectorDrawables.useSupportLibrary = true
My target version is 25 and support library is
compile 'com.android.support:appcompat-v7:25.3.1'
VectorDrawables on pre-lollipop should work fine without using
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
If you want to use VectorDrawables inside ImageViews, you can use the attribute srcCompat and it will work, but inside Buttons or TextViews it won't, so you need to wrap the Drawable into an InsetDrawable or a LayerDrawable. There is another trick I discovered, if you are using data binding, you could do this:
android:drawableLeft="#{#drawable/vector_ic_access_time_24px}"
android:drawableStart="#{#drawable/vector_ic_access_time_24px}"
That will magically work, I haven't investigated what's happening behind the scenes, but I guess the TextView is using the getDrawable method from the AppCompatResources or similar.
Lot of R & d, finally getting this solution for crashes on pre-lollipop devices.
For Imageview
use app:srcCompat instead of android:src
For TextView/EditText
Remove drawableleft,drawableright.... and set from drawable java code.
txtview.setCompoundDrawablesWithIntrinsicBounds(AppCompatResources.getDrawable(EventDetailSinglePage.this,
R.drawable.ic_done_black_24_n), null, null, null);
For Build.gradle
vectorDrawables.useSupportLibrary = true
Easiest way use :
app:drawableRightCompat ="#drawable/ic_mobilelogin"
app:drawableEndCompat="#drawable/ic_mobilelogin"
app:srcCompat="#drawable/ic_mobile"
and... just use app:**Compatfor compatability.
Also add support on build.gradle (module)
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
For anyone who upgrade to android gradle 3.0 and above, there is no need to use AppCompatDelegate.setCompatVectorFromResourcesEnabled(true), or set vectorDrawables.useSupportLibrary = true (add this will cause problem) and use app:srcCompat, it just works.
Take me two days to figure this out, and have not find any related docs in google's docs...
After using the below code.
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
public class App extends Application {
static {
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}}
still, vector images issue exists for below attributes are
DrawableEnd,
DrawableStart,
DrawableTop,
DrawableBottom,
Background
In this case, please follow as below, Instead of referencing vector image directly use selector tag as an intermediate drawable file.
Example:
ic_warranty_icon.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="17dp"
android:height="24dp"
android:autoMirrored="true"
android:viewportWidth="17"
android:viewportHeight="24">
<path
android:fillColor="#fff"
android:pathData="M10.927,15.589l-1.549,0.355a7.47,7.47 0,0 1,-0.878 0.056c-4.136,0 -7.5,-3.364 -7.5,-7.5s3.364,-7.5 7.5,-7.5 7.5,3.364 7.5,7.5c0,3.286 -2.126,6.078 -5.073,7.089zM8.5,2a6.508,6.508 0,0 0,-6.5 6.5c0,3.583 2.917,6.5 6.5,6.5s6.5,-2.917 6.5,-6.5 -2.917,-6.5 -6.5,-6.5z" />
safe_ic_warranty_icon.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_warranty_icon" />
</selector>
Your TextView/Layout.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_warranty_icon"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_warranty_icon"
/>
I am using VectorDrawables on Pre-lollipop devices and this is how I do it :-
Step 1:
Put this in your app level gradle.
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
Step 2:
Put this in your Application class and don't forget to register your Application class in the manifest file.
public class App extends Application {
static {
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}
}
Step 3:
Get VectorDrawables using,
imageView.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.my_vector_drawable));
We tried 3 things
vectorDrawables.useSupportLibrary = true
Setting setCompatVectorFromResourcesEnabled in Application class
static {
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}
And use app:srcCompat
But even after that it was failing with
Resources$NotFoundException: File res/drawable/$my_icon__0.xml from color state list resource ID #0x7f080008
then we figured out that our SVG had a Gradient tag.
Converting the gradient tag to individual paths for below API <= 23 and using the same SVG API >= 24 worked.
Got help from this answer https://stackoverflow.com/a/47783962/2171513
I was struggling with this for hours.
I tried everything these answers told me to, but my app didn't stop crashing. I deleted this line: app:srcCompat="#drawable/keyboard" and my app stopped crashing. and then when I added this same thing back, it started crashing again. So I decided to open that file and I saw an error at the first line saying
"The drawable 'Keyboard' has no declaration in the base drawable
folder; this can lead to crashes.
I right-clicked the file and clicked "Show in explorer" and it was not in the drawable folder but in the drawable-v24 directory. So I copied it and pasted to the drawable directory and finally got rid of crashes.
Simply overlap vector drawable to state-list then problem will be solved
For example you have back arrow vector image:
ic_back_arrow.xml
yes, you should overlap it to layer list xml (ic_back_arrow_vector_vector.xml):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_back_arrow"/>
</layer-list>
Because logic:
vectorDrawables.useSupportLibrary = true
and
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
will not help you on the some China devices and older samsung devices. If you do not overlap them, it will fail.
In my case, I was using a TabLayout, which I configured as it :
TabLayoutMediator(tabLayout!!, viewPager!!) { tab, position ->
if (position == 0)
tab.icon = ResourcesCompat.getDrawable(resources, R.drawable.ic_list, theme)
else
tab.icon = ResourcesCompat.getDrawable(resources, R.drawable.ic_building_map, theme)
}.attach()
The app was crashing at line tab.icon = ...
I change these to tab.setIcon(R.drawable.my_vector_asset), as it :
TabLayoutMediator(tabLayout!!, viewPager!!) { tab, position ->
if (position == 0)
tab.setIcon(R.drawable.ic_list)
else
tab.setIcon(R.drawable.ic_building_map)
}.attach()
And it worked !
Guilherme P's suggestion was not working for me. I went ahead and made the decision to use png's where I need to do things outside of app:srcCompat i.e. drawableLeft, drawableRight, etc. This was a pretty easy change to make, and doesn't have the potential memory issues AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
introduces.
An alternative to Benny's answer is to create an Activity superclass:
public abstract class VectorDrawableActivity extends AppCompatActivity {
static {
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}
//...
}
Now extend VectorDrawableActivity instead of AppCompatActivity.

Add a view shadow on android with appcelerator

i tried to put a shadow to my view on android, but i failed. I need to have a simply shadow like (and like iOS viewShadow property):
For Android you can use the Material Design cardviews, you can read about it here: http://www.appcelerator.com/blog/2015/11/titanium-5-1-0-sample-app/ which includes a sample app.
Documentation here: http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Android.CardView
var card = Ti.UI.Android.createCardView({
contentPadding: 20,
cardCornerRadius: 10,
cardUseCompatPadding: true
});
Most importantly, use the elevation property: http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Android.CardView-property-elevation
This requires TiSDK 5.1.2 or higher, which was released yesterday

Categories

Resources