I am trying to have a picture show up in the middle of the screen guiding people what to press (eg an arrow to a button). What do I use so that the arrow design will show up at the appropriate spot and dissapear after I do something (like press the screen)
Thanks!
EDIT
Here is the xml layout for one of my activities, note the imageview at the bottom, it shows the picture in the front
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="45dp" android:background="#drawable/mytitlebackground" android:id="#+id/relativeLayout1">
<ImageButton android:id="#+id/btnAddFriends"
android:layout_width="wrap_content" android:src="#android:drawable/ic_input_add"
android:layout_height="wrap_content" android:layout_alignParentTop="true"
android:layout_alignParentRight="true"></ImageButton>
<TextView android:id="#+id/textView1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="#string/imTracking" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_centerVertical="true" android:layout_centerHorizontal="true"></TextView>
</RelativeLayout>
<Button android:id="#+id/btnUpdateLocation" android:text="Update Location"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"></Button>
<ImageButton android:src="#drawable/mapbutton"
android:layout_width="wrap_content" android:id="#+id/btnMaps"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"
android:layout_alignParentRight="true" android:layout_alignTop="#+id/btnUpdateLocation"></ImageButton>
<ImageButton android:text="Refresh"
android:src="#android:drawable/stat_notify_sync" android:layout_width="wrap_content"
android:id="#+id/btnRefresh" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"></ImageButton>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_below="#+id/relativeLayout1"
android:layout_alignParentLeft="true" android:layout_above="#+id/btnUpdateLocation" android:id="#+id/linearLayout1">
<ListView android:id="#+id/imtrackinglistview"
android:layout_height="wrap_content" android:layout_width="fill_parent"
android:layout_weight="1"></ListView>
</LinearLayout>
<ImageView android:id="#+id/iVImtrackingpopup" android:layout_width="300dp" android:layout_height="330dp" android:src="#drawable/imtrackinghelp_en" android:layout_centerVertical="true" android:layout_centerHorizontal="true"></ImageView>
When I try to "click" the relative layout to make the image invisible, it doesn't work unless I click the top of the layout
RelativeLayout Imtrackingrelativelayout=(RelativeLayout) findViewById(R.id.relativeLayoutImtracking);
Imtrackingrelativelayout.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
ImageView imtrackingoverlay=(ImageView) findViewById(R.id.iVImtrackingpopup);
imtrackingoverlay.setVisibility(View.INVISIBLE);
}
});
make the image centre aligned and put click listener over root layout and on click make this image invisible......Better to use relative layout for this.....
Have you tried using the ShowcaseView library? It offers a more cleaner approach to what you are trying to achieve
Check out the project here:-
https://github.com/amlcurran/ShowcaseView
Related
I'm attempting to create a a Heading + button similar to the Google Music App, e.g. where there is a "Songs" Header on the Left and then on the right there is a Button with the text "X more"..
I've using a RelativeLayout for the TextView and Button
My problem is that the button is taking up the size of the layout that contains the text the height is all wrong and the padding doesn't seem to do anything.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
[REMOVED for clarity]
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/list_foreground"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/photo_button"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#color/actionbar_background"
android:padding="10dp"
android:text="test" />
</RelativeLayout>
What am I doing wrong here?
RelativeLayouts are designed to have children in the layout "relative" to each other. In other words, if you want the Button to the right of the Textview, you need to tell it.
Because you are aligning relative to the parent LEFT / RIGHT, it appears that things are "kind of" working.
You may be better off with a LinearLayout, depending on your needs. LinearLayouts use "orientation" not RelativeLayouts.
You should look over some tutorials (like this one: http://mobile.tutsplus.com/tutorials/android/android-layout/) but ultimately you will probably put your button in first and then your text view so that the textview content will wrap appropriately.
To get the same effect as the Music App I ended up using a RelativeLayout but instead of a Button I'm using another TextView, this is giving the impression it's a button but it gives me more scope to format the background etc. I think just setup a OnClickListener in the code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/photo_title">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/more_photo_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:background="#color/actionbar_background"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="10 MORE"
android:textColor="#color/button_text"
android:textSize="12sp" />
</RelativeLayout>
I designed one layout which have total 4 RelativeLayout one is outer cover and 3 are child of it. When I put White color in the outer layout than no spaces are left but when I put 9patch image as drawable image than little default padding/margin are left. Is there any properly which solve the padding/margin issue? I have tried margin negative but it will hide bit layout I think it is not proper solution, here is my layout
when I put white color as background than my layout look like
Here is the following code of my layout
<RelativeLayout
android:id="#+id/DetailSection1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/HeaderLayout"
android:layout_toLeftOf="#+id/DetailSection2"
>
<TextView
android:id="#+id/lblRestaurantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/DetailSection1"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:textColor="#color/heding_font"
android:textSize="#dimen/headingFont"
android:text="Restaurant Name" />
<ImageView
android:id="#+id/imgpin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblRestaurantName"
android:layout_margin="5dp"
android:src="#drawable/pin" />
<TextView
android:id="#+id/lblAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblRestaurantName"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgpin"
android:text="Address"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
<ImageView
android:id="#+id/imgphone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblAddress"
android:layout_margin="5dp"
android:src="#drawable/phn" />
<TextView
android:id="#+id/lblMobile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblAddress"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgphone"
android:text="Mobile"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
<ImageView
android:id="#+id/imgstar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblMobile"
android:layout_margin="5dp"
android:src="#drawable/star" />
<TextView
android:id="#+id/lblStar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblMobile"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgstar"
android:text="Star"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/DetailSection2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignBottom="#+id/DetailSection1"
android:layout_toLeftOf="#+id/DetailSection3"
android:layout_toRightOf="#+id/lblStar" >
<ImageView
android:id="#+id/imgmore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/read_more" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/DetailSection3"
android:layout_width="95dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/HeaderLayout"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:background="#drawable/photo_cover" >
<ImageView
android:id="#+id/imgRestaurant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/lblMobile"
android:layout_margin="5dp"
android:src="#drawable/rihanna" />
</RelativeLayout>
</RelativeLayout>
From the 9-patch drawable image you posted:
The bottom line which indicates the horizontal data population on the view wasn't drawn from the starting point of left.
I am not sure about it. And I know I wasn't clear in explaining the above line.
Just check this:
Consider the below 9-patch is used as a background for a TextView. If you put some text in it, it will start from the area where the bottom line is drawn. Which mean it will start from the left and go all the way to right.
If you use the following 9-patch as a background and try the same thing which you did above. Will result in Text not written from the left. It leaves a bit padding.
That is the reason why you get such result. Of course I am 100% sure about it.
So, just to find out if this works. Try changing the bottom line to fill complete image.
I think you better apply the background color for which layout you want exactly.And one more keep the code so that we can understand easily what is your issue.
I'm trying to set my TextView to the left of an ImageButton, but I can't seems to find this option.
I was expecting to use something like android:layout_alignLeft, but this option is missing.
I've tried to google the issue, but couldn't find any relative results.
Without it my TextView overlaps the ImageButton and I want to avoid it.
UPDATE
The full xml code is too complex, but here is the important part of it:
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:background="#color/white"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_toLeftOf="#+id/frameLayoutBalanceClosed">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/button_edit_nickname"
android:id="#+id/card_closed_control_editNickname" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/card_closed_description_nickname"
android:layout_margin="8dp" android:layout_gravity="left"/>
</FrameLayout>
I think what you need is a RelativeLayout. You can specify your TextView to the left of your ImageView with it's specifications. Your code would look something like this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/imagebutton1" />
<ImageButton
android:id="#+id/imagebutton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
The reason FrameLayout isn't working is because it's purpose is to overlay items on top of each other, which wouldn't work at all!
If that isn't what you're looking for, you could also use a TableLayout in which items are arranged in columns.
In my android app i want to design a layout exactly like twitter layout with a Image and Text View.
See the following screenshot
Please help me with this. How can i design this layout ?
Update:
Forget about background images and top bar. I am requiring 6 images and textviews. In the below image twobirds with Tweets(167), Lists, Mentions, Retweets etc.,
What you want is fairly simple, tho I am sure there are more fancy way's of doing this then i'm
about to show you.
For my application I used 4 ImageButtons, but the principle is the same for 4 or 6 buttons.
This is my XML layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/actionbar_layout"
android:layout_width="fill_parent"
android:layout_height="45dip"
android:background="#drawable/actionbar_background"
android:gravity="center_vertical">
<TextView
android:id="#+id/tekst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App name"
android:textColor="#FFFFFF"
android:textSize="18dp"
android:layout_marginLeft="5dp"
android:textStyle="bold"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/button_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_below="#id/actionbar_layout">
<ImageButton
android:id="#+id/button_schedule"
android:src="#drawable/schedule_icon"
android:scaleType="fitCenter"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="40dp"
android:background="#FFFFFF"
/>
<TextView
android:id="#+id/text_schedule"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:text="Rooster"
android:textSize="20dp"
android:layout_below="#id/button_schedule"
android:gravity="center"
/>
<ImageButton
android:id="#+id/button_locations"
android:src="#drawable/locations_icon"
android:scaleType="fitCenter"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="50dp"
android:background="#FFFFFF"
android:layout_below="#id/text_schedule"
/>
<TextView
android:id="#+id/text_locations"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:text="Links"
android:textSize="20dp"
android:layout_below="#id/button_locations"
android:gravity="center"
/>
<ImageButton
android:id="#+id/button_rss"
android:src="#drawable/rss_icon"
android:scaleType="fitCenter"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="40dp"
android:background="#FFFFFF"
android:layout_toRightOf="#id/button_schedule"
android:layout_alignParentRight="true"
/>
<TextView
android:id="#+id/text_rss"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:text="RSS"
android:textSize="20dp"
android:layout_toRightOf="#id/text_schedule"
android:layout_below="#id/button_rss"
android:layout_alignParentRight="true"
android:gravity="center"
/>
<ImageButton
android:id="#+id/button_settings"
android:src="#drawable/settings_icon"
android:scaleType="fitCenter"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="50dp"
android:background="#FFFFFF"
android:layout_toRightOf="#id/text_locations"
android:layout_below="#id/text_schedule"
android:layout_alignParentRight="true"
/>
<TextView
android:id="#+id/text_settings"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:text="Instellingen"
android:textSize="20dp"
android:layout_toRightOf="#id/text_locations"
android:layout_below="#id/button_settings"
android:layout_alignParentRight="true"
android:gravity="center"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/twitter_layout"
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_alignParentBottom="true"
android:layout_below="#id/button_layout">
<Gallery android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/gallery"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true">
</Gallery>
</RelativeLayout>
I pasted the whole file, so you can see how I implemented my actionbar.
But what you need is the second RelativeLayout tag.
You align your buttons/textviews by using "android:layout_toRightOf" and "android:layout_below" attributes.
Your first button is simple, the second one (the one to its right) you align with "android:layout_toRightOf="#id/first_button"
A third button (below the first button) can be aligned using "android:layout_below="#id/first_button"
The same goes for textviews, just use layout_toRightOf and layout_below to align them. The attributes only apply to the RelativeLayout.
Hope this will help you out a bit.
What you want to do is called a Dashboard pattern.
You can find implementation of ActionBar and Dashboard patterns in sources of the Google IO app. ActionBar in the file actionbar.xml (and HomeActivity.java, ActivityHelper.java), Dashboard in the file fragment_dashboard.xml (and DashBoard.java).
im sure , it's can be created like this :
image and textView mustBe on layout - so :
//start "a" code
LinearLayout oneObject ;
oneObject= new LinearLayout(this);
//need set to vertical mode
oneObject.setOrientation(LinearLayout.VERTICAL);
//it's our one object . image+text
next : TextView text = new TextView(this);
text.setText("tweets"); // or get from array
///image it's can be what you want - button, layout, textView(-____-)
// just need set on background new image . iget button - for normal clicking ;//
ImageButton image = new ImageButton(this);
image.setImageResource(r.drawable.blabla)
oneObject.addView(image);
oneObject.addView(text);
//also u need create 2 columns and add to this columns our object
//for size of oneObject - use LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(curWidth/2,curHeight/6); curWidth and curHeight - its my resolution of screen.
//end "a" code
for creating 6 objects u must rung it in cycle :
all code = "a"; so
for(int i = 0;i<6;i++)
{
a/// where a all our code
}
Hope it's help you.. also i can put more code where need some fixings
I am trying to create a screen (in portrait mode) that shows 4 images (same size, intended to scale down to fit screen), taking up the entire screen, breaking up the screen into quadrants (a tall, 2x2 grid). This will act as a main menu type of activity and each image should be clickable, in order to take the user to a different activity.
I have tried using a GridView inside a LinerLayout (using a lot from Google's GridView tutorial) but cannot get the images to all scale properly to fill the entire screen. I get extra margins around the images and/or scrolling of the entire screen.
I have also tried using a TableLayout, placing 2 images in each of the 2 rows. Visually, that worked perfectly. Unfortunately when using that, I cannot seem to reference the ImageView items in the TableLayout in my activity code (findViewById always returns null).
I feel like a TableLayout is really not the "right thing to do" but I would like to hear what others have to say. Either way, what should be done to accomplish my desired functionality?
Thanks.
Edit 1.1:
The relative layout works much better for getting things lined up. Now I'm just left with the issue where findViewById always returns null. Here is my code so far:
<?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="fill_parent"
android:background="#color/homescreen_bgcolor"
>
<ImageView id="#+id/one"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:src="#drawable/item1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView id="#+id/two"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:src="#drawable/item2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView id="#+id/three"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:src="#drawable/item3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView id="#+id/four"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/item4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
public class HomeScreenActivity2 extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.homescreen2);
ImageView imageView = (ImageView) findViewById(R.id.one);
imageView.setClickable(true);
imageView.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Log.i("Test", "test");
}
});
}
}
Here is a sample layout showing how you can achieve a 2 X 2 grid that covers the entire screen using just a RelativeLayout.
<RelativeLayout 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" >
<View
android:id="#+id/centerVerticalShim"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerVertical="true"
android:visibility="invisible" />
<View
android:id="#+id/centerHorizontalShim"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:visibility="invisible" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/centerVerticalShim"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/centerHorizontalShim"
android:background="#42A5F5"
android:gravity="center"
android:text="#string/one"
android:textColor="#FFFFFF" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/centerVerticalShim"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/centerHorizontalShim"
android:background="#EF5350"
android:gravity="center"
android:text="#string/two"
android:textColor="#FFFFFF" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/centerVerticalShim"
android:layout_toLeftOf="#+id/centerHorizontalShim"
android:background="#66BB6A"
android:gravity="center"
android:text="#string/three"
android:textColor="#FFFFFF" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/centerVerticalShim"
android:layout_toRightOf="#+id/centerHorizontalShim"
android:background="#5C6BC0"
android:gravity="center"
android:text="#string/four"
android:textColor="#FFFFFF" >
</TextView></RelativeLayout>
The above layout results in this:
I think a TableLayout could work for you, but I'd recommend trying out RelativeLayout as well. You can basically pin your images to the four quadrants by using combinations of
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"`
on your images.
I'm doing something similar in my app where I have multiple buttons on a homepage that can launch corresponding activities. RelativeLayout works fine, and it avoids nested Layout objects, which can hamper performance during render and layout procedures (if it gets out of hand).