Develop Reference

Views are overlapping

In my android application, I have a RelativeLayout which contains some Fragments. However, this layout does not scale to different screen sizes. Consider this screenshot when the screensize is 5.2" diagonally, 1080x1920 resolution 420dpi: (Desirable output)
When I change the phone to a 5.0", 1080x1920 resolution xxhdpi, I get this display:
As you can see the buttons on the two right-hand columns are overlapping, which is the problem I am asking about.
Here is the main activity XML file, which contains the various fragments
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:style="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:layout_margin="8dp">
<!--This is the box appearing at the top of the layout-->
<TextView
android:id="#+id/window"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#drawable/window_border"
android:fontFamily="monospace"
android:minLines="1"
android:text=""
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textIsSelectable="true"/>
<!--This is the first row of buttons, there are 4 of them-->
<fragment
android:id="#+id/screenOps"
android:name="net.magnistudio.deskcalculator.ScreenOps"
android:layout_width="wrap_content"
android:layout_alignEnd="#+id/digits"
android:layout_height="wrap_content"
android:layout_below="#+id/window"
tools:layout="#layout/layout_screen_ops"/>
<!--This is the 3x3 rectangle appearing directly below the screenOps
frag -->
<fragment
android:id="#+id/digits"
android:name="net.magnistudio.deskcalculator.Digits"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout="#layout/layout_digits"
android:layout_alignBottom="#+id/basicOps"/>
<!--This is the rightmost fragment-->
<fragment
android:id="#+id/basicOps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="net.magnistudio.deskcalculator.BasicOps"
tools:layout="#layout/layout_basic_ops"
android:layout_alignParentEnd="true"
android:layout_below="#+id/window"/>
<!--Lower fragment, it is 6x4-->
<fragment
android:id="#+id/scientific"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="net.magnistudio.deskcalculator.Scientific"
tools:layout="#layout/layout_scientific"
android:layout_below="#+id/digits"/>
</RelativeLayout>
Each button has this style
<style name="calcBtnAppearance">
<item name="android:textSize">14sp</item>
<item name="android:textColor">#color/calcBtn</item>
<item name="android:textStyle">normal</item>
<item name="android:textAllCaps">false</item>
<item name="android:layout_width">0dp</item>
</style>
I think one solution would be to adjust programatically the sizes of the layouts based on the size of the current phone, but maybe that is just sweeping some other problem (of the layout itself) under the rug?
Also, each button is located within a LinearLayout, which is inside of the LinearLayout for the fragment. Consider this sample excerpt from a fragment layout file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3">
<Button
android:id="#+id/dig7"
style="#style/calcBtnAppearance"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=""/>
more buttons
</LinearLayout>
<LinearLayout>

In the RelativeLayout the children are arranged according to their relative form to each other. As far as I remember, the RelativeLayout does not scale the contained elements if the resolution or the screen size changes.
Maybe you should take a look here:
[https://stackoverflow.com/a/21381065/6908102
][1]
A possible solution:
To adjust the size of the buttons to the respective resolutions, create a separate "values" folder for each resolution. (See also picture 2 marked blue).
- Picture 2 -
Then create a new "dimens.xml" file in each of these folders.
As an example:
res/values/dimens.xml:
<resources>
<!-- ButtonSize -->
<dimen name="dimenButtonHeight">15dp</dimen>
<dimen name="dimenButtonWidth">25dp</dimen>
</resources>
res/values-xxhdpi/dimens.xml:
<resources>
<!-- ButtonSize -->
<dimen name="dimenButtonHeight">10dp</dimen>
<dimen name="dimenButtonWidth">20dp</dimen>
</resources>
Of course, you still have to adjust the size specifications to your layouts.
res/values/style.xml:
In your Style.xml file you have to add the following lines:
<style name="calcBtnAppearance">
<item name="android:textSize">14sp</item>
<item name="android:textColor">#color/calcBtn</item>
<item name="android:textStyle">normal</item>
<item name="android:textAllCaps">false</item>
<item name="android:layout_height">#dimen/dimenButtonHeight</item>
<item name="android:layout_width">#dimen/dimenButtonWidth</item>
</style>
Maybe that will solve your problem. Otherwise, you can, as shown in Figure 2 well, synonymous for each Resolution create a separate "layout" folder. Then copy the files from the standard layout folder into the newly created folder and adjust them or you can also position the items in a different order. But is a little more work.

