Develop Reference

Android - Layout doesn't appear on the device as it appears on the preview

This is the code of the XML file of the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="com.example.barda.wikirace.MainActivity"
android:background="#drawable/backgroundmain"
android:orientation="vertical"
android:weightSum="1"
android:id="#+id/activity_main"
>
<ImageView
android:id="#+id/wikiRaceTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:color/transparent"
app:srcCompat="#drawable/wikiracetop" />
<TextView
android:id="#+id/emptyView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1"
>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"/>
<Button
android:layout_marginBottom="7dp"
android:id="#+id/twoPlayersBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/twoplayersbutton"
/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"/>
<Button
android:layout_marginBottom="7dp"
android:id="#+id/singlePlayerBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/playbutton"
android:onClick="startSinglePlayerMenuActivity"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"/>
</LinearLayout>
</LinearLayout>
This is how it looks in the preview:
And this is how it appears on the device (LG G4):
What can cause the problem?
As you can see, I want the buttons to be on the right color for them.

why don't just use the constraint layout?
if you want to do it in the way you're doing it, you will have to setup the width with a fixed value or match_parent why? because when you say wrap_content and the image is big is going to be over the other views as is happening also you can setup a android:layout_weight for the button if you want to use the weight as "control" for your layout, be coherent with the method that you use to adapt the views.

Design In Android Studio

Is there any way to Design In Android Studio, to Design edittext with multipleScreen support without using padding and margin in .xml?
My code is not supporting the multiple screen(it exceed the screen). Please help me to design a code which support multiple screen inside screen.
mostly desin should not be designed using padding and margine.
<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:orientation="vertical"
android:layout_gravity="center_horizontal|center"
android:gravity="center_horizontal|center_vertical"
android:weightSum="3"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="MOBILE"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_weight="1"
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</RelativeLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"></LinearLayout>

Create your interface by code and set its elements size on px, so you will never have any hardcoded dimension and it will look OK in all screens.
Take a look at this
Hope this helps.

Whenever you are using weights with VERTICAL LinearLayout, give the height of child 0dp.
Try this code:
<?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:weightSum="3">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Mobile"
android:layout_centerInParent="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Mobile"
android:layout_centerInParent="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Mobile"
android:layout_centerInParent="true"/>
</RelativeLayout>
Hope it helps.
Thank you

How can I implement from xml file layout inside the App using Android studio?

I'm beginner in Android. I want implement this graphic layout into an Android App:
How can I generate xml to implement the layout on the picture in Android?

below is your desired layout
<?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:weightSum="3"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:background="#C3C3C3"
android:layout_height="0dp">
<ImageView
android:background="#color/black_color"
android:layout_width="match_parent"
android:src="#drawable/ic_launcher"
android:layout_height="match_parent" />
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_weight="2"
android:background="#FFC90E"
android:layout_height="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:textSize="20sp"
android:text="this is text view which is scrollable"
android:layout_height="match_parent" />
</LinearLayout>
</ScrollView>
</LinearLayout>
The total weight sum of the parent linearlayout is 3 and 1 is assigned to linear layout that contain imageview and 2 is to scroll view you can change the height of these two views by changing the values of 1 and 2 but the sum should not increase more then 3

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="sample text" />
</LinearLayout>
</ScrollView>

Android and weight

Why does the following code only display two colors and not three? How would one fix this?
<?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"
android:weightSum="6"
>
<LinearLayout
android:background="#00ff00"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="3" />
<LinearLayout
android:background="#ff0000"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="2" />
<LinearLayout
android:background="#0000ff"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1" />
</LinearLayout>

Change the layout_height in each of the LinearLayouts to be 0:
android:layout_height="0dp"
Any other height gets in the way of Android's calculations for how much space to give to each layout based on the weights.

Android layout with error "Nested weights are bad for perfomance"

im trying to do this layout above
and here is my code
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.80"
android:orientation="horizontal" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.50"
android:padding="10dp" />
<RelativeLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.50"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.20"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
In ImageView, i got the error "Nested weights are bad for perfomance". I would to understand why this happening and if someone have a better solution for this layout.

The layout_weight attribute is another way of specifying a width or a height in percentage dimensions, and to optimize the calculation of the dimensions you should use 0dp to one of them (the one you are replacing with).
Another optimize tip is to remove the <RelativeLayout></RelativeLayout> that is not being used in your layout.
Please try the solution below:
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.80"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.50"
android:padding="10dp" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.50"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.20"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>

The error "Nested weights are bad for performance" happens because you have a weighted LInearLayout "nested" inside another weighted LinearLayout (see below). In order for Android to perform this it will have to draw the entire screen to get all of the non-nested layout measurements, then draw it all again to calculate the "nested" weighted layouts.
This can be a huge performance hit. However, I built one screen that had 4 layers of nesting and about 100 layouts, including lots of images. Rendering took about 5 milliseconds on newer devices, usually less. So this is really only an issue if you are frequently redrawing the nested layouts (like trying to animation with nested layouts). If you don't see a performance hit that you can measure in your logcat or observe while using your app, don't worry about it. Test thoroughly!
In other words, it's a warning, not an error.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.80"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.50"
android:padding="10dp" />
<!-- THIS IS YOUR NESTED WEIGHTED LAYOUT -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.50"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.20"
android:orientation="vertical" >
</LinearLayout>

I would rather write it as below. Notice using integers instead of fractions:
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="10dp" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>