Develop Reference

Android Layout with height in percent

I want to make layout like that:
But I don't know how to make panel 2 and 3 filling remaining space (after adding fixed size panel 1) in 50:50 ratio. There must be something I am missing or just don't know about Android layout, but what is it?
I forgot to mention that I want to use Constraint Layout for these panels. I use Android Studio.

Use a LinearLayout and layout_weight
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<View
android:layout_width="match_parent"
android:background="#color/blue"
android:layout_height="16dp" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/black"
android:layout_weight="1"/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/red"/>
</LinearLayout>
The Views can be changed to ConstraintLayouts

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/panel1Layout"
android:layout_width="match_parent"
android:layout_height="100dp" />
<LinearLayout
android:id="#+id/otherPanelContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/panel1Layout"
android:orientation="vertical"
android:weightSum="2">
<RelativeLayout
android:id="#+id/panel2Layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RelativeLayout
android:id="#+id/panel3Layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>

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

Put elements between layouts [ANDROID]

I am doing an user interface in Android.
My idea is divide this interface in three equals parts (this is easy, three layouts with weight), but I want to put a images in interesctions of these layouts.
For example an image that overlapes some space in layout1 and layout2, and the same in 2 and 3.
How can do this? My code:
<LinearLayout 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="fill_parent"
android:orientation="vertical"
android:weightSum="1.0">
<LinearLayout
android:id="#+id/first"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.33">
</LinearLayout>
<LinearLayout
android:id="#+id/second"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.33"></LinearLayout>
<LinearLayout
android:id="#+id/third"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.33"></LinearLayout>
</LinearLayout>
And my idea: Android: Placing ImageView on overlap between layouts
Thanks

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="6.0" >
<LinearLayout
android:id="#+id/first"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/second"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/third"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="6.0" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0"
android:orientation="vertical" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/firstDividerLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.0" >
<ImageView
android:id="#+id/firstDividerImageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/secondDividerLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.0" >
<ImageView
android:id="#+id/secondDividerImageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0" >
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
Note that I wrapped your original LinearLayout in RelativeLayout and then I added another LinearLayout with 'dividers'. Dividers size is set by weights precisely so that it overlays your sections in the center.
This is the result (if you set red background for your 'second' layout):

Three options:
Make the view in between also percent. i. e. Each of your
LinearLayouts gets a weight of 0.30 and your views in between get a
weight of 0.05
Put the view on top of your LinearLayout 2 and 3 (not exactly same
height of each of them then)
Do it programmatically, in code set the height of each of them.

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 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>