Same elevation of views looks different for top and bottom views

Recently, I stunned with a problem. On my android phone elements of the list or scroll views with the same elevation have different shadows related to their positioning. For example, views on the top of the screen have a small light shadow, whenever views on the bottom of the screen have more dark and strong shadow. Here is a screenshot from Google Keep application:
So, I thought that this is because of exactly Google Keep application. Maybe guys from Google decided to do that trick with shadows for their application. Thus, I created a sample application.
My layout:
<?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="vertical">
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
</LinearLayout>
My styles:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppButton">
<item name="android:background">#color/colorAccent</item>
<item name="android:elevation">4dp</item>
<item name="android:gravity">center</item>
<item name="android:padding">16dp</item>
<item name="android:textColor">#android:color/white</item>
</style>
</resources>
And the output is:
As you see, we have the same effect (top view has a small shadow, bottom view have a big shadow). So my questions are:
What I did wrong?
How can I achieve the same shadow for all views (not different by their positions)?
Also, I haven't found any explanations in docs, so where I can read about that phenomenon?
Does it happen on all devices or only on specific?
P.S.: I have Nexus 5X, Android 7.1.2.
UPD:
An important mention that from Android Studio Preview Window everything is fine. Every view has the same shadow as other. But on a real device, you can see the difference.

Shadows generated by Elevation API are positioned in 3D space, which means that the look of each shadow is affected not only by its elevation value, but also by shadow caster's x and y position on screen. It's pretty much like in the real world - objects beneath a light source cast shorter shadows than objects further away.
Take a closer look at the first image you posted. Shadows are longer on left edges of the left cards and on right edges of the right cards than on the edges at the horizontal center.
Ad. 1. Nothing. It just works that way.
Ad. 2. It's not possible using Elevation API. You can draw shadows by yourself.
Ad. 3. Don't know, sorry.
Ad. 4. All devices.
Ad. UPD. Shadows in the editor are static, so there's no effect you're observing.

How to make an identic layout after splash screen

My splash screen is a layer-list drawable as background in app theme. Here is it:
background_splash.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#color/dark_blue"/>
<item android:top="100dp">
<bitmap
android:gravity="top"
android:src="#mipmap/img_logo"/>
</item>
</layer-list>
As you see, I place the logo with margin 100dp from the top. Then I try to do the same in my fragment layout:
fragment_start.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#mipmap/bg_create_account">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/img_logo"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp" />
</RelativeLayout>
But the logo in the layout appears lower than logo on the splash screen. I thought, the problem is in the default margin of Activity. But if I set:
<dimen name="activity_horizontal_margin">0dp</dimen>
<dimen name="activity_vertical_margin">0dp</dimen>
Nothing still happens. I always see the "jump" of logo from top to down about 10-20 dp. How can I avoid it?
EDIT: My activity 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="match_parent">
<LinearLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"/>
</LinearLayout>
EDIT 2: I tried to pick up the distance manually and if I set <item android:top="125dp"> (or 126dp) and leave android:layout_marginTop="100dp" I see no "jump". It means the difference is 25 or 26 dp, but where are they?
EDIT 3: according to answer from Bryan the issue exists only in Android 4.4(API 19) and above. To avoid it I overrode styles.xml in folder values-19 with:
<item name="android:windowTranslucentStatus">true</item>

It seems drawable that you use for the splash screen does not take into account the size of the status bar, but the Activity does. This is the ~25dp difference you are observing, though this height of ~25dp is not guaranteed to be the same on all devices.

