I am trying to tile image buttons to look like this in Android :
.
To achieve this I tried it using RelativeLayout, without any success.
The XML layout that I used is as the following :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton android:id="#+id/ibutton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"></ImageButton>
<ImageButton android:id="#+id/ibutton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ibutton1"
android:src="#drawable/ic_launcher"></ImageButton>
<ImageButton android:id="#+id/ibutton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/ibutton1"
android:src="#drawable/ic_launcher"></ImageButton>
<ImageButton android:id="#+id/ibutton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/ibutton2"
android:src="#drawable/ic_launcher"></ImageButton>
</RelativeLayout>
What is the correct way to achieve this?
Additional question : is there a way to perform this programmatically?
Thanks in advance
did you try with LinearLayout and after use the ImageButton Properties?
In ImageButton's Properties there is Margin --> Left,Top etc here you can put the required distance from the objects.
I used this tutorial: http://www.youtube.com/watch?v=nCadO2NgzD0
Related
I have 2 layouts in my xml, a CircularImageView and a ImageView, and the ImageView must appear on top of the CircularImageView.
I've tried:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_kids_register_ll_kid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/md_white_1000"
android:orientation="horizontal">
<RelativeLayout
android:padding="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.mikhaellopez.circularimageview.CircularImageView
android:id="#+id/fragment_kids_row_img_kids"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ic_boy"
/>
<ImageView
android:id="#+id/fragment_kids_row_iv_crown"
android:layout_toRightOf="#+id/fragment_kids_row_img_kids"
android:layout_marginLeft="-26dp"
android:layout_marginTop="-22dp"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_crown"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/fragment_kids_row_tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textColor="#color/md_black_1000"
android:textSize="24sp" />
<TextView
android:id="#+id/fragment_kids_row_tv_age"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="1 ano e 4 meses"
android:textColor="#808080"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
And it is getting cut off:
I need the image to be shown exactly at that position in the picture, but not "cropped", what I am missing here ?
BTW, this component is part of a RecyclerView row.
EDIT ---
I forgot to mention, the image is just a placeholder to show the Avatar, but the image is dinamically populated !
Thanks !
The padding (16dp) that you are applying to the first relativeLayout makes you think that there is more place and that you can move up the imageView. Actually the margin is like a gap, it doesn't extend your layout.
This is the solution I suggest , using a FrameLayout
<FrameLayout
android:layout_width="100dp"
android:layout_height="100dp">
<com.mikhaellopez.circularimageview.CircularImageView
android:id="#+id/fragment_kids_row_img_kids"
android:layout_gravity = "center"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ic_boy"
/>
<ImageView
android:id="#+id/fragment_kids_row_iv_crown"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_crown"
android:layout_gravity="right|top" />
</FrameLayout>
EDIT : You don't have to use a frameLayout, you can use a relativeLayout if you want to set different margins. The point here is really to make your containing layout bigger so you can place the imageview easily.
If you want one image to be on top of another, why you use android:layout_toRightOf?
Remove it and second image should cover first one.
Also you can try to remove margins at second image and use centerInParent, centerVertically or centerHorizontally.
Or maybe I didn't got all the problem ) then pls provide more details. Thanks.
Have you tried Using an image editor like Paint/Photoshop and merging the two images? Then you can just display one image in your view.
try using a linear layout with the orientation set to vertical.
I am searching for a way to display a file path in the toolbar like this:
It needs to be clickable and should be swipeable if it's a long path. (Or small device).
I thought about using a HorizontalScrollView with a TextView and ImageView, but don't know if that is the best way to accomplish this. Is there a better (simpler) way to do this? Thanks!
Edit:
With thanks to #aelimill I found out that a RecyclerView can go horizontally, but I'm still having some issues. If you click on the text in the previous screenshot it shows this:
But for me (after I set the custom list item to clickable) it is like this:
(Look at the click animation)
How can I display the circle animation just like other ActionBar items?
I solved this by using a RecyclerView as #aelimill suggested. This is the custom list item I used:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:id="#+id/relativeLayout">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton"
android:src="#drawable/ic_keyboard_arrow_right_white_24dp"
android:background="#null"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignTop="#+id/textView"
android:layout_alignBottom="#+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/textView"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/imageButton"
android:layout_toEndOf="#+id/imageButton"
android:gravity="center"
android:textSize="16sp"
android:minWidth="20dp"
android:textColor="#ffffff"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Use selectableItemBackground instead of selectableItemBackgroundBorderless to support pre lollipop devices. (It wont be a circle animation, but a rectangle animation).
I'm posting here in order to know if it was possible to make this design in Android :
If yes, could you help me how to do it (Just Guidelines).
Thank you
EDIT :
if I use only one Relative Layout I have this xml file :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_cross"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="F1\n" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="300dp"
android:layout_marginLeft="50dp"
android:text="Left\nbutton" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right\nbutton"
android:layout_alignParentRight="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="300dp"
android:layout_marginRight="50dp"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="380dp"
android:text="Bottom\nbutton" />
</RelativeLayout>
But declaring static dp is very bad and it isn't good to apply on all devices..
My xml code is shit ?
Do I have to get width and height screen of the device programmatically and set my buttons positions programmatically too ?
May be I could use this picture in Background and bind buttons on it ? (But how ?)
You can do this using a RelativeLayout and add the four buttons in it. Android supports adding custom fonts to your app and you will be able to set the button's font as well, you just need the font file. See here or here an example.
You will need the buttons background just as a white/red ring with transparent background.
You can place the buttons inside the RelativeLayout using margin properties (layout_marginLeft/Right/Top/Bottom) see here other properties.
The buttons text should have two lines (see android:lines xml property for a Button).
Good luck! I hope it helps ;).
I try to put a regular button inside an image in android XML. How can it be done? I tried something like this:
<ImageView .......
<Button .... />
</ImageView>
where the dots represent code. Apparently this is not the way because the platform threw an exception.
Can anyone help?
Use relative layout to insert button on the image.
your image should be given in background tag of RelativeLayout.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#drawable/list_nav"
>
<Button
android:layout_width="63dp"
android:layout_height="36dp"
android:id="#+id/mapbutton"
android:layout_marginTop="7dp"
android:layout_marginLeft="4dp"
android:layout_alignParentLeft="true"
/>
this Example adds button on left side of the image since i used layout_alignParentLeft="true"
You can use FrameLayout:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView android:id="#+id/myImage"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:src="#drawable/icon" />
<Button android:id="#+id/myButton"
android:layout_width="150dip"
android:layout_height="150dip"
android:text="My Button"/>
</FrameLayout>
You don't write why you need image and button. Do you know about ImageButton?
#Uriel Frankel you may try creating a custom ImageView either.Here is a post regarding Creating Custom ImageView.
Hope it helps.
I'm using textview objects to hold labels such as Score, Level etc on my game screen but they don't seem to be displayed where I want them to be. I understand about view hierarchies (parents, children) and am using the gravity tags in the XML layout file but it doesnt seem to have any effect.
Could someone just quickly provide a guide to positioning a textview object on the screen, and also linking it in the code so that its contents can be programmatically controlled (I believe this would by done via =(TextView) findViewById(r.id.resourcename))?
Many thanks
XML:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.gesture.GestureOverlayView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gestures"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gestureStrokeWidth="2.0"
android:gestureStrokeType="multiple"
android:eventsInterceptionEnabled="true">
<com.darius.android.distractions.DistractionsView
android:id="#+id/distractions_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/text"
android:text="Hello"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textColor="#88ffffff"
android:textSize="24sp"/>
<TextView
android:id="#+id/textLevel"
android:text="#string/level_count"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="bottom"
android:textColor="#EB0000"
android:textSize="10sp"/>
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/concentration_bar"
android:textColor = "#EB0000"
android:textSize="10sp"
android:id="#+id/conbartext"
android:visibility="visible"
></TextView>
</RelativeLayout>
</android.gesture.GestureOverlayView>
</FrameLayout>
These are some really helpful tutorials on getting started with android layout and widgets: http://developer.android.com/resources/tutorials/views/index.html
Documentation and a guide on the layout itself is here:
http://developer.android.com/guide/topics/ui/declaring-layout.html
Common Layout Objects is a good guide to the basics of layouts. The gravity tag only has meaning in certain layout types.
Another useful tool is the Heirarchy Viewer, found in the tools folder of your Android installation. This allows you to visualize the View heirarchy of your running activity.
If you post your layout XML, and a mockup of what you are trying to accomplish, we might be able to help you accomplish it.