Develop Reference

How to solve layout issues in android studio

Here the image from my mobile:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:visibility="visible"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="110dp"
android:layout_height="40dp"
android:text="Miles"
android:textSize="24sp"
android:visibility="visible"
tools:layout_editor_absoluteX="46dp"
tools:layout_editor_absoluteY="56dp"
tools:visibility="visible" />
<TextView
android:id="#+id/textView2"
android:layout_width="110dp"
android:layout_height="40dp"
android:text="Km"
android:textSize="24sp"
tools:layout_editor_absoluteX="46dp"
tools:layout_editor_absoluteY="140dp" />
<Button
android:id="#+id/buttonConvMilesToKm"
android:layout_width="287dp"
android:layout_height="54dp"
android:text="Convert Miles To Km"
android:textSize="18sp"
tools:layout_editor_absoluteX="62dp"
tools:layout_editor_absoluteY="209dp" />
<Button
android:id="#+id/buttonConvKmToMiles"
android:layout_width="280dp"
android:layout_height="60dp"
android:text="Convert Km To Miles"
android:textSize="18sp"
tools:layout_editor_absoluteX="65dp"
tools:layout_editor_absoluteY="284dp" />
<EditText
android:id="#+id/editTextMiles"
android:layout_width="200dp"
android:layout_height="50dp"
android:text="Convert Km To Miles"
android:textSize="18sp"
tools:layout_editor_absoluteX="179dp"
tools:layout_editor_absoluteY="46dp" />
<EditText
android:id="#+id/editTextKm"
android:layout_width="200dp"
android:layout_height="50dp"
android:ems="10"
android:inputType="textPersonName"
tools:layout_editor_absoluteX="179dp"
tools:layout_editor_absoluteY="130dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
This maybe a small error i did , but what am i missing so the interface appears to be overlapped . Im using Android Studio to develop this But the reference design looks alright unless i run it on emulator or my mobile itself . Im guessing im not wrong in coding the layouts n i even tried to change the way the layouts can be written

Your layout has no constraints. Please review the documentation on the valid ConstraintLayout XML attributes you can use to layout views relative to each other within a ConstraintLayout. You are looking for attributes like layout_constraintStart_toEndOf.

Display an image in Android Studio using ImageView in layout preview

I'm working on an Android app. I create an item layout for a recycler view and I'd like to display a preview of it in Android Studio using layout preview with tools namespace. To accomplish this task I:
Put in sampledata an image (sampledata\nre1.png). This is an important thing because I don't want to include the sample image in the apk.
Use tools namespace in the ImageView to display the image in the layout preview
An screenshot:
And the layout XML:
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="8dp"
android:paddingRight="8dp"
android:paddingBottom="8dp"
tools:context=".ui.adapters.BarcodeAdapter">
<ImageView
android:id="#+id/item_barcode_nre1_image"
android:layout_width="wrap_content"
tools:layout_width="120dp"
android:layout_height="112dp"
android:scaleType="fitXY"
android:layout_marginStart="#dimen/text_margin"
android:contentDescription="NRE1"
android:layout_marginTop="4dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_nre_label"
tools:src="#sample/nre1.png" />
<ImageView
android:id="#+id/item_barcode_nre2_image"
android:layout_width="wrap_content"
android:layout_height="112dp"
android:scaleType="fitXY"
android:layout_marginEnd="#dimen/text_margin"
android:contentDescription="NRE2"
android:adjustViewBounds="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/item_barcode_nre1_image"
tools:src="#sample/nre2.png" />
<ImageView
android:id="#+id/item_barcode_codice_fiscale_image"
android:layout_width="wrap_content"
android:layout_height="112dp"
android:scaleType="fitXY"
android:contentDescription="Codice fiscale"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_codice_fiscale_label"
tools:src="#sample/codice-fiscale.png" />
<TextView
android:id="#+id/item_barcode_nre_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/text_margin"
android:text="#string/item_qrcode_nre"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_barcode_nre1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:ellipsize="end"
android:maxLines="10"
android:textAppearance="#android:style/TextAppearance.Material.Body1"
app:layout_constraintEnd_toEndOf="#+id/item_barcode_nre1_image"
app:layout_constraintStart_toEndOf="#+id/item_barcode_nre_label"
app:layout_constraintStart_toStartOf="#+id/item_barcode_nre1_image"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_nre1_image"
tools:text="1300A" />
<TextView
android:id="#+id/item_barcode_nre2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="10"
android:layout_marginTop="4dp"
android:textAppearance="#android:style/TextAppearance.Material.Body1"
app:layout_constraintEnd_toEndOf="#+id/item_barcode_nre2_image"
app:layout_constraintHorizontal_bias="0.482"
app:layout_constraintStart_toStartOf="#+id/item_barcode_nre2_image"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_nre2_image"
tools:text="4003535379" />
<TextView
android:id="#+id/item_barcode_codice_fiscale_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/text_margin"
android:text="#string/item_qrcode_codice_fiscale"
app:layout_constraintStart_toStartOf="#+id/item_barcode_nre_label"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_nre1" />
<TextView
android:id="#+id/item_barcode_codice_fiscale"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:layout_marginTop="4dp"
android:textAppearance="#android:style/TextAppearance.Material.Body1"
app:layout_constraintEnd_toEndOf="#+id/item_barcode_codice_fiscale_image"
app:layout_constraintStart_toStartOf="#+id/item_barcode_codice_fiscale_image"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_codice_fiscale_image"
tools:text="CF" />
</androidx.constraintlayout.widget.ConstraintLayout>
I think I do it correctly, but it does not work. Any idea? Tnx.

