CODEWITHSUNDEEP
androidandroid-layout
Natalie
Natalie

Reputation: 315

how to make app a percent of the screen size

I am trying to make my app look like the image below, but by setting my app as a percent of my whole screen (not setting the dp), so that no matter what type of phone I am using, the app will take up the same screen percentage. This is my main activity which just consists of two fragments in one LinearLayout. 

android:layout_width="300dp"
android:layout_height="300dp"


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.Dialog.Alert">

<!-- Create a container (FrameLayout) for Body Fragment to switch with other Fragments on button clicks-->


<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"
    android:layout_gravity="end" />

enter image description here

I want my height and width to be a percent of the phone height and width like shown here.

Upvotes: 0

Views: 325

Answers (1)

Dani M
Dani M

Reputation: 1201

You should use LinearLayout as a container, and use these properties:

  • weightSum in LinearLayout, set it to 1.

  • layout_weight in every child of the LinearLayout. For example:

    <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="horizontal"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:weightSum="1">

     <LinearLayout
          android:orientation="vertical"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="0.75">

          ....

     </LinearLayout>

     <LinearLayout
          android:orientation="vertical"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="0.25">

         ....

    </LinearLayout>

</LinearLayout>

First layout will take 75% of the screen and the second 25%.

Note that when using weights, height and/or width has to be 0dp. You can now make it as complex as you need.

Upvotes: 1

Related Questions