user5992514
user5992514

Reputation:

How to make the button fit the screen?

I am trying to make an app but when I test it on different devices the button remains the same size. I tried using Wrap_Content with padding equal to 5dp. Here is the code:

<?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="#000">

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@ id/img2"


        />

    <Button
        android:layout_width="192dp"
        android:layout_height="wrap_content"
        android:id="@ id/button"
        android:text="wallpaper"
        android:alpha="0.1"
        android:layout_gravity="left|bottom"
         />

    <Button
        android:layout_width="192dp"
        android:layout_height="wrap_content"
        android:text="back"
        android:id="@ id/button2"
        android:layout_gravity="right|bottom"
        android:alpha="0.1" />



</FrameLayout>

I want both of the buttons to meet at the bottom center but it is not as expected for all the devices. Here is what happen when i set Match_Parent

Upvotes: 1

Views: 2685

Answers (3)

S Praveen Kumar
S Praveen Kumar

Reputation: 341

If you want the buttons to be side by side and fit all screen sizes and orientation, you cann acomplish it with weights on a Linear layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android=" http://schemas.android.com/apk/res /android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000">
<FrameLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@ id/img2"/>
<LinearLayout android:width="match_parent"
android:height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="bottom">
<Button android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:id="@ id/button"
android:text="wallpaper"
android:alpha="0.1"/>

<Button android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:text="back"
android:id="@ id/button2"
android:alpha="0.1"/>
</LinearLayout>
</FrameLayout>

don't get scared off with size 0dp. The weight attribute is used to allocate size based on a ratio. Here both buttons have 0.5 weight. So both occupy the whole width equally. Since the width is calculated, there is no need to specify a size. So it is set to 0.

Upvotes: 1

Arnab Jain
Arnab Jain

Reputation: 247

Use 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"
    android:background="#000">

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/img2" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
                <Button
                    android:layout_weight="1" <!-- add weight -->
                    android:layout_width="0dp" <!-- change 192dp to 0dp -->
                    android:layout_height="wrap_content"
                    android:id="@+id/button"
                    android:text="wallpaper"
                    android:alpha="0.1"
                    android:layout_gravity="left|bottom" />
                <Button
                    android:layout_weight="1" <!-- add weight -->
                    android:layout_width="0dp" <!-- change 192dp to 0dp -->
                    android:layout_height="wrap_content"
                    android:id="@+id/button2"
                    android:text="back"
                    android:alpha="0.1"
                    android:layout_gravity="left|bottom" />
        </LinearLayout>
    </FrameLayout>
</RelativeLayout>

Upvotes: 0

Jyotman Singh
Jyotman Singh

Reputation: 11350

Try this code -

<?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="#000">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal">

    <Button
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/button"
        android:text="wallpaper"
        android:alpha="0.1" />

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="#fff" />

    <Button
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="back"
        android:id="@+id/button2"
        android:alpha="0.1" />

</LinearLayout>
</RelativeLayout>

Upvotes: 0

Related Questions