stackoom
  简体   繁体   中英

How to create a layout like this?

 原文  2014-07-01 08:24:56  7   4    android/ layout/ android-linearlayout

Question

I want to show four images as shown in given imaages . each image must be equally far apart from others I have tried a LinearLayout and use it weight property but all in sane. 在此处输入图片说明

I have eight icons, four for selected state and four for unselected state. I have tried many ways,

Thanks in Advance.

Image Icons are ..

xml 

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg" >

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/bottom" />

    <LinearLayout
        android:id="@+id/bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/article_icn"
            android:padding="10dp"
            android:layout_margin="10dp"
            android:scaleType="center" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/forum_icn"
            android:padding="10dp"
             android:layout_margin="10dp"
            android:scaleType="fitXY" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/profile_icn"
            android:padding="10dp"
             android:layout_margin="10dp"
            android:scaleType="fitXY" />
    </LinearLayout>

</RelativeLayout>

在此处输入图片说明

在此处输入图片说明

4 answers

solution1
 1  2014-07-01 08:30:10

I tried your code and modified a bit: 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/bottom" />

    <LinearLayout
        android:id="@+id/bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:weightSum="3" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:background="@drawable/icon"
            android:padding="10dp"
            android:scaleType="center" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:background="@drawable/icon"
            android:padding="10dp"
            android:scaleType="fitXY" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:background="@drawable/icon"
            android:padding="10dp"
            android:scaleType="fitXY" />
    </LinearLayout>

</RelativeLayout>

Assigning android:weightSum="3" to container and weight 1 to all images works fine:

Output:

在此处输入图片说明

solution2
 1  2014-07-01 08:32:11

Check this layout, works exactly as you want. Just replace the image icons and background. 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg" >
<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="#517398" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp" >

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center" >

                <ImageButton
                    android:id="@+id/image_agenda"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:src="@drawable/ic_launcher" />
            </LinearLayout>


            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center" >

                <ImageButton
                    android:id="@+id/image_month"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:src="@drawable/ic_launcher" />
            </LinearLayout>


            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center" >

                <ImageButton
                    android:id="@+id/image_month"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:src="@drawable/ic_launcher" />
            </LinearLayout>



            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center" >

                <ImageButton
                    android:id="@+id/image_day"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:src="@drawable/ic_launcher" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

    </RelativeLayout>

OUTPUT

图片

solution3
 1  2014-07-01 08:33:14

You can use weight attrib: 

<?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="wrap_content"
android:background="#000000"
android:gravity="center_horizontal"
android:orientation="horizontal" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0.25"
    android:src="@android:drawable/sym_action_chat" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0.25"
    android:src="@android:drawable/sym_action_chat" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0.25"
    android:src="@android:drawable/sym_action_chat" />

<ImageView
    android:id="@+id/imageView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0.25"
    android:src="@android:drawable/sym_action_chat" />

</LinearLayout>

output is like this:

solution4
 0 ACCPTED  2014-07-01 08:33:24

Try this.. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/bottom" />

    <LinearLayout
        android:id="@+id/bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="@drawable/ic_launcher"
                android:padding="10dp"
                android:scaleType="center" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Textview" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="@drawable/ic_launcher"
                android:padding="10dp"
                android:scaleType="center" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Textview" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="@drawable/ic_launcher"
                android:padding="10dp"
                android:scaleType="fitXY" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Textview" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="@drawable/ic_launcher"
                android:padding="10dp"
                android:scaleType="fitXY" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Textview" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

Screen

在此处输入图片说明

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to create layout like this? How to create layout like on the picture? How to create layout like this in android? How to create a android layout like this? How to create Gmail like edittext Layout How to create Twitter like profile layout? How to create Emoji layout like in WhatsApp - Android How can i create snap layout like this How can I create a layout like this? How to create layout with 6 buttons like windows tiles
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM