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~
Related
I am using this library https://github.com/ongakuer/CircleIndicator, in some cases too much data is coming. The indicator goes out of the screen, can I add animation to it, there is an animation that exists as default in ios.
Ios Example: https://streamable.com/6nu6j3
Android Problem:
I found this as a problem like this before, i was wondering if there could be a nicer solution like in ios
How to set a limit of items on CirclePageIndicator?
Layout
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager2"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<me.relex.circleindicator.CircleIndicator3
android:id="#+id/circleIndicator"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_below="#id/viewPager2"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="25dp"
android:layout_marginTop="20dp"
android:layout_marginRight="25dp"
android:gravity="center"
app:ci_drawable="#drawable/circle"
app:ci_height="5dp"
app:ci_width="5dp" />
Edit:
This library my work has been read -> https://github.com/wching/Android-Indefinite-Pager-Indicator
you have to set margin into your root level layout according to that they set margin .....
and don't check into the emulator some time emulator may be goes wrong so check it into real device only
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.
I need to implement same view of a page of my website to my android application. I almost created exact seen in my layout but there is only one thing i could not achieved yet. Since my webpage uses CSS, two div which use bootstrap grid system class like;
class="col-sm-12 col-md-6 col-lg-6"
they automatically change the orientation and become row by row from col by col.
But in android i couldn't control this screen size manipulation. I assume that the best criteria is catching the overflowing of my LinearLayouts or at least one their childrens. And if i get this i thing i might be able to change their parents orientation for listing them row by row.
Samples;
So is your web site loaded in webview or you are building native android app?
If it is all about 2nd case, you can use GridLayoutManager, which has a number of columns variable, which can be calculated at runtime.
You can init GridLayoutManager like this :
new GridLayoutManager(Context context, int columnsCount);
U can also create a function that calculates columnsCount depending on your screenSize/orientation/itemSize
you can use Google's flexbox layout library
https://github.com/google/flexbox-layout
Sample:
<com.google.android.flexbox.FlexboxLayout
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"
app:flexWrap="wrap"
app:alignItems="stretch"
app:alignContent="stretch" >
<TextView
android:id="#+id/textview1"
android:layout_width="120dp"
android:layout_height="80dp"
app:layout_flexBasisPercent="50%"
/>
<TextView
android:id="#+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
app:layout_alignSelf="center"
/>
<TextView
android:id="#+id/textview3"
android:layout_width="160dp"
android:layout_height="80dp"
app:layout_alignSelf="flex_end"
/>
</com.google.android.flexbox.FlexboxLayout>
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 new to Android, and wish to do a layout as below:
A Logo on top.
Following with a Rectangle with Rounded corners
Within that Rectangle, I will have two EditText box for User ID and Password, plus one Login button
Below the Rectangle with Rounded corners (outside) I have a Html Link to Terms & Conditions
I have tried various ways of layout out
Using only layout. Different kinds of layouts. All seems to be very difficult to achieve what I need
Using Layout + Background. The background is not really a background, but is more like a template, it will affect your layout, and is very difficult to control where you wants your control located.
Using onDraw. Flexible but worried that it might have problem with different screen sizes.
So, someone please enlight which is the best way to achieve what I need?
No one can really tell you what is best, it depends on exactly what you want but I would suggest using a RelatvieLayout as they are typically the easiest and most efficient to use once you work with them a little, in my opinion. You can read Here to see how to do the rectangle. You basically will use shape drawable and adjust the radius of the corners.
As far as the logo on top, if it will be reused in other Activitys then you can put it in its own layout and use the include tag in your layouts to reuse the logo layout
If you are worried about different screen sizes then read the Docs and find what works for you.
Just start on it and adjust as you go. Don't be afraid to screw up and redo some of it. Hopefully this is enough information to get you started
Using a RelativeLayout will give you more flexibility and allow you to use less Layouts such as nested LinearLayouts and Layouts with only one child which can improve performance
this is how it should be done:
start with linear layout with vertical orientation :
<linearLayourt xmlns=............
android:orientation="vertical"
.....other stuffs goes here
......
.....
<LinearLayout ......this is the child linearlayout
.....other stuffs goes here like width and height
<ImageView ...this is where you are gonna put your logo in
/>
</LinearLayout> ....close your child linear layout
<RelativeLayout ...
.........other stuffs here
<EditText ....1st edit text
...you position your boxes here
/>
<EditText ....2nd edit text
...you position your boxes here
/>
</RelativeLayout>
<TextView
....
...
...put yout hyperlink for this text
/>
</LinearLayout> ...this is the parent linear layout
For your case of creating a Log in screen it's not really matter as it is a relatively easy screen to design. I personally like to use XML to design my layouts and never seen it done using the onDraw method.
My suggestion to you as #codeMagic said is to learn how to use and manipulated RelativeLayouts,as those will prevent you from creating cascaded layouts that are really not recommended and take long time to load.
When I started to program for Android I found LinearLayout to be the easiest to understand and use but using it would bring me to many LinearLayouts inside of a LinearLayouts on complex screen designz, later with the use of RelativeLayout I realized that in most cases one RelativeLayout can replace many cascaded Linear ones.
in your case you could do some thing like that:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/drop_down_icon" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/imageView1" >
</EditText>
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/editText1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText2"
android:layout_centerHorizontal="true"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button1"
android:layout_centerHorizontal="true"
android:text="TextView" />
</RelativeLayout>
All what left is to add the desired padings and margins.