likeanowl likeanowl - 3 months ago 13
Android Question

Android messing up with layouts

I've started to learn android developing recently and faced troubles with making layout looking nice.
Well, to understand basics I've decided to create a simple calculator app.
So, I'm using grid layout nested in linear layout to place buttons under text fields. Here is the source of my layout.

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

<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="0"
android:layout_weight="30"/>

<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:rowCount="5"
android:orientation="horizontal"
android:useDefaultMargins="false"
android:layout_weight="70">

<Button
android:text="C" />

<Button
android:text="BS" />

<Button
android:text="/" />

<Button
android:text="x" />

<Button
android:text="7" />

<Button
android:text="8" />

<Button
android:text="9" />

<Button
android:text="-" />

<Button
android:text="4" />

<Button
android:text="5" />

<Button
android:text="6" />

<Button
android:text="+" />

<Button
android:text="1" />

<Button
android:text="2" />

<Button
android:text="3" />

<Button
android:layout_gravity="fill"
android:layout_rowSpan="2"
android:text="=" />
<Button
android:layout_gravity="fill"
android:layout_columnSpan="2"
android:text="0" />
<Button
android:text="." />
</GridLayout>

</LinearLayout>


So, my question is:
How to make this layout fill the screen, and also how to make my app looking like this: [xiaomi calc][2]

Hoping for quick answers. Regards

[EDIT]: So, now things are way better, but I got new questions.
Now my main activity looks like this. Quite nice, in my opinion, but:
1) How to remove empty space on the right side of keyboard?
2) How to make keyboard and text view taking like 70 and 30 percents of screen respectively?

Also, new layout code is:

<?xml version="1.0" encoding="utf-8"?>

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

<TextView
android:background="@drawable/shape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="0"
android:layout_above="@+id/gridLayout" />

<GridLayout
android:id="@+id/gridLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_alignParentBottom="true"
android:columnCount="4"
android:rowCount="5"
android:orientation="horizontal"
android:useDefaultMargins="false">

<Button
android:background="@drawable/shape"
android:text="C" />

<Button
android:background="@drawable/shape"
android:text="BS" />

<Button
android:background="@drawable/shape"
android:text="/" />

<Button
android:background="@drawable/shape"
android:text="x" />

<Button
android:background="@drawable/shape"
android:text="7" />

<Button
android:background="@drawable/shape"
android:text="8" />

<Button
android:background="@drawable/shape"
android:text="9" />

<Button
android:background="@drawable/shape"
android:text="-" />

<Button
android:background="@drawable/shape"
android:text="4" />

<Button
android:background="@drawable/shape"
android:text="5" />

<Button
android:background="@drawable/shape"
android:text="6" />

<Button
android:background="@drawable/shape"
android:text="+" />

<Button
android:background="@drawable/shape"
android:text="1" />

<Button
android:background="@drawable/shape"
android:text="2" />

<Button
android:background="@drawable/shape"
android:text="3" />

<Button
android:background="@drawable/shape"
android:layout_gravity="fill_vertical"
android:layout_rowSpan="2"
android:text="=" />
<Button
android:background="@drawable/shape"
android:layout_gravity="fill_horizontal"
android:layout_columnSpan="2"
android:text="0" />
<Button
android:background="@drawable/shape"
android:text="." />
</GridLayout>

</RelativeLayout>


Thanks!

Answer

It is button element problem, its default background has some padding and it depend from chosen in app theme. To have elements bonded every button must has changed background ( in xml or in style ). Simplest example is to use color:

<Button
    android:text="C"
    android:background="@color/red"
 />

If You will add background to every button then there will be no spacing. To achieve better result create some drawable background with border and grey fill and set it to every button.

To use prepared drawable as background:

<Button
    android:text="C"
    android:background="@drawable/button_background"
 />

I would start from change app theme to something material like Theme.AppCompat.Light:

 <style name="AppTheme" parent="Theme.AppCompat.Light">
  <item name="colorPrimary">@color/primary</item>
  <item name="colorPrimaryDark">@color/primary_dark</item>
  <item name="colorAccent">@color/accent</item>
 </style>

After that buttons will look much better. Next is to change button background to Your need in style or layout as described.

Comments