-3

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
tsprof
  • 1
  • This post appears to be off-topic as per Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Please use your favourite search engine to gather information and ask questions about details here. – yennsarah Feb 19 '16 at 09:25
  • 1
    You seem to be lost here. Material Design currently *is* the native android UI. Develop your applications with Android Studio with default settings. It will have the material design look and feel in android 5.0+ devices. If you want to use similar UI in pre-lollipop devices, use the support library whenever possible. – drWisdom Feb 19 '16 at 09:34

1 Answers1

2

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).

enter image description here

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).

enter image description here

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:

enter image description here

For more information clicks on the following link.

create an Android material design app

halfer
  • 19,824
  • 17
  • 99
  • 186
Nemo
  • 352
  • 3
  • 13
  • I need the same but for native android ui, not hybrid application. Web primiteves like rounded rectangle with a border and a background (solid color and gradient), relative positioning. Not like "use standard layouts and ui elements and it will look like flat ui in android 5.0+", but i want to set borders, backgrounds, colors and fonts by myself. Like in css. Or it's wrong way? – tsprof Feb 20 '16 at 14:41
  • I guess for that you must search for custom materialize theme for android native ... – Nemo Feb 21 '16 at 16:08
  • Like this i suppose https://github.com/eluleci/FlatUI Is it common to implement custom views for styling your ui? – tsprof Feb 22 '16 at 19:39
  • Please check the new answer which I update. If the answer helps you please vote up. – Nemo Feb 23 '16 at 05:32