Develop Reference

Problem with relative layouts: anchored elements at the top right

I'm trying to create an android application but I'm a beginner, especially with the XML. I don't know why, if I put Relative layout and move the widgets they remain anchored at the top left. does anyone know why?
ps I would like to work on the window design not on the code. Anyway I leave you the code in case there is something wrong
<?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=".Tentativo">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Number"
android:textSize="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.255"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.299" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play"
tools:layout_editor_absoluteX="247dp"
tools:layout_editor_absoluteY="211dp" />
</RelativeLayout>

You are facing this problem because you are using the wrong attributes. The attributes you are using are meant for Constraint Layout and not Relative layout.
For Example: in case of TextView instead of using app:layout_constraintRight_toRightOf="parent" try using android:layout_alignParentRight="true"
Also, I would like to recommend you to use Constraint Layout instead of Relative as is much better and easier to use. example: To center a view in a RelativeLayout you would write centerInParent=true. Constraint Layout instead allows centering in-between views and the parent.

relative layout works great with nested sibling Containers, just add a container, and add the Widgets inside the container, my favorite one to use when Relative Layout is the parent is the Linear Layout, it makes the UI much cleaner and uses weights which is great for supporting different screen ratios. Here is a sample Example for your case (also you can remove all the constraints in the widget since their parent is no longer the relative layout) :
<?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">
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:gravity="center"
android:weightSum="2"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Number"
android:layout_weight="1"
android:textSize="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.255"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.299" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Play"
tools:layout_editor_absoluteX="247dp"
tools:layout_editor_absoluteY="211dp" />
</LinearLayout>
</RelativeLayout>

specify layout width of cardview to fit all phone screen sizes

need some advice here!
Basically, I want my card view to be like the 2nd pic but without specifying a specific width size, as specifying a specific size will cause the layout to look differently to in other phones.
What I have tried:
1) tried wrap_content, but the sizes of the card view will be different depending on the contents inside it. Some will be long until it's overlaying the index panel, then some will be short. Also, it is definitely not match_parent because the index panel will overlay the cardview.
2) specify a specific number (315dp) for the width. It looked great on my actual phone, but not on other emulators.
3) added "android:layout_toStartOf="#+id/recycler_search" to my card view layout, but there is no effect.
Perhaps I could just demonstrate using my phone, but that will not be efficient isn't it?
As such, anyone knows how I could overcome this? Any help is greatly appreciated!
Here are my codes:
card view layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="315dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardCornerRadius="10dp"
app:cardBackgroundColor="#f5f0f0"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_margin="5dp">
<LinearLayout
android:orientation="vertical"
android:layout_weight="9"
android:layout_width="0dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/keyword"
android:layout_marginLeft="10dp"
android:gravity="center_vertical|start"
android:textAllCaps="true"
android:textStyle="bold"
android:textColor="#000000"
android:textSize="15dp"
android:text="Baggage Management Interface Device
(BMID) Testing 123"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/codeHeader"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:gravity="center_vertical|start"
android:textStyle="bold"
android:textColor="#a8000000"
android:text="Code:"
android:textSize="13dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/acronym"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:gravity="center_vertical|start"
android:textStyle="italic"
android:textColor="#a8000000"
android:text="GST"
android:textSize="13dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<!--<LinearLayout-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content">-->
<!--<TextView-->
<!--android:id="#+id/ruleHeader"-->
<!--android:layout_marginLeft="10dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:gravity="center_vertical|start"-->
<!--android:textStyle="bold"-->
<!--android:textColor="#a8000000"-->
<!--android:text="Desc:"-->
<!--android:textSize="13dp"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content" />-->
<!--<TextView-->
<!--android:id="#+id/description"-->
<!--android:layout_marginLeft="5dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:gravity="center_vertical|start"-->
<!--android:textColor="#a8000000"-->
<!--android:text="If none are set then 'GST' is
set to NULL"-->
<!--android:textSize="13dp"-->
<!--android:maxLines="2"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content" />-->
<!--</LinearLayout>-->
<!--<LinearLayout-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content">-->
<!--<TextView-->
<!--android:id="#+id/relatedKeyword"-->
<!--android:layout_marginLeft="10dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:gravity="center_vertical|start"-->
<!--android:textColor="#a8000000"-->
<!--android:text="Related Keyword:"-->
<!--android:textSize="12sp"-->
<!--android:textStyle="bold"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content" />-->
<!--<TextView-->
<!--android:id="#+id/relatedKeyword1"-->
<!--android:clickable="true"-->
<!--android:layout_marginLeft="5dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:textColor="#a8000000"-->
<!--android:text="Keyword 1,"-->
<!--android:textSize="12sp"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"/>-->
<!--<TextView-->
<!--android:id="#+id/relatedKeyword2"-->
<!--android:clickable="true"-->
<!--android:layout_marginLeft="5dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:textColor="#a8000000"-->
<!--android:text="Keyword 2,"-->
<!--android:textSize="12sp"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"/>-->
<!--<TextView-->
<!--android:id="#+id/relatedKeyword3"-->
<!--android:clickable="true"-->
<!--android:layout_marginLeft="5dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:textColor="#a8000000"-->
<!--android:text="Keyword 3"-->
<!--android:textSize="12sp"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"/>-->
<!--</LinearLayout>-->
<TextView
android:id="#+id/tv_rules_read_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:textStyle="bold"
android:textSize="14sp"
android:clickable="true"
android:padding="5dp"
android:textColor="#android:color/holo_blue_dark"
android:text="#string/read_more"/>
</LinearLayout>
</LinearLayout>
main layout
<?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"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".KnowledgeActivity"
android:background="#drawable/bokeh10"
android:id="#+id/drawerLayout">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ImageView
android:id="#+id/drawable_header"
android:layout_width="match_parent"
android:layout_height="70dp"
android:src="#drawable/bg_login"/>
<com.mancj.materialsearchbar.MaterialSearchBar
android:id="#+id/search_bar"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:mt_speechMode="false"
app:mt_hint="Search" />
<in.myinnos.alphabetsindexfastscrollrecycler.IndexFastScrollRecyclerView
android:id="#+id/recycler_search"
android:layout_below="#+id/search_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:setIndexBarColor="#ffffff"
app:setIndexBarTextColor="#000000"/>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvNavView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:menu="#menu/navigation_menu"
android:layout_gravity="start">
</android.support.design.widget.NavigationView>
Edit: For everyone asking why not match_parent
This is how it looked like! The index panel is covering some parts of the card view. You may say it's just a little bit, but I have more card views with longer title.

