how to make app a percent of the screen size

Question

I am trying to use percentRelativeLayout to make my app 90% width of the screen size and 50% of the screen height.

My layout consists of two fragments: 1) the left side is 4 buttons and 2) the right side is a container that inserts a different fragment with each button click.

When I use percentRelativeLayout or percentFrameLayout to make the height 50% of the screen, and the width 90% of the screen I get the result below where it seems like I am getting my fragments as 50% height and 90% width INSIDE a box that is 50% of the height of the total screen and 90% of the width of the total screen. Does anyone know how I can fix this?

I have tried setting my layout_height and width to match_parent for both my layouts and the result is either the same, or the app takes up the whole screen. I also made sure to use a theme that takes up the whole screen, and not a Dialog theme. I have also tried using a parent RelativeLayout with a percentRelativeLayout nested inside with layout_widthPercent and layout_heightPercent applied to my fragments and I get the same result.

<android.support.percent.PercentFrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_gravity="center"
    android:background="@drawable/rounded_edges"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    app:layout_widthPercent="90%"
    app:layout_heightPercent="50%"
    >
<fragment
    android:id="@+id/menuFragment"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_margin="5dp"
    class="it.anddev.bradipao.janus.MenuFragment"
    tools:layout="@layout/fr_menu">
</fragment>

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</LinearLayout>

</android.support.percent.PercentFrameLayout>

Here is what I want it to look like

Here is what it looks like now

Could you explain what are you trying to achieve? also, please post the code here rather than in an image file — Much Overflow, Feb 09 '16 at 04:13
You can use dialog theme for activity. check this http://stackoverflow.com/a/1979631/2128166 — Wasim K. Memon, Feb 09 '16 at 04:54
sorry but it is still does not say what you are trying to achieve?, can you share a rough image of how the layout should look like — Pankaj Nimgade, Feb 09 '16 at 05:05
@MuchOverflow I have updated my post to show what I want and posted the code I am using if you have any recommendations. Thanks! — Natalie, Feb 09 '16 at 20:40
@PankajNimgade I have updated my post to show what I want and posted the code I am using if you have any recommendations. Thanks! — Natalie, Feb 09 '16 at 20:40
@Natalie, i did manage to make the percentage distribution as you showed in the expected image, What i want to learn is how do you manage to make your activity on top of the HOME screen, where home screen is visible in background? — Pankaj Nimgade, Feb 10 '16 at 06:45

score 0 · Answer 1 · answered Feb 10 '16 at 04:22

It looks like your menu fragment's width takes about 30% of the total width of its dialog styled parent and the content takes about 70%. I would use a PercentRelativeLayout inside the PercentFrameLayout like the following

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

    <android.support.percent.PercentRelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="@drawable/rounded_edges"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="90%">

        <fragment
            android:id="@+id/menuFragment"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:layout_alignParentStart="true"
            app:layout_widthPercent="30%"
            class="it.anddev.bradipao.janus.MenuFragment"
            tools:layout="@layout/fr_menu">
        </fragment>


        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toEndOf="@+id/menuFragment" />

    </android.support.percent.PercentRelativeLayout>

</android.support.percent.PercentFrameLayout>

As for the double white background appearing behind your Welcome fragment, I cannot really tell why it is happening without looking at its layout file. You may want to remove the background in the layout for all the fragments you replace in the container FrameLayout

Pankaj Nimgade · Answer 2 · 2016-02-10T06:18:04.653

Things which i have changed to show button is removed the menu fragment with four buttons to mimic the image you want as the result, you can replace this four buttons with the menu fragment

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout 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"
    android:background="@android:color/transparent">

    <LinearLayout 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"
        android:layout_gravity="center"
        android:background="@android:color/holo_blue_dark"
        android:padding="4dp"
        app:layout_heightPercent="50%"
        app:layout_marginPercent="5%"
        app:layout_widthPercent="90%">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:layout_margin="4dp"
            android:layout_weight="0.3"
            android:background="@android:color/holo_purple"
            android:contentDescription="this is where you can keep your buttons"
            android:gravity="center"
            android:orientation="vertical">


            <Button
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_margin="4dp"
                android:layout_weight="1"
                android:text="First"
                android:textAllCaps="false" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_margin="4dp"
                android:layout_weight="1"
                android:text="Second"
                android:textAllCaps="false" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_margin="4dp"
                android:layout_weight="1"
                android:text="Third"
                android:textAllCaps="false" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_margin="4dp"
                android:layout_weight="1"
                android:text="Forth"
                android:textAllCaps="false" />
        </LinearLayout>

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:layout_margin="4dp"
            android:layout_weight="0.7"
            android:background="@android:color/holo_green_dark"
            android:contentDescription="this would be your frame container"></FrameLayout>
    </LinearLayout>

</android.support.percent.PercentFrameLayout>

output

how to make app a percent of the screen size

2 Answers2