Develop Reference

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?

Progress line of standard Seekbar doesn't appear

I have found a problem with SeekBar. On devices with Android 4,5,6 I do not have such problem, but on Samsung S8 with Android 7 problem with progress line occurs. If I remove rotation parameter, SeekBar becomes horizontal and problem disappears, but I need standard vertical SeekBar.
Update: the same problem on Nexus emulator API 24 (Android 7).
I have attached 2 screen shots from my app running on Android 6 (LG, Sony) and Android 7 (Samsung S8) and code:
<SeekBar android:id="#+id/seekBar"
android:layout_width="100dp"
android:layout_height="42dp"
android:background="#20FFFFFF"
android:rotation="270"
android:layout_gravity="center"
>
</SeekBar>
and full code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/icon"
android:layout_width="42dp"
android:layout_height="24dp"
android:paddingTop="6dp"
android:background="#20FFFFFF"
android:layout_gravity="center"
android:src="#drawable/iconvolume" />
<LinearLayout
android:layout_width="42dp"
android:layout_height="100dp"
android:gravity="center">
<SeekBar android:id="#+id/seekBar"
android:layout_width="100dp"
android:layout_height="42dp"
android:background="#20FFFFFF"
android:rotation="270"
android:layout_gravity="center"
>
</SeekBar>
</LinearLayout>
</LinearLayout>

i've got this problem, after try many many approach, i was found solution. Just add android:layerType="hardware" or android:layerType="software" will solve your problem
<SeekBar android:id="#+id/seekBar"
android:layout_width="100dp"
android:layout_height="42dp"
android:background="#20FFFFFF"
android:rotation="270"
android:layerType="hardware"
android:layout_gravity="center"
>
</SeekBar>

Chat right alignment issue on Samsung Galazy s3 API 18

I am developing an android application that also implements a chat but I am facing a weird issue on a galaxy s3 device running api 18.
s the image clearly show the text aligned on the right isn't well formatted as it should be on a single line. The layout file is as simple as possibile and no issue is shown on other phones and emulators.
Issue Image
Here is my xml layout file:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textMine"
android:layout_marginBottom="15dp"
android:visibility="visible" >
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/silh"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"
android:id="#+id/profilePicMine"
android:layout_alignParentTop="true"
android:focusable="false" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/profilePicMine"
android:layout_toStartOf="#+id/profilePicMine"
android:id="#+id/nuvolaMine">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:visibility="gone"
android:layout_marginRight="10dp"
android:layout_marginLeft="80dp"
android:src="#drawable/home_pic"
android:id="#+id/picMine"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/chat_yellow"
android:paddingRight="15dp"
android:layout_marginRight="10dp"
android:id="#+id/textLayoutMine"
android:paddingBottom="10dp"
android:visibility="visible"
android:paddingTop="10dp"
android:paddingLeft="10dp">
<com.sonarmusic.robotoTextViews.RobotoRegularTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="16sp"
android:text="non so"
android:id="#+id/textMessageMine" />
</RelativeLayout>
</RelativeLayout>
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignBottom="#id/profilePicMine"
android:layout_alignLeft="#id/profilePicMine"
android:src="#drawable/verde_on"
android:id="#+id/isArtistMine"/>
<RelativeLayout
android:layout_width="5dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:background="#color/chat_yellow"
android:layout_alignParentTop="true">
</RelativeLayout>
<com.sonarmusic.robotoTextViews.RobotoLightTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="6sp"
android:textColor="#color/gray_text"
android:text="08-08-2016"
android:id="#+id/timeMine"
android:layout_marginRight="10dp"
android:layout_below="#+id/nuvolaMine"
android:layout_marginTop="5dp"
android:layout_alignLeft="#+id/nuvolaMine" />
</RelativeLayout>
To me it looks like an issue due to right alignment that either android api 18 or both os and device can't render well, another reason why I have this thought is that the texts on the left side(the received ones in green background) are formatted the right way. But I have no clue on how possibily solve it.
PS Not supporting that device is NOT an option

Replace
android:layout_width="wrap_content"
by
android:layout_width="match_parent"
in your RelativeLayouts

Trying to understand Android layouts, image sizes and relations

I'm developing apps for android since over a year now with success, but one thing is still a problem for me:
How to design a layout with a combination of TextViews, ImageViews and Buttons while retaining the relation between each elements on different screen sizes.
I want to build a layout like this:
It's for a listview, so many of these layouts are used. The app has a different layout for smartphones and tablets.
So the orange button on the right should always have 3 lines of text but should still have a maximum width, the image on the left should have the same height as the button on the right. The 3 lines of text in the middle should take up as many space as they can. The star image should have the same hight as the text on their right.
I've managed to build a similar test layout with a TableLayout, here are the previews from AndroidStudio:
Nexus S
Nexus 6
On the Nexus S screen size, the layout is OK but on bigger screens it's ugly. The button is too small, the image on the left is also too small.
Here is the code for my test layout:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
>
<TableRow android:orientation="horizontal"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/iv1"
android:layout_width="80dp"
android:layout_height="match_parent"
android:contentDescription="#string/dummy"
android:padding="#dimen/raster4dp"
android:scaleType="fitXY"
android:src="#drawable/avatar_1" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some nice text here"
android:layout_alignParentLeft="true"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv1"
android:src="#drawable/ic_male_user_bw"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:layout_toRightOf="#id/iv2"
android:layout_alignBottom="#id/iv2"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/iv2"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_male_user_bw"
/>
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:layout_toRightOf="#id/iv3"
android:layout_alignBottom="#id/iv3"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
</RelativeLayout>
<Button
android:id="#+id/btn1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:background="#drawable/button_dropshadow_black_xml"
android:text="Line1\nLine2\nLine3"
android:textColor="#android:color/white" />
</TableRow>
</TableLayout>
So hopefully my question is not too silly, but i have some problems understanding how to fix this. Currently I'm using a width of fixed 80dp on the button and the image to the left. I think this is not realy the way it works on Android.
What sizes do i need to use here, what kind of layouts?
The sections about sreensizes etc. on the developer site is known by me (https://developer.android.com/guide/practices/screens_support.html) but it wasn't that helpful to me.
Thanks for help! :)

Each terminal has different dimensions. If you put a button that has a size of 80dp, when other terminal screen is larger, that button is going to be smaller compared to the terminal screen you were doing the tests.
You should play with WEIGHT.
| | | |
|_____________|_________________________|____________|
0.3 0.5 0.2 0.3 + 0.5 + 0.2 = 1 <-Weight.
Read this, will help.
Also there's a question similar to yours, check it too.

DP is for setting a fixed amount of pixels, if you don't want to consider the pixel density of your device's screen. This lets you that a button would be shown with the same size in a Nexus 4,5 or in a Samsung Galaxy Mini.
The same "absolute" size. This means that if your image is too big, it could fit in Nexus, but no in the other because of its smaller screen. This is due to the fact that it does not depend on the screen size, neither the pixel density.
What I hardly recommend you is the use of LinearLayouts (with their attribute weight) and RelativeLayouts as direct children (in case you need them). This could be "the same" (not exactly) than the use of "%" in CSS.
Here, you can see an example of weight attribute (The second answer gives you more tips).
Linear Layout and weight in Android
I hope this helps!!

check this .... increase parent layout height if needed:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="dummy"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6"
android:orientation="vertical" >
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some nice text here"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/iv24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:background="#565657"
android:text="Line1\nLine2\nLine3"
android:textColor="#android:color/white" />
</LinearLayout>

Navigation Drawer with header in 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>