Best way to implement ui similar to web or "flat ui" on android

Question

Need to implement UI like in the following picture

What is the best way to do it? I found out about "material design" and PhoneGap. I'm new in android development, so i dont know the best practices and I want to choose best path to follow. What exact layouts I should use, RelativeLayout or TableLayout or other, how to apply styles to ui elements, borders, backgrounds and so on.

Should I use styles or build-in attributes? Can I find an example code somewhere, may be good tutorials or open-source applications? I found a lot of samples in a book by Deitels and in GitHub, but it's all look like native android ui, not like web or flat ui.

Answer 1

Flat Material UI design Android:

As per I understand from you question that you want the flat Material design for Android Native UI.

So for that please follow the below process:

Let’s jump right into two key features of material design: Themes and Colors!

Themes let you apply a consistent tone to an app, and developers can choose between dark or light themes (see Figure 1 and Figure 2).

Custom colors can also be defined using theme attributes which are then automatically used by the app for different components e.g colorPrimaryDark for the Status Bar and colorPrimary for the App Bar (see Figure 3 below).

Add the Light theme to our app and customize some of the colors in res/values/styles.xml styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#3F51B5</item>
        <!-- Light Indigo -->
        <item name="colorPrimaryDark">#3949AB</item>
        <!-- Dark Indigo -->
        <item name="colorAccent">#00B0FF</item>
        <!-- Blue -->
    </style>
    <style name="AppTheme" parent="AppTheme.Base"></style>
</resources>

The app should now look like this:

For more information clicks on the following link.

create an Android material design app