how to create android application layout with multiple screen supports? - android

This is my xml file. i am new to android development. I need to know how can i modified this layout into responsive for multiple screen sizes of the phones? I have created directories as layout-normal, layout-large, layout-xlarge. but it is not working properly. I used sp for textviews and dp for other widgets. That is also not working. Please help me to modify this xml code.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#drawable/background"
tools:context="com.respectcab.app.MainActivity"
tools:openDrawer="start"
tools:ignore="MissingDefaultResource">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/design_default_color_primary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/AlertDialog.AppCompat.Light" />
<android.support.constraint.ConstraintLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
tools:ignore="ExtraText"><![CDATA[
tools:context=".MainActivity">
]]>
<Button
android:id="#+id/driver"
android:layout_width="145dp"
android:layout_height="58dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:layout_toEndOf="#+id/logout"
android:layout_toRightOf="#+id/logout"
android:text="Start Trip"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/logout"
app:layout_constraintTop_toBottomOf="#+id/cus_mobile"
app:layout_constraintVertical_bias="1.0"
tools:ignore="MissingConstraints" />
<Button
android:id="#+id/logout"
android:layout_width="145dp"
android:layout_height="58dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginBottom="8dp"
android:text="Logout"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cus_mobile"
app:layout_constraintVertical_bias="1.0"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/driver_id_main"
android:layout_width="91sp"
android:layout_height="55sp"
android:layout_below="#+id/driver_mobile"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginStart="33sp"
android:layout_marginLeft="33sp"
android:layout_marginTop="231sp"
android:layout_marginBottom="461sp"
android:text="TextView"
android:visibility="invisible"
app:layout_constraintBottom_toTopOf="#+id/cus_email"
app:layout_constraintEnd_toStartOf="#+id/driver_total_earn"
app:layout_constraintHorizontal_bias="0.44"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/driver_mobile"
app:layout_constraintVertical_bias="0.765"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/driver_total_earn"
android:layout_width="65sp"
android:layout_height="44sp"
android:layout_below="#+id/driver_mobile"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginStart="65sp"
android:layout_marginLeft="65sp"
android:layout_marginBottom="461sp"
android:layout_toEndOf="#+id/driver_id_main"
android:layout_toRightOf="#+id/driver_id_main"
android:text="TextView"
android:visibility="invisible"
app:layout_constraintBottom_toTopOf="#+id/cus_email"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
<EditText
android:id="#+id/cus_mobile"
android:layout_width="398dp"
android:layout_height="53dp"
android:layout_below="#+id/cus_email"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:hint="Customer Mobile No"
android:text=""
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cus_email"
tools:ignore="MissingConstraints" />
<EditText
android:id="#+id/cus_email"
android:layout_width="404dp"
android:layout_height="69dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="108dp"
android:hint="Customer Email"
android:text=""
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/spinner_package"
tools:ignore="MissingConstraints" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="128dp"
android:layout_height="91dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginStart="115dp"
android:layout_marginLeft="115dp"
android:layout_marginEnd="130dp"
android:layout_marginRight="130dp"
android:src="#mipmap/ic_user_profile"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.407"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/driver_name"
android:layout_width="312sp"
android:layout_height="50sp"
android:layout_below="#+id/imageView3"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:gravity="center_horizontal"
android:text="TextView"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/driver_mobile"
android:layout_width="177sp"
android:layout_height="33sp"
android:layout_below="#+id/driver_name"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginStart="124sp"
android:layout_marginLeft="124sp"
android:layout_marginTop="12sp"
android:layout_marginEnd="147sp"
android:layout_marginRight="147sp"
android:gravity="center_horizontal"
android:text="TextView"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.492"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/driver_name" />
<Switch
android:id="#+id/switch1"
android:layout_width="43dp"
android:layout_height="22dp"
android:layout_below="#+id/driver_mobile"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:scaleX="2.5"
android:scaleY="2.5"
android:textOff="Turn On"
android:textOn="Turn Off"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.472"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/driver_mobile"
tools:ignore="MissingConstraints" />
<Button
android:id="#+id/button1"
android:layout_width="68dp"
android:layout_height="42dp"
android:layout_alignTop="#+id/textView1"
android:layout_centerHorizontal="true"
android:text="Click Here to Enable Disable GPS location service!"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.958"
app:layout_constraintStart_toEndOf="#+id/textView1"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/textView1"
android:layout_width="248sp"
android:layout_height="37sp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="location service Stauts Shows Here"
android:textAppearance="?android:attr/textAppearanceLarge"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="326dp"
tools:layout_editor_absoluteY="142dp"
android:visibility="invisible"/>
<!--<android.support.v7.widget.RecyclerView-->
<!--android:id="#+id/vehicle_list_name"-->
<!--android:layout_width="636dp"-->
<!--android:layout_height="218dp"-->
<!--android:layout_alignParentStart="true"-->
<!--android:layout_alignParentLeft="true"-->
<!--android:layout_alignParentEnd="true"-->
<!--android:layout_alignParentRight="true"-->
<!--android:layout_alignParentBottom="true"-->
<!--tools:ignore="MissingConstraints"-->
<!--tools:layout_editor_absoluteX="-35dp"-->
<!--tools:layout_editor_absoluteY="26dp"-->
<!--tools:listitem="#layout/recycler_view_item" />-->
<Spinner
android:id="#+id/spinner_package"
android:layout_width="307dp"
android:layout_height="13dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.636"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/switch1" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/nav_view"
app:headerLayout="#layout/nav_header_main2"
app:menu="#menu/drawer_menu">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>


