Develop Reference

In design, EditText error "Render problem" in android

i have error with EditText is "render problem" in design in android when i drag and drop "Plain Text" from Palette to frame design. But when i run app, app run and show normally in genymotion.
<?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=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
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.122" />
<EditText
android:id="#+id/editTextTextPersonName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="92dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
</androidx.constraintlayout.widget.ConstraintLayout>
thank you!

i solved this by change rendering engine (below the message Rendering problem). Sry. forgot to take a screenshot :P

Best way is to let android studio instruct you what could be possibly done a manner; efficient & standardized for developer by pressing alt+enter or following tip icon & applying the changes.

One thing you need to always remember is that "when you are using drag and drop feature in the android studio you need to extract string resources for every component
see this image of my code
In this code, the text view type is not specified in most cases like you there is an error for Hardcoded string. try to use ALT+Enter for specifically required operation on this particular component.

Android views never becoming invisible

I'm trying to make some of my views invisibe. Here's the XML code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:text="See More Like This"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/recommender"
tools:visibility="invisible"
android:layout_marginEnd="24dp" android:layout_marginRight="24dp" android:layout_marginBottom="20dp"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toTopOf="#+id/imageView"/>
<TextView
android:text="https://www.google.com"
android:layout_width="169dp"
android:layout_height="50dp"
android:autoLink="web"
android:linksClickable="true"
android:id="#+id/urlDisplay"
tools:visibility="invisible"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="24dp" android:layout_marginTop="101dp" android:layout_marginStart="24dp"/>
<TextView
android:text="TextView"
android:layout_width="0dp"
android:layout_height="59dp"
android:id="#+id/comicTitle" tools:visibility="invisible"
android:layout_marginTop="21dp" android:layout_marginBottom="21dp" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/urlDisplay" app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" android:layout_marginLeft="40dp"
android:layout_marginStart="40dp" android:layout_marginEnd="40dp" android:layout_marginRight="40dp"/>
</android.support.constraint.ConstraintLayout>
There is no kotlin code except for the boilerplate. When I start up the app, all of my views are visible. I don't understand how this is happening, given that I've explicitly set them to be invisible in xml.
How can I make them invisible?

Read Tools attributes reference
Android Studio supports a variety of XML attributes in the tools
namespace that enable design-time features (such as which layout to
show in a fragment) or compile-time behaviors (such as which shrinking
mode to apply to your XML resources). When you build your app, the
build tools remove these attributes so there is no effect on your APK
size or runtime behavior.
You should use android:visibility="invisible" instead of tools:visibility="invisible"

As you are using tools
tools:visibility="invisible"
Just replace the tools with the android it start working fine
android:visibility="invisible"

You have used tools:visibility="invisible"
use android:visibility="invisible" to make your view invisible.

In your xml you have set the tools:visibility="invisible" This is basically tools namespace supported in Android Studio
Android Studio supports a variety of XML attributes in the tools namespace that enable design-time features.
When you build your app, the build tools remove these attributes so there is no effect on your APK size or run-time behavior. Hence when you run the app there is no effect of these attributes.
You can read more about tools attributes in official android dev docs
As suggested in comments you should instead set android:visibility="invisible"

What layout elements to use for following type of layout

I am certainly newbie to Andorid Development, and have a knowledge of basic stuff, Relative Layout, Linear Layout, Intent, File Handling etc....
I need to build a project similar to some E-commerce app.
Here's an image of what I want.
How do I achieve the given view of products, as like in blogs or other websites.
Do I have to use List View?
And Please tell what do I have to use to make that "Add Filter Tags" section and how to achieve what I have shown in the picture.

Below is the code which will create skeleton for your UI requirement. You can modify it according to your need.
Your Activity/Fragment xml will look like :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">
<android.support.constraint.ConstraintLayout
android:id="#+id/cl_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<com.google.android.material.chip.ChipGroup
android:id="#+id/entry_chip_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_parent">
</com.google.android.material.chip.ChipGroup>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/entry_chip_group"
/>
</android.support.constraint.ConstraintLayout>
You Adapter xml for RecyclerView will look like:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="wrap_content">
<ImageView
android:id="#+id/iv_product"
android:layout_width="100dp"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Product Name"
app:layout_constraintStart_toEndOf="#id/iv_product"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Product Information"
app:layout_constraintStart_toStartOf="#id/tv_name"
app:layout_constraintTop_toBottomOf="#id/tv_name" />
<TextView
android:id="#+id/tv_more_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="More info"
app:layout_constraintStart_toStartOf="#id/tv_name"
app:layout_constraintTop_toBottomOf="#id/tv_info" />
<TextView
android:id="#+id/tv_data"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data"
app:layout_constraintStart_toStartOf="#id/tv_name"
app:layout_constraintTop_toBottomOf="#id/tv_more_info" />
<TextView
android:id="#+id/tv_tags"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tags"
app:layout_constraintStart_toStartOf="#id/tv_name"
app:layout_constraintTop_toBottomOf="#id/tv_data" />
</android.support.constraint.ConstraintLayout>
You should use Chips for your Filter tag. You can add them dynamically to your chip group. Below is the link for reference.
How to use Android Chips

