Android create specifc Layout (only XML)

Question

I am new to XML and wanted to create a simple start page of a game. First I startet with the Android Studio 3.0 Layout maker and came up to something like this(second image). The biggest problem is to get the 3 ImageButtons on the bottom right. After lots of trying and google I couldnt find the solution, is it eaven possible with just XML code?

In my case until now it looks like this:

<?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"
android:background="@color/colorPrimary"
tools:context="de.chipsapps.ca.identiti.MenuACT">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp"
        android:cropToPadding="false"
        app:srcCompat="@drawable/logo" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/buttons_style1"
        android:textColor="@color/colorPrimaryFont"
        android:paddingBottom="12dp"
        android:paddingTop="12dp"
        android:text="@string/play"
        android:textSize="30sp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:textColor="@color/colorPrimaryFont"
        android:background="@drawable/buttons_style1"
        android:paddingBottom="12dp"
        android:paddingTop="12dp"
        android:text="@string/rate"
        android:textSize="30sp" />

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

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:layout_margin="15dp"
            android:layout_weight="0.33"
            android:adjustViewBounds="false"
            android:background="@drawable/button_style2"
            android:cropToPadding="false"
            android:scaleType="centerInside"
            app:srcCompat="@drawable/settings" />

        <ImageButton
            android:id="@+id/imageButton3"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:layout_weight="0.33"
            android:scaleType="centerInside"
            android:layout_margin="15dp"
            android:background="@drawable/button_style2"
            app:srcCompat="@drawable/highscores" />

        <ImageButton
            android:id="@+id/imageButton4"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:layout_weight="0.33"
            android:scaleType="centerInside"
            android:layout_margin="15dp"
            android:background="@drawable/button_style2"
            app:srcCompat="@drawable/share" />

    </LinearLayout>

</LinearLayout>

Is it possible to get this with XML? Hopefully someone can help :D

EDIT tryied this:

<?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"
android:background="@color/colorPrimary"
tools:context="de.chipsapps.ca.identiti.MenuACT">


<View
    android:id="@+id/bigCircle"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="48dp"
    android:background="@drawable/logo"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintWidth_percent=".5"/>

but that looks like that:

first of all use image of smaller resolution and add some margin from both sides or use weightsum — Vivek Mishra, Mar 29 '18 at 15:58

Ben P. · Accepted Answer · 2018-03-29T18:57:31.400

Here's how I would do it:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/green">

    <View
        android:id="@+id/bigCircle"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="48dp"
        android:background="@drawable/circle"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintWidth_percent=".5"/>

    <TextView
        android:id="@+id/play"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:paddingTop="6dp"
        android:paddingBottom="6dp"
        android:gravity="center"
        android:textColor="#88ffffff"
        android:textSize="24sp"
        android:text="PLAY"
        android:background="@color/green_dark"
        app:layout_constraintTop_toBottomOf="@+id/bigCircle"
        app:layout_constraintLeft_toLeftOf="@+id/bigCircle"
        app:layout_constraintRight_toRightOf="@+id/bigCircle"/>

    <TextView
        android:id="@+id/rate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="6dp"
        android:paddingTop="6dp"
        android:paddingBottom="6dp"
        android:gravity="center"
        android:textColor="#88ffffff"
        android:textSize="24sp"
        android:text="RATE"
        android:background="@color/green_dark"
        app:layout_constraintTop_toBottomOf="@+id/play"
        app:layout_constraintLeft_toLeftOf="@+id/bigCircle"
        app:layout_constraintRight_toRightOf="@+id/bigCircle"/>

    <ImageView
        android:id="@+id/settings"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="6dp"
        android:scaleType="center"
        android:background="@drawable/circle"
        app:layout_constraintTop_toBottomOf="@+id/rate"
        app:layout_constraintLeft_toLeftOf="@+id/rate"
        app:layout_constraintRight_toLeftOf="@+id/space1"
        app:layout_constraintDimensionRatio="1:1"
        app:srcCompat="@drawable/ic_settings_white_24dp"/>

    <android.support.v4.widget.Space
        android:id="@+id/space1"
        android:layout_width="6dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toRightOf="@+id/settings"
        app:layout_constraintRight_toLeftOf="@+id/trophy"/>

    <ImageView
        android:id="@+id/trophy"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="6dp"
        android:scaleType="center"
        android:background="@drawable/circle"
        app:layout_constraintTop_toBottomOf="@+id/rate"
        app:layout_constraintLeft_toRightOf="@+id/space1"
        app:layout_constraintRight_toLeftOf="@+id/space2"
        app:srcCompat="@drawable/ic_settings_white_24dp"
        app:layout_constraintDimensionRatio="1:1"/>

    <android.support.v4.widget.Space
        android:id="@+id/space2"
        android:layout_width="6dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toRightOf="@+id/trophy"
        app:layout_constraintRight_toLeftOf="@+id/share"/>

    <ImageView
        android:id="@+id/share"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="6dp"
        android:scaleType="center"
        android:background="@drawable/circle"
        app:layout_constraintTop_toBottomOf="@+id/rate"
        app:layout_constraintLeft_toRightOf="@+id/space2"
        app:layout_constraintRight_toRightOf="@+id/rate"
        app:srcCompat="@drawable/ic_settings_white_24dp"
        app:layout_constraintDimensionRatio="1:1"/>

