I wrote this login layout that fit perfectly on my device. My problem is that on another device will not be displayed correct because specified values are used for top, left margins.
What I need to do to be sure that constrains will be keeped on any device?
P.S. I have images for mdpi, hdpi etc.
The code is:
<?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:id="#+id/activity_login"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/AppTheme.NoActionBar"
tools:context="com.abc.abc.Login"
android:layout_gravity="center_horizontal">
<RelativeLayout android:id="#+id/content_container"
android:layout_width="match_parent"
android:layout_height="710dp"
android:gravity="center_horizontal">
<RelativeLayout android:id="#+id/login_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView android:id="#+id/login_button"
android:src="#drawable/login"
android:layout_marginTop="588dp"
android:layout_width="360dp"
android:layout_height="53dp" />
<ImageView android:id="#+id/email_and_password"
android:src="#drawable/email_and_password"
android:layout_marginTop="465dp"
android:layout_width="362dp"
android:layout_height="107dp" />
<ImageView android:id="#+id/separator"
android:src="#drawable/separator"
android:layout_marginStart="169dp"
android:layout_marginTop="412dp"
android:layout_width="25dp"
android:layout_height="12dp" />
<ImageView android:id="#+id/facebook_button"
android:src="#drawable/facebook"
android:layout_marginTop="383dp"
android:layout_width="166dp"
android:layout_height="66dp" />
<ImageView android:id="#+id/google_button"
android:src="#drawable/google"
android:layout_marginStart="196dp"
android:layout_marginTop="383dp"
android:layout_width="166dp"
android:layout_height="66dp" />
<ImageView android:id="#+id/dont_have_an_account"
android:src="#drawable/dont_have_an_account"
android:layout_marginStart="54dp"
android:layout_marginTop="665dp"
android:layout_width="255dp"
android:layout_height="19dp" />
<ImageView android:id="#+id/logo"
android:src="#drawable/logo1"
android:layout_marginTop="80dp"
android:layout_width="220dp"
android:layout_height="219dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</RelativeLayout>
Try not to use marginTop on all the views. Instead set the top most view with a marginTop and then all the images below them can be placed by android:layout_below="<imagView id>" and with some marginTop relative to the view above and not the parent.
You can check this answer
Related
I have 4 ImageViews (arrow key pictures) in a RelativeLayout.
I want to position the up arrow key above the left one (not exactly above), attached a sample layout here (The left one is what I want).
However, I don't want to use the tag android:layout_marginTop="165dp" as different devices have different screen sizes.
I just want to use android:layout_above="#+id/left", to perfectly position it above the left arrow. But when I do so, without using android:layout_marginTop, the outcome looks like this (what I do NOT want).
How do I make my arrow key arrangement look aligned correctly, on all devices?
Here is my XML:
<?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=".ControllerActivity">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/up"
android:layout_width="84dp"
android:layout_height="96dp"
android:layout_above="#+id/left"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="165dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
app:srcCompat="#drawable/up" />
<ImageView
android:id="#+id/left"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/up"
android:layout_toStartOf="#+id/up"
app:srcCompat="#drawable/left" />
<ImageView
android:id="#+id/down"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="#+id/left"
android:layout_centerHorizontal="true"
app:srcCompat="#drawable/down" />
<ImageView
android:id="#+id/right"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/up"
android:layout_toRightOf="#+id/up"
app:srcCompat="#drawable/right" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
Thanks in advance.
First, i would like to point out that, that Relative layout where it is right now is redundant. So you can make it your parent layout instead of Constraint layout.
To accomplish what you want, remove alignParentTop on you up arrow.
So, your code will look like this:
<?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=".ControllerActivity">
<ImageView
android:id="#+id/up"
android:layout_width="84dp"
android:layout_height="96dp"
android:layout_above="#+id/left"
android:layout_centerHorizontal="true"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
app:srcCompat="#drawable/up" />
<ImageView
android:id="#+id/left"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/up"
android:layout_toStartOf="#+id/up"
app:srcCompat="#drawable/left" />
<ImageView
android:id="#+id/down"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="#+id/left"
android:layout_centerHorizontal="true"
app:srcCompat="#drawable/down" />
<ImageView
android:id="#+id/right"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/up"
android:layout_toRightOf="#+id/up"
app:srcCompat="#drawable/right" />
</RelativeLayout>
Creating layout and can not solve margins up and above the ImageView
(and don't understand why they appear).
Logo itself is without these margins.
I use layout_width="250dp" the same as for the buttons.
And layout_height="wrap content".
Layout code is here:
<?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:background="#drawable/menu_background"
android:gravity="center"
android:layout_gravity="center"
android:orientation="vertical"
>
<ImageView
android:layout_width="250dp"
android:layout_height="wrap_content"
android:src="#drawable/game_logo"
/>
<Button
android:id="#+id/start_button"
style="#style/menuButtonStyle"
android:layout_margin="5dp"
android:text="#string/start_button" />
<Button
android:id="#+id/result_button"
style="#style/menuButtonStyle"
android:layout_margin="5dp"
android:text="#string/high_score" />
<Button
android:id="#+id/settings_button"
style="#style/menuButtonStyle"
android:layout_margin="5dp"
android:text="#string/settings" />
<Button
android:id="#+id/about_button"
style="#style/menuButtonStyle"
android:layout_margin="5dp"
android:text="#string/about_button" />
</LinearLayout>
Can I manage this without setting ImageView's layout_height in dp?
Set following property in your ImageView:
android:adjustViewBounds="true"
i am new in android , i am facing problem in setting the image position . i set image position in layout but when i check on device or emulator it changes position.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lay_ring"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/backfull_a"
android:orientation="vertical" >
<ImageButton
android:id="#+id/id_ringButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="44dp"
android:layout_marginTop="16dp"
android:background="#android:color/transparent"
android:src="#drawable/button_ring" />
<ImageView
android:id="#+id/image_hand_lastACt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:src="#drawable/white" />
<ImageView
android:id="#+id/id_ring_finger"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="144dp"
android:layout_marginRight="70dp"
android:layout_toLeftOf="#+id/id_ringButton"
android:src="#null" />
<ImageView
android:id="#+id/id_fingA_ring"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/id_imgback"
android:layout_marginRight="21dp"
android:layout_marginTop="48dp"
android:src="#drawable/a_style_a" />
<ImageView
android:id="#+id/id_fingB_ring"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/id_ringButton"
android:layout_marginRight="44dp"
android:layout_toLeftOf="#+id/id_fingA_ring"
android:src="#drawable/a_style_b" />
<ImageButton
android:id="#+id/id_next_ring"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/id_ringButton"
android:layout_alignTop="#+id/id_ring_finger"
android:layout_marginTop="46dp"
android:background="#android:color/transparent"
android:src="#drawable/aero_right" />
</RelativeLayout>
i tried but did not find proper solution . give some demo or link that is easily understandable .
android handset has many DPIs. so,you should not set the position too accurate.
You can use some relative description like toRightof / alignPerentRight etc.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/splash_bg" />
<ImageView
android:id="#+id/photo_area"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"
android:adjustViewBounds="true" />
<TextView
android:id="#+id/share_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/photo_area"
android:layout_marginLeft="20dp"
android:text="#string/share_title"
android:textColor="#android:color/white" />
<EditText
android:id="#+id/share_content"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#+id/share_title"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="#drawable/custom_textarea"
android:gravity="top|left"
android:hint="default message" />
<ImageView
android:id="#+id/share_submit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/share_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:src="#drawable/photo_taken_btn_submit" />
</RelativeLayout>
</ScrollView>
This is the xml of the layout. The photo_area by default do not have image set but it will download a picture from internet and set on it. The problem is the height of the content view is longer than it should be, so there is a lot of empty space at the end . I try to removed the background in linearlayout, the height reduced a bit but still there are some empty space how to fix it? Thanks
use android:adjustviewbound = "true" in the imageview xml fix the problem.
I've created a gridlayout to put 4 images inside it and heres the xml :
<GridLayout
android:layout_width="match_parent"
android: layout_height="238dp"
android:columnCount="1"
android:useDefaultMargins="true"
tools:ignore="NewApi" >
<ImageView ... />
<ImageView ... />
<ImageView ... />
<ImageView ... />
</GridLayout>
So they've appeard like this :
and what i actually want is somthing like this :
And i don't want to use dp margin or padding because of the differences between devices resolutions.
So, How can i centralized those two colomns considering responsive design ?
Instead of using GridLayout I would suggest you do the following:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:id="#+id/imgView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imgView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imgView1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imgView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imgView1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imgView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imgView2"
android:layout_toRightOf="#+id/imgView3"
android:src="#drawable/ic_launcher" />
</RelativeLayout>