Navigation Drawer with header in Android - android

Using the help of http://www.learn2crack.com/2014/06/android-sliding-navigation-drawer-example.html
I managed to get my navigation drawer working. I have also added a header to my Drawer. In my header, I have a Imageview, two TextView
The data is showing up properly, but for some reason the UI is different in each phone. The image is getting cut or the background image is showing up big.
Here is the screen shot of Galaxy Nexus and Nexus 5 I have tested:
Nexus 5
Galaxy Nexus
Here is the header XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearTotalLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/backgroundforprofile"
android:baselineAligned="false"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/LinearLayoutforImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".30"
android:padding="10dp" >
<ImageView
android:id="#+id/imageforprofile"
android:layout_width="45dp"
android:layout_height="45dp"
android:src="#drawable/profilepic" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayoutforText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:layout_weight=".70"
android:orientation="vertical" >
<TextView
android:id="#+id/textforprofile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left"
android:text="Joe David"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<TextView
android:id="#+id/textforprofileemail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left"
android:text="JoeDavidJoeDavi#joedavidjoedavid.com"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
Can somebody help me fix this issue?
Thanks!
Update
As per advice from #Rohan Pawar and #westito I change the layout to relative The ImageView is not getting cut and text is coming out properly, but the background image is still a difference in Galaxy Nexus and Nexus 5. Please see my screenshot below.
Galaxy Nexus
Nexus 5
Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearTotalLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/backgroundforprofile"
android:baselineAligned="false"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageforprofile"
android:layout_width="45dp"
android:layout_height="45dp"
android:paddingLeft="5dp"
android:paddingTop="10dp"
android:src="#drawable/profilepic" />
<TextView
android:id="#+id/textforprofile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imageforprofile"
android:gravity="left"
android:paddingLeft="5dp"
android:paddingTop="10dp"
android:text="Dushyant Prabhu"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<TextView
android:id="#+id/textforprofileemail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textforprofile"
android:layout_toRightOf="#+id/imageforprofile"
android:gravity="left"
android:paddingLeft="5dp"
android:text="developer#sybershocknetworks.com"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</RelativeLayout>

The problem is your layout. Instead of LinearLayouts, try using RelativeLayout. It is more efficient for this layout.
<RelativeLayout>
<ImageView id="#+id/image" />
<TextView layout_toRightOf="#+id/image" />
</RelativeLayout>
This is a "pseudo" sample. You can position your TextView next to ImageView

#TheDevMan i have both devices Nexus 5 and Galaxy nexus, i have tested out your code works on both device perfectly
Samsung Galaxy Nexus = 720 x 1280 pixels, 4.65 inches (~316 ppi pixel density)
LG Nexus 5= 1080 x 1920 pixels, 4.95 inches (~445 ppi pixel density)
but i dont have your background image to test

try this for your header & customize it as you want it will work for sure
<?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="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:layout_marginLeft="12dp"
android:layout_marginBottom="7dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/image_header"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_marginTop="4dp"
android:background="#drawable/placeholder"
android:scaleType="fitXY" />
<TextView
android:id="#+id/nav_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="18dp"
android:text="Krunal Patel"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ffff"
android:textSize="19dp" />
</LinearLayout>
</LinearLayout>

Related

XML Layout is different from emulator

I have spent 4 hours to resolve this issue but I couldn't solve it Please any help would be appreciated. As I update my android studio this issues stuck in my android studio. I am using android studio latest version 3.2.1.
<?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=".View.First_Screen">
<ImageView
android:id="#+id/firstScreen_image"
android:layout_width="match_parent"
android:layout_height="350dp"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:background="#drawable/snap"
android:src="#drawable/black_transparent" />
<LinearLayout
android:id="#+id/firstScreen_buttonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/firstScreen_image"
android:layout_marginTop="38dp"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/firstScreen_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="2dp"
android:layout_weight="0.5"
android:background="#drawable/button_background"
android:text="Login" />
<Button
android:id="#+id/firstScreen_register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="5dp"
android:layout_weight="0.5"
android:background="#drawable/button_background"
android:text="register" />
</LinearLayout>
<TextView
android:id="#+id/firstScreen_connectDriver"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/firstScreen_buttonLayout"
android:layout_marginLeft="5dp"
android:layout_marginTop="32dp"
android:text="Or be a captain of uber"
android:textColor="#311B92"
android:textSize="18dp"
android:textStyle="bold" />
</RelativeLayout>
Here is attached image where you can see the difference of layout on both devices
First I would like to confirm which emulator you are using, is it nexus 4 or some other emulator, because in the preview your screen is selected nexus 4 and the view is shown for devices that has the same pixel density and resolution as nexus 4,
Next you have given a fixed height in dp to your ImageView with id - "firstScreen_image". that fixed height i.e. 350dp will behave differently for different devices.
So next question what do you want your screen to look like and how can I help?

