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 layout anomaly - actual layout not complying with Android Studio appearance.

I am trying to write an application with two separate views of graphical data - one as an X-Y graph. and the other an X vs T graph. I want the two to be arranged vertically, with the X-Y graph on top. I have written an extension to the View class which manages the plotting, and that is not the problem.
I initially used a RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CCCCFF"
android:orientation="vertical"
android:gravity="center_horizontal">
<RelativeLayout
android:id="#+id/button_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="clearCanvas"
android:text="#string/btn1Text"
style="#android:style/Widget.Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="startPlot"
android:text="#string/btn2Text"
android:layout_toRightOf="#id/button1"
style="#android:style/Widget.Button" />
</RelativeLayout>
<co.android.bmd.chaoswithtime.CanvasView
android:id="#+id/plot_canvas"
android:layout_width="1000px"
android:layout_height="1000px"
android:textColor="#FFFFFF" />
<co.android.bmd.chaoswithtime.CanvasView
android:id="#+id/trend_canvas"
android:textColor="#FFFFFF"
tools:layout_below="#id/plot_canvas"
android:layout_height="500px"
android:layout_width="1000px" />
</RelativeLayout
According to the layout shown in Android Studio, this should give the required result:
X-T view overlaying the XY view:
I've tried a number of variants to get the alignment sorted out, but the only way to do it was to add a hefty top margin to the X-T view - not very satisfactory.
I can get what I want using a LinearLayout, but cannot figure out why the Relativelayout does not work (and why there is a difference between the preview in Android Studio and the emulated result from the same package. (The emulated result actually comes up on the real device as well.)
Can anyone come up with an explanation?

You have passed width and height in pixels, that means it's content and when you run your code it takes only 1000 pixels in screen.
Better is that you should use LinearLayout as parent of your custom view and use weight and weightSum. And pass match_parent width and height to LinearLayout.
you can try with below xml. this could help you.
<?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:custom="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CCCCFF"
android:gravity="center_horizontal"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/button_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
style="#android:style/Widget.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="clearCanvas"
android:text="#string/btn1Text" />
<Button
android:id="#+id/button2"
style="#android:style/Widget.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button1"
android:onClick="startPlot"
android:text="#string/btn2Text" />
</RelativeLayout>
<LinearLayout
android:layout_below="#+id/button_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="3">
<co.android.bmd.chaoswithtime.CanvasView
android:id="#+id/plot_canvas"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:textColor="#FFFFFF" />
<co.android.bmd.chaoswithtime.CanvasView
android:id="#+id/trend_canvas"
android:layout_height="0dp"
android:layout_weight="2"
android:textColor="#FFFFFF"
tools:layout_below="#id/plot_canvas"1
android:layout_width="match_parent" />
</LinearLayout>
</RelativeLayout

CardView goes on top of FrameLayout, but declared first

I have simple FrameLayout with support CardView as first item, and TextView as second, so TextView must be on top of inflated view. This works on pre-Lolipop but on 21+ card takes toppest place in layout, why that's so and how to fix this? Same thing with RelativeLayout.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>

In case someone gets here and the solution for setting elevation doesn't work for them (like in my case, where I needed to draw an image above the CardView and having a shadow on it was not acceptable), you can solve the issue by wrapping the CardView inside another FrameLayout. In the example provided, it would look something like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<!-- This is the added FrameLayout -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>

I might be joining the discussion a bit late, but if you can afford giving up the CardView's elevation, you can just set the cardElevation property of the CardView in your XML layout to 0dp.
Like so:
app:cardElevation="0dp"

Just add your text view inside the card view, far as I know the z order is undefined inside a frame layout, but last laid out view should be drawn last.
This probably had to do with that card views in lollipop use elevation while they fall back on border drawing code pre lollipop.

This worked for me!
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<!-- Add this layout as parent of CardView -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false" />
</LinearLayout>
<!--Close parent layout-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#0000ff"
android:gravity="center"
android:text="i am top view!"
android:textAllCaps="true"
android:textColor="#00ff00"
android:textSize="30sp" />
</FrameLayout>

How to make this layout in Android XML

I am novice in Android trying to make this layout:
Simply what I want to achieve:
The red container should take as much space as it needs but not as much that green container have to be shrinked. If there are too many items, red container will be scrollable. Green container is also always centered in orange one if there is space for it (if not it is actually still centered).
I don't know how to do it at all :( . Here is my try:
The problem is that I want to always maintain height of green container (minHeight does not work I can't understand why) and make the green container centered in orange one. I have problem with Scenario 2 (as you can see in the picture), this code works good in first scenario.
<LinearLayout 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"
android:orientation="vertical">
<ScrollView
android:id="#+id/red_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_dark"
android:scrollbarAlwaysDrawVerticalTrack="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- Items are here -->
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/orange_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_orange_dark"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:id="#+id/green_container"
android:layout_width="100dp"
android:background="#android:color/holo_green_dark"
android:layout_height="50dp"
android:orientation="horizontal">
<!-- My content -->
</LinearLayout>
</LinearLayout>
</LinearLayout>
Edit: minHeight does not help:
Edit: image for user Illegal Argument:

Try setting property android:minHeight = "(whatever)dp" to orangeContainer. This worked for me in others "similiar" cases.
:)

Is this what you are looking for:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/list_items"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/background_dark" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/list_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#android:color/darker_gray"
android:gravity="center"
android:minHeight="200dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</RelativeLayout>
Snapshot in ecllipse:

Contact card ui not displaying as expected

I'm currently trying to build a simple Contacs Card myself. I just want a Profile picture on the top left, about a quarter to a third of the width, and the Name + description on the right side.
No matter what i try, it always looks very similar to the screenshot below.
this is my Layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/activity_standard_padding"
android:clipToPadding="false"
android:scrollbarStyle="outsideOverlay"
style="#style/AppBaseThemeCardBG">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/nowCardStyle">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="top"
android:paddingRight="#dimen/activity_horizontal_margin">
<ImageView
android:id="#+id/schuckCard"
android:scaleType="fitCenter"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:orientation="vertical">
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/schuckHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light"
android:text="JESCO SCHUCK"
android:textSize="#dimen/textSizeVeryLarge" />
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/body1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light"
android:text="Description" />
</LinearLayout>
</LinearLayout>
</ScrollView>
This is how it looks like:
I'd like the image to be approximately as wide as the description in the action bar. Obviously i brutally failed here

Use different values for the layout weights. Like 4 for the image and 6 for the content to give it 40‰ of the cards width

Consider using cardslib ( https://github.com/gabrielemariotti/cardslib) to do your card layout. It is very well put together.

Got my stupid Problem fixed:
In the ImageView I have declared android:scaleType="fitCenter" which apparently also centers the ImageView in my Layout.
When changing the scaleType to fitStart I get the result I wanted.