Develop Reference

Why is the look of the activity different in the Android Studio preview than on the device?

I created an navigation drawer activity and found that its content page looks different in the preview.
This is the preview.
And this is the AVD appearance (it looks like a real device too).
XML code is:
<?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:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.xy.xy.HomePage">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="160sp"
android:layout_marginLeft="5sp"
android:layout_marginRight="5sp"
android:layout_marginTop="5sp">
<ImageView
android:id="#+id/TestMenuImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
app:srcCompat="#drawable/bg1"
tools:scaleType="centerCrop" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
tools:background="#color/hbm_text_background">
<TextView
android:id="#+id/TestMenuName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5sp"
android:contentDescription="#string/app_name"
android:text="#string/test"
android:textColor="#color/white" />
</RelativeLayout>
<Button
android:id="#+id/TestMenuButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</LinearLayout>
What do you think where the problem is?

Try adding android:scaleType="fitXY" in ImageView like this:
<?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:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.xy.xy.HomePage">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="160sp"
android:layout_marginLeft="5sp"
android:layout_marginRight="5sp"
android:layout_marginTop="5sp">
<ImageView
android:id="#+id/TestMenuImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
app:srcCompat="#drawable/bg1"
android:scaleType="fitXY"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
tools:background="#color/hbm_text_background">
<TextView
android:id="#+id/TestMenuName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5sp"
android:contentDescription="#string/app_name"
android:text="#string/test"
android:textColor="#color/white" />
</RelativeLayout>
<Button
android:id="#+id/TestMenuButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</LinearLayout>
That's probably a little bug with ImageViews´ previews in Android Studio,
Hope it helps

EDIT: I see you've included the style file and it does appear that your app is running the same style (AppTheme) as your preview so I think we can possibly rule out that as a culprit.
I doubt this makes a difference but I noticed your preview is running api 27 and your device is running api 27.
Try removing the
tools:context="com.xy.xy.HomePage" and see if it makes a difference.
The preview can only show you the current view. It doesn't know the parent view. The child view may have a parent view that constricts the size of the child view. Let's say that your image is set to width="match_parent". In this case, the preview may expand the image to fill the full width but at runtime your image my be placed inside a parent with a width="100dp" which would cause the image to have a width of only 100dp. Padding and margin of the parent view can also cause an issue.
If this isn't the problem then it may be a styling issue. I'd have to see more of your Theme and Style setup in order to know for sure. Your preview might be showing you a different style/theme than what you are actually using at runtime.

Android Studio image shown in Design screen but not in emulator

An image I use (.jpg) in my Android Project is shown in the "Design" but when I start an emulator, it is not there. Other images are also not loaded.
I found some possible solutions Image showing in Android Studio but not on phone but none of the solutions worked in my case. To sum up, I tried:
moving image to a drawable-xxhdpi or mipmap--xxhdpi
using other image and also a different format (.png)
adding android:adjustViewBounds="true"
clean/rebuild project etc
No success. I work on OS X
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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/testimage"
android:id="#+id/imageView"
/>
<TextView
android:text="test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView2"
android:textAlignment="center" />
</LinearLayout>
</RelativeLayout>

Can't see Button over fullscreen Imageview

I'm trying to show a button over a fullscreen image. I tried to use RelativeLayout as shown in this question but I cannot see the Button.
Can someone tell me why this code isn't working?
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/pitchImageView"
android:src="#drawable/gaa_pitch"
android:scaleType="centerCrop"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start"
android:id="#+id/stopwatchButton"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
Apologies if this qualifies as a duplicate question.
EDIT:
Screenshots of the activity.
Android design tab
Emulator at runtime

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/pitchImageView"
android:src="#drawable/gaa_pitch"
android:scaleType="centerCrop"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start"
android:id="#+id/stopwatchButton"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>

My friend you can use FrameLayout alternatively ,and checkout this site : Android Frame Layout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/pitchImageView"
android:src="#drawable/desert_road"
android:scaleType="centerCrop"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
android:src="#drawable/ic_clear_white_24dp"
android:id="#+id/stopwatchButton"
android:layout_gravity="center" />
</FrameLayout>
The Result :