Someone posted a solution and I don't know why it got deleted! I followed his solution and my issue is magically solved when I did little changes to my codes!
The OP's solution was to follow this gitHub (https://github.com/intuit/sdp/tree/master/sdp-android/src/main/res) and change the 351dp to 351sdp.
So here are the steps I did to somewhat solve my concern.
Create a new Value Resource File under the values folder
Name the file as positive_sdp
Follow exactly like what was written in the GitHub. The positive_sdp file should contain the relevant dimension you want your widget, drawable or anything to be. So in my positive_sdp xml file, I had these:
<dimen name="_315sdp">315.00dp</dimen>
<dimen name="_80sdp">80.00dp</dimen>
<dimen name="_250sdp">250.00dp</dimen>
I saved the file as usual.
At first, I forgot to change my 351dp to 'dimen/_27sdp', but when I run my app on 4 different phones (2 emulators & 2 actual phones), I realised that the width of my cardview is right before the index panel like how I wanted it to be. However, before this, if I stick to 351dp and run my app on the same 4 emulators, the width of my cardview was everywhere!
In conclusion, I believed my issue got solved by just creating the positive_sdp file.
I hope everyone can benefit from this!

Items are in wrong place in Android Studio emulator

I'm new to android studio and this is my first app.
It works correctly but having an issue with the emulator, it shows the button in the wrong place.
<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.dell_pc.myapplication.MainActivity">
<EditText
android:id="#+id/txtyear"
android:layout_width="193dp"
android:layout_height="60dp"
android:ems="10"
android:hint="Enter year of birth"
android:inputType="number"
tools:layout_editor_absoluteY="129dp"
tools:layout_editor_absoluteX="96dp" />
<Button
android:id="#+id/butage"
android:layout_width="115dp"
android:layout_height="41dp"
android:onClick="BuGetAge"
android:text="Show Age"
tools:layout_editor_absoluteY="277dp"
tools:layout_editor_absoluteX="135dp" />
</android.support.constraint.ConstraintLayout>
How can I make it to appear in the right place?