use this library for layout so all size screen might be cover with one layout:) - implementation 'com.intuit.sdp:sdp-android:1.0.6'
link

Related

Move one particular view up when opening a keyboard not the entire layout

I want functionality like Facebook like when we create any post with an image on it only they push one bar on top of the image, not the entire layout. In my case, I am using NestedScrollView as a parent with child ConstraintLayout and the bar is designed in Linear layout.
This is my app:
I want something like this:
This is my XML
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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"
android:background="#color/white"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.03" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.97" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/select_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/dimen_15dp"
android:clickable="true"
android:clipChildren="false"
android:focusable="true"
android:foreground="#drawable/ripple"
android:paddingTop="#dimen/dimen_5dp"
android:paddingEnd="#dimen/dimen_5dp"
android:paddingBottom="#dimen/dimen_5dp"
android:src="#drawable/left_arrow"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.00"
app:layout_constraintStart_toStartOf="#id/guideline1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.00" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/back_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:layout_marginTop="#dimen/dimen_15dp"
android:clickable="true"
android:focusable="true"
android:fontFamily="#font/opensans_bold"
android:paddingTop="#dimen/dimen_5dp"
android:paddingEnd="#dimen/dimen_5dp"
android:paddingBottom="#dimen/dimen_5dp"
android:text="#string/new_post"
android:textColor="#color/colorPrimaryDark"
android:textSize="#dimen/dimen_16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/select_back"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.00" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/postTextview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/dimen_15dp"
android:clickable="true"
android:focusable="true"
android:fontFamily="#font/roboto_regular"
android:foreground="?android:selectableItemBackground"
android:paddingStart="#dimen/dimen_5dp"
android:paddingTop="#dimen/dimen_5dp"
android:paddingBottom="#dimen/dimen_5dp"
android:text="#string/post"
android:textColor="#color/colorPrimaryDark"
android:textSize="#dimen/dimen_16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/back_title"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.00" />
<View
android:id="#+id/line"
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_marginTop="12dp"
android:background="#color/grey_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/select_back"
app:layout_constraintVertical_bias="0.0" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:src="#drawable/rock"
app:civ_border_color="#color/white"
app:civ_border_width="2dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/line" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dimen_10dp"
android:layout_marginTop="20dp"
android:clickable="true"
android:focusable="true"
android:fontFamily="#font/opensans_bold"
android:text="Dwayne johnson"
android:textColor="#color/textview_black"
android:textSize="#dimen/dimen_14sp"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="#+id/profile_image"
app:layout_constraintTop_toBottomOf="#+id/line" />
<com.skyfishjy.library.RippleBackground
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:layout_marginEnd="44dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/line"
app:rb_color="#29B6F6"
app:rb_duration="2000"
app:rb_radius="5dp"
app:rb_rippleAmount="3"
app:rb_scale="4">
<ImageView
android:id="#+id/world"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="TODO"
android:padding="10dp"
android:src="#drawable/world" />
</com.skyfishjy.library.RippleBackground>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/down_arrow"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginTop="16dp"
android:foreground="?attr/selectableItemBackground"
android:padding="10dp"
android:src="#drawable/ic_arrow_down_sign_to_navigate"
app:layout_constraintStart_toEndOf="#+id/content"
app:layout_constraintTop_toBottomOf="#+id/line" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="8dp"
android:layout_below="#+id/rel"
android:layout_marginTop="8dp"
android:background="#DCDCDC"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/profile_image" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/category1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:background="#drawable/button_background"
android:clickable="true"
android:focusable="true"
android:fontFamily="sans-serif"
android:foreground="?android:selectableItemBackground"
android:padding="5dp"
android:text="#string/personal"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="10sp"
android:textStyle="normal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view"
app:textAllCaps="false" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/category2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:background="#drawable/post_btn_bg"
android:clickable="true"
android:focusable="true"
android:fontFamily="sans-serif"
android:foreground="?android:selectableItemBackground"
android:padding="5dp"
android:text="#string/awareness"
android:textAllCaps="false"
android:textColor="#color/colorPrimary"
android:textSize="10sp"
android:textStyle="normal"
app:layout_constraintStart_toEndOf="#+id/category1"
app:layout_constraintTop_toBottomOf="#+id/view"
app:textAllCaps="false" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/category3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:background="#drawable/post_btn_bg"
android:clickable="true"
android:focusable="true"
android:fontFamily="sans-serif"
android:foreground="?android:selectableItemBackground"
android:padding="5dp"
android:text="#string/scheme"
android:textAllCaps="false"
android:textColor="#color/colorPrimary"
android:textSize="10sp"
android:textStyle="normal"
app:layout_constraintStart_toEndOf="#+id/category2"
app:layout_constraintTop_toBottomOf="#+id/view"
app:textAllCaps="false" />
<View
android:id="#+id/line1"
android:layout_width="match_parent"
android:layout_height="0.4dp"
android:layout_marginTop="8dp"
android:background="#color/grey_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/category3" />
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/write_post"
android:layout_width="match_parent"
android:layout_height="#dimen/dimen_100dp"
android:layout_below="#+id/line1"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/post_edit_text_bg"
android:fontFamily="#font/roboto_regular"
android:gravity="start"
android:hint="What's on your mind..."
android:inputType="textMultiLine"
android:textColor="#color/textview_black"
android:textColorHint="#color/grey2_text"
android:textCursorDrawable="#drawable/cursor_color"
android:textSize="#dimen/dimen_16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/line1" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/timelineImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:visibility="gone"
android:layout_marginBottom="#dimen/dimen_20dp"
app:layout_constraintBottom_toTopOf="#+id/linearLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/write_post">
</androidx.appcompat.widget.AppCompatImageView>
<VideoView
android:id="#+id/timelineVideo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toTopOf="#+id/linearLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
android:layout_marginBottom="#dimen/dimen_20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/write_post"
app:layout_constraintVertical_bias="0.072">
</VideoView>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:background="#drawable/item_bg"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:foreground="?android:selectableItemBackground"
android:padding="10dp"
android:src="#drawable/ic_camera" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/gallery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:foreground="?android:selectableItemBackground"
android:padding="10dp"
android:src="#drawable/gallery" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
Tried everything in the manifest
android:windowSoftInputMode="adjustPan"
android:windowSoftInputMode="adjustResize"
android:windowSoftInputMode="adjustNothing"
but nothing worked. All are pushing my entire layout up.

