user3421416
user3421416

Reputation:

How can I create 3 buttons side by side horizontally with the same space in xml (Android)

I am trying to create the view below using xml in android. I tried to create it with Padding (Using dp) everywhere but then it didn't fit to all screens resolutions. How can I do it?

My xml code: (Update)

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res    /android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/eee"
    tools:context=".MainActivity"
    android:id="@+id/eee">

    <include layout="@layout/buttons" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="9"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_marginBottom="0dp"
            android:layout_weight="8"
            android:gravity="center_vertical"

            >

            <View
                android:layout_width="0px"
                android:layout_height="match_parent"
                android:layout_weight="15" />

            <Button
                android:id="@+id/eee"
                android:layout_weight="2"
                android:layout_width="90dp"
                android:layout_height="90dp"
                android:background="@drawable/eeee"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                />

            <View
                android:layout_width="0px"
                android:layout_height="match_parent"
                android:layout_weight="15" />

            <Button
                android:id="@+id/eee"
                android:layout_weight="2"
                android:layout_width="90dp"
                android:layout_height="90dp"
                android:background="@drawable/eee"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                />

            <View
                android:layout_width="0px"
                android:layout_height="match_parent"
                android:layout_weight="15" />

            <Button
                android:id="@+id/eeee"
                android:layout_weight="2"
                android:layout_width="90dp"
                android:layout_height="90dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:background="@drawable/drawabke"

                />

            <View
                android:layout_width="0px"
                android:layout_height="match_parent"
                android:layout_weight="15" />

        </LinearLayout>

        <View
            android:id="@+id/idd"
            android:layout_width="match_parent"
            android:layout_height="410dp"
            android:layout_alignParentBottom="true"

            android:layout_weight="2"/>


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:layout_centerHorizontal="true"
            android:text="TextHere"
            android:layout_alignParentBottom="true"
            />

    </LinearLayout>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:layout_centerHorizontal="true"
        android:text="TxetHere"
        android:layout_alignParentBottom="true"
        android:textColor="#f7f7f7"
        />

    <com.lorentzos.flingswipe.SwipeFlingAdapterView
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:rotation_degrees="15.5"
        android:paddingTop ="100dp"
        tools:context=".MyActivity" />


</RelativeLayout>

This is what I want

Upvotes: 0

Views: 1716

Answers (3)

Aakash
Aakash

Reputation: 5251

Check this out, it is exactly what you want:

<LinearLayout
     android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="0dp"
android:layout_weight="5"
android:gravity="center_vertical"
android:orientation="horizontal" >


<Button
android:id="@+id/eee"
android:layout_width="0dp"
android:layout_height="90dp"
android:layout_weight="1"
android:background="@drawable/ic_launcher"
android:layout_marginRight="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp" />


<Button
android:id="@+id/eef"
android:layout_width="0dp"
android:layout_height="90dp"
android:layout_weight="1"
android:background="@drawable/ic_launcher"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>


<Button
android:id="@+id/eeee"
android:layout_width="0dp"
android:layout_height="90dp"
android:layout_weight="1"
android:background="@drawable/ic_launcher"
android:layout_marginLeft="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp" />

</LinearLayout>

Upvotes: 0

pelotasplus
pelotasplus

Reputation: 10052

Try something like this:

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

    <Button
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content" />

    <Button
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content" />

    <Button
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content" />

</Linear>

What's here is that you have three views inside LinearLayout with the same layout_weight.

EDIT: to not to have buttons streached you can wrap each Button with LinearLayout, like this:

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

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />

    </LinearLayout>

[...]

</Linear>

Upvotes: 1

spacitron
spacitron

Reputation: 2183

It's pretty difficult to tell what you're doing without seeing the xml you're using - or a screenshot of the actual device - but generally, to resize elements to evenly share space you want to set their width/height to either 0 or "wrap_content" and then set the "layout_weight" to the same number for all elements.

Upvotes: 0

Related Questions