I've got a few linear layouts stacked on top of each other, the centre one has an imageview. I'm trying to get a textview on top of the imageview in the centre however I'm having trouble. I've tried with relative layout however it messes up all my other layouts. Any simple solutions to this?
EDIT ----
<?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:background="#000000"
android:orientation="horizontal"
android:paddingLeft="50dp"
android:paddingRight="50dp" >
<ImageButton
android:id="#+id/btnBck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/btnHome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="6"
android:orientation="vertical" >
<ImageView
android:id="#+id/picPreview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:contentDescription="#string/imageDesc"
android:src="#null" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="horizontal"
android:paddingLeft="50dp"
android:paddingRight="50dp" >
<ImageButton
android:id="#+id/btnAccept"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/btnDecline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
I'm trying to get the text view on top of the id/picPreview image view
LinearLayout is designed to place layouts/views in a row (linearly).
One solution would be something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="6"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/picPreview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:contentDescription="#string/imageDesc"
android:layout_centerInParent="true"
android:src="#null" />
<TextView
android:id="#+id/picPreviewLbl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:text="Overlay" />
</RelativeLayout>
</LinearLayout>
Why not just use a TextView in place of the centered ImageView and then set the background of the text be the solid color that you are currently using? Eg.
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:text="Sample Text" ... />
Related
So i have been working on my android project and the layout has gotten me and I cannot figure out what is the best to do something like this.
Currently my XML looks like this.
What i am trying to do is have 7 columns with one row that is filled with textviews. I was looking at Grid views but it seems like the entire point of the grid is to scroll with more than one row. How do I achieve this layout?
<android.support.constraint.ConstraintLayout
android:id="#+id/ConstraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/foodmenuexample"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView10"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView8"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView11"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="123456789123456789123456789123456789123456789123456789123456789" />
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
</LinearLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
The answer is... it depends. For simplicity, you can use a GridLayout, which if you have all your data within the view, this would work well.
However if you want the data to load from a database, or if there is an indeterminate amount of columns, then a gridview is your best bet inside a horizontal scrollview. You can just set the number of rows to 1, and the number of columns programmatically.
Example of that:
GridView gridView = (GridView) findViewById(R.id.gridview);
gridView.setNumColumns(numOfColumns);
Gridviews are more complicated because you will have to use an adapter, which you can learn about here:
https://developer.android.com/guide/topics/ui/layout/gridview.html
However, if you are looking for static simplicity, here is what you could do:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent">
<GridLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:rowCount="1"
android:columnCount="7">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:text="Lots of text on this one" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:text="Some text on this one" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:text="Textview3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:text="Textview4" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:text="Textview5" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:text="Textview6" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:text="Textview7" />
</GridLayout>
</HorizontalScrollView>
</android.support.constraint.ConstraintLayout>
So basically i want to push the bottom button to top of the keyboard and push the other content up after opening the keyboard.
The problem is that if i use adjust pan the button overlap with the edit text and if i use the adjust resize button won't come up.
<LinearLayout
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:background="#color/white"
android:orientation="vertical"
tools:context="com.lifeincontrol.activities.home.AddCompanionActivity"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
android:background="?attr/colorPrimary"
android:titleTextColor="#android:color/white"
app:popupTheme="#style/AppTheme.PopupOverlay"
>
</android.support.v7.widget.Toolbar>
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/companion_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:src="#drawable/ic_add_companion_illustration"
/>
<LinearLayout
android:id="#+id/number_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/companion_image"
android:layout_marginLeft="15dp"
android:layout_marginTop="62dp"
android:orientation="horizontal"
>
<LinearLayout
android:id="#+id/country_code_layout_before"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="7dp"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/text_country_code_before"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginRight="12dp"
android:drawableRight="#drawable/arrow_drop_down"
android:src="#drawable/flag_in"
/>
<ImageView
android:id="#+id/drop_down_before"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="12dp"
android:paddingTop="12dp"
android:src="#drawable/down_arrow_logging"
/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginRight="12dp"
android:layout_marginTop="4dp"
android:background="#5E000000"
/>
</LinearLayout>
<EditText
android:id="#+id/number_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:hint="Phone Number"
android:inputType="number"
android:maxLines="1"
android:textColorHint="#aaa"
/>
<ImageView
android:id="#+id/phone_book"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="11dp"
android:src="#drawable/circle"
android:visibility="gone"
/>
</LinearLayout>
<EditText
android:id="#+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/number_field"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="30dp"
android:hint="Name"
android:imeActionLabel="Done"
android:imeOptions="actionDone"
android:maxLines="1"
android:singleLine="true"
android:textColorHint="#aaa"
/>
<View
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_below="#+id/name_edit_text"
/>
<Button
android:id="#+id/button_send"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:background="#color/companion_button_send"
android:text="Send"
android:textColor="#color/white"
android:textSize="14sp"
/>
</RelativeLayout>
</ScrollView>
</LinearLayout>
first image before keyboard open
second image here i want to show the green button on top of keyboard
Add the below line to your activity java file
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN | WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
And then add a ScrollView to the layout. Remember ScrollView can hold only 1 child view.
<ScrollView
android:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<--------Your content---------->
</RelativeLayout>
</ScrollView>
1.change adjustpan to adjustResize in your menifest file like below
<activity android:name=".MainActivity"
android:windowSoftInputMode="adjustResize|stateHidden"/>
put your xml code inside scrollView
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<--------Your content---------->
</RelativeLayout>
</ScrollView>
I have the following as a layout of mine:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MyActivity">
<EditText
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/bubble_b"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RatingBar
android:id="#+id/rating"
style="?android:attr/ratingBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:numStars="5"
android:rating="4"
android:stepSize="0.5"
android:layout_weight="1"/>
This makes my edittext and ratingbar be pushed up to the top and both of the heights are just 'wrap_content'. I have tried with RelativeLayouts as well and all that happens is the EditText takes up the entire screen and pushes the ratingbar off the screen.
Why are the layout weights not working as expected? If edittext weight is 3 and the ratingbar is 1 I would assume the edittext would take 75% of the screen, and so forth?
The background is a 9patch image so it should have no problem expanding either.
Thank you
I believe you want something like this
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="EditText"
android:ems="10"
android:id="#+id/editText"
android:layout_weight="0.53" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.53">
<RatingBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:id="#+id/ratingBar"/>
</RelativeLayout>
</LinearLayout>
use Relative Layout to center object:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MyActivity">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<EditText
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bubble_b"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_centerInParent="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<RatingBar
android:id="#+id/rating"
style="?android:attr/ratingBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:numStars="5"
android:rating="4"
android:stepSize="0.5"
android:layout_weight="1"/>
</RelativeLayout>
Change LinearLayout's
android:layout_height="wrap_content"
to
android:layout_height="match_parent".
Also, instead of setting "0dp" to EditText and RatingBar set it to match_parent.
[Update]
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MyActivity">
<EditText
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<RatingBar
android:id="#+id/rating"
style="?android:attr/ratingBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:numStars="5"
android:rating="4"
android:stepSize="1" />
</LinearLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<ImageView
android:layout_width="433dp"
android:layout_height="210dp"
android:layout_marginTop="25dp"
android:id="#+id/imageView"
android:scaleType="fitXY"
android:contentDescription="#string/image_description" />
<TextView
android:id="#+id/item_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:text="#string/list_number_placeholder"
android:textColor="#color/bar_separator_color"
android:layout_centerInParent="true"
android:textSize="50dp"
android:gravity="center"
android:layout_marginLeft="85dp"
/>
I have a question i cant get the text on my imageview, i think its something with the layers. Please help me..
im btw a beginner in Android studio XD
you are using LinearLayout which stacks your view one by one, either in horizontal direction or vertical direction (Orientation).
So use RelativeLayout instead if you want views overlapping.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<ImageView
android:layout_width="433dp"
android:layout_height="210dp"
android:layout_marginTop="25dp"
android:id="#+id/imageView"
android:scaleType="fitXY"
android:contentDescription="#string/image_description" />
<TextView
android:id="#+id/item_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:text="#string/list_number_placeholder"
android:textColor="#color/bar_separator_color"
android:layout_centerInParent="true"
android:textSize="50dp"
android:gravity="center"
android:layout_marginLeft="85dp"
/>
</RelativeLayout>
Change your Linear Layout to Relative layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<ImageView
android:layout_width="433dp"
android:layout_height="210dp"
android:layout_marginTop="25dp"
android:id="#+id/imageView"
android:scaleType="fitXY"
android:contentDescription="#string/image_description" />
<TextView
android:id="#+id/item_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:text="#string/list_number_placeholder"
android:textColor="#color/bar_separator_color"
android:layout_centerInParent="true"
android:textSize="50dp"
android:gravity="center"
android:layout_marginLeft="85dp"
/>
</RelativeLayout>
**Well You are better to use framelayout **. I hope this will help you
its not good way. better print something with java like:
LinearLayout lView = new LinearLayout(this);
myText = new TextView(this);
myText.setText("My Text");
lView.addView(myText);
setContentView(lView);
This works.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="433dp"
android:layout_height="210dp"
android:layout_marginTop="25dp"
android:id="#+id/imageView"
android:scaleType="fitXY"
android:contentDescription="hii" />
<TextView
android:id="#+id/item_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:text="yo"
android:textColor="#color/bg_login"
android:layout_centerInParent="true"
android:textSize="50dp"
android:gravity="center"
android:layout_marginLeft="85dp"
/>
</RelativeLayout>
</LinearLayout>
This code put the text in the middle of the image as you've requested for.
<?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:id="#+id/nations"
android:background="#color/colorPrimary"
android:layout_height="match_parent">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#color/colorPrimary"
android:layout_height="wrap_content">
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="433dp"
android:layout_height="210dp"
android:layout_marginTop="25dp"
android:id="#+id/imageView"
android:scaleType="fitXY"
android:contentDescription="image" />
<TextView
android:id="#+id/item_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:text="#string/list_number_placeholder"
android:textColor="#color/bar_separator_color"
android:textSize="50dp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
/></RelativeLayout>
</LinearLayout>
Try this
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/picture"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/picture"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/text"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="My super text"
android:textColor="#android:color/white"
android:layout_gravity="center_vertical"
android:textStyle="bold"
android:textSize="48sp" />
<LinearLayout
android:id="#+id/controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#7f000000"
android:orientation="vertical"
android:layout_gravity="bottom"/>
</FrameLayout>
I created linearlayout with two buttons in center (buttons 1 and 2), but I can't manage it to create the view 3 on top, which I need to make it fill whole width and adjust it's height by it (keep proportions). How do I create third view?
Image:
Code:
<?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:background="#drawable/bg"
android:layout_gravity="center_horizontal"
android:orientation="horizontal">
<LinearLayout
android:orientation="vertical"
android:layout_gravity="center_vertical"
android:layout_width="fill_parent" android:layout_height="wrap_content" >
<ImageButton
android:background="#drawable/btn_one"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0" />
<ImageButton
android:background="#drawable/btn_second"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0" />
</LinearLayout>
I would recommend you use relative layouts, they are the closest thing in android to an "absolute layout" replace the button tags with Image button tags
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
</RelativeLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="215dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button3"
android:layout_below="#+id/button2"
android:layout_alignStart="#+id/button2" />
</RelativeLayout>
try this code set height and width what size of image button you need and simple look what you need.
<?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="match_parent"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.2"
android:orientation="vertical"
android:gravity="center">
<ImageButton
android:layout_width="200dp"
android:layout_height="50dp"/>
<ImageButton
android:layout_width="200dp"
android:layout_height="50dp" />
</LinearLayout>