I think this is because, you are using NestedScrollView as parent check by replacing NestedScrollView with any other layout

add This in your meniFest file beside your activity tag
android:windowSoftInputMode="adjustResize"
and,put scrollView as a parent layout in your xml file

Layout has been misplaced while view in emulator and mobile

I'm implementing a login screen while implementing it in the Android Studio the deigning seems fine, but after building the app to emulator and mobile it seems weird, like the elements are misplaced, stretched and compressed. I'm using the drawable element in different sizes because I want this app to support multiple resolution devices.
Below image is from XML designing preview
Below image is a screenshot of emulator
Below image is from Android device
here is the xml design [link][4]
What I'm doing here wrong, any suggestions would be helpful
[4]: https://pastebin.com/d9MPen7c

The issue is you have not set the constraints properly. That is why it looks worse on the real devices.
Here is the XML code:
<?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"
android:background="#color/colorAccent"
android:gravity="center"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/tv_UserName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="100dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="24dp"
android:text="User Name"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/et_UserName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:backgroundTint="#FFFFFF"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_UserName" />
<TextView
android:id="#+id/tv_Password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:text="Password"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/et_UserName" />
<EditText
android:id="#+id/et_Password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:backgroundTint="#FFFFFF"
android:ems="10"
android:inputType="textPassword"
app:layout_constraintBottom_toTopOf="#id/iv_google_bt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_Password" />
<ImageView
android:id="#+id/iv_google_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="80dp"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_Password" />
<ImageView
android:id="#+id/iv_fb_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="80dp"
android:layout_toStartOf="#+id/iv_google_bt"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_Password" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/iv_getstarted_login"
android:layout_width="0dp"
android:layout_height="75dp"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#+id/constraintLayout"
app:layout_constraintEnd_toEndOf="#+id/constraintLayout"
app:layout_constraintStart_toStartOf="#+id/constraintLayout"
app:layout_constraintTop_toBottomOf="#id/constraintLayout">
</ImageView>
<ImageView
android:id="#+id/imageView"
android:layout_width="176dp"
android:layout_height="172dp"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout"
app:layout_constraintEnd_toEndOf="#+id/constraintLayout"
app:layout_constraintStart_toStartOf="#+id/constraintLayout"
app:layout_constraintTop_toTopOf="#+id/constraintLayout" />
<TextView
android:id="#+id/login_signup"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_24dp"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="Dummy text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_getstarted_login" />
<TextView
android:id="#+id/notamem"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_24dp"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="Dummy text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login_signup" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have placed my resources like dimen, String and drawable. So, Please change you resources with mine.

