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"
/>
Related
Here is the code I am using at the layout file. I am using Material components as theme style. Here I used both material component button and button, but I think they are both converted to material button due to my theming style:
<?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="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/createAccountBtn"
android:layout_width="238dp"
android:layout_height="wrap_content"
android:layout_marginStart="86dp"
android:layout_marginTop="35dp"
android:layout_marginEnd="87dp"
android:layout_marginBottom="318dp"
android:text="#string/create_account"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/signInBtn" />
<Button
android:id="#+id/signInBtn"
android:layout_width="237dp"
android:layout_height="wrap_content"
android:layout_marginStart="89dp"
android:layout_marginTop="282dp"
android:layout_marginEnd="85dp"
android:layout_marginBottom="14dp"
android:text="#string/common_signin_button_text"
app:layout_constraintBottom_toTopOf="#+id/createAccountBtn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The emmulator model and the model for which you designed the app might be different !
Please check that and revert back .
Apparently I need to use match_parent and wrap_content properties for layout_width and layout_height. One can see this documentation for its use with ConstraintLayout here: https://developer.android.com/training/multiscreen/screensizes
But I would suggest using LinearLayout as ConstraintLayout in my case behaved still badly because I had to define margin properties in exact dps which may not align with a certain screen size. I am adding the LinearLayout solution below which worked as I expected in portrait and landscape mode as well:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:gravity="center"
android:orientation="vertical"
android:padding="16dp"
tools:context=".MainActivity">
<Button
android:id="#+id/createAccountBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/create_account" />
<Button
android:id="#+id/signInBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/common_signin_button_text"/>
</LinearLayout>
I have a ViewPager with Cardviews, cardviews are displays correctly on certaing devices but in most are displays slimly.
The ViewPager is in a Fragment.
I'm using LinearLayout to CardView definition, I tried Relative but I have same problem.
https://ibb.co/kyNF5Yz "Example from differents devices"
Item.xml
https://gist.github.com/Bryan9797/1eda5e7d02d1a12140115a539f164e3e
Fragment_bateria.xml
https://gist.github.com/Bryan9797/b5d7b16a6d0599b7fd7f593226a4523d
activity_main.xml
https://gist.github.com/Bryan9797/632461d73286afa5493167048b8e19c0
I expect display Cardview correctly on different devices.
you can use sdp library for responsive XML for all devices.
https://github.com/intuit/sdp
you can install this dependency in gradle and us this sdp instead of dp.
you can set this sdp and set height to wrap_content in your xml layout as below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:gravity="center_vertical">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_5sdp"
app:cardCornerRadius="#dimen/_20sdp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="#dimen/_350sdp"
android:scaleType="centerCrop"
android:src="#color/colorAccent" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/image"
android:layout_marginLeft="#dimen/_15sdp"
android:layout_marginTop="10dp"
android:text="Escritorio ejecutivo"
android:textColor="#262626"
android:textSize="#dimen/_20ssp" />
<TextView
android:id="#+id/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_marginLeft="#dimen/_15sdp"
android:layout_marginTop="#dimen/_3sdp"
android:layout_marginRight="#dimen/_15sdp"
android:drawablePadding="#dimen/_10sdp"
android:ellipsize="end"
android:maxLines="4"
android:text="Escritorio ejecutivo"
android:textSize="#dimen/_15ssp" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
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!
I'm trying to make a imperial to metric conversion app, which is going fine, until I ran into problems with the Android Emulator. The layout is totally screwed up in the Emulator, and I have no idea why. http://imgur.com/a/IBOcs
EDIT:
The whole activity_main.xml code:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.daniel.converter.MainActivity"
tools:layout_editor_absoluteY="73dp"
tools:layout_editor_absoluteX="0dp">
<TextView
android:id="#+id/textViewMPH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MPH"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="90dp" />
<EditText
android:id="#+id/editTextMPH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number"
tools:layout_editor_absoluteX="85dp"
tools:layout_editor_absoluteY="77dp" />
<TextView
android:id="#+id/textViewTO"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="To"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="132dp" />
<TextView
android:id="#+id/textViewKMH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="KMH"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="168dp" />
<EditText
android:id="#+id/editTextKMH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number"
tools:layout_editor_absoluteX="85dp"
tools:layout_editor_absoluteY="156dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Convert!"
tools:layout_editor_absoluteX="146dp"
tools:layout_editor_absoluteY="229dp" />
</android.support.constraint.ConstraintLayout>
Issue is happening because you are using constraint layout but you have not provided any constraints for your items. Thus, every item is shown at (0,0) position.
Contraint Layout description:
The layout editor allows you to place widgets anywhere on the canvas, and it records the current position with designtime attributes (such as layout_editor_absoluteX.) These attributes are not applied at runtime, so if you push your layout on a device, the widgets may appear in a different location than shown in the editor. To fix this, make sure a widget has both horizontal and vertical constraints by dragging from the edge connections.
So either assign x and y values or use LinearLayout/RelativeLayout.
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