Apps Newbie - XML frustrations

[Ananym]

Hello!

I'm trying to dive into android development head first. While I know my way around Java, the XML and studio interface is proving painfully difficult in all sorts of silly places. These sorts of questions wouldn't really fly on stackoverflow, so I'd greatly appreciate any help you guys can offer me.

To begin with...
How do I add a plain View to my layout in designer? The google-produced udacity course on android development suggests using basic Views to provide blocks of colour, but in the current iteration of Studio I can't see any way to add these in. I can add a <view>, which opens a menu full of other views, but I can't find any way to add just a basic View class. There is a view in the palette called a Space, but I can't figure out how to have it draw any colour.

If this isn't a sensible way to produce basic colour blocks, what is?

 

[Deleted User]

Yes I know what you mean about SO, in many ways it can be hostile to noobs can't it?
Do you have a link to the course you're referring to, so we know what you're trying to achieve?
What do you mean by 'a basic View'? In Android all UI components are derived from View, it's a base class. So for example a Button could be treated like a View, it's just a specialisation of that class.

Normally in an Android app, each screen consists of some kind of layout, on to which you add all your UI components. You could use Images to create your blocks of colour, or maybe even just set the background colour of a component.

There's also a 2D graphics package, and you can draw just about anything on to a blank canvas with that.

Anyway if you either provide a link to this course, or some kind of sketch of how you want the screen to look, that would be most useful.

 

[Ananym]

The course was this https://www.udacity.com/course/android-basics-nanodegree-by-google--nd803 although identifying the precise point would take me a while. All I'm trying to achieve is placing a view consisting of a flat block of colour in my layout.

You're right, I can sort of use blank textboxes for this purpose, it just feels a little messy.

Next up!
I have a bunch of these boxes dynamically created to populate a gridView to make a colour palette.
The gridView is inside a frameLayout that is consuming all leftover space through Weight after the canvas, and the gridView's dimensions are set to match parent. The gridView's columnStretch stretches the color elements to fill the width, but I'd also like to fill the height. The elements themselves are match_parent, as is the grid, but they don't want to stretch vertically. Any ideas?

 

[Deleted User]

What's your XML for this layout?

 

[Ananym]

What's your XML for this layout?

In all its current auto-generated glory...

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="com.example.sam.drawingpractice.MainActivity">

    <LinearLayout
        android:layout_width="368dp"
        android:layout_height="495dp"
        android:layout_weight="1"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="8dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0">

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/undoButton"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignBottom="@+id/theview"
                android:layout_alignStart="@+id/theview"
                android:layout_marginBottom="4dp"
                android:layout_marginLeft="-16dp"
                android:layout_weight="0"
                android:clickable="true"
                android:padding="16dp"
                app:backgroundTint="@android:color/holo_blue_dark"
                app:fabSize="normal"
                app:srcCompat="@android:drawable/ic_menu_revert" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/clearButton"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignEnd="@+id/theview"
                android:layout_alignTop="@+id/undoButton"
                android:layout_marginBottom="4dp"
                android:layout_marginRight="-16dp"
                android:layout_weight="0"
                android:clickable="true"
                android:padding="8dp"
                app:backgroundTint="@android:color/holo_blue_dark"
                app:fabSize="normal"
                app:srcCompat="@android:drawable/ic_menu_delete" />

            <view
                android:id="@+id/theview"
                class="com.example.sam.drawingpractice.SamSurfaceView"
                layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="32dp"
                android:layout_marginRight="32dp"
                android:layout_marginTop="8dp"
                android:layout_weight="0"
                android:visibility="visible" />
        </RelativeLayout>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

            <GridView
                android:id="@+id/colorGridView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_above="@+id/colorButton"
                android:layout_centerHorizontal="true"
                android:layout_margin="8dp"
                android:layout_weight="1"
                android:columnWidth="40dp"
                android:elevation="1dp"
                android:gravity="center"
                android:horizontalSpacing="4dp"
                android:numColumns="7"
                android:scrollbarAlwaysDrawHorizontalTrack="false"
                android:stretchMode="columnWidth"
                android:verticalSpacing="4dp"
                android:visibility="visible" />
        </FrameLayout>

    </LinearLayout>

</android.support.constraint.ConstraintLayout>

 

[Deleted User]

I always find these layout issues a bit fiddly, but why is the parent layout of your Gridview set to

android:layout_height="0dp"

 

[Ananym]

I always find these layout issues a bit fiddly, but why is the parent layout of your Gridview set to

Mm. It shouldn't matter - it's the only element with weight, so it should be allocated all the leftover space. There's no visible difference if I set it to 400 or something.

For anyone curious I'm trying to port this pattern generator I made back when flash was cool - http://www.fastswf.com/FEG9QCE . Feels like it would work well with touch controls. The rest of the functionality will be simple enough once I've gotten the interface down - though I kind of suspect it won't live up to its legacy without hardware acceleration.