This is a common "problem".
You can try a couple of things:
Invalidate caches and restart Android Studio, or just restart without invalidating
Try the Run -> Clean and rerun option
Or the Build -> Clean project or Build -> Rebuild Project options
When you are done, run the project again.

Well I got it working, I can't exactly explain what fixed it but these are the steps I took:
Utilised a content and activity split. (to get an example of this create a basic activity in android studio).
I deleted other versions of the layout files in the version compatible folders (such as "layout-v24").
I also used "Clean" and "Rebuild" project options whenever I made a change to my code.
activity xml file:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true">
<include layout="#layout/content_record_game"/>
</android.support.design.widget.CoordinatorLayout>
This is my content.xml file
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/pitchImageView"
android:contentDescription="#string/image_of_a_gaa_pitch"
android:src="#drawable/gaa_pitch"
android:scaleType="centerCrop"
android:cropToPadding="false"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start"
android:id="#+id/stopwatchButton"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>

Phantom margin in recyclerview

I'm trying to set recyclerview item xml with google guidelines, and when i see preview in android studio - thats OK, actually margins alright. But when I'm starting app on real device (htc one s - 4.1.1 api 16) there are additional margins, which i have no idea to delete. Help me please
There are xml of recycler item:
<?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="88dp"
android:id="#+id/Item"
android:clickable="true"
android:focusable="true"
android:background="?android:attr/selectableItemBackground"
>
<TextView
android:id="#+id/tv_recycler_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="blah"
android:textSize="16sp"
android:textStyle="bold"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="blah"
android:textSize="14sp"
android:id="#+id/textView2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="13:00 - 14:00 14.03.2016"
android:textSize="14sp"
android:id="#+id/textView3" />
There are code from layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragments.FragmentTask">
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
minsdk of my app - 11
I've delete all margins and paddings from there, but problem not solved - phantom magrins exists
Whats wrong?

Android layout correct alignment

I am working on a project and I have run into some problems. I haven't worked with the layouts very much so I don't know if this is possible or not.
In the picture I have added the project mock-up. For the lower screen resolution it looks fine, but when I put the app on 5 inch device, this orange area is too high and I wanted to know if it is possible somehow to get that area centered.
The orange area is a LinearLayout and everything is wrapped inside LinearLayout. Hope you understand what I mean I what I am asking.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff0000"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<LinearLayout
android:id="#+id/first"
android:layout_width="match_parent"
android:layout_height="76dp"
android:background="#175797"
android:orientation="vertical" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Subject" />
</LinearLayout>
<LinearLayout
android:id="#+id/second"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#00FFFF"
android:orientation="vertical" >
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Send" />
</LinearLayout>
<LinearLayout
android:layout_gravity="bottom"
android:id="#+id/third"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#FFA500"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
This is code for the mock-up. For the project it's pretty much the same

Try this !
I tried putting Linear layout inside a relative layout and defining its gravity. I checked it on various resolution.Give it a try
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff0000"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<LinearLayout
android:id="#+id/first"
android:layout_width="match_parent"
android:layout_height="76dp"
android:background="#175797"
android:orientation="vertical" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Subject" />
</LinearLayout>
<LinearLayout
android:id="#+id/second"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#00FFFF"
android:orientation="vertical" >
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Send" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="center"
>
<LinearLayout
android:id="#+id/third"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#FFA500"
android:gravity="center"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>

you can try #g00dy answer or else
You have to create separate layout for phablet (i.e. 5 inch devices)
Here in this link they had explain how we can put our tablets layouts...
On android developer site they have had explain how android manage layouts for different screen sizes check this link

May be try android:layout_gravity="center" that should do the trick :)
Also in addition, you can add android:layout_centerInParent="true" and take a look at this thread as well.

for giving the compatibility of xml for all android devices and tablets, please use the Relative Layout as a parent view and set the component according to your requirement.
please follow this link for more reference: http://developer.android.com/reference/android/widget/RelativeLayout.html