I'm trying to start an application and I'm kind of lost on how to do what I want.
This is what I want
Both red panels should be able to slide to the sides and the white one should expand if one of them (or both) them is collapsed, occupying that panel space.
When I have the red panels on the screen, the white panel show all the content and not be under any of the panels.
What have I tried so far:
I started by trying with two SlidingDrawers, but the white panel got behind the red ones, so, no luck there.
After that I tried with 2 LinearLayouts (red panels) and a RelativeLayout (white panel), and tried to change width of the layouts with buttons (like is on the image on top). This caused always problems that I didn't know how to resolve.
Suggestions?
Edit:
xml of the SlidingDrawer example:
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="bottom"
android:background="#FFFFFFFF">
<SlidingDrawer
android:layout_width="100dip"
android:id="#+id/SlidingDrawer"
android:handle="#+id/slideHandleButton"
android:content="#+id/contentLayout"
android:layout_height="fill_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:id="#+id/contentLayout"
android:orientation="horizontal"
android:background="#C0C0C0"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Meio"
android:layout_toRightOf="#+id/buttonEsq" />
</LinearLayout>
<Button
android:layout_width="30dip"
android:layout_height="30dip"
android:id="#+id/slideHandleButton"
android:background="#drawable/arrowup">
</Button>
</SlidingDrawer>
</LinearLayout>
And the xml of the LinearLayout example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_toLeftOf="#+id/linearLayout3"
android:layout_toRightOf="#+id/linearLayout1"
android:background="#FFFFFFFF">
<Button
android:id="#+id/buttonEsq"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="v--" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Meio"
android:layout_toRightOf="#+id/buttonEsq" />
<Button
android:id="#+id/buttonDir"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/textView1"
android:text="--v" />
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="50dip"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:background="#FFFF0000">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Esquerda" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="50dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="#FFF00000">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Direita" />
</LinearLayout>
</RelativeLayout>
The android code (the commented part is the code of the 1st example):
public class Main extends Activity {
Button slideHandleButton;
Button slideHandleButtonLeft;
Button slideHandleButtonRight;
SlidingDrawer slidingDrawer;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.mainlayouts);
/* slideHandleButton = (Button) findViewById(R.id.slideHandleButton);
slidingDrawer = (SlidingDrawer) findViewById(R.id.SlidingDrawer);
slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {
#Override
public void onDrawerOpened() {
slideHandleButton.setBackgroundResource(R.drawable.arrowdown);
}
});
slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {
#Override
public void onDrawerClosed() {
slideHandleButton.setBackgroundResource(R.drawable.arrowup);
}
});*/
slideHandleButtonLeft = (Button) findViewById(R.id.buttonEsq);
slideHandleButtonLeft.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
LinearLayout lll = (LinearLayout) findViewById(R.id.linearLayout1);
RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(50, LinearLayout.LayoutParams.FILL_PARENT);
lll.setLayoutParams(params);
}
});
}
}
SlidingDrawer can only slide in from the right or the bottom, it is unable to slide in from the top or the left. You can try the answer from this question: Android SlidingDrawer from top? or you can get try rewrite the source code http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/1.5_r4/android/widget/SlidingDrawer.java.
However, a SlidingDrawer wont allow
the white panel show all the content and not be under any of the panels
as it will slide over the white panel
The only solution I can think of is to use a series of scale/translate, translate the left or right panel off-screen and set visibility to gone, while at the same time scale the center panel out in the direction of whichever red panel is being removed.
I tried to make a similar prototype some time ago and used this method but the scale animations looked terrible, not to mention the onAnimationEnd listener doesn't work, you'll have to extend a LinearLayout and override onAnimationEnd there for it to work.
Related
I've a custom button layout: Its a FrameLayout as a background with a normal Button in the center with an icon next to the text.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/framelayout"
style="?android:attr/buttonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:background="#F00">
<android.support.v7.widget.AppCompatButton
android:id="#+id/buttonWithIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:background="#null"
android:drawableStart="#android:drawable/ic_delete"
android:gravity="center"
android:textAllCaps="false"
android:textColor="#FFF"/>
</FrameLayout>
I had an onClickListeners on the Button and I realized, clicks on the background (=FrameLayout) weren't detected. Because of this I want an onClickListener that detects clicks on the FrameLayout and also on the Button, without having two Listeners, that do the same.
I tried giving the RelativeLayout an ID, but the layout couldn't be found (=null).
Maybe my button layout isn't optimal. But I need a fullwidth button with a icon next to the text, without any spaces between the icon and the text.
The Icons gets set like this
button.setCompoundDrawablesWithIntrinsicBounds(R.mipmap.ic_icon, 0, 0,0);
Thank you
You can just add one OnClickListener to both views. That way, you only write your code once, and if you click either the FrameLayout or the Button that same code will run.
final View.OnClickListener mOnClickListener = new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Add Your OnClick Code Here
}
};
framelayout.setOnClickListener(mOnClickListener);
buttonWithIcon.setOnClickListener(mOnClickListener);
You can put all of your views that you want them to be clickable and remove all clickListeners of entire views.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/linearlayout">
<FrameLayout
style="?android:attr/buttonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:background="#F00">
<android.support.v7.widget.AppCompatButton
android:id="#+id/buttonWithIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:background="#null"
android:drawableStart="#android:drawable/ic_delete"
android:gravity="center"
android:textAllCaps="false"
android:textColor="#FFF"/>
</FrameLayout>
</LinearLayout>
and add this clickListener to LinearLayout:
LinearLayout linearlayout=(linearLayout)findViewById(R.id.linearlayout);
linearlayout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//Add Your Code Here
}
});
Create a function in your Activity with a View Argument, and in your layout, set the onClick to your two views.
Activity:
public void myAction(View v){
// Do what you want
}
Your Layout:
<FrameLayout
android:id="#+id/framelayout"
style="?android:attr/buttonStyle"
android:onClick="myAction"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:background="#F00">
<android.support.v7.widget.AppCompatButton
android:id="#+id/buttonWithIcon"
android:onClick="myAction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:background="#null"
android:drawableStart="#android:drawable/ic_delete"
android:gravity="center"
android:textAllCaps="false"
android:textColor="#FFF"/>
</FrameLayout>
Maybe adding in just the FrameLayout may dispatch the event in the button also, i can't test right now :)
I'm having troubles getting my head around how to create add animation to a LinearLayout that is translucent. There are two views with opacity and a moving background (Google map if it is of importance). View1 is a LinearLayout and view2 is being added to view1. However when adding view2 it is seen through view1 (see left animation below).
Is there any way I can prevent this to achieve my animation correctly? (goal: see animation on the right) Keep in mind that the background is changing and is not a fixed picture.
Best regards
Rawa
I imagine my comment may not have been entirely clear, so I put together a simple example to better explain and demonstrate. As I'm uncertain as to what your Views will be, I've left them rather generic, and set some hard-coded properties you will want to change.
main.xml layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/stripes_diag" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000" >
<TextView android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:background="#88ffffff"
android:textColor="#000000"
android:textSize="40sp"
android:text="Lorem Ipsum" />
</LinearLayout>
<View android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#88ffffff" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Animate"
android:onClick="onClick" />
</LinearLayout>
</RelativeLayout>
MainActivity class:
public class MainActivity extends Activity
{
View view1, view2;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
view1 = findViewById(R.id.view1);
view2 = findViewById(R.id.view2);
}
public void onClick(View v)
{
view2.setY(view2.getHeight());
ObjectAnimator anim = ObjectAnimator.ofFloat(view2, "y", 0);
anim.setDuration(1500);
anim.start();
}
}
A look at the effect:
I have a scrollview in my android app that supports overscroll and has a nice bounce effect. What I would like to do is add a view that is initially hidden to the user, but if they scroll up beyond the initial view, then they can see it. How can I do this? Is it possible to do this using just xml?
You can place the initial view and the additional view in a LinearLayout, and when the scroll view is created, you can immediately scroll downwards to the initial view. You can set the initial scroll offset using the xml attribute android:scrollY.
By code you can definitely achieve this. In this sample code I have 15 buttons in srollview. And hide 1st button for initial display.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final ScrollView hscrollViewMain = (ScrollView)findViewById(R.id.sview);
hscrollViewMain.post(new Runnable() {
public void run() {
Button bt2 = (Button)findViewById(R.id.button2);
int nY_Pos = bt2.getTop();
// scroll to top of bt2
hscrollViewMain.scrollTo(0,nY_Pos);
}
});
}
main.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:layout_width="fill_parent"
android:id="#+id/bt1"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 3" />
.
.
.
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 15" />
</LinearLayout>
</ScrollView>
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
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).