Select Component/Item(such as BUTTON) in activity_main.xml -> click on "Infer Constrains(as I show in attached file)"
Your item will take right place in ASE
Do same for the rest Component/Items

Click on an element and click the Magic Wand icon in the toolbar above the design view to Infer Constraints so the element will not jump to the (0, 0) position at runtime.

Do you absolutely need to use constraint layout? If not, you can use a relative layout, and use layout_centerHorizontal and layout_centerVertical like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<EditText
android:id="#+id/edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="blah blah"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="press"
android:layout_centerHorizontal="true"
android:layout_below="#id/edittext"
/>
</RelativeLayout>

tools:layout_editor_absoluteY and other attributes from tools namespace only have effect in layout editor. Your working code does not use these attributes, so your views are in upper left corner, because this is default. As noted above RelativeLayout or even LinearLayout suits better such simple layout.

Just change:
</android.support.constraint.ConstraintLayout>
to
</RelativeLayout>
Problem solved! Be happy :D

Handling Margin Top with Multiple Screens

I'm new to android studio and to developing a native android application. No i've done my splashscreen for the application. but i'm using "dp" attribute for positioning and sizing. But when i run the application on different screens(i.e phone vs tablet). there was an attribute marginTop that i set with 400dp but the element's position is different on the phone rather than the tablet.
What's the correct form to use when positioning and resizing??.. isn't dp supposed to handle this?!
here's my code
<?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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#181c2c">
<ImageView
android:id="#+id/splash_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/logo"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="19dp" />
<com.wang.avi.AVLoadingIndicatorView
android:id="#+id/avi"
android:scaleX="1.5"
android:scaleY="1.5"
android:layout_centerHorizontal="true"
android:layout_marginTop="340dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/AVLoadingIndicatorView"
android:visibility="visible"
app:indicatorName="BallPulseIndicator"
app:indicatorColor="#1ed760"
/>

Position Of Views in Android vs iOS?

I am new to Android development. I have been working in iOS since long. As in iOS when we want to put VIEW on xib on some exact position, we simply put it there, drag it up to that point.
For example say Two buttons at lower area in iOS, which look like below
As, I simply want them in middle, I will put them their. as below
Now same thing in Android environment, I go for following code,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/db1_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/myAwesomeTextView"
android:layout_width="wrap_content"
android:layout_height="1dip"
android:layout_centerInParent="true"
android:text="Veer Suthar" />
<TextView
android:id="#+id/myAwesomeTextView1"
android:layout_width="wrap_content"
android:layout_height="100dip"
android:layout_below="#id/myAwesomeTextView"
android:layout_centerInParent="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/myAwesomeTextView1"
android:gravity="center_vertical"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:onClick="buttonPressed"
android:text="Button One" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:onClick="buttonPressed"
android:text="Button Two" />
</LinearLayout>
</RelativeLayout>
It shows Activity Screen, like below
Now If I want to drag buttons, using GRAPHICAL LAYOUT, I can't move them as I want, and for spacing to put them into lower area, I need to put extra TextView .
Is there any better way to organise Android Activity GUI properly, like iOS?

I'll give you a brief example, since Android graphical layout is not as smooth as XCode.
To accomplish what you need, centering the two buttons in the screen, you can use a XML code like this:
<?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" >
<LinearLayout
android:id="#+id/layout_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_centerInParent="true">
<Button
android:id="#+id/button_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button One"/>
<Button
android:id="#+id/button_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Two"/>
</LinearLayout>
</RelativeLayout>
The trick is to use android:layout_centerInParent="true" for the only component that you want to be centered in the screen all other components can use that one for reference to be placed in the screen.
For example
<TextView
android:id="#+id/myAwesomeTextView1"
android:layout_width="wrap_content"
android:layout_height="100dip"
android:layout_above="#+id/layout_center"
android:text="Veer Suthar"/>
This is one way for doing this, you can always find a better and more comprehensible way to do things.
Hope this helped.

Add this to your LinearLayout:
android:layout_alignParentBottom = "true"
Childs in a RelativeLayout can be "glued" to a particular position relative to the parent layout or to other elements in the same layout using the xml tags listed here: http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html