<ImageView
android:id="#+id/item_barcode_nre1_image"
android:layout_width="wrap_content"
tools:layout_width="120dp"
android:layout_height="112dp"
android:scaleType="fitXY"
android:contentDescription="NRE1"
android:layout_marginTop="4dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_nre_label"
tools:src="#drawable/ic_launcher_background" />
Working on my side. Let's try. Thanks

My app Signup activity (that I made) is not completely visible (cut from bottom) on my device

I made a sign-up activity in android studio with XML and tested it on first genymotion emulator with(S8 Android 7.1). The result was fine. But when I tested that on my Android Device (Samsung Galaxy J1 2016 Android 5.1), the layout is not completely visible, it is stretched from bottom.
I have tried to change the phone layout form 5inches (Pixel) to my smartphone size (4.5inches) but the result are same.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#drawable/bg"
android:orientation="horizontal"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="245dp">
<EditText
android:fontFamily="sans-serif"
android:inputType="text"
android:id="#+id/name"
android:textColor="#fff"
android:textColorHint="#fff"
android:background="#drawable/edit_text_style"
android:layout_width="320dp"
android:layout_height="50dp"
android:gravity="center"
android:hint="Username" />
<EditText
android:inputType="textEmailAddress"
android:textColor="#fff"
android:textColorHint="#fff"
android:background="#drawable/edit_text_style"
android:layout_width="320dp"
android:layout_height="50dp"
android:layout_marginTop="6dp"
android:gravity="center"
android:hint="Email" />
<EditText
android:inputType="textPassword"
android:textColor="#fff"
android:textColorHint="#fff"
android:background="#drawable/edit_text_style"
android:layout_width="320dp"
android:layout_height="50dp"
android:layout_marginTop="6dp"
android:gravity="center"
android:hint="Password" />
<EditText
android:inputType="phone"
android:textColor="#fff"
android:textColorHint="#fff"
android:background="#drawable/edit_text_style"
android:layout_width="320dp"
android:layout_height="50dp"
android:layout_marginTop="6dp"
android:gravity="center"
android:hint="Phone#" />
<Button
android:fontFamily="verdana"
android:textColor="#000"
android:background="#drawable/button_style_selector"
android:textSize="22dp"
android:textAllCaps="false"
android:text="Signup"
android:layout_marginTop="40dp"
android:layout_width="320dp"
android:layout_height="50dp" />
</LinearLayout>
</RelativeLayout>
This the screenshot of the Android Device result:

The simpliest solution is to used Constraint Layout
Here you use a paddingTop to 245dp, all phones doesn't have the same size so it's normal that in certain phone you get the cropped bottom.
Try with ConstraintLayout :)

Just remove the android:paddingTop="245dp", change layout_height to wrap_content and add android:layout_alignParentBottom="true" on the first LinearLayout and it should be fine.

