Android Design layout with soft buttons or not

Question

I'm pretty new with Android development in general. Now we have a UI designer who lets say provided a UI design in photoshop with a template of 720x1280 (xhdpi). So then I take the measurement in pixel and then divide them by 2 to bring it back to mdpi.

When I run the app on phone that doesn't have soft buttons, it matches perfectly with the design provided by the UI designer.

But when the app is ran on phone that have the soft buttons, like the HTC m8, the soft buttons hides the bottom of the app.

Is there a way to fix this issue?

Should the designer make 2 UI design? 1 without soft buttons and 1 without soft buttons? Then in my app I should detect which UI to use? Is there a better solution than this?

Here is an example of my issue :

So the left, is the UI design, the middle is running on phone without soft buttons, and the right is running on the phone with soft buttons.

And here is the xml if you are interested

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
    android:layout_width="match_parent"
    android:layout_height="450dp"
    android:background="@android:color/holo_blue_dark">

</View>
<View
    android:layout_width="match_parent"
    android:layout_height="116dp"
    android:padding="10dp"
    android:background="@android:color/holo_red_dark">

</View>
<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@android:color/holo_blue_dark">

</View>

Any help with this is appreciated,

Answer 1

Now we have a UI designer who lets say provided a UI design in photoshop with a template of 720x1280 (xhdpi)

First, 720x1280 is not tied to xhdpi. Density is not related to screen resolution.

Second, not every Android device has a screen resolution of 720x1280, or even a 16:9 aspect ratio.

But when the app is ran on phone that have the soft buttons, like the HTC m8, the soft buttons hides the bottom of the app.

Let's consider this from the standpoint of a Web site. What you are saying is equivalent to saying that you are trying to design an implement a Web site that only supports 720x1280, and if the user has the audacity to have a browser window that is sized differently, the site will not work.

This would be considered by most to be a flawed design, or possibly a flawed implementation of a flawed design.

Web designers and developers should be well-versed in the concept of responsive design, using fluid layouts and the like to make use of available browser window space.

Mobile app development is no different.

A designer is welcome to make a mockup or wireframe of a UI for a 720x1280 resolution screen. However, the designer needs to design around a range of possible screen sizes (not to mention portrait versus landscape orientation). Therefore the designer needs to specify the rules for the layout, not merely create a mockup. And those rules need to take into account differing screen sizes, measured in inches or density-independent pixels (dp in Android, equivalent to CSS pixels for Web developers), not hardware pixels.

Is there a way to fix this issue?

Have the designer provide actual rules for the layout, using mockups primarily as a vehicle to depict the implementation of those rules. Your job would then be to interpret those rules and encode them using built-in containers (e.g., LinearLayout, RelativeLayout, TableLayout, GridLayout) or possibly your own custom ViewGroups as needed.

Should the designer make 2 UI design?

The designer should make one design, but possibly a few mockups, to help explain how that design is responsive for different screen sizes and orientations.