How can I fix the alignment issue in my android application - java

I have created a login page with :
1 small image,
2 text boxes,
1 button
but I want them to align in all types of devices like when I tried on my device and it looks fine but not for the other devices that are bigger-smaller in screen-sizes
Thanks in advance
Here is the code :
<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:hardwareAccelerated="true"
android:background="#color/white"
tools:context=".MainActivity">
<View
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="0dp"
android:layout_marginTop="0dp"
android:hardwareAccelerated="true" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="37dp"
android:background="#color/blend"
android:contentDescription="#string/todo"
app:srcCompat="#drawable/imagelogo" />
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginStart="58dp"
android:layout_marginBottom="294dp"
android:ems="10"
android:hint="#string/User_name"
android:inputType="text" />
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginEnd="147dp"
android:layout_marginBottom="227dp"
android:ems="10"
android:hint="#string/Pass_word"
android:inputType="textPassword" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginStart="97dp"
android:layout_marginBottom="138dp"
android:ems="13"
android:background="#color/colorPrimary"
android:text="#string/login" />
and the output :
Design + Blueprint
So i want all my things at same place in every type of devices

Add below into your project level Gradle file:
compile 'com.intuit.sdp:sdp-android:1.0.5'
Usage : In code wherever you are specifying dimensions like 10dp change it to #dimen/_10sdp. Like I have specified in this example ImageView.
<ImageView
android:id="#+id/your_image"
android:layout_marginTop="#dimen/_10sdp"
android:layout_marginBottom="#dimen/_10sdp"
android:layout_width="#dimen/_100sdp"
android:layout_height="#dimen/_100sdp"
android:src="#drawable/logo"/>
This will make your application look same on different devices.

Related

Android Studio components not centering correctly when tested on an external device

I have a simple app written in Java that I am trying to make work on Android devices. The code runs without issue, but the layout of the widgets is inconsistent.
I want all of them to be centered on the screen, and this works when I run the program in an emulator from Android Studio- I have tried this with an emulated Nexus 6P and a Pixel 3A.
However, when I run the program on a physical device, a Galaxy S9, some of the widgets are no longer centered.
I have tried centering the gravity for the RelativeLayout, and using android:layout_centerHorizontal="true" for each of the widgets. I also tried setting the size of the widgets to match_parent and then centering the gravity horizontally inside them. So far this has all given the same result.
I include the XML code below, along with two screenshots for comparison, one from the emulated Nexus 6P and one from the Galaxy S9. You should see that the button and the number field are centered, but all of the text is slightly off-centre.
<?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"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginStart="0dp"
android:layout_marginLeft="0dp"
android:layout_marginTop="25dp"
android:editable="false"
android:gravity="center_horizontal"
android:text="Arby's Hi-Lo Guessing Game"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:visibility="visible" />
<TextView
android:id="#+id/txtPrompt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerHorizontal="true"
android:layout_marginStart="-2dp"
android:layout_marginLeft="0dp"
android:layout_marginTop="75dp"
android:gravity="center|center_horizontal"
android:text="Enter a number between 1 and 100:"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:layout_alignParentLeft="true" />
<EditText
android:id="#+id/txtGuess"
android:layout_width="75dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="105dp"
android:layout_marginEnd="166dp"
android:layout_marginRight="166dp"
android:ems="10"
android:gravity="center_horizontal"
android:inputType="number" />
<Button
android:id="#+id/btnGuess"
android:layout_width="126dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:layout_marginTop="175dp"
android:text="Guess!" />
<TextView
android:id="#+id/lblOutput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="250dp"
android:gravity="center_horizontal"
android:text="Enter a number, then click Guess!"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textSize="18sp" />
</RelativeLayout>
Emulator Alignment
Physical Device Alignment
Your views have absolute margins set in dp. These will not look the same on different sized screens. Remove all marginStart, marginEnd, marginRight and marginLeft attributes. Then RelativeLayout should center the views properly.
try this, i did it fast but i hope it wiill work ;)
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:textAlignment="center"
android:layout_marginTop="25dp"
android:editable="false"
android:text="Arby's Hi-Lo Guessing Game"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:visibility="visible"
/>
<TextView
android:id="#+id/txtPrompt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/txtTitle"
android:textAlignment="center"
android:layout_marginTop="25dp"
android:text="Enter a number between 1 and 100:"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
/>
<EditText
android:id="#+id/txtGuess"
android:layout_width="75dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/txtPrompt"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:inputType="number" />
<Button
android:id="#+id/btnGuess"
app:layout_constraintTop_toBottomOf="#+id/txtGuess"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="30dp"
android:layout_width="126dp"
android:layout_height="wrap_content"
android:text="Guess!" />
<TextView
android:id="#+id/lblOutput"
app:layout_constraintTop_toBottomOf="#+id/btnGuess"
android:textAlignment="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="Enter a number, then click Guess!"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textSize="18sp" />
</android.support.constraint.ConstraintLayout>

