Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set position / size of UI element as percentage of screen size

I'm trying to work out if it's possible to use percentage positions/sizes when creating a layout. What I want is something like this...

^
|
|
| 68%
|
|
v
Gallery (height equivalent of 16% total screen size)
^
| 16%
v

I'm testing on a device which in landscape has a display of 800x480 actual pixels and I'm currently forcing it with the following...

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" > 
    <Gallery 
        android:id="@+id/gallery"
        android:layout_width="fill_parent"
        android:layout_height="80px"
        android:layout_marginTop ="320px"
    />
</RelativeLayout>

Obviously I don't want to hard-code fixed px units but I can't use 68% or 0.68 for layout_marginTop (for example). I've looked at dp units but I'm not sure if I can do it that way either.

I have to admit UI design is a weak point of mine so any advice would be gratefully received.

EDIT: For future reference if anyone is looking for a similar answer, following Alan Moore's suggestion I have the following working exactly how I want it...

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@drawable/bground"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="0.68"
        android:background="@android:color/transparent"
    />
    <Gallery 
        android:id="@+id/gallery"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.16"
    />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="0.16" 
        android:background="@android:color/transparent"
    />
</LinearLayout>

I managed to find some other examples of using layout_weight and decided to set the TextView heights to 0dp and also used floats for the weights. Working great. :)

like image 555
Squonk Avatar asked Sep 21 '11 20:09

Squonk


3 Answers

I think what you want is to set the android:layout_weight,

http://developer.android.com/resources/tutorials/views/hello-linearlayout.html

something like this (I'm just putting text views above and below as placeholders):

  <LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:weightSum="1">
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="68"/>
    <Gallery 
        android:id="@+id/gallery"
        android:layout_width="fill_parent"
        android:layout_height="0dp"

        android:layout_weight="16"
    />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="16"/>

  </LinearLayout>
like image 171
Alan Moore Avatar answered Sep 27 '22 20:09

Alan Moore


Use the PercentRelativeLayout or PercentFrameLayout from the Percent Supoort Library

<android.support.percent.PercentFrameLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
     <TextView
          android:layout_width="match_parent"
          app:layout_heightPercent="68%"/>
     <Gallery 
          android:id="@+id/gallery"
          android:layout_width="match_parent"
          app:layout_heightPercent="16%"/>
     <TextView
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_width="match_parent"/>
</android.support.percent.PercentFrameLayout>
like image 25
rahulrv Avatar answered Sep 27 '22 20:09

rahulrv


For TextView and it's descendants (e.g., Button) you can get the display size from the WindowManager and then set the TextView height to be some fraction of it:

Button btn = new Button (this);
android.view.Display display = ((android.view.WindowManager)getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
btn.setHeight((int)(display.getHeight()*0.68));
like image 24
joseph_morris Avatar answered Sep 27 '22 18:09

joseph_morris