Develop Reference

Android Layout is messed on Pixel and Nexus phones

I am having this weird behaviour in the images below only on any Google phone, old or new, does not matter it just appears mistakenly. The sad thing is that it appears as expected on the rest of all phones. The annoying thing is that it appears correctly in the design as it appears in the image but everyone knows design never reflect reality in xml, the other annoying thing is that it is so simple, the root is the CoordinatorLayout and the text is just in the root :/
Here is the xml code
<androidx.coordinatorlayout.widget.CoordinatorLayout(This layout is the )
android:layout_width="match_parent"
android:layout_height="match_parent"
app:touchListener="#{0L}"
>
.
.
.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some Text"
android:background="#color/color_primary"/>

Since this is a constraint layout, you should put start, end and top constraints for proper results.
Example code:
<androidx.coordinatorlayout.widget.CoordinatorLayout(This layout is the )
android:layout_width="match_parent"
android:layout_height="match_parent"
app:touchListener="#{0L}"
>
.
.
.
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="Some Text"
android:background="#color/color_primary"/>
Something like this in the proper format would work for you. Happy coding! :)

image isnt showing on layout preview in android studio

Am new to app development , however I have seen multiple sources online that show you how to add an image to your layout
However the image isnt being shown on the layout preview
My code is below
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitStart"
app:srcCompat="#drawable/mm"
tools:layout_editor_absoluteX="132dp"
tools:layout_editor_absoluteY="16dp" />
I just don't know what I'm doing wrong .. I've followed multiple guides but still nothing
Image screenshot of studio showing issue :
https://imgwiz.com/image/gzHD
My PC seems to be having issues freezing occasionally whe Android studio is running so am setting up a VPS with studio on it and will test all these suggestions on the new installation as that may be related to my issue

Use
<android.support.v7.widget.AppCompatImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitStart"
app:srcCompat="#drawable/mm"
tools:layout_editor_absoluteX="132dp"
tools:layout_editor_absoluteY="16dp" />
instead of
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitStart"
app:srcCompat="#drawable/mm"
tools:layout_editor_absoluteX="132dp"
tools:layout_editor_absoluteY="16dp" />
helped me.
You can replace it without any changes in your code.
In addition: Be aware of using
tools:layout_editor_absoluteX="132dp"
tools:layout_editor_absoluteY="16dp"
The namespace tools: means that it only affects your editor preview. As i saw in your screenshot, you are using a ConstraintLayout as parent layout. Consider adding app:layout_constraintBottom_toBottomOf etc to align your ImageView.

it seems that your ImageView's position is not in the viewing area of the Design/BluePrint
so I recommend to switch to Text mode
and add these to your ImageView
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp"
to make it show on the designer when move it to your desired position

How to get whether a layout or at least one of its child elements overflowed in android

I need to implement same view of a page of my website to my android application. I almost created exact seen in my layout but there is only one thing i could not achieved yet. Since my webpage uses CSS, two div which use bootstrap grid system class like;
class="col-sm-12 col-md-6 col-lg-6"
they automatically change the orientation and become row by row from col by col.
But in android i couldn't control this screen size manipulation. I assume that the best criteria is catching the overflowing of my LinearLayouts or at least one their childrens. And if i get this i thing i might be able to change their parents orientation for listing them row by row.
Samples;

So is your web site loaded in webview or you are building native android app?
If it is all about 2nd case, you can use GridLayoutManager, which has a number of columns variable, which can be calculated at runtime.
You can init GridLayoutManager like this :
new GridLayoutManager(Context context, int columnsCount);
U can also create a function that calculates columnsCount depending on your screenSize/orientation/itemSize

you can use Google's flexbox layout library
https://github.com/google/flexbox-layout
Sample:
<com.google.android.flexbox.FlexboxLayout
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"
app:flexWrap="wrap"
app:alignItems="stretch"
app:alignContent="stretch" >
<TextView
android:id="#+id/textview1"
android:layout_width="120dp"
android:layout_height="80dp"
app:layout_flexBasisPercent="50%"
/>
<TextView
android:id="#+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
app:layout_alignSelf="center"
/>
<TextView
android:id="#+id/textview3"
android:layout_width="160dp"
android:layout_height="80dp"
app:layout_alignSelf="flex_end"
/>
</com.google.android.flexbox.FlexboxLayout>

