Develop Reference

Android Studio XML Widgets not rendering properly in designer

Recently, while working on some projects, I've had a rather annoying problem when coding the user interface of my application. The problem is, some controls (usually a floating action button or a regular button) render strangely. It's hard for me to explain exactly how it looks - but here's an example of how it shows the floating action button to look like in the designer:
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".MainActivity">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:src="#drawable/ic_baseline_add_24"
android:layout_height="wrap_content"/>
</LinearLayout>
Now, the thing is, I don't have any weird or special code added, the XML code is as pure as it gets, so I have no idea why I am having these strange rendering problems.
Here is how it rendered the following button:
Code:
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_gravity="bottom"
android:textAllCaps="false"
android:layout_margin="30dp"
app:cornerRadius="30dp"
android:id="#+id/submitButton"
android:backgroundTint="#color/turquoise"
/>
Image:
A solution would be greatly appreciated!
Cheers,
Tom

Solution is simple u just need to restart your android rendering engine. I provided Image for your context . In android studio top right corner above layout display there is Toggle issue panel click on that and u will see one box in the bottom showing rendering issue restart rendering engine and that will restart your android studio. and u good to go. try this solution and let me know your issue is solved or not.
note: In my Image I already restarted so there is no option for restart rendering engine .but in yours's U may be find hope so.
Image

AndroidStudio ConstrainLayout not working

I am beginner in android studio and having headache with this if someone could help me am i missing something?.... I have problem with Constraint layout, the problem is i put some element(ImageView, Button it does not mater) in layout and constraint it to parent but when I run it in emulator it just is not showing. also it is not showing me those buttons under elements connect BaseLine and remove Constrains for that element.
"screenShot":
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="343dp"
android:layout_height="118dp"
android:layout_marginTop="10dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_c`enter code here`onstraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/backgrounds/scenic[7]" />
</android.support.constraint.ConstraintLayout>

when i run it in emulator it just is not showing
The problem is here :
tools:srcCompat="#tools:sample/backgrounds/scenic[7]"
You need to understand what tools is, so I recommend to you to read a little bit the documentation.
Just a note of it :
It's a 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.
Instead you have to use to show it on the emulator.
app:srcCompat="#drawable/your_drawable"
Note: remember to add : xmlns:app="http://schemas.android.com/apk/res-auto"

I found the solution.it's difrent in new Android Studio 3.4, You have to Right click on element and option Show Base Line is there now.

Simple but serious issue with Tablet programming for android

So I'm taking the course by Google "Developing Android Apps" and I am stuck since I ran into a serious problem I can't explain:
See,their idea is to have a different layout file for tablets under the folder res\layout-sw600dp so that if the minimum height/width of the device is 600dips then there will be a different layout inflated.
The only problem is that for some reason that assertion doesn't work, not for their code nor for the simple code i added here,at least not for an AVD tablet (I've used Nexus 10 with api 21).
For example the following code shows "Phone!" on the toast rather than "Tablet!":
public class MainActivity extends AppCompatActivity {
static final String TABLET="Tablet!";
static final String PHONE="Phone!";
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String foundDeviceStr;
if(findViewById(R.id.weather_detail_container)==null){
foundDeviceStr=PHONE;
} else{
foundDeviceStr=TABLET;
}
Toast toast=Toast.makeText(this,foundDeviceStr,Toast.LENGTH_LONG);
toast.show();
}
}
When the xml file under the folder layout-sw600dp does have a frame with the id weather_detail_container.
I will add both xml files that I created at the bottom of the email, but you can also try out branch 5.10 from the following Google project- it doesn't load a two panes as it should:
https://github.com/udacity/Sunshine-Version-2/tree/5.10_selected_item, again at least not for any AVD devices (I have a physical android phone but not a physical tablet).
For the question to be complete here are the two xml files:
under the folder layout this is activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Whatever"/>
</LinearLayout>
and under the folder layout-sw600dp this is activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:divider="?android:attr/dividerHorizontal"
android:orientation="horizontal"
tools:context="com.example.android.sunshine.app.MainActivity">
<!--
This layout is a two-pane layout for the Items master/detail flow.
-->
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:text="Whatever" />
<FrameLayout
android:id="#+id/weather_detail_container"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4" />
</LinearLayout>

You need to ask/get the SCREENLAYOUT_SIZE_MASK that is the key...
I have tried ONLY on samsung devices but it was pretty accurate....
Example:
Context myAppContext = ...//load the context here...;
boolean amATablet = (myAppContext.getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) >= Configuration.SCREENLAYOUT_SIZE_LARGE;
if (amATablet) {
//Hello Tablet
}else{
//hello Phone
}

OK guys,so I just got a viable answer to my question:
Simply uncheck "enable device frame" in emulator settings!
If you need further assistance you can use this link:
How to remove the device's frame on Android Studio's emulators
Having said all that, I am not sure WHY that works. After all,the definition of this setting is: "Enable a frame around the Android emulator window that mimics the look of a real android device", so that SHOULD change only the looks according to my understanding. So if anyone knows why, please do post a further answer or comment :)

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.

Unwanted space between two ImageView on android

Im using this Layout to put two ImageViews one next to the other, but the two images seems to be separated by 1 transparent pixel space.
The blue background is there to make easier to observe the problem...
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#0000FF">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="5dip">
<ImageView
android:src="#drawable/i_position_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:src="#drawable/i_position_seekbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
The .java is:
public class MainActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.main);
}
}
Im using a device with android 2.2.
I wasnt able to reproduce the glitch on a 2.1-update1 emulator neither on a 1.6 emulator...
Ive checked the images and they have no extra pixels arround them.
Also i tried adding a red 1px width border on the images separately and the glitch is still there, so the images dont seem to be the problem.
These are the problematic images (correctly shown here):
http://dl.dropbox.com/u/7024937/i_position_icon.png
http://dl.dropbox.com/u/7024937/i_position_seekbar.png
And this is what i see in my device:
Thanks.

Sounds strange because I use the same technique in my project and everything seems to be OK. Do you put your drawables into the correct drawable folder. I mean that you should put your images in drawable-hdpi folder if your device has hdpi screen. Sorry, but it's the only thought that came into my mind.

strange, what version SDK are you targeting? i copied your layout and code and made a new project with api level 3 (1.5) and tested it on a 1.5 and 2.2 emulator. On both it worked fine without any spacing.