How to create this UI programatically in android

StackOverflow https://stackoverflow.com/questions/20592112

  •  01-09-2022
  •  | 
  •  

Question

The rectangle is the entire screen. The dotted line represents the center of the height and width. Each red line is an imageview and the green dot is the center of the imageview. Each imageview is equidistant from the neighbouring imageview and the screen(heightwise) http://i.stack.imgur.com/l0Ied.png

I am designing main menu for my small game app that should work in all screens as shown in the figure. I browsed through many tutorials and came up with the following code but i am not getting the expected result. In one emulator, The last imageview is not visible and the imagviews are not centered. In my samsung galaxy ace, only the first imageview is visible. Is anything wrong with the code.? 

package com.example.layout_test2;

import android.os.Build;
import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Point;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;


public class MainActivity extends Activity {

int screenWidth,width_centre;
int screenHeight,first_icon_position,second_icon_position,third_icon_position,fourth_icon_position;

@SuppressLint("NewApi")
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

        LinearLayout background= new LinearLayout(this);
        background.setOrientation(LinearLayout.VERTICAL);
        background.setLayoutParams(new LayoutParams(
                LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT));


        ImageView icon_1 = new ImageView(this);
        ImageView icon_2 = new ImageView(this);
        ImageView icon_3 = new ImageView(this);
        ImageView icon_4 = new ImageView(this);

        icon_1.setScaleType(ImageView.ScaleType.MATRIX);
        icon_1.setImageResource(R.drawable.start);
        //icon_1.setOnClickListener(this);

        BitmapFactory.Options o = new BitmapFactory.Options();
        o.inTargetDensity = DisplayMetrics.DENSITY_DEFAULT;
        Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.start, o);
        int w1 = bmp.getWidth();
        int h1 = bmp.getHeight();

        icon_2.setScaleType(ImageView.ScaleType.MATRIX);
        icon_2.setImageResource(R.drawable.settings);
        bmp = BitmapFactory.decodeResource(getResources(), R.drawable.settings, o);
        int w2 = bmp.getWidth();
        int h2 = bmp.getHeight();

        icon_3.setScaleType(ImageView.ScaleType.MATRIX);
        icon_3.setImageResource(R.drawable.more_games);
        bmp = BitmapFactory.decodeResource(getResources(), R.drawable.more_games, o);
        int w3 = bmp.getWidth();
        int h3 = bmp.getHeight();


        icon_4.setScaleType(ImageView.ScaleType.MATRIX);
        icon_4.setImageResource(R.drawable.exit);
        bmp = BitmapFactory.decodeResource(getResources(), R.drawable.exit, o);
        int w4 = bmp.getWidth();
        int h4 = bmp.getHeight();



        if (Build.VERSION.SDK_INT >= 17) {
            Point size = new Point();
            try {
                this.getWindowManager().getDefaultDisplay().getRealSize(size);
                screenWidth = size.x;
                screenHeight = size.y;
                System.out.println(String.valueOf(screenWidth) );
                System.out.println(String.valueOf(screenHeight));
            } catch (NoSuchMethodError e) {
                Log.i("error", "it can't work");
            }

        } else {
            DisplayMetrics metrics = new DisplayMetrics();
            this.getWindowManager().getDefaultDisplay().getMetrics(metrics);
            screenWidth = metrics.widthPixels;
            screenHeight = metrics.heightPixels;
            System.out.println(String.valueOf(screenWidth) );
            System.out.println(String.valueOf(screenHeight));


    }

        int width_centre1 = (screenWidth-w1)/2;
        int width_centre2 = (screenWidth-w2)/2;
        int width_centre3 = (screenWidth-w3)/2;
        int width_centre4 = (screenWidth-w4)/2;


        first_icon_position = (int) (screenHeight-h1)/8;
        second_icon_position = (int) 3*(screenHeight-h2)/8;
        third_icon_position = (int) 5*screenHeight/8;
        fourth_icon_position = (int) 7*screenHeight/8;


        System.out.println(screenHeight);
        System.out.println(first_icon_position);
        System.out.println(second_icon_position);
        System.out.println(third_icon_position);
        System.out.println(fourth_icon_position);

        LinearLayout.LayoutParams layoutParams1 = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        layoutParams1.setMargins(width_centre1,first_icon_position, 0, 0);
        background.addView(icon_1,layoutParams1);

        LinearLayout.LayoutParams layoutParams2 = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        layoutParams2.setMargins(width_centre2,second_icon_position, 0, 0);
        background.addView(icon_2,layoutParams2);


        LinearLayout.LayoutParams layoutParams3  = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        layoutParams3.setMargins(width_centre3,300, 0, 0);
        background.addView(icon_3,layoutParams3);


        LinearLayout.LayoutParams layoutParams4 = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        layoutParams4.setMargins(width_centre4,180, 0, 0);
        background.addView(icon_4,layoutParams4);


        //make visible to program
        setContentView(background);


}
}
Was it helpful?

Solution

OK, this how I made a layout which is very similar to the one you asked for, just using layouts instead of code ;)

The results:

enter image description here (240*320 ldpi screen)

enter image description here (320*480 mdpi screen)

The images I used:

enter image description here (the red line, res/drawable/line_hor_red)

enter image description here (the invisible line in the center, res/drawable/line_hor_tsp)

The next two LOOK identical, but aren't

enter image description here (horizontal dotted pattern, res/drawable/ptn_hor_blk)

enter image description here (vertical dotted pattern, res/drawable/ptn_ver_blk)

Now that you have to put your images in res/drawable (or in res/drawable-mdpi - which is the NORMAL resolution, and it will be scaled to fit all others), do this:

Put in your res/drawable folder these two layouts:

dots_hor:

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ptn_hor_blk"
    android:tileMode="repeat"
/>

dots_ver:

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ptn_ver_blk"
    android:tileMode="repeat"
/>

This is the layout you want (background.xml)

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="4dp"
        android:background="#fff"
        android:orientation="vertical"
        >
        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@drawable/dots_hor"
        />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_centerInParent="true"
            android:background="@drawable/dots_ver"
        />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="4dp"
            android:background="#0000"
            android:orientation="vertical"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:src="@drawable/line_hor_red"
            />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:src="@drawable/line_hor_red"
            />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:src="@drawable/line_hor_tsp"
            />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:src="@drawable/line_hor_red"
            />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:src="@drawable/line_hor_red"
            />
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

[EDIT]

ALTERNATIVE LAYOUT, WITHOUT THE DOTS

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="4dp"
        android:background="#fff"
        android:orientation="vertical"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="4dp"
            android:background="#0000"
            android:orientation="vertical"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:src="@drawable/line_hor_red"
            />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:src="@drawable/line_hor_red"
            />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:src="@drawable/line_hor_tsp"
            />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:src="@drawable/line_hor_red"
            />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:src="@drawable/line_hor_red"
            />
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

This means that you don't need drawable/dots_hor, drawable/dots_ver, drawable/ptn_hor_blk, drawable/ptn_ver_blk

[/EDIT]

What you will need in your MainActivity:

import android.view.Window;
import android.view.WindowManager;

And

@Override
protected void onCreate(
    final Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);

    // Make this activity, full screen
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
        WindowManager.LayoutParams.FLAG_FULLSCREEN);

    // Hide the Title bar of this activity screen
    getWindow().requestFeature(Window.FEATURE_NO_TITLE);

    setContentView(R.layout.background);
}

Last but not least, if I helped you, don't forget to accept my answer and upvote.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top