I code using Android Studio. I found some problem that layout in emulator and APK (Build APK and run in my gadget) is different with layout when I design in deisgner. What is wrong with my code ? Or is there something I must set ?
Layout in designer :
Layout in gadget (apk) :
My XML Code :
<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.alfonsus.ebaandroid.Login">
<EditText
android:id="#+id/etPassword"
android:layout_width="280dp"
android:layout_height="41dp"
android:ems="10"
android:hint="Password"
android:inputType="textPersonName"
tools:layout_editor_absoluteX="52dp"
tools:layout_editor_absoluteY="113dp" />
<EditText
android:id="#+id/etUserId"
android:layout_width="280dp"
android:layout_height="41dp"
android:ems="10"
android:hint="User ID"
android:inputType="textPersonName"
tools:layout_editor_absoluteX="52dp"
tools:layout_editor_absoluteY="44dp" />
<Button
android:id="#+id/btnLogin"
android:layout_width="143dp"
android:layout_height="47dp"
android:text="Login"
tools:layout_editor_absoluteX="121dp"
tools:layout_editor_absoluteY="194dp" />
Each view in your layout has attributes like these:
tools:layout_editor_absoluteX="52dp"
tools:layout_editor_absoluteY="113dp"
Any tools: attribute will only affect what you see in the layout/design preview, and will have no effect on what you see when you actually run your app on an emulator or real device.
In your case, these were added when you dragged-and-dropped views into the visual editor (in order to make your life easy; otherwise the views would snap to the top-left corner like you're seeing on a real device). However, you still need to add constraints to each view so that they'll appear correctly when you run your app.
See this link for more information: https://developer.android.com/training/constraint-layout/#add-a-constraint
Note that you must follow item #3:
Do one of the following:
Click a constraint handle and drag it to an available anchor point (the edge of another view, the edge of the layout, or a guideline).
Click Create a connection in the view inspector at the top of the Attributes window.
The problem here is that you are missing some constraints.
Check your android editor/designer layout again, I think you are missing constraints.
Every view in android must have a vertical and a horizontal constraint.
You need to make each item have a constraint.
Related
I want to make view, where some lines are shown as a paragraph(i.e. not as a vertical list but as a paragraph). But I also want each of the line to be clickable, so that I can prompt the user to share that specific line (to highlight or copy etc).
I am actually building an app with translation. I want user to read the paragraph both standalone(1st image) and with translation. But I want the standalone version like the 1st image below, in a paragraph format. How to achieve that using RecyclerView (as I have already achieved translation version with RecyclerView)?
On other words, I know how to use two views in a single RecyclerView, but (see the 3-5 lines of first image) how to warp one layout into other using RecyclerView
Edit: I've tried flexbox layout, it doesn't satisfy my requirement.
The answer is FlexBoxLayoutManager you can use it with RecyclerView put
implementation 'com.google.android:flexbox:1.0.0'
in your gradle file. Now setting up RecyclerView layout,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
xmlns:toools="http://schemas.android.com/tools">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/end_indicator"
android:textSize="20sp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:textDirection="anyRtl"
android:id="#+id/line_holder"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
android:layout_marginStart="5dp"
android:layout_alignBaseline="#id/line_holder"
android:gravity="center_vertical|center_horizontal"
android:textAlignment="gravity"
android:layout_marginEnd="5dp"
android:background="#drawable/stackoverflow_bg"
android:id="#+id/end_indicator"/>
</RelativeLayout>
here stackoverflow_bg.xml is an oval shape drawable.
Now setting up RecyclerView,
FlexboxLayoutManager manager = new FlexboxLayoutManager(this);
manager.setJustifyContent(JustifyContent.CENTER);
manager.setFlexWrap(FlexWrap.WRAP);
manager.setFlexDirection(FlexDirection.ROW_REVERSE);
rv.setLayoutManager(manager);
rv.setAdapter(rvAdapter);
The layout I made:
As you can see this layout needs some working. The end indicator must be aligned to the last line of the TextView then it will fix the problem. Now you can even handle line click events as it is all done inside a Recyclerview.
app description :-
simple app with listView (orientation : horizontal)
the problem is :-
when i run the app on a real device , i found that all views direction get reversed
this is an item on android studio:-
app preview on android studio
but when it run on a real device it look like this
app on a real device
this is my layout (item.xml) code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/item_layout_id"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/mag_id"
android:layout_weight="1"
android:text="7.1"
android:textColor="#302f2f"
android:textSize="18sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/country_id"
android:layout_weight="1"
android:text="Egypt"
android:textColor="#302f2f"
android:textSize="18sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/date_id"
android:layout_weight="1"
android:text="July 21,2018"
android:textColor="#302f2f"
android:textSize="18sp"/>
</LinearLayout>
i want to display the same design from android studio preview on the real device
with the same view direction.
so what is the problem and how i can fix this.
This is due to difference between the screen size and display resolution, the layout that you're designing in the studio might look good on that exact screen size or resolution that you've selected in the layout editor, but that might not be the case for every device, your device in this case.
You can refer this thread for more detailed solution to your problem
you should check two or three things:
1- is your ListView parent layout has layoutDirection in XML?
2- have you called the method getWindow().setLayoutDirection(LayoutDirection.RTL) any where in your code?
3- if your list activity or fragment does not have number 2 then you should check your adapter class to see if there is any code written about ItemView direction.
4- if non of this is relevant for you please try changing preview android version and preview size.
hope this helps.
So I'm completely new to Android Development and I'm working through a book on Android Game Development. First game we build is called Tappy Defender.
Anyway, they provide me with background image and told me to put a button and a TextView. I put the background in the drawable folder and assigned it to the background for the Activity, I also aligned both the TextView and the button.
However, when I build and run the program in the emulator, both the button and the TextView are located in the top left corner (in landscape) and are overlapping each other. The background also doesn't show at all.
I'm so confused as to what it is that I'm doing wrong as I followed the steps correctly and have gone over it several times.
Any help appreciated.
I've included the .xml file too:
<?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/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible"
tools:background="#drawable/background"
tools:context="com.example.tappydefender.MainActivity">
<Button
android:id="#+id/buttonPlay"
android:layout_width="122dp"
android:layout_height="39dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:text="Play"
tools:layout_editor_absoluteY="293dp"
tools:layout_editor_absoluteX="280dp" />
<TextView
android:id="#+id/textHighScore"
android:layout_width="158dp"
android:layout_height="28dp"
android:text="TextView"
tools:layout_editor_absoluteX="264dp"
tools:layout_editor_absoluteY="258dp"
tools:text="High Score: 99999" />
</android.support.constraint.ConstraintLayout>
You are using a Constraint layout, but you are not constraining anything. Furthermore, you are using "tools" attributes, which only apply to the emulator, and are ignored when the app is built.
You need to set constraints to your views, like
app:layout_constrainTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#id/otherView"
Please read on Constraint layout (https://developer.android.com/training/constraint-layout/index.html) and apply constraints to your views.
I am trying to do some simple app to practice, and the user interface gets broken for some reason I don't know why when I run test on my phone. I did an app on android only once before and I didn't have this problem, I was using a different phone though. I'm testing this on Samsung Galaxy A5.
That's how it looks in project: http://imgur.com/Pnbg5ns
And that's how it looks on my phone: http://imgur.com/a/uki84
Anyone knows how to resolve this?
All your views have locations set with the tools:... attribute. The locations set this way (using tools:) position the views within the Android Studio editor, and Android Studio editor only. It doesn't do anything at all to position the views for when the app is actually run, that's why all your views are on top of each other, they simply don't have any attributes to indicate their positioning on the screen when the app is run.
You should check tutorials for how to use ConstraintLayout (if you want to use that layout) which is a recent (2016) addition to Android and position your views with the constraints you need. Or you could use some of the older layouts like LinearLayout which should be perfectly fine for your layout needs.
And absolute positioning of the views like you have with the use of the tools:... attribute is also a big no most of the time. Views need to be positioned in some relative way within a layout, which doesn't mean it has to be within a RelativeLayout :), just saying that the views should be positioned in reference to the layout containing them, not just at some absolute point f.e. (150, 110).
This is a very simple layout. You can use LinearLayout instead of ConstraintLayout.
Here is an example using LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="16dp">
<EditText
android:id="#+id/etLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Login"
android:inputType="textPersonName" />
<EditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Hasło"
android:inputType="textPassword" />
<Button
android:id="#+id/bLogin"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Loguj"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="#+id/tvRegister"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Nie masz jeszcze konta? Kliknij tutaj."
android:layout_gravity="center_horizontal"/>
</LinearLayout>
OUTPUT:
Hope this will help~
I have recently started learning the new ConstraintLayout in Android Studio 2.2 and noticed that when I add simplest of the views, the layout editor automatically generates some absolute coordinates. Here is a sample XML:
<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/activity_portfolio"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.abc.Activity"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="81dp">
<TextView
android:text="#string/creator_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="246dp"
tools:layout_editor_absoluteY="479dp"
android:id="#+id/first_textview"
app:layout_constraintRight_toRightOf="#+id/activity"
android:layout_marginEnd="16dp"
tools:layout_constraintRight_creator="0"
app:layout_constraintBottom_toBottomOf="#+id/activity"
android:layout_marginBottom="16dp"
tools:layout_constraintBottom_creator="0" />
</android.support.constraint.ConstraintLayout>
Notice the absolutes like 81dp, 246dp, 479dp... I tried to manually delete these, but when I go back to the "Design" tab and come back to the "Text" tab, these regenerate. Now, I have three questions:
Is there a way to tell Android Studio to not generate these?
Should I manually place them in dimens.xml?
Would these absolutes cause some layout problems in other devices?
You'll note that all of the absolute values are in the tools namespace - this means they are not compiled into your app, nor used in anything but in the tools (and in this case, the visual editor). They are simply to ensure that switching from the Design to Text tab is always consistent, with the underlying files remaining stable.
Is there a way to tell Android Studio to not generate these?
No.
Should I manually place them in dimens.xml?
These are only useful for the tools and therefore should not be added to a separate dimens.xml file that would be included in your final APK.
Would these absolutes cause some layout problems in other devices?
No, they are only used by the tools.
I'm not sure your original question contains your entire layout, as it references a widget with an id of #+id/activity, so the issue might lie elsewhere in your layout.
Ensure that no widget that exists within a ConstraintLayout has a layout_width or layout_height of match_parent.
MATCH_PARENT is not supported for widgets contained in a ConstraintLayout, though similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to "parent".
Source
If you use match_parent, Android Studio will generate these absolute values, as well as replacing match_parent with an absolute dimension.
Based on the layout you posted, your TextView probably had a layout_width or layout_height of match_parent before Android Studio replaced it.
You should replace android:layout_width="match_parent" with
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndtOf="parent"
And android:layout_height="match_parent" with
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomtOf="parent"
In your specific layout, you probably want something like 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:id="#+id/activity_portfolio"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.abc.Activity">
<TextView
android:text="#string/creator_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/first_textview"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/activity"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp" />
</android.support.constraint.ConstraintLayout>
As a side notes to given answers, you can use the Magic Wand Icon in the toolbar menu above the design preview. Click on Infer Constraints button, this will automatically add some lines in the text field and the tools one will be converted to constrained.
Please see below picture :