skip to Main Content

I have an activity:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout 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"
                                  app:rowCount="4"
                                  app:columncount="4">

<Button
    android:text="1"
    android:id="@+id/button1"
    app:layout_gravity="fill"
    app:layout_rowWeight="1"
    app:layout_columnWeight="1"
    app:layout_row="0"
    app:layout_column="0""/>


<Button
    android:text="2"
    android:id="@+id/button2"
    app:layout_rowWeight="1"
    app:layout_columnWeight="1"
    app:layout_gravity="fill"
    app:layout_row="0"
    app:layout_column="1"/>

<Button
    android:text="3"
    android:id="@+id/button3"
    app:layout_rowWeight="1"
    app:layout_columnWeight="1"
    app:layout_gravity="fill"
    app:layout_row="0"
    app:layout_column="2"/>

<Button
    android:text="4"
    android:id="@+id/button5"

    app:layout_gravity="fill"
    app:layout_row="1"
    app:layout_column="0"/>

<Button
    android:text="5"
    android:id="@+id/button6"
    app:layout_rowWeight="1"
    app:layout_columnWeight="1"
    app:layout_gravity="fill"
    app:layout_row="1"
    app:layout_column="1"/>

<Button
    android:text="6"
    android:id="@+id/button7"
    app:layout_rowWeight="1"
    app:layout_columnWeight="1"
    app:layout_gravity="fill"
    app:layout_row="1"
    app:layout_column="2"/>
<Button
    android:text="7"
    android:id="@+id/button8"
    app:layout_rowWeight="1"
    app:layout_columnWeight="1"
    app:layout_gravity="fill"
    app:layout_row="2"
    app:layout_column="0"/>
<Button
    android:text="8"
    android:id="@+id/button9"
    app:layout_rowWeight="1"
    app:layout_columnWeight="1"
    app:layout_gravity="fill"
    app:layout_row="2"
    app:layout_column="1"/>

<Button
    android:text="9"
    android:id="@+id/button4"
    app:layout_gravity="fill"
    app:layout_rowWeight="1"
    app:layout_columnWeight="1"
    app:layout_row="2"
    app:layout_column="2"
    />

which looks like this:

Current layout

I would like to change the button 1, so that it would be stratched vertically and 4 and 7 must be minimized to wrap_contnet (made in photoshop)
enter image description here

What is the best way to do this?

More specifically, I need to make this:

enter image description here

I made this by using custom width, but I don’t know how to make this using layouts:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:grid="http://schemas.android.com/apk/res-auto"
tools:context="com.example.win72.myapplication.MainActivity"
grid:columnCount="3"
grid:rowCount="3">


<TextView
    grid:layout_gravity="fill"
    grid:layout_columnWeight="1"
    grid:layout_rowWeight="10"
    grid:layout_row="0"
    grid:layout_column="0"
    grid:layout_rowSpan="2"

    android:textSize="60sp"
    android:background="#a49595"
    android:text="90"
    android:id="@+id/textView"
    android:clickable="true"
    android:layout_height="457dp"/>

<TextView
    grid:layout_gravity="fill"
    grid:layout_columnWeight="1"
    grid:layout_rowWeight="10"
    grid:layout_row="0"
    grid:layout_column="2"
    grid:layout_rowSpan="2"

    android:textSize="60sp"
    android:background="#a49595"
    android:text="90"
    android:id="@+id/textView2"/>

<TextView
   grid:layout_row="2"
   grid:layout_column="0"
   grid:layout_gravity="fill_horizontal"
   grid:layout_columnWeight="1"

   android:gravity="center"
   android:textSize="30sp"
   android:text="4"
   android:id="@+id/textView3"/>

<TextView
    grid:layout_row="2"
    grid:layout_column="2"
    grid:layout_gravity="fill_horizontal"


    android:text="6"
    android:id="@+id/textView4"
    android:gravity="center"
    android:textSize="30sp"
    />

<Button
    grid:layout_row="0"
    grid:layout_column="1"
    grid:layout_columnWeight="1"
    grid:layout_gravity="fill_horizontal"
    android:text="Reset"
    android:id="@+id/button"/>

<Button
    grid:layout_row="1"
    grid:layout_column="1"
    grid:columnweight="1"
    grid:layout_gravity="fill_horizontal"

    android:text="Next"
    android:id="@+id/button2"
    />

2

Answers


  1. Chosen as BEST ANSWER

    I found that making dynamic count of rows/columns and using rowspan can make this:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:grid="http://schemas.android.com/apk/res-auto"
    tools:context="com.example.win72.myapplication.MainActivity">
    
    
    <TextView
        grid:layout_gravity="fill"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_row="0"
        grid:layout_column="0"
        grid:layout_rowSpan="3"
    
        android:textSize="60sp"
        android:background="#a49595"
        android:text="90"
        android:id="@+id/textView"
        android:clickable="true"
        />
    
    <TextView
        grid:layout_gravity="fill"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_row="0"
        grid:layout_column="2"
        grid:layout_rowSpan="3"
    
        android:textSize="60sp"
        android:background="#a49595"
        android:text="90"
        android:id="@+id/textView2"/>
    
    <TextView
       grid:layout_row="3"
       grid:layout_column="0"
       grid:layout_gravity="fill_horizontal"
       grid:layout_columnWeight="1"
    
       android:gravity="center"
       android:textSize="30sp"
       android:text="4"
       android:id="@+id/textView3"/>
    
    <TextView
        grid:layout_row="3"
        grid:layout_column="2"
        grid:layout_gravity="fill_horizontal"
    
    
        android:text="6"
        android:id="@+id/textView4"
        android:gravity="center"
        android:textSize="30sp"
        />
    
    <Button
        grid:layout_row="0"
        grid:layout_column="1"
        grid:layout_columnWeight="1"
        grid:layout_gravity="fill_horizontal"
        android:text="Reset"
        android:id="@+id/button"/>
    
    <Button
        grid:layout_row="1"
        grid:layout_column="1"
        grid:layout_columnWeight="1"
        grid:layout_gravity="fill_horizontal"
    
        android:text="Next"
        android:id="@+id/button2"
        />
    

    enter image description here

    Thanks a let for help!


  2. Using staggeredgridlayout you can achieve that.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search