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).
Related
Ok, so I am trying to create a layout that has side by side image views in a listview. Here would be an example of what I'm trying to achieve. However, I'm really not sure how I should be doing this. Here is an example of what I have found online. The problem is that once you start adding more imageviews it just adds them to the same line and not below the current ones.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="15dip"
android:paddingBottom="15dip">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:layout_weight="1"
android:src="#drawable/placeholder1" />
<ImageView android:src="#drawable/placeholder1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleType="fitStart"
android:layout_weight="1"
android:id="#+id/daysText"></ImageView>
</LinearLayout>
Would a listview be a better method of displaying these images side by side or should I be doing it with XML as such?
You should use grid view for this and use this
android:numColumns=" " in your gridView xml.
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 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
In my android application I want the ListView items to move from right to left and show extra options for that row. I don't know how to ask my question so I want to show you the pictures that I took. How can I do that or what it is called ?
This is the first state.
This is the secondstate (after click on the "PLUS" icon on the right side).
This was the final state which shows the extra choices
Is it possible that a ViewPager could be used?
I'm not sure that it would work for only a small part of the screen, but it could be worth a try... :)
More info can be found here (d.android.com)
UPDATE : Thanks to "ToVine", I researched for View Transitions. ViewFlipper suits for what I mentioned belove :). This is my custom listview row's xml.
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:onClick="buttonClickHandler" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:onClick="buttonClickHandler"
android:src="#android:drawable/btn_star_big_on" />
</LinearLayout>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:text="TextView2" />
</ViewFlipper>
So I'm working on making a design for my app and I need to put a imagebutton directly below an imageview. But since my imageview has a border around it with a drop shadow I need to hide (shift up) maybe 10 pixels of my imagebutton behind my imageview. Here is a quick drawing of what I want.
I hope that makes sense. I've been messing around with all kinds of different arrangements but I cant get what I want. Any help would be greatly appreciated.
First of all use a RelativeLayout. Add first the ImageButton and then the ImageView, in this way the ImageView will be on top of your ImageButton. Then you should set on your ImageButton the following :
<ImageButton
....
android:layout_below="#id/ImageViewId"
android:layout_marginTop="-10px" />
Use relative layout as said. Refer
http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
for more positions and easy design.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/Imageview"
android:layout_marginTop="-16dp" />
<ImageView
android:id="#+id/Imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="46dp"
android:adjustViewBounds="true"
android:contentDescription="#string/description_logo"
android:src="#drawable/imagename" />
</RelativeLayout>