Android app blank but not in Designer?

I am making an alarm app but i wanted to change it to be a reminder and basically you type in the reminder and when the alarm goes off you can click to do text to speech on the reminder you saved. However, between testing and adding the text to speech my android app no longer shows any objects when running in the emulator but when designing i can see them all. I have tried to copy all the code into a new project but it does the same.
Here's the image of the emulator and designer.
It doesn't say but its a Relative Layout
There is the files of the project.
http://www.mediafire.com/file/uhybhd5sygu2714/AlarmFix.zip
First dont combine Contraintlayout attributes (such as : app:layout_constraintBottom_toBottomOf) it will not works with Relative/LinearLayout, just you need to use attributes such as android:layout_below... RelativeLayout.LayoutParams
<?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"
>
<TextView
android:id="#+id/tvUpdate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_below="#+id/linearalarm" />
<EditText
android:id="#+id/etReminder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:ems="10"
android:hint="Your Reminder"
android:inputType="textPersonName"
android:textAlignment="center" />
<TimePicker
android:id="#+id/timePicker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/etReminder" />
<LinearLayout
android:id="#+id/linearalarm"
android:layout_below="#id/timePicker"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/alarm_on"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ALARM ON" />
<Button
android:id="#+id/alarm_off"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ALARM OFF" />
<Button
android:id="#+id/btnPlayRem"
android:layout_weight="2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PLAY LATEST REMINDER" />
</LinearLayout></RelativeLayout>

Android Book Search App Search Results Layout Out Of Screen Occasionally

I was tasked to create a simple book searching app for Android as an internship project. I'm almost done with this, but I'm very bad at doing layouts. The published date and description will ALWAYS fly to the left and out of the screen if the ISBN number is 10 digits long, but it's perfectly fine when its just 13 digits long. Just for reference, I'm using the google books API. This would be much clearer if I could post pictures, but my rep is too low for that.
Here's my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/img_cover"
android:layout_width="180dp"
android:layout_height="170dp"
android:src="#drawable/img_books_large"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/tvTitle"
android:text="Title"
android:layout_marginTop="20dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/img_cover"
android:layout_toEndOf="#+id/img_cover" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Author"
android:id="#+id/tvAuthor"
android:layout_marginTop="25dp"
android:layout_below="#+id/tvTitle"
android:layout_toRightOf="#+id/img_cover"
android:layout_toEndOf="#+id/img_cover" />
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_below="#+id/img_cover"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="ISBN"
android:id="#+id/tvISBN"
android:layout_below="#+id/img_cover"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Publish Date"
android:id="#+id/tvPublishYear"
android:layout_below="#+id/tvISBN"
android:layout_marginTop="40dp"
android:layout_marginLeft="-220dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvDescription"
android:layout_marginTop="80dp"
android:layout_below="#+id/tvPublishYear"
android:layout_marginLeft="-270dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Description"
/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
Thanks in advance
Nvm fixed it.
Just had to add
android:orientation="vertical"
to LinearLayout

Issues with Android layout for normal sized screens