Here is my sample code for your problem. Adjust the given static value like drawable value in this code by using your own drawable resources. Hope i help you in little way
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EBEBEB">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<View
android:id="#+id/view"
android:layout_width="300dp"
android:layout_height="350dp"
android:layout_centerInParent="true"
android:background="#drawable/rectangle_round_view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" >
</View>
<ImageView
android:id="#+id/img"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_above="#+id/view"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginBottom="-45dp"
android:background="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#id/view" />
<TextView
android:id="#+id/txtUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/img"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="70dp"
android:text="Username/Email" />
<EditText
android:id="#+id/et_UserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtUsername"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="5dp"/>
<TextView
android:id="#+id/txtPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/et_UserName"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="10dp"
android:text="Password" />
<EditText
android:id="#+id/et_Password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtPassword"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="5dp"/>
<ImageButton
android:id="#+id/imgleft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#id/view"
android:layout_alignBottom="#id/view"
android:layout_marginBottom="40dp"
android:layout_marginLeft="36dp"
android:background="#drawable/emoji"
android:layout_alignLeft="#id/view" />
<ImageButton
android:id="#+id/imgright"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#id/view"
android:layout_alignBottom="#id/view"
android:layout_marginBottom="40dp"
android:layout_marginRight="36dp"
android:background="#drawable/emoji"
android:layout_alignRight="#id/view" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rectangle_round"
android:layout_below="#+id/view"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginTop="-25dp"
android:text="Get Started"
android:textAlignment="center"
android:paddingLeft="50dp"
android:paddingRight="50dp"
android:textAllCaps="false"
app:layout_constraintBottom_toTopOf="#id/view"/>
<TextView
android:id="#+id/txtNotAMemberYet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/view"
android:layout_centerHorizontal="true"
android:layout_marginTop="87dp"
android:text="Not a member yet"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/view"
app:layout_constraintBottom_toTopOf="#id/txtSignUp"
/>
<TextView
android:id="#+id/txtSignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txtNotAMemberYet"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="Sign Up"
android:textColor="#00BCD4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</RelativeLayout>

Tiny gap between ImageView and RelativeLayout