using too much paddingTop with LinearLayoutfor this case is not good,
android:paddingTop="245dp"
instead you can use RelativeLayout with alignParentBottom="true" property and rearrange other views by layout_above property
Try this XML
<RelativeLayout 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="#drawable/bg"
android:orientation="horizontal"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="245dp">
<EditText
android:id="#+id/name"
android:layout_width="320dp"
android:layout_height="50dp"
android:layout_above="#+id/email_EditText"
android:background="#drawable/edit_text_style"
android:fontFamily="sans-serif"
android:gravity="center"
android:hint="Username"
android:inputType="text"
android:textColor="#fff"
android:textColorHint="#fff" />
<EditText
android:id="#+id/email_EditText"
android:layout_width="320dp"
android:layout_height="50dp"
android:layout_above="#+id/password_EditText"
android:layout_marginTop="6dp"
android:background="#drawable/edit_text_style"
android:gravity="center"
android:hint="Email"
android:inputType="textEmailAddress"
android:textColor="#fff"
android:textColorHint="#fff" />
<EditText
android:id="#+id/password_EditText"
android:layout_width="320dp"
android:layout_height="50dp"
android:layout_above="#+id/phone_EditText"
android:layout_marginTop="6dp"
android:background="#drawable/edit_text_style"
android:gravity="center"
android:hint="Password"
android:inputType="textPassword"
android:textColor="#fff"
android:textColorHint="#fff" />
<EditText
android:id="#+id/phone_EditText"
android:layout_width="320dp"
android:layout_height="50dp"
android:layout_above="#+id/signUp_Button"
android:layout_marginTop="6dp"
android:background="#drawable/edit_text_style"
android:gravity="center"
android:hint="Phone#"
android:inputType="phone"
android:textColor="#fff"
android:textColorHint="#fff" />
<Button
android:id="#+id/signUp_Button"
android:layout_width="320dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_marginTop="40dp"
android:background="#drawable/button_style_selector"
android:fontFamily="verdana"
android:text="Signup"
android:textAllCaps="false"
android:textColor="#000"
android:textSize="22dp" />
</RelativeLayout>

The way you are making your layout is not good at all. It may look great in one device and be awful in another.
First take a look at these topics:
https://developer.android.com/training/multiscreen/screensizes
https://developer.android.com/guide/practices/screens_support
But in my own experience ConstraintLayout can be not efficient to be used in some cases, the approach I choose in LinearLayouts. It may seems a little complex to use LinearLayout in all of your layout parts but it makes it much more flexible.
some times I face something like this:
<LinearLayout
<LinearLayout
<LinearLayout
....
But you know when its done it looks great. Of course you must know how to use some tools like weights etc. so I recommend you to use LinearLayout over Relative and don't use hard coded like paddingTop to `245dp.

The paddingTop of the LinearLayout you are using is much more than required. Try removing it.
But even then you want the same look, you can try wrapping your layout in a ScrollView like this:
<ScrollView
android:layout_height = "wrap_content"
android:layout_width = "match_parent">
<!-- All your Relative layout goes here -->
</ScrollView>

Android studio - Relative layout misplaced items after run on phisical device

Hope you can help me with my question, I have three TextViews and a sepparator, on my relative layout, on the designer I have aranged them , but after I run it on a phisical device , only one item appear and even that item is misplaced. I have to tell you that i have searched for many many hours before coming here to ask this question, so please help me!
Here it is the XML file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="44dp"
android:paddingTop="24dp"
tools:ignore="RtlSymmetry">
<TextView
android:id="#+id/tv_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/tv_today_date"
android:gravity="end|center_vertical"
android:paddingEnd="16dp"
android:textAlignment="center"
android:textSize="56sp"
android:visibility="visible"
tools:text="12:34" />
<TextView
android:id="#+id/tv_today_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:paddingEnd="16dp"
android:text="Tue, 20 Apr"
android:textSize="16sp"
android:layout_below="#+id/tv_today_time"
android:layout_toStartOf="#+id/separator" />
<View
android:id="#+id/separator"
android:layout_width="0.05dp"
android:layout_height="0.05dp"
android:layout_alignBottom="#+id/tv_today_date"
android:layout_alignTop="#+id/tv_today_time"
android:layout_centerHorizontal="true"
android:background="#66FFFFFF" />
<TextView
android:id="#+id/tv_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:paddingStart="16dp"
android:textSize="16sp"
tools:text="Bucharest"
android:layout_below="#+id/tv_today_time"
android:layout_toEndOf="#+id/separator" />
If needed, i will post some screenshots.
Also I have also some other questions, so if anyone wants to help me, tell me :)
EDIT
Here iis what I would like it to be:Designer
Here is what i get:Phisical device

Option 1: Use constraint layout (Material design)
Option 2: Wrap tv_today_date separator & tv_location in LinearLayout with horizontal orientation. Place this LinearLayout below tv_time

This is working fine for me.Check it and let me know.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="24dp"
>
<TextView
android:id="#+id/tv_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="end|center_vertical"
android:paddingRight="16dp"
android:textAlignment="center"
android:textSize="56sp"
android:visibility="visible"
android:text="12:34" />
<View
android:id="#+id/separator"
android:layout_width="0.05dp"
android:layout_height="0.05dp"
android:layout_alignBottom="#+id/tv_today_date"
android:layout_alignTop="#id/tv_time"
android:layout_centerHorizontal="true"
android:background="#66FFFFFF" />
<TextView
android:id="#+id/tv_today_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:paddingRight="16dp"
android:text="Tue, 20 Apr"
android:textSize="16sp"
android:layout_below="#id/tv_time"
android:layout_toLeftOf="#id/separator" />
<TextView
android:id="#+id/tv_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:paddingLeft="16dp"
android:textSize="16sp"
android:text="Bucharest"
android:layout_below="#id/tv_time"
android:layout_toRightOf="#id/separator" />
</RelativeLayout>

