I would like to place 2 small icons (with actions) over a big Button that take the 1/3 of the screen. The 2 icons and the button have to support actions when we click on them. I'm pretty sure I have to use imageButton for the icons. However I can't find any way to keep the icons (imageButton) on top of the button.
Here is my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp">
<ImageButton
android:id="#+id/icon1"
android:src="#drawable/ic1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:contentDescription="#string/ic1"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action1"/>
<ImageButton
android:id="#+id/icon2"
android:src="#drawable/ic2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:contentDescription="#string/ic2"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action2"/>
<com.myapp.CustomViews.myButton
android:id="#+id/big_button1"
android:text="#string/text_big_button1"
android:background="#drawable/changing_button1"
android:textColor="#color/white"
android:layout_height="match_parent"
android:textSize="#dimen/font_size_buttons"
android:layout_width="match_parent"
android:gravity="center"
android:textAllCaps="false"
android:capitalize="none"
android:onClick="bigAction1"/>
</RelativeLayout>
The "#drawable/changing_button1" on the big Button allows me to put one color for the button and a different one when focused or pressed.
I tried so many different things and I couldn't find a way while I'm sure there is a simple solution. The icons remain hidden behind the big Button.
Thank you for your help!
You could use FrameLayout to overlay views. For example:
<FrameLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp">
<com.myapp.CustomViews.myButton
android:layout_gravitiy="center"
.../>
<ImageButton
android:layout_gravitiy="left|center_vertical"
.../>
<ImageButton
android:layout_gravitiy="right|center_vertical"
.../>
</FrameLayout>
Here is a slightly modified version of your layout, which works fine.
I replaced all your custom stuff with plain android and standard buttons, and moved the big button up in the layout, because if it is at the bottom, it has a higher z-index and overlays the two small buttons.
<?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">
<Button
android:id="#+id/big_button1"
android:text="BIG BUTTON"
android:background="#android:color/holo_blue_dark"
android:textColor="#color/white"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:gravity="center"
android:textAllCaps="false"
android:capitalize="none"
android:onClick="bigAction1"/>
<Button
android:id="#+id/icon1"
android:text="BT1"
android:background="#android:color/holo_red_dark"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action1"/>
<Button
android:id="#+id/icon2"
android:text="BT2"
android:background="#android:color/holo_green_dark"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action2"/>
</RelativeLayout>
How about changing order in the layout ? Place your Button widget on top, then declare 2 icons after that ?
You should add android:translationZ="5dip" for the 2 imageButton. It works (you should run and see, it didn't appear so on the IDE)
I finally found a way to do it.
The solution is to use the RelativeLayout as a button and replace the Button by a simple TextView:
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp"
android:background="#drawable/custom_button_changing_color"
android:clickable="true"
android:focusable="true"
android:id="#+id/button_layout"
android:onClick="bigAction1">
<TextView
android:id="#+id/text_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/text"
android:gravity="center"
android:layout_centerVertical="true"
android:textColor="#color/white"
android:textSize="#dimen/font_size_buttons"
android:textAllCaps="false"
android:background="#color/transparent"/>
<ImageButton
android:id="#+id/icon1"
android:src="#drawable/ic1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:contentDescription="#string/ic1"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action2"/>
<ImageButton
android:id="#+id/icon2"
android:src="#drawable/ic2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:contentDescription="#string/ic2"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action3"/>
</RelativeLayout>
I hope this helps! :)
Related
I have a requirement to create UI like below
You can see here the number is the highlighted part and it is in center always.
And we scroll it from left to right or vice versa.
I want to achieve this So, I wrote some code like below. But I don't have any Idea on how to add scroll effect to it and bring highlighted text to center
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
app:layout_constraintBottom_toTopOf="#+id/idCameraControlBottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/idZoom1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="50dp"
android:text="."
android:textAlignment="textEnd"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/idZoom2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="50dp"
android:background="#drawable/circle_shade"
android:gravity="center"
android:text="1X"
android:textSize="16sp" />
<TextView
android:id="#+id/idZoom3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="."
android:textAlignment="viewStart"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
Any Idea/Help is greatly appreciated.
You can create it like so:
<RelativeLayout
android:layout_centerInParent="true"
android:layout_width="100dp"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"/>
</LinearLayout>
</HorizontalScrollView>
<TextView
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000"
android:textColor="#fff"
android:text="1"/>
</RelativeLayout>
Change it as you see fit, basically, the relative layout parent holds within the horizonal scrollable scrollview, within it you have your needed-to-be-scrolled views. After if you define your number view, being inside a relative layout it will simply be ordered above it. You can then center it to appear above your scrollable scrollView.
Do note the following 2 this:
The scroll will only be performed if the user touched the scrollable view. As in, if the user tries to swipe from pressing on the number it self, it will not scroll.
The content behind the number will be hidden behind it, it won't "skip" from 1 side to the other so you can have "invisible" content that way.
I have 2 rows of "buttons" which are composed of a vertical LinearLayout of an ImageView and a TextView. The problem I'm having right now is trying to set the ImageView aspect ratio without hardcoding its dimensions.
I have already tried playing with the layout weights but it still forces the TextView to be partially cut off.
The xml structure I have is 2 horizontal LinearLayouts and each button is described above.
I've included a picture of my problem. You can see the first button is forcing the TextView out of the bounds. The rest of the buttons you see are hardcoded dimensions, but I don't want to do that because smaller screen sizes won't work.
Here is my layout for one button:
<LinearLayout
android:gravity="center_horizontal"
android:layout_weight="1"
android:padding="5dp"
android:orientation="vertical"
android:layout_width="0dip"
android:layout_height="match_parent">
<ImageView
android:id="#+id/setting_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#null"
android:clickable="true"
android:onClick="openSettings"
android:src="#drawable/menu" />
<TextView
android:id="#+id/setting_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textAlignment="center"
android:textColor="#android:color/white"
android:autoSizeTextType="uniform" />
</LinearLayout>
Try using images with lower dimensions.
Try using a RelativeLayout and setting the TextView as anchor for the image:
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="5dp">
<TextView
android:id="#+id/setting_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:text="Settings"
android:textAlignment="center"
android:textColor="#android:color/white"
android:autoSizeTextType="uniform" />
<ImageView
android:id="#+id/setting_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#id/setting_text"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:background="#null"
android:clickable="true"
android:onClick="openSettings"
android:src="#drawable/menu" />
</RelativeLayout>
I am wanting a button to be aligned to the the bottom and right of a EditText box.
My code is below:
<RelativeLayout
android:id="#+id/global_only_available_home_delivery_postcode_check_layout"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:layout_gravity="right"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/global_only_available_home_delivery_postcode_check_text_phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/delivery_edit_hint"
android:layout_marginLeft="#dimen/pdp_status_delivery_margin_5"
android:layout_marginTop="#dimen/pdp_status_delivery_margin_10"
android:textSize="14sp"
android:inputType="text" />
<Button
android:id="#+id/fragment_pdp_deliverygo"
style="#style/alternatesmallbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="35dp"
android:minHeight="35dp"
android:layout_marginLeft="10dp"
android:text="#string/pdp_delivery_go"
android:layout_gravity="right"
android:layout_margin="5dp"
android:layout_toRightOf="#+id/global_only_available_home_delivery_postcode_check_text_phone"
android:layout_alignBottom="#+id/global_only_available_home_delivery_postcode_check_text_phone"
android:visibility="visible" />
</RelativeLayout>
and here is what I get button alignment
As you can see from the image, the button doesn't seem to be aligned to the bottom of the textview.
Can anyone help?
This is because you have android:layout_margin="5dp" for the button. This assigns a margin of 5dp to the bottom of the button and it appears as if it is not aligned to the bottom. You should remove it and assign margins individually to other sides if you want eg:
android:layout_marginRight="5dp"
android:layout_marginTop="5dp" // etc (optional)
Try this..
Use android:layout_alignParentRight="true" and android:layout_centerVertical="true"
<Button
android:id="#+id/fragment_pdp_deliverygo"
style="#style/alternatesmallbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="35dp"
android:minHeight="35dp"
android:layout_marginLeft="10dp"
android:text="#string/pdp_delivery_go"
android:layout_gravity="right"
android:layout_margin="5dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/global_only_available_home_delivery_postcode_check_text_phone"
android:layout_alignBottom="#+id/global_only_available_home_delivery_postcode_check_text_phone"
android:visibility="visible" />
Try using layout_below instead of layout_alignBottom
In my single screen android project(using only one XML file) when i press button1 then linerlayout1 is open and when i press button2 then linearlayout2 is open.my button1 and button2 is placed in linearlayout3.can it works??if yes then how??
thanks in advance.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_above="#+id/linearLayout3"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<RadioButton
android:id="#+id/radioButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/linearLayout1" />
<RadioButton
android:id="#+id/radioButton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/linearLayout1" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Button2" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="vertical" >
<RadioButton
android:id="#+id/radioButton13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/linearLayout2" />
<RadioButton
android:id="#+id/radioButton14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/linearLayout2" />
</LinearLayout>
</RelativeLayout>
Yes, it's very simple:
Use the android:Visibility XML tag initially, and when each respective button is pressed, you'd obtain your reference to the LinearLayouts, and set their visibility to VISIBLE or GONE in code.
Note: you want to use GONE rather than INVISIBILE as INVISIBILE will still take up screen space, so there'll be a large chunk of blank space where it was before, whereas I assume you want them in place of each other
in the layout xml of linear layout 1 and 2, use
android:visibility="gone"
From code
LinearLayout l1 = (LinearLayout) findViewById(R.id.linearLayout2);
you can use the following to make it visible
l1.setVisibility(View.VISIBLE);
and to hide it
l1. setVisibility(View.GONE):
You can play around with the "setVisibility" property of your layout.
In the "onCreate()" method you can do something like this
LinearLayout layout1 = (LinearLayout) view.findViewById(R.id.linearLayout1);
layout1.setVisibility(View.GONE);
And then on your button press
layout1.setVisibility(View.VISIBLE);
I have a relative layout within another layout that represents a menu bar on the bottom of the screen. no i wand the four menu icons be symmetrically distributet on the menu bar.
here is my code so far. problem is i dont want to set absolute "dip" values. is there a way to somehow get the screenwith and devide it by four ?
<RelativeLayout
android:layout_height="80dip"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:background="#android:color/black"
android:layout_alignParentBottom="true" >
<ImageButton
android:layout_alignParentBottom="true"
android:layout_width="70dip"
android:layout_height="70dip"
android:id="#+id/homeButton"
android:layout_alignParentLeft="true"
android:src="#drawable/homeicon"/>
<ImageButton
android:id="#+id/searchButton"
android:layout_width="70dip"
android:layout_toRightOf="#+id/homeButton"
android:layout_alignParentBottom="true"
android:layout_height="70dip"
android:src="#drawable/searchicon"/>
<ImageButton
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/searchButton"
android:layout_width="70dip"
android:layout_height="70dip"
android:id="#+id/bookmarksButton"
android:src="#drawable/bookmarksicon" />
<ImageButton
android:id="#+id/settingsButton"
android:layout_width="70dip"
android:layout_toRightOf="#+id/bookmarksButton"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_height="70dip"
android:src="#drawable/settingsicon" />
I think I see what you mean..you could try using a LinearLayout as the parent Viewgroup and for each button set width to 0dip and layout_weight to 1; something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_above="#+id/footer" android:id="#+id/footer2"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"
android:background="#FF707070">
<ImageButton android:layout_weight="1"
android:layout_width="0dip" android:layout_height="70dip" android:id="#+id/homeButton"
android:layout_alignParentLeft="true" android:src="#drawable/homeicon" />
<ImageButton android:id="#+id/searchButton"
android:layout_weight="1" android:layout_width="0dip"
android:layout_height="70dip" android:src="#drawable/searchicon" />
<ImageButton android:layout_alignParentBottom="true"
android:layout_weight="1" android:layout_width="0dip"
android:layout_height="70dip" android:id="#+id/bookmarksButton"
android:src="#drawable/bookmarksicon" />
<ImageButton android:id="#+id/settingsButton"
android:layout_weight="1" android:layout_height="70dip"
android:src="#drawable/settingsicon" />
</LinearLayout>
That should work since the parent viewgroup (LinearLayout) has :
android:layout_width="fill_parent"
I hope this works.
From your question it's obvious that you don't understand what "dip" means. It means "Density Independent Pixels". This allows you to develop your layout for multiple devices very easily. So, if you develop a layout for a standard density device (like the Droid Pro) that will scale perfectly on other devices.
Here are some video tutorials by Motorola to help you understand this concept.
http://www.youtube.com/watch?v=ClrLNXLd5vs
http://www.youtube.com/watch?v=M5yagMoiM-s