I have a little triangle indicating whether the user is in the registration or login screen, but there is a tiny gap between the triangle image and the RelativeLayout view it is under
That is as high as the triangle will go, and I am not sure how to raise it just 1 more pixel to get rid of that annoying gap. Here is my XML
<?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"
android:background="#color/colorLightTan"
tools:context=".LoginActivity">
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="fill_parent"
android:layout_height="58dp"
android:background="#color/colorCoral"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/relativeLayout"
app:layout_constraintVertical_bias="0.0">
<TextView
android:id="#+id/logintextBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginStart="49dp"
android:layout_marginLeft="49dp"
android:layout_weight="1"
android:font="#font/americancaptain"
android:text="Login"
android:textColor="#color/colorBackground"
android:textSize="26dp"
app:fontFamily="sans-serif-condensed" />
<TextView
android:id="#+id/logintextBar3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginStart="260dp"
android:layout_marginLeft="260dp"
android:layout_weight="1"
android:font="#font/americancaptain"
android:text="Register"
android:textColor="#color/colorBackground"
android:textSize="26dp"
app:fontFamily="sans-serif-condensed" />
<Button
android:id="#+id/registerButtonLogin"
android:layout_width="150dp"
android:layout_height="200dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginEnd="24dp"
android:layout_marginRight="24dp"
android:padding="0dp"
android:text=""
android:background="#android:color/transparent"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="fill_parent"
android:layout_height="79dp"
android:background="#color/colorBackground"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="53dp"
android:layout_marginLeft="53dp"
android:layout_marginBottom="-33dp"
android:layout_weight="1"
android:paddingBottom="0dp"
app:srcCompat="#drawable/halfhalf" />
</RelativeLayout>
<ImageView
android:id="#+id/imageView4"
android:layout_width="80dp"
android:layout_height="30dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="-20dp"
android:layout_marginEnd="6dp"
android:layout_marginRight="6dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.079"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/relativeLayout2"
app:srcCompat="#drawable/triangle" />
<EditText
android:id="#+id/usernameLoginBox"
android:layout_width="300dp"
android:layout_height="40dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="112dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/edit_text_border"
android:ems="10"
android:hint=" Email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView4"
tools:textColor="#color/colorBackground" />
<EditText
android:id="#+id/passwordLoginBox"
android:layout_width="300dp"
android:layout_height="40dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#drawable/edit_text_border"
android:ems="10"
android:hint=" Password"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/usernameLoginBox"
tools:textColor="#color/colorBackground" />
<Button
android:id="#+id/signinButtonLogin"
android:layout_width="300dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#color/colorCoral"
android:text="LOGIN"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passwordLoginBox" />
</android.support.constraint.ConstraintLayout>
I tried to make the marginTop -20dp to see if that would raise it at all, but it did nothing to fix the issue

Check out this
<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"
android:background="#color/colorLightTan"
tools:context=".LoginActivity">
<FrameLayout
android:id="#+id/relativeLayout2"
android:layout_width="fill_parent"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/relativeLayout"
app:layout_constraintVertical_bias="0.0">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="58dp"
android:background="#color/colorCoral"
android:orientation="horizontal">
<TextView
android:id="#+id/logintextBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginStart="49dp"
android:layout_marginLeft="49dp"
android:layout_weight="1"
android:font="#font/americancaptain"
android:text="Login"
android:textColor="#color/colorBackground"
android:textSize="26dp"
app:fontFamily="sans-serif-condensed" />
<TextView
android:id="#+id/logintextBar3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginStart="260dp"
android:layout_marginLeft="260dp"
android:layout_weight="1"
android:font="#font/americancaptain"
android:text="Register"
android:textColor="#color/colorBackground"
android:textSize="26dp"
app:fontFamily="sans-serif-condensed" />
<Button
android:id="#+id/registerButtonLogin"
android:layout_width="150dp"
android:layout_height="200dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginEnd="24dp"
android:layout_marginRight="24dp"
android:background="#android:color/transparent"
android:padding="0dp"
android:text="" />
</RelativeLayout>
<ImageView
android:id="#+id/imageView4"
android:layout_width="80dp"
android:layout_height="30dp"
android:layout_marginTop="50dp"
android:layout_marginLeft="35dp"
app:srcCompat="#drawable/triangle" />
</FrameLayout>
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="fill_parent"
android:layout_height="79dp"
android:background="#color/colorBackground"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="53dp"
android:layout_marginLeft="53dp"
android:layout_marginBottom="-33dp"
android:layout_weight="1"
android:paddingBottom="0dp"
app:srcCompat="#drawable/halfhalf" />
</RelativeLayout>
<EditText
android:id="#+id/usernameLoginBox"
android:layout_width="300dp"
android:layout_height="40dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="112dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/edit_text_border"
android:ems="10"
android:hint=" Email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/relativeLayout2"
tools:textColor="#color/colorBackground" />
<EditText
android:id="#+id/passwordLoginBox"
android:layout_width="300dp"
android:layout_height="40dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#drawable/edit_text_border"
android:ems="10"
android:hint=" Password"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/usernameLoginBox"
tools:textColor="#color/colorBackground" />
<Button
android:id="#+id/signinButtonLogin"
android:layout_width="300dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#color/colorCoral"
android:text="LOGIN"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passwordLoginBox" />
</android.support.constraint.ConstraintLayout>

