CODEWITHSUNDEEP
androidandroid-layoutandroid-studioandroid-imagebutton
Furkan Gözükara
Furkan Gözükara

Reputation: 23850

How to split android screen horizontal 2 vertical 3 total 6

Ok i am trying to split screen size to horizontally equally and vertically 3 each part

Android studio on windows 8.1 api 9

Here image how i want

enter image description here

each image is exactly those sizes and i want them to proportionally scaled according to the lower resolutions

here my code that i tried and failed

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
 tools:context=".Pokemon"
    android:background="@color/background_floating_material_dark"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:baselineAligned="false"
  >



    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/register_monstermmorpg_1"
            android:background="@null"
            android:src="@drawable/bg_monstermmorpg_button_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"


            />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/register_monstermmorpg_2"
            android:background="@null"
            android:src="@drawable/Register_monstermmorpg_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"

            />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/login_monstermmorpg"
            android:background="@null"
            android:src="@drawable/Login_monstermmorpg_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"

            />

    </RelativeLayout>
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/register_pokemonets_1"
            android:background="@null"
            android:src="@drawable/bg_pokemonpets_button_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"

            />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/register_pokemonets_2"
            android:background="@null"
            android:src="@drawable/Register_pokemonpets_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"

            />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/login_pokemonpets"
            android:background="@null"
            android:src="@drawable/Login_pokemonpets_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"

            />
    </RelativeLayout>
</LinearLayout>

Upvotes: 0

Views: 3551

Answers (4)

David
David

Reputation: 1026

Using layout weight can be a good solution.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <Button
                android:id="@+id/button1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button1" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <Button
                android:id="@+id/Button01"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button2" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <Button
                android:id="@+id/Button02"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button3" />

        </LinearLayout>
    </LinearLayout>

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <Button
                android:id="@+id/Button05"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button3" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <Button
                android:id="@+id/Button04"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button2" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <Button
                android:id="@+id/Button03"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button1" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

</LinearLayout>

Upvotes: 0

jb15613
jb15613

Reputation: 359

First you need a horizontal LinearLayout with a weight sum of 2. Inside it, should be 2 vertical LinearLayouts with weight sums of 4, and weights of 1 each. Inside those two layouts, add your 3 image buttons. Top has a weight of 2, others have a weight of 1

Upvotes: 1

Karthika PB
Karthika PB

Reputation: 1373

I think simply you can use a GridView

in the layout aspect

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
 tools:context=".Pokemon"
    android:background="@color/background_floating_material_dark"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:baselineAligned="false"
  >

<LinearLayout


    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightsum="2"
  >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
android:orientation:vertical
android:weightsum="3"
        android:layout_weight="1">

        <ImageButton
            android:layout_width="match_parent"
            android:layout_height="0dp"
 android:layout_weight="1"
            android:id="@+id/register_monstermmorpg_1"
            android:background="@null"
            android:src="@drawable/bg_monstermmorpg_button_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"


            />

        <ImageButton
            android:layout_width="match_parent"
            android:layout_height="0dp"
 android:layout_weight="1"
            android:id="@+id/register_monstermmorpg_2"
            android:background="@null"
            android:src="@drawable/Register_monstermmorpg_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"

            />

        <ImageButton
            android:layout_width="match_parent"
            android:layout_height="0dp"
 android:layout_weight="1"
            android:id="@+id/login_monstermmorpg"
            android:background="@null"
            android:src="@drawable/Login_monstermmorpg_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"

            />

    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
android:orientation:vertical
android:weightsum="3"
        android:layout_weight="1">
        <ImageButton
           android:layout_width="match_parent"
            android:layout_height="0dp"
 android:layout_weight="1"
            android:id="@+id/register_pokemonets_1"
            android:background="@null"
            android:src="@drawable/bg_pokemonpets_button_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"

            />

        <ImageButton
            android:layout_width="match_parent"
            android:layout_height="0dp"
 android:layout_weight="1"
            android:id="@+id/register_pokemonets_2"
            android:background="@null"
            android:src="@drawable/Register_pokemonpets_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"

            />

        <ImageButton
            android:layout_width="match_parent"
            android:layout_height="0dp"
 android:layout_weight="1"
            android:id="@+id/login_pokemonpets"
            android:background="@null"
            android:src="@drawable/Login_pokemonpets_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"

            />
    </RelativeLayout>


<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/register_monstermmorpg_1"
            android:background="@null"
            android:src="@drawable/bg_monstermmorpg_button_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"


            />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/register_monstermmorpg_2"
            android:background="@null"
            android:src="@drawable/Register_monstermmorpg_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"

            />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/login_monstermmorpg"
            android:background="@null"
            android:src="@drawable/Login_monstermmorpg_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"

            />

    </RelativeLayout>
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/register_pokemonets_1"
            android:background="@null"
            android:src="@drawable/bg_pokemonpets_button_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"

            />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/register_pokemonets_2"
            android:background="@null"
            android:src="@drawable/Register_pokemonpets_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"

            />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/login_pokemonpets"
            android:background="@null"
            android:src="@drawable/Login_pokemonpets_land"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"

            />
    </LinearLayout>
</LinearLayout>

Upvotes: 1

Giorgio Antonioli
Giorgio Antonioli

Reputation: 16224

The trick here is to use one LinearLayout as parent with a weightSum of 4 and orientation vertical. Then use 3 LinearLayout childs with a weightSum of 2, orientation horizontal and a weight of 2 for the first one and 1 for the second and third one. Inside these LinearLayout put 2 ImageButton with weight of 1.

If you want an example tell me but i think that i was clear.

P.s. all the layout_width and layout_height have to be match_parent

Upvotes: 1

Related Questions