Divide screen by percentage from top and sides

Question

I am trying to create a layout with image situated 20% size of screen from left, 20% size of screen from right and 30% size of screen from top. I can situate an image as 20% of the distance from the sides but don't know how to combine the percentages from the top and sides simultaneously. Now I'm using android:layout_marginTop to jump from the top edge. I want to use something what will make 30% free space of screen from top on any screen resolution. Please take a look on Fig.1. Thanks a lot for any help.

Fig. 1

XML Code:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="100" >

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="20" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:layout_marginTop="100dp"
        android:layout_weight="60"
        android:src="@drawable/logo_line" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="20" />
</LinearLayout>

nKn · Answer 1 · 2014-02-04T21:37:24.420

3

I have a dynamic solution for that:

final Display display = getWindowManager().getDefaultDisplay();
final Point size = new Point();
display.getSize(size);

final WindowManager.LayoutParams params = getWindow().getAttributes();
params.width = (int) (size.x * 0.6);
params.height = (int) (size.y * 0.6);

That would be to leave 20% off for the height (100% - (20% + 20%)) and same for the width.

---- EDIT ----

The above solution would be to format the layout window itself. To do so with just a layout item, I'd go by this:

  final TextView tv = findViewById(R.id.my_text_view);

  LinearLayout.LayoutParams tvlp = (LinearLayout.LayoutParams) tv.getLayoutParams();

  tvlp.rightMargin *= 0.6;
  tvlp.leftMargin *= 0.6;
  tvlp.topMargin *= 0.6;
  tvlp.bottomMargin *= 0.6;

That would redimension a TextView's layout.

edited Feb 04 '14 at 21:37

answered Feb 04 '14 at 21:00

nKn

13,691
9
45
62

Thank you. This one code look realy good. Can you just please tell me how I can use it only for one object from layout. Because this code has effect on all objects in layout. – Matwosk Feb 04 '14 at 21:33
See my edit, I've added an example for redimensioning a `TextView`. Hope it helps. – nKn Feb 04 '14 at 21:37
I don't know if I'm doing it wrong but it has no effect. All TextView is totally up and on the entire width of the screen. – Matwosk Feb 04 '14 at 22:01
Be careful because it also depends on the layout parameters of the `Layout` that contains them! If both width and height are `match_parent`, you won't be able to see any changes. Set then to `wrap_content` so you can see the changes. – nKn Feb 04 '14 at 22:03
I rly can't find what is wrong. Here is code: http://clip2net.com/s/6Kzi5c and here is XML: http://clip2net.com/s/6Kzkn4 Can you please take a look? – Matwosk Feb 04 '14 at 22:18
Ok, the `ImageView`'s case is a bit special, I think you're mixing terms. What you want to do is scale your image, not the layout it's contained in, have a look at this, it might help you: http://stackoverflow.com/questions/2521959/how-to-scale-an-image-in-imageview-to-keep-the-aspect-ratio – nKn Feb 04 '14 at 22:29
Basically I don't want to scale my image. I just want to shift it like I showed on the Fig1. Your first solution been done what I want but not the whole screen. I want to do the same just with only one object - image. However thank you for your time. – Matwosk Feb 04 '14 at 22:44
Then do the resizing operation on your `LinearLayout`, not the `ImageView`. In this case your `LinearLayout` contains your image, it's the View you want add margins (you'll have to add it an `id`, and use `findViewById()` on it in your code). – nKn Feb 04 '14 at 22:46

dangVarmit · Accepted Answer · 2014-02-04T23:33:41.927

use a RelativeLayout or wrap the ImageView in a LinearLayout :

---- EDIT ----

on the ImageView : take out the layout_gravity and margin_top attributes and set layout_height to 0dp

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="100" >

<TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="20" />

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="60"
    android:orientation="vertical"
    android:weightSum="100" >

<TextView
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="30" />
<ImageView
    android:id="@+id/imageView4"
    android:layout_width="match_parent"
    android:layout_height="0dp"
     android:layout_weight="40"
    android:src="@drawable/logo_line" />
</LinearLayout>
<TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="20" />
</LinearLayout>

I little edited this one but finally it works! Awesome thanks a lot! — Matwosk, Feb 04 '14 at 23:42

Crimson · Answer 3 · 2014-02-05T07:31:42.493

Put the ImageView within another LinearLayout so you can set the horizontal weight(the LinearLayout the ImageView is in) and another for the vertical weight

Edited

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="30" />
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:weigth="40"
        android:weightSum="100" >

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="20" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="60"
        android:src="@drawable/logo_line" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="20" />
    </LinearLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="30" />
    </LinearLayout>

This should work.. important are the right configurations of the Views and the orientation of the LinearLayouts. Create a LinearLayout that has 3 'items' in it with a width matched to their parent. You can set the weight for them all to that creates the vertical(top/bottom) margins. Then the second item in the LinearLayout should be another LinearLayout that creates the horizontal(left/right) margins. This LinearLayout should be oriented horizontal.

This isn't a clean solution for margins. If it doesn't work you should do it dynamically

Let me know if it works

I tried this one solution also before but it has effect only for 20% from sides. There is no effect 30% from top. Some idea where can be problem? — Matwosk, Feb 04 '14 at 22:29
I see where I probably made a small mistake.. I haven't got the time right now to fix it.. I fix it ASAP so check my answer again within a few hours.. it probably should work then... btw can you post your script where you tried the same method? — Crimson, Feb 05 '14 at 06:55

Divide screen by percentage from top and sides

3 Answers3