Maybe the problem is in the ActionBarSize, try add this to the SplashScreen :
Without AppCompat
android:paddingTop="?android:attr/actionBarSize"
With AppCompat
android:paddingTop="?attr/actionBarSize"
Or if you want, (although may be considered a bad practice), you can set a negative padding in the Activity Layout using data binding :
android:paddingTop="#{-1 * ?android:actionBarSize}"

Removing blank space next to App Logo (ActionBar Sherlock)

Can someone tell me how to eliminate the padding to the left of the app logo???
Here's what im talking about http://s9.postimage.org/ksxjpx1e7/Untitled.png
You can easily reproduce this even with ABS Demos, by adding to AndroidManifest.xml
android:logo="#drawable/icon"
I even tried editing abs__action_bar_home.xml directly but somehow that damned padding is still there.
<view xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
class="com.actionbarsherlock.internal.widget.ActionBarView$HomeView"
android:background="#00ff00" >
<ImageView
android:id="#id/abs__home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:padding="0dip"
android:layout_marginLeft="0dip"
android:layout_marginBottom="#dimen/abs__action_bar_icon_vertical_padding"
android:layout_marginRight="8dip"
android:layout_marginTop="#dimen/abs__action_bar_icon_vertical_padding"
android:adjustViewBounds="true"
android:contentDescription="#null"
android:scaleType="fitCenter" />
<ImageView
android:id="#id/abs__up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|left"
android:layout_marginRight="-8dip"
android:contentDescription="#null"
android:src="?attr/homeAsUpIndicator"
android:visibility="gone"
tools:ignore="ContentDescription" />
</view>

As one of the comments pointed out, the padding is reserved for the up icon. The padding is present even though the up icon is not being displayed (so that the logo doesn't move when you hide/show the up icon). Using action bar (and ActionBarSherlock) there are basically 2 ways how to remove the gap:
1.Remove the up icon
The size of the up icon affects the left padding, if you put there a bigger image than the arrow is, the gap will be bigger. If you remove it the gap will be gone. Beware that removing the up icon might not bring the exact looks you wish. Up icon and logo are partially overlapped (the up icon has negative right margin) so removing the up icon (it actually sets the image to nothing, does not affect the visibility) might cause that the logo is partially hidden behind the left edge of the screen.
To remove the up icon set android:homeAsUpIndicator to #null.
<style name="MyTheme" parent="#style/Theme.Sherlock">
<item name="homeAsUpIndicator">#null</item>
<item name="android:homeAsUpIndicator">#null</item>
</style>
2.Hide home layout and use custom view instead
This way it's more work, but you can affect the result better. You would need to put the icon and the title into the custom view. To hide the home layout and show custom, you have to set android:displayOptions in the action bar style. And then set the proper custom view in the code (you can set it in styles too, but that way it's buggy).
<style name="MyTheme" parent="#style/Theme.Sherlock">
<item name="actionBarStyle">#style/MyActionBarStyle</item>
<item name="android:actionBarStyle">#style/MyActionBarStyle</item>
</style>
<style name="MyActionBarStyle" parent="#style/Widget.Sherlock.ActionBar">
<item name="displayOptions">showCustom</item>
<item name="android:displayOptions">showCustom</item>
</style>

Android - Activity that does not fill the parent screen

Any idea why this doesn't create an activity that looks like a popup instead of an activity that completely fills the screen?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="300dip"
android:layout_height="120dip"
android:layout_marginTop="100dip">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="120dip"
android:layout_width="300dip">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello" />
</RelativeLayout>
</LinearLayout>
I assumed that I only needed to set the layout height and layout width to something other than "fill_parent", but it still shows up as a black screen that completely fills the screen.
Ultimately, I simply want to create a popup, but I do not want to use an AlertDialog. Is this possible?

You must set your Activity's window to be floating. You can do this either by giving your activity the Dialog style defined by Android (android:style/Theme.Dialog), or define your own style, like this:
<style name="MyFloatingWindow">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:background">#android:color/transparent</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowNoTitle">true</item>
</style>
Then set the style on your activity in the application's Manifest.

On my phone but check this website here it shows how to use PopupWindow correctly.
Hope this helps or points you in the right direction.