I am currently testing a recently finished app for Android and am struggling quite a bit with the layout for different screens. Basically I just can't figure out a "one size fits all" for each layout.
The normal layouts are being specially awful. On the Eclipse editor I see one thing, on the emulator I get another and on certain devices I get another. I really have no idea how to fix these screens specially because they don't appear to be wrong on the editor. Here are some examples of what I get:
What the editor looks like:
What the emulator looks like (mind you, it's the same phone on the editor):
What the screen looks like on a Motorola D3 device (the language is different, but it's the same layout!):
I don't know if it's relevant, but here is my xml code for that particular screen:
<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: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=".EnterActivityActivity" >
<TextView
android:id="#+id/recommendationTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="29dp"
android:text="#string/recommendation_enter"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/timeTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/recommendationTextView"
android:layout_marginTop="48dp"
android:layout_toLeftOf="#+id/recommendationTextView"
android:text="#string/time_recommendation_enter" />
<EditText
android:id="#+id/changeRecommendationEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/changeRecommendationtextView"
android:layout_alignBottom="#+id/changeRecommendationtextView"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/activityEnterButton"
android:ems="5"
android:inputType="number"
android:maxLength="5"
android:focusable="false"/>
<Button
android:id="#+id/activityEnterButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/pedometerButton"
android:layout_centerHorizontal="true"
android:text="#string/enter_button_recommendation_enter" />
<Button
android:id="#+id/pedometerButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/open_pedometer_button_recommendation_enter" />
<TextView
android:id="#+id/changeRecommendationtextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/changeRecommendationButton"
android:layout_alignParentLeft="true"
android:layout_marginBottom="28dp"
android:text="#string/change_recommendation_enter" />
<Button
android:id="#+id/changeRecommendationButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/activityEnterButton"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:text="#string/change_button_recommendation_enter" />
<EditText
android:id="#+id/timeEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/recommendationTextView"
android:layout_alignTop="#+id/timeTextView"
android:ems="3"
android:focusable="false"
android:inputType="number"
android:maxLength="3"/>
<TextView
android:id="#+id/distanceTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/timeTextView"
android:layout_marginTop="18dp"
android:layout_toLeftOf="#+id/changeRecommendationButton"
android:text="#string/distance_recommendation_enter" />
<EditText
android:id="#+id/distanceEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/changeRecommendationButton"
android:layout_below="#+id/timeTextView"
android:ems="5"
android:focusable="false"
android:inputType="number"
android:maxLength="5"/>
</RelativeLayout>
How exactly could I fix this so that is actually looks good and consistent with all the varieties of screens and devices?

How to resize the layout properly? - Android

Im trying to make an app for the sony smart watch 2.
Im trying to make a basic converter app which consists of one text box, two radio buttons and one button. Yet when testing on the watch everything is massive. If I resize things in eclipse things disappear and other things what is happening? Picture of it on watch:http://content.screencast.com/users/jeremyc12/folders/Jing/media/050d6158-1daa-4ebe-8eb2-ed8a46e3d024/2014-04-23_1334.png
Here is my xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="#dimen/smart_watch_2_control_width"
android:layout_height="#dimen/smart_watch_2_control_height"
android:background="#color/myColor"
android:onClick="calculate"
tools:ignore="PxUsage" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:inputType="numberSigned"
android:width="5px" >
<requestFocus />
</EditText>
<RadioButton
android:id="#+id/radioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/editText1"
android:layout_alignBottom="#+id/editText1"
android:layout_alignParentRight="true"
android:layout_marginRight="16dp"
android:checked="true"
android:text="#string/kmh" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button2"
android:layout_alignLeft="#+id/radioButton1"
android:text="#string/miles" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/editText1"
android:text="#string/calc" />
Two issues I see here:
As Aritra pointed out, make sure in your XML layout that you aren't doing any scaling. So don't use "dp" just "px".
There are only a few Views in Android supported on SW2. See here for details:
http://developer.sonymobile.com/reference/sony-addon-sdk/com/sonyericsson/extras/liveware/aef/control/Control.Intents#EXTRA_DATA_XML_LAYOUT
EditText, RadioButton and Button views are not included there so thats why you're seeing some strange issues even without scaling.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ff0000"
android:onClick="calculate" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:inputType="numberSigned"
android:width="5px" >
<requestFocus />
</EditText>
<RadioButton
android:id="#+id/radioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText1"
android:layout_toRightOf="#+id/radioButton2"
android:checked="true"
android:text="kmh"
android:textSize="8sp" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText1"
android:text="miles"
android:textSize="8sp"/>
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/radioButton2"
android:layout_toRightOf="#+id/editText1"
android:text="calculate"
android:textSize="8sp"/>
</RelativeLayout>

Categories