Not displaying check box on other device

This is very strange. I have two Asus MeMo Pad 7 devices. One of them runs everything perfectly but the other has a strange quirk where two check boxes on one of the screens are not being displayed. One is required to be checked before proceeding so this is a complete fail.
Both devices are identical and running Android OS 4.4.2.
Why is this happening and what can I do to resolve? While it would be bad enough if the devices were different and running differing versions of Android, these are identical so very bad. I'm worried now as to what else could be wrong?
Thanks in advance
Conor
UPDATE:
Out of four identical devices, 3 are running correctly. I will need to check specifics of Kernel Version etc. In case it is relevant all installations came from HockeyApp. The offending device is remote so I cannot install via ADB right now.
UPDATE:
Please see the image where the issue is occurring. The red dots are where the check boxes should be appearing.
Following the image is the XML layout.
XML Layout:
<RelativeLayout 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:background="#color/Company_grey"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="ie.Company.android.dws.ActivityMain" >
<ImageView
android:id="#+id/imgCompanyLogo"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_alignParentLeft="true"
android:contentDescription="#string/Company_logo"
android:src="#drawable/Company_main_logo" />
<TextView
android:id="#+id/lblBeforeWeBegin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imgCompanyLogo"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:gravity="center"
android:text="#string/Registration_Prompt"
android:textColor="#color/Company_green"
android:textSize="30sp" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/lblBeforeWeBegin"
android:layout_centerHorizontal="true"
android:layout_marginTop="80dp"
android:background="#color/Company_grey" >
<EditText
android:id="#+id/txtName"
android:layout_width="450dp"
android:layout_height="45dp"
android:background="#drawable/rounded_edittext"
android:hint="#string/Name"
android:inputType="text|textCapSentences|textPersonName"
android:paddingLeft="10dp"
android:textColor="#color/Company_blue" />
<EditText
android:id="#+id/txtNickname"
android:layout_width="450dp"
android:layout_height="45dp"
android:layout_below="#id/txtName"
android:layout_marginTop="25dp"
android:background="#drawable/rounded_edittext"
android:hint="#string/Nickname"
android:inputType="text"
android:paddingLeft="10dp"
android:textColor="#color/Company_blue" />
<EditText
android:id="#+id/txtEmail"
android:layout_width="450dp"
android:layout_height="45dp"
android:layout_below="#id/txtNickname"
android:layout_marginTop="25dp"
android:background="#drawable/rounded_edittext"
android:hint="#string/Email"
android:inputType="textNoSuggestions|textEmailAddress"
android:paddingLeft="10dp"
android:textColor="#color/Company_blue" />
<CheckBox
android:id="#+id/chkAgreeTermsConditions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/txtEmail"
android:layout_marginTop="25dp" />
<TextView
android:id="#+id/lblAgreeTermsConditions"
android:layout_width="405dp"
android:layout_height="wrap_content"
android:layout_below="#id/txtEmail"
android:layout_marginLeft="10dp"
android:layout_marginTop="23dp"
android:layout_toRightOf="#id/chkAgreeTermsConditions"
android:text="#string/AgreeTermsConditions"
android:textColor="#color/Company_green"
android:textSize="25sp" />
<CheckBox
android:id="#+id/chkOptInMarketing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/chkAgreeTermsConditions"
android:layout_marginTop="25dp" />
<TextView
android:id="#+id/lblOptInMarketing"
android:layout_width="400dp"
android:layout_height="wrap_content"
android:layout_below="#+id/lblAgreeTermsConditions"
android:layout_marginLeft="10dp"
android:layout_marginTop="25dp"
android:layout_toRightOf="#id/chkOptInMarketing"
android:text="#string/OptInMarketing"
android:textColor="#color/Company_green"
android:textSize="25sp" />
<Button
android:id="#+id/btnStartQuiz"
android:layout_width="450dp"
android:layout_height="100dp"
android:layout_below="#id/chkOptInMarketing"
android:layout_marginTop="50dp"
android:background="#drawable/rounded_button"
android:text="#string/Start_Quiz_exclamation"
android:textColor="#color/white"
android:textSize="65sp" />
</RelativeLayout>