</android.support.constraint.ConstraintLayout>

And the circle background:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="@color/green_dark"/>

</shape>

Obviously you'll have to replace the images and colors with your real images and colors, and you'll probably want to adjust the spacing, but this should get you started.

The important parts of the solution are:

For the top circle view, use a percentage width and an aspect ratio in order to make it a perfect circle that doesn't fill the whole screen

android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"

For the bottom row of images, use the center scaleType so that the image isn't stretched to fill the whole view

android:scaleType="center"

Note: the app:layout_constraintWidth_percent attribute requires that you use version 1.1.0 of the constraint-layout support library.

thanks for the complex answer, i have tried it but the result is not right? i have written it in my original post under EDIT pls take a look at it :D — Tim Jansen, Mar 29 '18 at 18:54
@TimJansen in your build.gradle file, what version of the `constraint-layout` library are you using? — Ben P., Mar 29 '18 at 18:55
@TimJansen I assume you're using version `1.0.2`; change that to `1.1.0-beta5` and it should work. — Ben P., Mar 29 '18 at 18:57
@TimJansen In android studio, in the top menu bar, `Navigate -> File...` and type "build.gradle". There will probably be two of them; choose the "app" one. You should see a line like `compile 'com.android.support.constraint:constraint-layout:1.0.2'` or `implementation 'com.android.support.constraint:constraint-layout:1.0.2'`... the version number is at the end; change "1.0.2" to "1.1.0-beta5" — Ben P., Mar 29 '18 at 20:40
Perfeect it looks great but the images are too big , they arent downscaled ;/ — Tim Jansen, Apr 03 '18 at 14:34
@TimJansen what's the intrinsic size of your images? If you want to force them to downscale, you could try adding padding to the view. — Ben P., Apr 03 '18 at 15:41
@TimJansen well, first of all I'd recommend using an image that is just the correct size you want, rather than trying to downscale a larger image. But if that's not an option, `android:padding` should work as long as you also have `android:scaleType="centerInside"`, which is different from the answer (uses `center`). — Ben P., Apr 03 '18 at 15:56
why should i used smaller images? than i have to make lots of them for all screen sizes... — Tim Jansen, Apr 03 '18 at 15:58
@TimJansen It's always better to have images displayed at their exact intrinsic size; any upscaling or downscaling will always make them look fuzzy. Adding different versions for each screen density might be tedious, but it creates a better final product. — Ben P., Apr 03 '18 at 15:59

Pavel B. · Answer 2 · 2018-03-29T16:09:35.747

0

Remove both inner linear layouts. Use constraints to connect elements, and margins for places where You want distance between elements and borders.

If You want an element to take all available space, except for some space on the sides, give it width of 0dp and connect with constraints to both sides.

For more info on the topic, read this https://developer.android.com/training/constraint-layout/index.html

Like, for instance, add this to buttons:

        android:layout_marginEnd="30dp"
        android:layout_marginStart="30dp"

Another example:

<Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="30dp"
        android:layout_marginStart="30dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"/>

edited Mar 29 '18 at 16:09

answered Mar 29 '18 at 16:05

Pavel B.

805
10
13

how to use constraints? – Tim Jansen Mar 29 '18 at 16:07
please refer to the link i just added – Pavel B. Mar 29 '18 at 16:11
try the second example – Pavel B. Mar 29 '18 at 16:13
1

isnt it better to stya with the relative layout becase its not an complex layout at all... – Tim Jansen Mar 29 '18 at 16:19

score 0 · Answer 3 · answered Mar 29 '18 at 16:08

0

Add margin to main LinearLayout like below.

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:orientation="vertical">
...

</LinearLayout>

answered Mar 29 '18 at 16:08

yatin deokar

730
11
20

yes thats working but the image buttons do have to big pictures in them – Tim Jansen Mar 29 '18 at 16:10

Android create specifc Layout (only XML)

3 Answers3