CODEWITHSUNDEEP
androiduser-interface
Android-Droid
Android-Droid

Reputation: 14565

Android User Interface Design - Best way to integrate it?

I need some advice for a design which I have to implement in application. Here is what it should look like (sorry for the low resolution of the image, but it's all I have for now).

User Interface

So the basic idea of the design is this:
I have one UI component, in my situation I will use ProgressBar (the one with red fills) which will hold the information about some kind of user data. For example if user have listing of songs the max of progress bar will be the count of all songs, and the the progress will be set by the track that is playing right now. If I have 56 songs and I'm playing the 23rd of them, the progress will be calculated depending on that Integer. And the dots above progress bar will indicate which of the songs are favorited by me or not. For example if I'm playing 23th song and it's in my favorites, there should be dot above progress bar at the same position.

So my question is, what UI component should I use for adding the dots above the progress bar. I was thinking about RelativeLayout/LinearLayout/FrameLayout , but as I know they don't have functions which I can do something like : layout.addView(view, x, y); where x and y are the coordinates. Or is it the right way to do this? Maybe there is better way of doing the thing that I want to achieve. Use some other SubClass of View.

Any kind of help / advices / suggestions are welcome!

Thanks in advance!

Upvotes: 0

Views: 404

Answers (2)

DArkO
DArkO

Reputation: 16110

  1. On Android it is totally not recomended to use specific values for defining layout placement (unless you are using the screen measurements as a reference)

  2. Always use DP (Density independent pixels) to define spacings and positions if FILL_PARENT and WRAP_CONTENT doesn't do the trick.

In android there are different kinds of layout to help you follow the above rules depending on the complexity and need.

in your case i suggest using a linear layout with vertical orientation like:

<LinearLayout>
<CustomView/>
<ProgressBar />
</LinearLayout>

So the custom view will actually have the dots.

So you can extend LinearLayout with horizontal orientation for your custom view. there is a parameter called weight which you can set to each of its child views which will set the width(in your case) of the child to a specific percentage of the total layout width.

Upvotes: 1

Hanon
Hanon

Reputation: 3927

You can use RelativeLayout to achieve what you need. By setting the top margin and left margin of RelativeLayout, you can make your child view algin at origin (x,y) in your layout.

    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, 
                                                                        RelativeLayout.LayoutParams.WRAP_CONTENT);
    params.leftMargin = x;
    params.topMargin = y;
    view.setLayoutParams(params);

Upvotes: 0

Related Questions