Fork me on GitHub

Monday, January 28, 2013

A CSS-like styling on Android

Android SDK provides styles and themes to reuse common properties on XML layout. However, XML is verbose, and requires endless findByViewId(...) to reference it in your code.

Today I released Scaloid 0.8, which features a new way of styling Android components. Before saying too much words, let's start with an example:
new SVerticalLayout {
  STextView("I am 10 dip tall")
  STextView("Me too")
  STextView("I am taller than you")
  SEditText("Yellow input field")
  SButton("Red alert!")
}

This code displays five components on the screen:



Then, let me add a style:

new SVerticalLayout {
  style {
    case b: SButton => b.textColor(Color.RED).onClick(toast("Bang!"))
    case t: STextView => t.textSize(10 dip)
    case v => v.backgroundColor(Color.YELLOW)
  }

  STextView("I am 10 dip tall")
  STextView("Me too")
  STextView("I am taller than you").textSize(15 dip) // overriding
  SEditText("Yellow input field")
  SButton("Red alert!")
}

This code results the layout shown below:

Even if you are new to Scaloid, you may easily get the point of the code. As you expected, if you clicked the button, the toast message "Bang!" is shown.

In styles of Android SDK or even in CSS, only static properties can be assigned (such as color, margin, font, etc ...). However, Scaloid can do anything with the component, such as assigning onClick behavior, adding a new component, or replacing the component itself with another component.

For example, Scaloid styles can append another view component to the layout. let's start with a very simple code:
new SVerticalLayout {
  SEditText("Name")
  SEditText("Address")
}

Needless to say, this shows an input field with the default value "Name", as shown below:


Then, we add a style like this:
new SVerticalLayout {
  style {
    case t: SEditText =>
      STextView(t.text)
      t.text("").onFocusChange(toast("You entered: " + t.text))
  }
   
  SEditText("Name")
  SEditText("Address")
}
In this time, you can see:

The value "Name" is moved to a new text view. Also, if you moved the focus, the toast "You entered: ..." will be shown.

The signiture of the style function is style(stl: View => View). That means the style specification should return a view component, that is actually visualized on the screen. Therefore you can return another component to replace the original. For example:
new SVerticalLayout {
  style {
    case t: SEditText => new STextView().text(t.text)
  }
 
  SEditText("You cannot edit me")
}

Then every SEditText field is relpaced by a STextView component.


Type-safety for your pleasure

Thanks to Scala language, all of these examples are type-safe, which means that auto-completion of your IDE will suggest valid candidates, and if you made a mistake, IDE will warn you and the code will not be compiled at all.


26 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Hi Sung-Ho Lee ,

    That's very creative work. I am interested in android programming only due to scaloid.

    Trying an application.

    ReplyDelete
  3. How do you make a decision on the best phone for you? With such a huge variety of cell phones to choose from it is really hard to make a decision. ShowBox APK

    ReplyDelete
  4. Thanks For sharing this Superb article.I use this Article to show my assignment in college.it is useful For me Great Work. text auto reply

    ReplyDelete
  5. You know a city with other numerous thing to do is Shkodra in Albania. You can visit the great castle which has an amazing history behind it, visit the Marubi Photography museum, go for a walk in the grand bazaar and other interesting things. Make sure to add it to your travel list. Albanian Cities

    ReplyDelete
  6. This is very educational content written well for a change. It's nice to see that some people still understand how to write a quality post.!
    Kroger experience

    ReplyDelete
  7. If you are an art lover probably wherever you go, you want to always visit art galleries. The National Art Gallery of Tirana in Albania it is not only cultural but also inspirational. Definitely a must-visit!! Visit Albania

    ReplyDelete
  8. This is very educational content and well for a change. It's nice to see that some people still understand how to write a quality post!
    https://tellthebelll.us

    ReplyDelete
  9. This is a smart blog. I mean it. You have so much knowledge this issue, and so much passion. You also know how to make people rally behind it, obviously from the responses.

    Kroger customer survey

    ReplyDelete
  10. Thanks for the informative and helpful post, obviously in your blog everything is good..

    showbox download

    ReplyDelete
  11. Hi to everybody, here everyone is sharing such knowledge, so it’s fastidious to see this site, and I used to visit this blog daily.musicpleer mp3

    ReplyDelete
  12. this is really nice to read. .informative post is very good to read. .thanks a lot!'''
    official site

    ReplyDelete
  13. Your website is really cool and this is a great inspiring article.
    Read Full Report

    ReplyDelete
  14. I can set up my new idea from this post. It gives in depth Thanks for this valuable information for all,..
    https://www-expresshr.us/

    ReplyDelete
  15. This is a great post. I like topic.This site has lots of advantage.I found many interesting things from this site. It helps me in many ways.Thanks for posting this again.
    https://wvw-greatpeople.me/

    ReplyDelete
  16. No doubt this is an excellent post I got a lot of knowledge after good luck. Theme of blog is excellent there is almost everything to read, Brilliant post.
    seo tools

    ReplyDelete
  17. I learn some new stuff from it too, thanks for your information.
    UPS employee portal

    ReplyDelete
  18. Superbly written article, if only all offered the same content as you, the internet would be a far better place..
    seo tools

    ReplyDelete
  19. I have bookmarked your blog, the articles way better than other similar blogs.. thanks for a great blog!

    survey monkey usa

    ReplyDelete
  20. download showbox apk this is a very good site and also visit this site watch latest movies and tv shows online for free without any credit card..

    ReplyDelete
  21. this is a very good attractive looking site also visit my site to watch free movies mobdro premium

    ReplyDelete
  22. A great AC service provider with quality and low prices for everyone in these difficult times, without any visit you can take our services just by contact us through the site. 
    ac maintenance in dubai
    ac service in dubai

    ReplyDelete
  23. Electrician maintenance Companies in Dubai provides you the best home fixing services. We give you different electrician services in Dubai like electrical short circuit fixing, light dimmer installation, AC Dutch fixing, and more. Our services are available to all homes, Villa's, offices, apartments, and building services.

    ReplyDelete
  24. The article was up to the point and described the information very effectively. Thanks to blog author for wonderful and informative post.
    Gastroenterologist

    ReplyDelete