Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create User interface like the attached photo

Can any one tell me what is this photo effect called. And I would like to know how to create an adapter for this attached image effect.

@Edited: This is a sample photo of Android market. I want to create a layout like this. I suppose this should be made overriding a GridView adapter.

Portrait Screenshot


Photo

Landscape Screenshot


Photo


Another Screenshot


Photo

I'm extremely sorry my question was not clear to you guys.

Possible duplicate.

like image 444
san Avatar asked Jul 23 '12 04:07

san


People also ask

How do you create an intuitive user interface?

An intuitive interface should use the same words as its users. Think about the underlying concepts and knowledge a user must have to understand the UI. Especially consider technical terms and concepts that may not be obvious to the user, Define or explain these when necessary so the user can make meaningful decisions.

What is user interface example?

Some examples of user interfaces include: computer mouse. remote control. virtual reality.


2 Answers

Have you tried this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.54" >
        <Button
            android:id="@+id/Button01"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.00"
            android:text="Button" />    
        <Button
            android:id="@+id/Button02"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.00"
            android:text="Button" />    
    </LinearLayout>
    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="99dp" > 
        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button" />  
        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button" />    
    </LinearLayout>   
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >    
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >   
            <Button
                android:id="@+id/button4"
                android:layout_width="match_parent"
                android:layout_height="152dp"
                android:text="Button" />    
            <Button
                android:id="@+id/button5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />    
        </LinearLayout>    
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >
            <Button
                android:id="@+id/button6"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />
            <Button
                android:id="@+id/button7"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Check this thread: Heterogeneous GridLayout

enter image description here

like image 180
radzio Avatar answered Sep 24 '22 11:09

radzio


You create in this order:

LinearLayout(VERTICAL) with weightSum of 2;

LinearLayout(VERTICAL) with weight of 1 and weightSum of 3;

Inside it will be 3 layouts, horizontal linear layout with weight of .70, horizontal linear layout with weight of .50 and an imageView with weight of 1.80

LinearLayout(VERTICAL) with weight of 1 and weight sum of 3;

Inside it will be 3 linear layouts

2 *(2 of these) -horizontal with weight of .50 and weight sum of 2 inside this horizontal layout will be two image views with a weight of 1 each

thirdly and finally an image view with the weight 1.50

do this and you'l have the correctly weighted layout to your liking

like image 23
eoghanm Avatar answered Sep 22 '22 11:09

eoghanm