UI of my app gets broken when testing on a phone [Android]

I am trying to do some simple app to practice, and the user interface gets broken for some reason I don't know why when I run test on my phone. I did an app on android only once before and I didn't have this problem, I was using a different phone though. I'm testing this on Samsung Galaxy A5.
That's how it looks in project: http://imgur.com/Pnbg5ns
And that's how it looks on my phone: http://imgur.com/a/uki84
Anyone knows how to resolve this?

All your views have locations set with the tools:... attribute. The locations set this way (using tools:) position the views within the Android Studio editor, and Android Studio editor only. It doesn't do anything at all to position the views for when the app is actually run, that's why all your views are on top of each other, they simply don't have any attributes to indicate their positioning on the screen when the app is run.
You should check tutorials for how to use ConstraintLayout (if you want to use that layout) which is a recent (2016) addition to Android and position your views with the constraints you need. Or you could use some of the older layouts like LinearLayout which should be perfectly fine for your layout needs.
And absolute positioning of the views like you have with the use of the tools:... attribute is also a big no most of the time. Views need to be positioned in some relative way within a layout, which doesn't mean it has to be within a RelativeLayout :), just saying that the views should be positioned in reference to the layout containing them, not just at some absolute point f.e. (150, 110).

This is a very simple layout. You can use LinearLayout instead of ConstraintLayout.
Here is an example using LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="16dp">
<EditText
android:id="#+id/etLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Login"
android:inputType="textPersonName" />
<EditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Hasło"
android:inputType="textPassword" />
<Button
android:id="#+id/bLogin"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Loguj"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="#+id/tvRegister"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Nie masz jeszcze konta? Kliknij tutaj."
android:layout_gravity="center_horizontal"/>
</LinearLayout>
OUTPUT:
Hope this will help~

View too large to fit into drawing cache on Webview inside scrollview

I am working on a scrollview that contain a webview, it works perfect on the 2.3, 4.1 , but when I try it on the 4.4 emulator, it show
View too large to fit into drawing cache, needs 5744640 bytes, only 3932160 available
The webview is just blank.
And it is the layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp" >
<TextView
android:id="#+id/newsTitle"
android:textSize="18sp"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/last_update" />
<WebView
android:id="#+id/newsContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/last_update" />
<TextView
android:id="#+id/newsDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/last_update" />
</LinearLayout>
</ScrollView>
</LinearLayout>
I tried to use mywebView.setDrawingCacheEnabled(false); but it just return the same warning.
Also, I find the problem occur when the webpage is overscreen size , but when I show it , I find the layout of the web is slightly different, on 2.3 , 4.1 , it can simply start the new line if the word is exceed the page, however , in 4.4 it does not , so part of the word is out of the screen .
How to fix it? Thanks

My Suggestion is give layout height to webview so that it wont exceed the your specified height
<LinearLayout
android:id="#+id/webview1"
android:layout_width="fill_parent"
android:layout_height="150dip" >
<WebView
android:id="#+id/sampletxt"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
In your activity just include the below lines
SampleTxt.getSettings().setLoadWithOverviewMode(true);
SampleTxt.getSettings().setJavaScriptEnabled(true);
SampleTxt.loadData("Your Text To show the Webview",
"text/html; charset=UTF-8", null);
It will work fine. any doubts let me know

I suggest you to use your own WebView client. In android we can use WebViewClient or WebChromeClient. Using this you would get better result that you want. Just try it and check.

For WebViews in Android, you should start from the assumption that things are buggy. They shouldn't be, but as you discovered, if you make the background a flat color, it "resolves" the issue.
Having said that, it is still a good idea to keep in mind that you're dealing with a wide range of mobile devices with wildly different processing and memory allocations when you're coding for Android phones, so always be sure to test on a real device.
If you don't have at least 4 or 5 different physical Android devices that you can test on, then look around for services that allow you to use their devices to test remotely. Never believe that because you have tested something in an emulator, it will behave the same on a real device.