I am trying to place 4 buttons to fill all the relative layout.. I want each button have width and height till the center of the RelativeLayout (with about 2dp space between them).. I don't think that I can explain it very good, so I have made an image and here is the code I have made... Any ideas?? Thank you!! The view right now is:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView"
android:textAlignment="center"
android:textSize="30sp"
android:layout_marginTop="10dp"
android:id="#+id/textView" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true"
android:layout_marginTop="35dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:id="#+id/relativeLayout"
android:weightSum="1">
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button3"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button4"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
Try this code. I used two linear layouts instead of one relative layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="TextView"
android:textAlignment="center"
android:textSize="30sp" />
<LinearLayout
android:orientation="horizontal"
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="Button" />
</LinearLayout>
</LinearLayout>
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:text="TextView"
android:textAlignment="center"
android:textSize="30sp" />
<LinearLayout
android:id="#+id/relativeLayout"
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="1"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="5dp"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="5dp"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="5dp"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="5dp"
android:text="Button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Related
I have a questionnaire, in which I want the user to see only the previous and current question. How to achieve this in Android.
This is my XML View.
The user can see maximum two questions -- previous and current.
I have used a RelativeLayout which contains ScrollView, and in that I'm using multiple TextView for questions and Button for true/false
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
style="#android:style/Widget.DeviceDefault.Light.ScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:fillViewport="false"
android:scrollbarStyle="outsideOverlay"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.scanqr_android.ScrollingActivity"
tools:showIn="#layout/activity_scrolling">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#3f51b5"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="MY PAGE TITLE"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#fff" />
<TextView
android:id="#+id/textView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Caterpillars turn into butterflies."
tools:text="Caterpillars turn into butterflies." />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="true" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="false" />
</LinearLayout>
<TextView
android:id="#+id/textView9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Bubble gum contains rubber."
tools:text="Bubble gum contains rubber." />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="true" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="false" />
</LinearLayout>
<TextView
android:id="#+id/textView10"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="The deadliest earthquake of 2017 took place in Iran and Iraq." />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/Button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="true" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="false" />
</LinearLayout>
<TextView
android:id="#+id/textView11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Electrons are larger than molecules." />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="true" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="false" />
</LinearLayout>
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Thunderstorms have particular sound frequencies that can hurt a dog’s ears." />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/button13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="true" />
<Button
android:id="#+id/button14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="false" />
</LinearLayout>
<TextView
android:id="#+id/textView13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=" There are 30 days in May." />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/button15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="true" />
<Button
android:id="#+id/button16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="false" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
Firstly register your layout id by using findViewById() in java file.
Then you can hide the layout of textviews using like this -
linearLayout.setVisibility(View.GONE); by checking conditions.
You just hide the textview like this
textView.setVisibility(View.INVISIBLE);
or
textView.setVisibility(View.GONE);
Take a look at this How to set visibility of TextView?
I have the xml design code of android. I want the design a bit different. Following is the relative layout what I have tried:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="sg.unitconverter.UnitFuel"
tools:showIn="#layout/activity_unit_fuel">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/item1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner1"
android:layout_below="#+id/item1"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:entries="#array/area"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/item2"
android:layout_below="#+id/spinner1"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner2"
android:layout_below="#+id/item2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:entries="#array/area"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/clear"
android:id="#+id/clear"
android:layout_below="#+id/spinner2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:onClick="onClick"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backspace"
android:id="#+id/backSpace"
android:layout_below="#+id/spinner2"
android:layout_toRightOf="#+id/clear"
android:layout_toEndOf="#+id/clear"
android:onClick="onClick"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
android:id="#+id/num7"
android:layout_below="#+id/clear"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:onClick="onClick"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
android:id="#+id/num8"
android:layout_alignBottom="#+id/num7"
android:layout_alignLeft="#+id/backSpace"
android:layout_alignStart="#+id/backSpace"
android:onClick="onClick"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:id="#+id/num9"
android:layout_alignBottom="#+id/num8"
android:layout_toRightOf="#+id/num8"
android:layout_toEndOf="#+id/num8"
android:onClick="onClick"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
android:id="#+id/num4"
android:layout_below="#+id/num7"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:nestedScrollingEnabled="true"
android:onClick="onClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
android:id="#+id/num5"
android:layout_alignBottom="#+id/num4"
android:layout_alignLeft="#+id/num8"
android:layout_alignStart="#+id/num8"
android:onClick="onClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
android:id="#+id/num6"
android:layout_alignBottom="#+id/num5"
android:layout_toRightOf="#+id/num5"
android:layout_toEndOf="#+id/num5"
android:onClick="onClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:id="#+id/num1"
android:layout_below="#+id/num4"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:onClick="onClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:id="#+id/num2"
android:layout_alignBottom="#+id/num1"
android:layout_alignLeft="#+id/num5"
android:layout_alignStart="#+id/num5"
android:onClick="onClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:id="#+id/num3"
android:layout_alignBottom="#+id/num2"
android:layout_toRightOf="#+id/num2"
android:layout_toEndOf="#+id/num2"
android:onClick="onClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:id="#+id/num0"
android:layout_below="#+id/num2"
android:layout_alignLeft="#+id/num2"
android:layout_alignStart="#+id/num2"
android:onClick="onClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="."
android:id="#+id/dot"
android:textSize="20dp"
android:onClick="onClick"
android:layout_alignTop="#+id/num0"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="="
android:id="#+id/equal"
android:onClick="onClick"
android:layout_alignTop="#+id/num0"
android:layout_alignLeft="#+id/num3"
android:layout_alignStart="#+id/num3" />
</RelativeLayout>
The output of above xml shows like the following:
But I want the design to be like the following:
Can anyone please help on this to do atleast something so that it would be great?
You're going to want to look at Google's Material design documentation.
https://material.io/guidelines/
For the Buttons:
https://material.io/guidelines/components/buttons.html
here you go.. this is just basic layout.. you need to color and custom it by your self
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
<TextView
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_marginTop="10dp"
android:text="From"/>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="match_parent">
</Spinner>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
<TextView
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_marginTop="10dp"
android:text="To"/>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="match_parent">
</Spinner>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I have some little problems at creating some buttons. I want to Place 2 Buttons side by side (worked) and more (exp. 3 Buttons) below in a LinearLayout. Actually everything is working for me but if I put another Button the button is below but above there is free space.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<LinearLayout
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center">
<Button
android:id="#+id/button1"
android:text="Button1"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybutton"
android:layout_weight="1"
android:layout_marginBottom="200dp" />
<Button
android:id="#+id/button2"
android:text="Button2"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybutton"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginBottom="100dp" />
<Button
android:id="#+id/button3"
android:text="Button3"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybutton"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginBottom="200dp" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
Thats how it looks like atm.
first make the width of each button 0dp.
second make the margin bottom equal in the 3 buttons
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<LinearLayout
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center">
<Button
android:id="#+id/button1"
android:text="Button1"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/mybutton"
android:layout_weight="1"
android:layout_marginBottom="200dp" />
<Button
android:id="#+id/button2"
android:text="Button2"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/mybutton"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginBottom="200dp" />
<Button
android:id="#+id/button3"
android:text="Button3"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/mybutton"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginBottom="200dp" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerHorizontal="true"
android:id="#+id/layout_one">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button 1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button 2"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/layout_one"
android:layout_centerHorizontal="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button 3"
/>
</LinearLayout>
</RelativeLayout>
This is the screenshot of pic:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<LinearLayout
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center">
<Button
android:id="#+id/button1"
android:text="Button1"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybutton"
android:layout_weight="1"
android:layout_marginBottom="200dp" />
<Button
android:id="#+id/button2"
android:text="Button2"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybutton"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginBottom="200dp" />
<Button
android:id="#+id/button3"
android:text="Button3"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybutton"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginBottom="200dp" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
Update your xml with this one, Hope it helps you
here is your code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<LinearLayout
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center">
<Button
android:id="#+id/button1"
android:text="Button1"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybutton"
android:layout_weight="1"
android:layout_marginBottom="200dp" />
<Button
android:id="#+id/button2"
android:text="Button2"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybutton"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginBottom="200dp" />
<Button
android:id="#+id/button3"
android:text="Button3"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybutton"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginBottom="200dp" />
</LinearLayout>
</ScrollView>
Just make android:layout_marginBottom="200dp" /> in 2nd button.
This is happening because You have gave the centre gravity to LinearLayout.
The solution is only that you just remove that gravity tag and run again
Replace this
<LinearLayout
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center">
to this
<LinearLayout
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="match_parent">
If you want to place the 3 buttons below each other, you should set the orientation of your LinearLayout to vertical instead of horizontal. This will display your buttons in a vertical order.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center">
<Button
android:id="#+id/button1"
android:text="Button1"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybutton" />
<Button
android:id="#+id/button2"
android:text="Button2"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybutton" />
<Button
android:id="#+id/button3"
android:text="Button3"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybutton" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
I currently have 4 ImageButtons in a layout that takes only half of the screen height. I would like the ImageButtons to be placed evenly in the layout. Here is what I have:
<?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="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
This works, since here is the result:
The issue is, 1: I would like to add text under each button and I am not sure how that is going to work and 2: the white spots to the right and left of the ImageButtons are active, as if they were parts of the button. Is there a better way to do this?
You can do something like this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/section1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 1"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img2"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 2"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img3"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 3"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img4"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 4"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
Result
and for second part of question you should set click listener on entire relative layout. for example for tap on first cell :-
xml
android:id="#+id/section1"
JAVA
findviewbyid(R.id.section1).setOnClickListener(...)
Another (and better) alternative is to work with TableLayout:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow
android:layout_height="0dp"
android:layout_weight="1">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn1"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn1"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 1"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn2"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn2"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 2"/>
</RelativeLayout>
</TableRow>
<TableRow
android:layout_height="0dp"
android:layout_weight="1">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn3"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn3"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 3"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn4"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn4"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 4"/>
</RelativeLayout>
</TableRow>
</TableLayout>
i am trying to align the page for different screens namely 4.5inch(xperia ion) and 4inch(s advance) it works with s advance.. but in xperia ion screen it breaks..
the emulator image of both xperia ion and s advance...
i stretched the buttons to avoid mistakes.. but yet when it comes to services.. the system fails... the big buttons on top and bottom are buffer buttons.. they are meant to simply align the rest..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/rail" >
<Button
android:id="#+id/btnBufferTop" <-- buffer top button
android:layout_width="wrap_content"
android:layout_height="130dp"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
<Button
android:id="#+id/btnBufferBottom" <-- buffer bottom button
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:text="Button" />
<Button
android:id="#+id/button1" <-- home button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/btnBufferTop"
android:text="Button" />
<Button
android:id="#+id/button2" <-- About us button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button1"
android:text="Button" />
<Button
android:id="#+id/button3" <-- services
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btnBufferBottom"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:text="Button" />
<Button
android:id="#+id/button4" <-- clients
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button3"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:text="Button" />
<Button
android:id="#+id/button5" <-- contacts
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button4"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="14dp"
android:text="Button" />
is there any other way to do it???? without buffer buttons
// Try this way,hope this will help you to solve your problem...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="#+id/btnBufferTop"
android:layout_width="match_parent"
android:layout_height="130dp"
android:text="Button" />
<Button
android:id="#+id/btnBufferBottom"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="Button" />
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="14dp"
android:text="Button" />
</LinearLayout>
its better to go with linear layout with weights.as weights device each screen in equal parts.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum= 2
android:orientation="vertical">
<Button
android:id="#+id/btnBufferTop"
android: layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Button" />
<Button
android:id="#+id/btnBufferBottom"
android: layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Button" />
</LinearLayout>
If the space between the buttons are the issue, thenTry android:layout_marginTop=""
<?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="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="#+id/okbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="SET"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="#+id/okbuttodn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="SET"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="#+id/okbuttdtgyodn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="SET"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="#+id/okbuttrtodn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="SET"
/>
</LinearLayout>
</LinearLayout>