A ListView would be the "default" way. I would also have a look at RecyclerView (a newer incarnation of the same idea). It handles scrolling and recycling the list elements as you scroll, which are all things you don't really want to do on your own.
You'll probably have a separate layout for the individual cards, probably mostly LinearLayouts (horizontal for image -> content, and then a vertical one to hold the content, and maybe a third horizontal one to list the tags).
For the tags, you might want to take a look at Material Design "chips", but honestly that's the part of this mockup that would have me the most concerned. You can make it look however you want, but I'm not sure what your designer means there exactly. Is that a static list of filtering options? Is that on a new page? In a dialog?
EDIT: And as for the top bar, check out the standard App Bar before reinventing the wheel there.

I would definitely go with Recyclerview or this tutorial for your products(images and the product description...) and FrameLayout for the top that includes logo and stuff and finally a regular RelativeLayout for the tags.

ConstraintLayout Barrier in dynamic feature module fails

I have a ConstraintLayout within an XML layout, it contains 3 views and a Barrier, they are button2, textView2, barrier2, and button3. As expected, button3 is successfully placed under both button2 and textView2, constrained by using barrier2. However it seems fail to refer to the constraining views (button2 and textView2) when used in the dynamic feature module, so that button3 sticks to top.
These screenshots show it is successful is base module, but not working in dynamic feature module:
The XML layouts both in base and dynamic feature are like this:
<?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">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView 2"
app:layout_constraintStart_toEndOf="#id/button2"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="button2,textView2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/barrier2" />
</androidx.constraintlayout.widget.ConstraintLayout>
However, it is success if I set the constraint with code instead of XML:
barrier2.referencedIds = intArrayOf(R.id.button2, R.id.textView2)
How to correctly refer to button2 and textView2 within the XML layout?

Inspecting the (decompiled) source code, I found a (hacky?) solution: by using fully qualified resource ID (package:type/entry). It seems this is not "an official way" since the linter give an error, but it works.
Suppose the app package is com.example.app and the dynamic feature module name is dynfeat, prepend the ID with <package>.<module>:id/ like this:
app:constraint_referenced_ids="com.example.app.dynfeat:id/button2,com.example.app.dynfeat:id/textView2"
I am actually not satisfied with this solution, because code like is hard to maintain, for example, when renaming the dynamic feature module name. So that, the other solution is by subclassing the Barrier class and handle it in the constructor.

Autosizing TextView - can I ignore the unexpected name prefix warning?

I want to use autosizing text in my project and AS doesn't complain when i use the android: prefix. But since I want downwards compatibility, I use the app prefix. It works when the app is running, but the xml preview is buggy and I get the warning Unexpected namespace prefix "app" found for tag TextViewin every line that starts with app:.
Can I simply ignore that?
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.exampleapp">
<TextView
android:id="#+id/text_view_auto_size"
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="Hello World!"
app:autoSizeTextType="uniform"
app:autoSizePresetSizes="#array/autosize_text_sizes"
app:autoSizeMaxTextSize="200dp"
app:autoSizeMinTextSize="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

You have to use an AppCompatTextView instead. Since you're using AppCompat features (which you do by accessing app:* (note that that particular namespace adds custom attributes, but the integrated ones that also are in the app namespace are usually AppCompat)) you have to use the AppCompatTextView as it supports these attributes
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_view_auto_size"
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="Hello World!"
app:autoSizeTextType="uniform"
app:autoSizePresetSizes="#array/autosize_text_sizes"
app:autoSizeMaxTextSize="200dp"
app:autoSizeMinTextSize="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

As it was mentioned in comments, You should only need to manually use AppCompat classes when writing custom views: docs
So, there is no need to use AppCompatTextView instead of TextView inside your xml.
Simply, in your base application folder add lint.xml file and put the following lines into it to ignore "MissingPrefix" errors:
<?xml version="1.0" encoding="utf-8"?>
<lint>
<issue id="MissingPrefix" severity="ignore" />
</lint>
It will be also useful, if you use Calligraphy for example: https://github.com/chrisjenx/Calligraphy/issues/221