Grey area on nexus 9

I'm facing an issue on nexus 9.
I have a "basic layout" for my view:
<RelativeLayout android:id="#+id/micContainer" android:layout_width="match_parent" android:layout_height="wrap_content"
android:background="#99ffffff" android:layout_alignParentBottom="true" android:layout_marginBottom="15dp" >
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_centerInParent="true">
<TextView android:id="#+id/main_ment_0" style="#style/ment_txt" android:text="" android:layout_margin="5dp" />
<TextView android:id="#+id/main_ment_1" style="#style/ment_txt" android:text="" android:layout_margin="10dp" android:layout_marginLeft="10dp" android:visibility="gone" />
<TextView android:id="#+id/main_ment_2" style="#style/ment_txt" android:text="" android:layout_margin="10dp" android:layout_marginLeft="10dp" android:visibility="gone" />
</LinearLayout>
<ImageView android:id="#+id/main_mic" android:layout_width="70dp" android:layout_height="70dp" android:background="#drawable/mic_0" android:layout_margin="3dp" android:layout_centerVertical="true" />
</RelativeLayout>
This works well on a nexus 5:
However on a nexus 9, a grey area is visible and I can't figure why:
Do you have any idea why this grey area is visible (and if yes why it doesn't show on nexus 5) ?
Thank you in advance for your help.
Edit: the background you see behind the relativeLayout is a videoView.
I also tried on other phones (Samsung S*, Pantech Vega) and it's working well.
Here is the complete screenshot of what I have (and what I want) on my nexus 5:
your base RelativeLayout height is wrap_content, change to
android:layout_height="match_parent"

I can not display the same design on different phones(DialogFragment)

I am have some problem with displaying design on different devices.
I am do not solve this problem.
This is photo - enter link description here
This is xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="39dp"
android:layout_marginLeft="39dp"
android:layout_gravity="center_horizontal"
android:background="#ffffffff">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="225.75dp"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="ItemName"
android:id="#+id/itemName"
android:layout_weight="3"
android:paddingTop="14dp"
android:paddingLeft="14dp"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="ItemPrice"
android:id="#+id/itemPrice"
android:layout_weight="1"
android:paddingRight="14dp"/>
</LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="161.75dp"
android:id="#+id/itemImage"
android:layout_weight="16"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buy 1 and Get 2 for free "
android:id="#+id/textView9"
android:layout_gravity="center_horizontal"
android:paddingBottom="25dp"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="101dp"
android:layout_gravity="center_horizontal"
android:background="#drawable/placeholder_blue"
android:gravity="center_vertical"
android:paddingTop="26dp"
android:paddingBottom="26dp">
<Button
android:layout_width="49dp"
android:layout_height="49dp"
android:text="-"
android:id="#+id/itemMinus"
android:layout_marginLeft="48dp"
android:background="#fff"/>
<TextView
android:layout_width="match_parent"
android:layout_height="49dp"
android:text="1"
android:id="#+id/textView11"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:background="#fff"
android:textAlignment="gravity"/>
<Button
android:layout_width="49dp"
android:layout_height="49dp"
android:text="+"
android:id="#+id/itemPlus"
android:layout_marginRight="48dp"
android:background="#fff"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:background="#android:color/transparent"
android:paddingTop="38.5dp"
>
<ImageButton
android:layout_width="65.25dp"
android:layout_height="65.25dp"
android:id="#+id/itemCancel"
android:src="#drawable/cancel"
android:background="#android:color/transparent"
android:layout_marginRight="12dp"/>
<ImageButton
android:layout_width="65.25dp"
android:layout_height="65.25dp"
android:id="#+id/itemAdd"
android:src="#drawable/apply"
android:background="#android:color/transparent"
android:layout_marginLeft="12dp"/>
</LinearLayout>
</LinearLayout>
On the photo left to right:
LG g3 - 5" 1280 x 720 294 dpi
samsung galaxy s5 - 5,1" 1080x1920 432 dpi
samsung galaxy note 4 - 5.7" 1440x2560 515 dpi
nexus 6 5.96" 1440x2560 493 dpi
the problem is that my DialogFragment displaying design on different devices. I need to make it always as the first phone (LG g3).
what am I doing wrong? I have 5 folders with pictures mdpi hdpi xhdpi xxhdpi xxxhdpi. I cut them a script in Photoshop. I checked the calculator. all the same. but still displayed crooked. I tried to use the values weight.
EDIT: All pictures displayed normal. But my DialogFragment displayed always at the center. I need to top-left corner DialogFragment was always under the button is on him and had no padding down
Why not try mixing in RelativeLayout? If you use the layout_weight it really depends on the screen size and density from my understanding and if you use RelativeLayout maybe you could align them the way you want properly. Like using its center_horizontal="true", above="#id/x", below="#id/y".

Design for tablet

I'm new on android and I would like to build a mobile application for all screens sizes, I currently face a problem with the tablet size. when i apply it for the 10.1 inch screen the design is very small and I try to solve it and no thing happened :'( .
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/registrtion_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bkg"
tools:context=".registrationActivity" >
<RelativeLayout
android:id="#+id/registration_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<RelativeLayout
android:id="#+id/registration_box"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/register_bkg"
android:padding="15dp" >
<EditText
android:id="#+id/regMaymoIdEdtTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="65dp"
android:background="#drawable/change_pass_text_box"
android:hint="#string/maymoId"
android:inputType="number"
android:padding="15dp" >
<requestFocus />
</EditText>
<EditText
android:id="#+id/regPhoneEdtTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/regMaymoIdEdtTxt"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="#drawable/change_pass_text_box"
android:hint="#string/phone_number"
android:inputType="phone"
android:padding="15dp" />
<Button
android:id="#+id/regSubmitBtn"
android:layout_width="100dp"
android:layout_height="35dp"
android:layout_below="#+id/regPhoneEdtTxt"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
android:layout_marginTop="15dp"
android:background="#drawable/change_pass_submit_button" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
You can use the following resource folders to create layouts for devices with larger screens :
7 inch tablets
res\layout-sw600dp
10 inch tablets
res\layout-sw720dp
For A full reference..Check this

Android UI scaling strange?

The UI in our app does not scale properly in different phones. The screenshots below are from Samsung 2 and Xperia Z1 Compact. Both phones are using medium sized screens so thereby I thought the black navigation-bar introduced since API 14 caused the scaling problem. I added the following code to my project but the outcome was still the same:
mMainView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION);//sets the layout as if the navigation bar is hidden (even if it’s not)
mMainView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE);//help your app maintain a stable layout.
= Xperia Z1 Compact
=
Samsung 2
As you can see in screen captures the height is not what it is supposed to be in Xperia (We want the UI to scale as it does in Samsung 2). The text is smaller in Xperia, our logo is smaller (mostly on the height) and so on. It seems like the Xperia UI has a wider width or? What may cause this if it is not the navigation bar? I will post the XML-file aswell even if I am 99% sure there is nothing wrong with it:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingBottom="4sp"
android:paddingLeft="35dp"
android:paddingRight="35dp"
android:weightSum="1.0" >
<ViewSwitcher
android:id="#+id/landing_search_switcher_banner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inAnimation="#anim/fadein"
android:outAnimation="#anim/fadeout" >
<ImageView
android:id="#+id/landing_search_image_banner_license"
android:layout_width="wrap_content"
android:layout_height="230dp"
android:layout_gravity="center"
android:layout_marginTop="1sp"
android:contentDescription="#string/ContentDescriptionLogo"
android:gravity="center"
android:scaleType="fitCenter"
android:src="#drawable/app" />
<ImageView android:id="#+id/landing_search_image_banner"
android:layout_width="wrap_content"
android:layout_height="230dp"
android:layout_marginTop="1sp"
android:contentDescription="#string/ContentDescriptionLogo"
android:gravity="center"
android:layout_gravity="center"
android:scaleType="centerInside"
android:src="#drawable/app"/>
</ViewSwitcher>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:orientation="horizontal"
android:weightSum="1.0" >
<EditText
android:id="#+id/landing_search_field"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_weight="0.75"
android:background="#android:drawable/edit_text"
android:digits="/0123456789.abcdefghijklmnopqrstuvwxyz"
android:gravity="left|center"
android:hint="xlarge res"
android:inputType="number"
android:maxLines="1"
android:textSize="35sp"/>
<ImageButton
android:id="#+id/landing_search_button"
android:layout_width="0dip"
android:layout_height="80dp"
android:layout_gravity="center"
android:layout_weight="0.25"
android:background="#android:drawable/btn_default"
android:contentDescription="#string/ContentDescriptionSearchButton"
android:scaleType="center"
android:src="#drawable/ic_button_search" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="2sp"
android:layout_marginRight="4sp"
android:layout_marginTop="6sp"
android:background="#ffffff"
android:orientation="vertical" >
<LinearLayout style="#style/BarTitleStyle"
android:layout_height="58dp"
android:layout_width="fill_parent"
>
<TextView
android:id="#+id/landing_search_list_topbar_label"
style="#style/TitleTextStyle"
android:text="#string/LabelInformation"
android:textSize="32sp"
>
</TextView>
<include layout="#layout/menu_button"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="1.0" >
<ListView
android:id="#+id/landing_search_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:background="#color/white"
android:cacheColorHint="#color/white"
android:gravity="left"
android:isScrollContainer="false"
android:visibility="gone" />
<LinearLayout
android:id="#+id/landing_search_search_information_section"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_weight="0.9"
android:orientation="vertical"
android:paddingBottom="9sp"
android:visibility="visible" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="vertical"
android:weightSum="1.0" >
<TextView
android:id="#+id/landing_search_current_book_label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="-9.5dp"
android:gravity="center|bottom"
android:text="#string/LabelCurrentBook"
android:textColor="#515151"
android:textSize="39sp"
android:textStyle="bold" />
<Button
android:id="#+id/landing_search_button_book"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="center|top"
android:ellipsize="end"
android:maxLines="1"
android:minWidth="170sp"
android:textSize="39.5sp"
android:scrollHorizontally="true"
android:singleLine="true"
android:background="#null"
android:text="#string/ButtonLabelChooseBook"
android:textColor="#1453DB" />
<Button
android:id="#+id/landing_search_button_school"
android:layout_width="wrap_content"
android:layout_height="92sp"
android:layout_gravity="center|top"
android:ellipsize="end"
android:maxLines="1"
android:minWidth="170sp"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="#string/ButtonLabelChooseSchool"
android:textColor="#1453DB"
android:visibility="gone" />
</LinearLayout>
<!--
<Button
android:id="#+id/landing_search_choose_book_button"
android:layout_width="wrap_content"
android:layout_height="18.5dp"
android:layout_gravity="center|top"
android:autoLink="web"
android:background="#null"
android:gravity="center|top"
android:text="#string/ButtonLabelChooseBook"
android:textColor="#5c5cff"
android:textSize="14sp" >
</Button>
-->
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginRight="3sp"
android:layout_marginTop="-5.5sp"
android:gravity="center"
android:text="#string/LabelNoSearchResult"
android:textColor="#7f7f7f"
android:textSize="28.5sp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6.5sp"
android:gravity="center"
android:text="#string/LabelNoSearchResult2"
android:textColor="#515151"
android:textSize="28.5sp"
android:layout_marginBottom="7.5dp" >
</TextView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:autoLink="email"
android:gravity="center"
android:text="#string/LabelContactEmail"
android:textColor="#1453DB"
android:textColorLink="#1453DB"
android:textSize="32.5sp"
android:layout_marginBottom="7.5dp" >
</TextView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/landing_search_button_buy"
android:layout_width="420dp"
android:layout_height="130dp"
android:layout_gravity="center"
android:layout_marginTop="9dp"
android:background="#drawable/button_buy"
android:contentDescription="#string/ButtonLabelSubscribe"
android:gravity="center"
android:paddingBottom="0sp"
android:textColor="#515151"
android:textSize="14.5sp"
android:textStyle="bold" >
</Button>
<Button
android:id="#+id/landing_search_premium"
android:layout_width="825sp"
android:layout_height="220sp"
android:layout_gravity="center"
android:layout_marginTop="-12dp"
android:background="#drawable/premium_logo"
android:gravity="center"
android:paddingBottom="0sp"
android:textColor="#515151"
android:textSize="14.5sp"
android:textStyle="bold" >
</Button>
</LinearLayout>
These two devices may not have exactly the same width in DP units.
Assuming you are talking about the Galaxy S2:
They both have approximately the same size screen. However, the S2 is 217ppi, which is toward the low end of the hdpi bucket, while the Xperia is 342ppi, which is toward the high end of the xhdpi bucket. It is because of where they fall within their own density buckets that they scale somewhat differently, and there's not much you can do about this.
DP and SP units only ensure that your elements are approximately the same size on all devices.
Think about older versions of Windows you may have used, where apps ignored dpi of the monitor. If you used a monitor with a higher dpi, you simply saw smaller text. This is like all monitors were in the same dpi bucket.
Android's multiple dpi buckets help support a much wider range of screen densities, but you still get the same effect as you do in Windows when comparing devices that are at different ends of their respective dpi buckets.
iOS doesn't have this problem because each "bucket" corresponds with exactly one dpi, not a range of dpi.

Categories

Resources