I am trying to create a MultiPanel UI in my Android App. But I can only find tutorials and examples using only 2 fragments.
Can someone please explain to me how to add additional fragments and how to POSITION them in the layout ?
Ussualy in tutorials and examples it's like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<fragment android:name="com.example.android.fragments.HeadlinesFragment"
android:id="#+id/headlines_fragment"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
<fragment android:name="com.example.android.fragments.ArticleFragment"
android:id="#+id/article_fragment"
android:layout_weight="2"
android:layout_width="0dp"
android:layout_height="match_parent" />
</LinearLayout>
However, this is as said only for 2 fragments, and in LinearLayout. What If don't want to use LinearLayout, but FrameLayout ?
I am trying to do it with above mentioned Style, because if I will start creating Fragments with their own .xml , I cannot style them as I want, because I'll have to use X dp for positioning,which will cause different look on different devices. Also, when I tried to do it that way, I couldn't fill the entire escreen with FrameLayout, there were white spaces at the edges (I set background color of fragments to black).
Any kind of link to tutorials or example would help me alot.
Related
I want to stack two different charts in one Linear Layout. Here is my code. I want when user choose the progress chart, the chart will convert from com.github.mikephil.charting.charts.LineChart to com.example.imed.Progress.CustomCalenderView and vice versa.
I set the visibility in the JAVA class. However, the problem is, is it possible to stack these two different charts in a Linear Layout? If yes, can you help me to fix the code segment below?
I already add orientation to vertical but these two chart does not stack to each other.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginBottom="20dp"
android:orientation="vertical">
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/chart"
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp">
</com.github.mikephil.charting.charts.LineChart>
<com.example.imed.Progress.CustomCalenderView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:id="#+id/custom_calendar_view">
</com.example.imed.Progress.CustomCalenderView>
</LinearLayout>
If you mean overlaying the Views, then no, it is not possible using a LinearLayout.
To achieve this, you need to use, for example, FrameLayout, CoordinatorLayout or ConstraintLayout.
The recommended layout to create your UI is the ConstraintLayout. It is highly flexible and basically combines the function of any other layout and adds even more.
Refer to the linked docs to find out more about ConstraintLayout.
It is possible, you only need to have the next form
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/chart"
android:layout_width="match_wrap"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp">
</com.github.mikephil.charting.charts.LineChart>
<com.example.imed.Progress.CustomCalenderView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_wrap"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:id="#+id/custom_calendar_view">
</com.example.imed.Progress.CustomCalenderView>
The CustomCalenderView should not be in match_parent's height
I have little bit experience with Android and I'm not sure how to resolve this design problem. Maybe someone know a good solution. I like to build an Activity which look like this:
http://i.stack.imgur.com/CwQaU.png
The user should have to choice to drag the marker on the map or to enter the adress. I like to define the whole layout in XML without to extend from the map fragment.
Have someone a example how I can split the screen 80/20 with two fragments?
Are fragments are the right choice?
Just use a single fragment in this case. In your XML you'll want a LinearLayout so you can utilize weights to achieve the 80/20 you described above.
<LinearLayout>
<MapFragment/>
<EditText/>
</LinearLayout>
Give the linearLayout a "vertical" orientation and assign a weights of 4 and 1 to the children to split them 80/20%.
If this isn't enough to go off, let me know and I can explain further.
Good Luck!
You can use LinearLayout and play with the layout_weight parameter on the fragments to split the screen that way. Something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<fragment
android:name="name"
android:layout_width="match_parent"
android:layout_weight="4"
android:layout_height="0sp" />
<fragment
android:name="name"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0sp" />
I don't think you need 2 fragments for this.
You can create one main LinearLayout with vertical orientation and inside set two RelativeLayout. One with map fragment and second with edittext.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="3"
android:layout_height="0sp" >
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0sp"
android:background="#999">
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:gravity="center"/>
</RelativeLayout>
</LinearLayout>
I am currently working on a prototype where I have two fragments in a LinearLayout.
Here is what the xml looks like:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#+id/map_holder"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_above="#id/footer"
android:layout_weight=".30"
>
</FrameLayout>
<FrameLayout
android:id="#+id/list_holder"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_above="#id/footer"
android:layout_weight=".70"
>
</FrameLayout>
</LinearLayout>
The top fragment is a map fragment and the bottom fragment is just a list of items. I am trying to expand the map when the user clicks on the fragment. The height changes from .3 to 1. Currently I have tried to animate and change the height of the fragment, this gives horrible performance. I have looked around and found that Facebook Nearby Places does this effect smoothly. Should I be using the ScaleAnimation class to do this? Thank you for your help.
Edit:
Foursquare has the same type of effect. When click on the map it scales smoothly into fullscreen I have attached a screen shot.
Here is an example of what it looks like:
http://im.tech2.in.com/gallery/2013/apr/foursquareforandroid_041425247544_640x360.jpg
i am working on a app, where i need to display the google map on the right half of the screen of my device. The left half of the screen contain text in list view format. Please help me how to design the UI part or layout.xml.....Thanks in advance..!!!
Use linear layout with horizontal orientation and put both your mapview and listview inside it , now give similar weight to them .May be that will work .for example give layout_weight 1 or 0.5 in both mapview and listview .
Try use Fragments and here are some links to training
Using Fragments in Android
trading for fragments
Maybe you could look into something like this? I've used this format in apps before
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:gravity="center"
android:orientation="vertical">
<MapView />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ListView />
</LinearLayout>
My situation is following. I have one Activity that contains three main parts. At the top of this activity there is an tools panel with two ImageButtons. At the bottom of the activity there is also tools panel similar to top. Main component of this activity is at the center of the screen which is LinearLayout that contains 3x3 ImageButtons grid. To get the context I quickly describe purpose of these grid buttons. This 3x3 grid describes states of this buttons (lets say toggle button and its states are on/off) for particular day. So for one day you have one set of 3x3 and these have its own state for particular day.Now what I trying to achieve is to have functionality which allows user to scroll between grids or dates respectively. My idea is to have ViewFlipper as the main component of the activity (instead of LinearLayout) and one or more grid of buttons. This is what I already have. I am able to switch 3x3 to another 3x3 (with states) for another day. For this I simply copy/paste my 3x3 grid XML definition and put this as children to view flipper (x-times).My idea is to have one definition of 3x3 and reuse it x-times like some kind of template so I will be able to say "I want to have another 3x3 with so and so states for this day and I want it to add this as next child to ViewFlipper".For this purpose (to have component of 3x3) I simply made class which extends LinearLayour and within it I want to generate/reuse 3x3 definition for buttons. Sure I am able to do it by java code in this new class but is some way to do it with reusing of xml (which is better to maintain and to read)?I tried to use LayoutInflater but this is probably not what I am looking for.
Thanks in advance
Edit
Here is code for main layout with flipper
<ViewFlipper android:id="#+id/view_flip"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#FF0000">
<!-- Here goes 9x9 cubbie layout programaticaly -->
</ViewFlipper>
To this fipper I adding view with this layout (this code is assigned via LayoutInflater).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/background" android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="1">
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="1" android:gravity="center">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" android:orientation="vertical">
<ImageButton android:id="#+id/life_att_1" style="#style/AttributeButton" />
<TextView android:id="#+id/life_att_text_1" android:text="test"
style="#style/AttributeText" />
</LinearLayout>
...
</LinearLayout>
...
</LinearLayout>
EDIT 2
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/background" android:orientation="vertical"
android:layout_width="wrap_content" android:layout_height="fill_parent"
android:layout_weight="1" android:paddingLeft="16dip">
Only way I found here is to add paddingLeft attribute to wrapper LinearLayout (please refer to EDIT 2). I do not think that this is right solution but only solution I currently found.