set width and height as percentage in relative layout

Question

I would like to have this: a ViewPager overlaid by 2 arrows

enter image description here

And I get what I want by this code. However, I got these warnings of lint :

this layout is useless (for dummy layouts)
nested weights are bad for performance.

I wonder if there is a better way to get this UI as I want.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<android.support.v4.view.ViewPager
    android:id="@+id/dialog_instruction_pager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
</android.support.v4.view.ViewPager>

<!-- this LinearLayout  overlays the ViewPager -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <!-- This is just the container for the left and right arrows , it is allocated with only 20% of screen height-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".2"
        android:orientation="horizontal" >

        <!-- I want to align this to the left and set width only 5% of the parent -->
        <ImageButton
            android:id="@+id/instruction_dialog_left_arrow"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".05"
            android:background="?android:attr/selectableItemBackground"
            android:scaleType="fitCenter"
            android:src="@drawable/arrow_left_grey" />

        <!-- This is the dummy layout, standing in the middle of 2 arrows so they can be align to the left and right of the parent -->
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".8" >
        </LinearLayout>

        <!-- I want to align this to the right and set width only 5% of the parent-->
        <ImageButton
            android:id="@+id/instruction_dialog_right_arrow"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".05"
            android:background="?android:attr/selectableItemBackground"
            android:scaleType="fitCenter"
            android:src="@drawable/arrow_right_grey" />
    </LinearLayout>
</LinearLayout>

P.S: Is there any layout that allows align children left, right, bottom (like RelativeLayout) and also allows set width, height as percentage (like "weight" attribute in LinearLayout)?

Thank you !

M S Gadag · Answer 1 · 2015-03-13T07:09:31.730

try this

to avoid this layout is useless (for dummy layouts) u should android:background="@android:color/transparent" and add dummy view in that linear layout because layout should not be empty.

to avoid nested weights are bad for performance add one child linear layout. and read my comments in code

and added parent layout for imageview to make image vertically center

try this code

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/dialog_instruction_pager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></android.support.v4.view.ViewPager>

    <!-- this LinearLayout  overlays the ViewPager -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <!-- This is just the container for the left and right arrows , it is allocated with only 20% of screen height-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight=".2"
            android:orientation="horizontal">
            <!--child layout to avoid nested weight with `waighSum` property-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:weightSum="100">

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="5"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">
                    <!-- I want to align this to the left and set width only 5% of the parent -->
                    <ImageButton
                        android:id="@+id/instruction_dialog_left_arrow"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="?android:attr/selectableItemBackground"
                        android:scaleType="fitCenter"
                        android:src="@drawable/icon_clock" />
                </LinearLayout>
                <!-- This is the dummy layout, standing in the middle of 2 arrows so they can be align to the left and right of the parent -->
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="90"
                    android:background="@android:color/transparent">// this line also makes layout usefull
                    <!-- dummy view becouse layout should not be empty -->
                    <View
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="5"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">
                    <!-- I want to align this to the right and set width only 5% of the parent-->
                    <ImageButton
                        android:id="@+id/instruction_dialog_right_arrow"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="?android:attr/selectableItemBackground"
                        android:scaleType="fitCenter"
                        android:src="@drawable/icon_clock" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</FrameLayout>

hope it works for u

Thank you for your answer, it does remove all warning by Lint. However, it seems to me that this xml has many nested layouts. Does it slow down the performance? — Huy Than, Mar 13 '15 at 12:01
no its not effects performance .. oly effects when ur adding view with 10 consecutive nested layouts and more than 80 views in one layout xml file.. — M S Gadag, Mar 13 '15 at 12:05
Thank you for your explanation, I have learned some interesting things from you. — Huy Than, Mar 13 '15 at 13:05

score 2 · Answer 2 · answered Oct 26 '16 at 11:38

Google introduced new API called android.support.percent

1)PercentRelativeLayout

2)PercentFrameLayout

Add compile dependency like

compile 'com.android.support:percent:23.1.1'

You can specify dimension in percentage so get both benefit of RelativeLayout and percentage

 <android.support.percent.PercentRelativeLayout
         xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
         android:layout_width="match_parent"
         android:layout_height="match_parent"/>
     <TextView
         app:layout_widthPercent="40%"
         app:layout_heightPercent="40%"
         app:layout_marginTopPercent="15%"
         app:layout_marginLeftPercent="15%"/>
 </android.support.percent.PercentRelativeLayout/>

score 1 · Accepted Answer · answered Mar 13 '15 at 06:09

1

Try the below code and see whether it works, 
This code will get the layout what you have attached

      <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical" >

  <android.support.v4.view.ViewPager
    android:id="@+id/dialog_instruction_pager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/theme_blue" >
</android.support.v4.view.ViewPager>

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerInParent="true"
    android:background="@drawable/ic_launcher" />

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerInParent="true"
    android:background="@drawable/ic_launcher" />

 </RelativeLayout>

answered Mar 13 '15 at 06:09

Lochana Ragupathy

4,320
2
25
36

Thank you for your answer, the code you suggested seems not to set the width and height of the ImageView but just "wrap_content". I would like to set the width and height of the Image in percentage and independently of the dimensions of the image. – Huy Than Mar 13 '15 at 06:18
But why do you want to set width and height in percentage? wrapcontent will take the image size by default. place the image in all corresponding drawables according to the scaling ratio. Thats the standard suggested by android – Lochana Ragupathy Mar 13 '15 at 06:31
Thank you very much for your patience in explaining to me :) , really appreciate that. I am doing a demo project , I download and use the images with various sizes from Internet. Some images if I use them with wrap content, it will be too big on the screen. I don't know what you mean by "place the image in all corresponding drawables according to the scaling ratio", can you be more specific or send me a link about that? Many thanks! – Huy Than Mar 13 '15 at 11:57
http://developer.android.com/guide/practices/screens_support.html kindly read the above documentation on UI for various screen. if your using standard icons then download it from here http://developer.android.com/design/style/iconography.html. If your creating on your own follow the scaling ratio mentioned in above links. you have different folders like drawable-hdpi, xxhdpi to fit different screens and density in your application. In android you cannot specify in percentage instead you need to provide dp, which is density per inch – Lochana Ragupathy Mar 13 '15 at 12:14
I have searched on the Internet about what you suggest. Are you talking about this? Scale the picture which is going to be used as an icon, then create 4 versions of it. i.e. mdpi, hdpi, xhdip and xxhdpi . Using Android Asset Studio to create the versions then put them in the corresponding drawables folder in the project, then Anroid will automatically choose it? – Huy Than Mar 13 '15 at 12:36
Oh I see, other answers can answer my question. You are the one that does not answer right into my question but rather inquire my question, why I need that, and from that I learn the right way to do. Your answer is the best answer to me. Thank you again. @ Other helpers: I am also much obliged to your in valuable help but I can only choose one as the best answer. Thank you all. – Huy Than Mar 13 '15 at 12:41
Thank you for accepting, doing the right way takes time to implement but only for the first time then it makes your life easier. happy coding – Lochana Ragupathy Mar 13 '15 at 12:50

score 0 · Answer 4 · answered Mar 13 '15 at 06:12

0

Try using RelativeLayout and then set the left image to alignParentLeft and the right image to alignParentRight

answered Mar 13 '15 at 06:12

jomartigcal

813
1
6
11

Thank you ,but it doesn't help to set width and height of the image. – Huy Than Mar 13 '15 at 06:20

set width and height as percentage in relative layout

4 Answers4