Landscape screen for custom android phone

I'm using my Android phone (Xiaomi A2 Lite, 5.84 inches, 1080 x 2280, which is even bigger than Nexus 5) for app development. I have landscape layouts for every layout I have, and I used ConstraintLayouts for all of the elements inside.
However when testing landscape mode on my phone, the texts and images are not displayed as correctly as in Android Studio :(
Are there any solutions for this? Can I add my own resolutions / devices into the device list?
This is how it should look
This is how it displays
Code of the XML landscape file
<?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="com.example.ducnguyen.miniexplorer.MainMenu">
<TextView
android:id="#+id/textView11"
android:layout_width="150dp"
android:layout_height="42dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="#string/main_menu_title"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="#string/main_menu_title" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="94dp"
android:layout_height="93dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="gotoReadingScreen"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView4"
app:layout_constraintHorizontal_bias="0.455"
app:layout_constraintStart_toEndOf="#+id/imageView5"
app:layout_constraintTop_toBottomOf="#+id/textView11"
app:layout_constraintVertical_bias="0.092"
app:srcCompat="#drawable/forest" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="97dp"
android:layout_height="90dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="48dp"
android:layout_marginBottom="8dp"
android:onClick="gotoExplorerScreen"
app:layout_constraintBottom_toTopOf="#+id/textView13"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.756"
app:srcCompat="#drawable/car" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="96dp"
android:layout_height="76dp"
android:layout_marginStart="68dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="192dp"
android:onClick="gotoSettingScreen"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView4"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/settings" />
<ImageView
android:id="#+id/imageView10"
android:layout_width="58dp"
android:layout_height="65dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="56dp"
android:layout_marginBottom="56dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.551"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/phonecall" />
<ImageView
android:id="#+id/imageView12"
android:onClick="LogOut"
android:layout_width="47dp"
android:layout_height="101dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="48dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.879"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/logout" />
<TextView
android:id="#+id/textView12"
android:layout_width="152dp"
android:layout_height="27dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="gotoReadingScreen"
android:text="#string/menu_reading"
app:layout_constraintBottom_toTopOf="#+id/imageView10"
app:layout_constraintEnd_toStartOf="#+id/textView13"
app:layout_constraintStart_toEndOf="#+id/textView14"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="184dp"
android:layout_marginEnd="8dp"
android:onClick="gotoExplorerScreen"
android:text="#string/menu_explorer_status"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.891"
app:layout_constraintStart_toEndOf="#+id/textView14"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView14"
android:layout_width="66dp"
android:layout_height="35dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="gotoSettingScreen"
android:text="#string/menu_settings"
android:textSize="15sp"
app:layout_constraintBottom_toTopOf="#+id/imageView11"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.147"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView5"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="#string/menu_live_support"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView10"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="23dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="gotoAboutUsScreen"
android:text="#string/menu_about_us"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/textView15"
app:layout_constraintHorizontal_bias="0.454"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView11"
app:layout_constraintVertical_bias="0.333" />
<TextView
android:id="#+id/textView17"
android:layout_width="69dp"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="gotoLoginScreen"
android:text="#string/logout"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.709"
app:layout_constraintStart_toEndOf="#+id/textView15"
app:layout_constraintTop_toBottomOf="#+id/imageView12"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="#+id/imageView11"
android:layout_width="61dp"
android:layout_height="65dp"
android:layout_marginStart="8dp"
android:layout_marginTop="76dp"
android:layout_marginEnd="8dp"
android:onClick="gotoAboutUsScreen"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.155"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView5"
app:srcCompat="#drawable/question" />
</android.support.constraint.ConstraintLayout>

try this sample layout. It works in Mi A2 device
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity"
android:background="#212c3d">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textView11"
android:layout_width="150dp"
android:layout_height="42dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Main Menu"
android:textSize="30sp"
android:textColor="#FFF"
android:layout_margin="10dp"
android:layout_gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.551"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Sample Screenshot

How do I convert constraint layout to Relative layout?

I am currently trying to convert my constraint layout to relative layout, but not sure how to deal with "app:" parameters which refer to constraints top of, bottom of etc. Here's my code for clarification:
<?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:id="#+id/myFragmentConstaintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/activeSpeakerContainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/groupList"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/myStatusContainer">
<FrameLayout
android:id="#+id/activeSpeakerVideo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black" />
<ImageView
android:id="#+id/activeSpeakerImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="48dp"
android:background="#color/black"
android:src="#drawable/my_default_profile" />
<TextView
android:id="#+id/myParticipantCountText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:ellipsize="end"
android:lines="1"
android:background="#drawable/rounded_rect"
android:layout_marginStart="18dp"
android:layout_marginTop="18dp"
android:drawablePadding="2dip"
android:paddingLeft="10dip"
android:textColor="#color/gray6"
android:textSize="16sp"
android:textStyle="bold"
android:drawableLeft="#drawable/drawable_user_count_icon"
android:drawableStart="#drawable/drawable_user_count_icon"/>
<ImageView
android:id="#+id/image_mark"
android:layout_width="130dp"
android:layout_height="28dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="36dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
android:src="#drawable/image_mark_blue" />
<TextView
android:id="#+id/activeSpeakerName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#AA555555"
android:ellipsize="end"
android:gravity="center_horizontal|bottom"
android:lines="1"
android:textColor="#color/gray6"
android:textSize="16sp"
tools:text="user#gmail.com" />
<TextView
android:id="#+id/DurationText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:gravity="start|bottom"
android:lines="1"
android:textColor="#color/gray6"
android:textSize="14sp"
tools:text="03:16" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/screenShareContainer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_marginStart="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/myStatusContainer"
app:layout_constraintBottom_toTopOf="#+id/myButtonContainer">
<PinchandZoomLayout
android:id="#+id/screenShareVideo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"/>
<ImageButton
android:id="#+id/screenShareToggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="36dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:background="#android:color/transparent"
android:src="#drawable/ic_video_cam_switch" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/myStatusContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#AA555555"
android:padding="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/myNameText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:ellipsize="end"
android:lines="1"
android:textColor="#color/gray6"
android:textSize="14sp"
tools:text="user2#gmail.com" />
<ImageButton
android:id="#+id/myButtonVideoRotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#android:color/transparent"
android:src="#drawable/ic_video_cam_switch" />
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/groupList"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="invisible"
app:layout_constraintBottom_toTopOf="#+id/myButtonContainer"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/activeSpeakerContainer">
</android.support.v7.widget.RecyclerView>
<RelativeLayout
android:id="#+id/myProgressContainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/groupList"
app:layout_constraintLeft_toLeftOf="#+id/groupList"
app:layout_constraintRight_toRightOf="#+id/groupList"
app:layout_constraintTop_toTopOf="#+id/groupList">
<TextView
android:id="#+id/myProgressName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:gravity="center_horizontal"
android:textColor="#color/gray6"
android:textSize="20sp"
tools:text="My Name" />
<TextView
android:id="#+id/myProgressText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/myProgressName"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:gravity="center_horizontal"
android:text="#string/my_status_connecting"
android:textColor="#color/gray6"
android:textSize="16sp" />
</RelativeLayout>
<include
android:id="#+id/myButtonContainer"
layout="#layout/layout_my_button_bar_1_row"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<android.support.constraint.ConstraintLayout
android:id="#+id/myButtonContainerUnavailable"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/myButtonContainer"
app:layout_constraintLeft_toLeftOf="#+id/myButtonContainer"
app:layout_constraintRight_toRightOf="#+id/myButtonContainer"
app:layout_constraintTop_toTopOf="#+id/myButtonContainer"
tools:visibility="visible">
<Button
android:id="#+id/myButtonCancel"
style="#style/myButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/btn_my_end"
android:text="#string/dialog_button_cancel"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/myButtonRetry"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/myButtonRetry"
style="#style/myButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/btn_my_retry"
android:text="#string/button_try_again"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/myButtonCancel"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
I just tried replacing "android.support.constraint.ConstraintLayout" with relative layout but there's these parameters " app:layout_constraint..." which are more difficult to deal with.Any easier way to go around this?
Thanks in advance.

I am using Android Studio version 3.1.2
No need to do that much complex stuff.Just right click on
layout name in component tree as shown in image and select option convert view and choose the layout which you want to use.

Categories

Resources