In this project (feature/drop-shadow branch) I am trying to add a drop shadow above a view container. Therefore, I defined the following shape (drawable/shadow_above):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#20000000"
android:endColor="#android:color/transparent"
android:angle="90">
</gradient>
</shape>
This is then used in the layout file (container_infos.xml) as follows:
<View
android:background="#drawable/shadow_above"
android:layout_width="match_parent"
android:layout_height="4dp"/>
The screenshot shows the result. For some reason the drop shadow looks awful. There is no transparency. What am I doing wrong? Feel free to send a pull request to my open source project.
Solution using a RelativeLayout
I managed to get the desired result by using a RelativeLayout in fragment_map.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context=".ui.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<FrameLayout
android:id="#+id/map_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:background="#android:color/holo_purple"/>
<View
android:background="#drawable/shadow_above"
android:layout_alignBottom="#id/map_container"
android:layout_width="match_parent"
android:layout_height="4dp"/>
</RelativeLayout>
<include
layout="#layout/container_infos"/>
</LinearLayout>
There might be room for optimization.
as far as I see you should give map_container_infos_layout a negative top margin of the size 4dp and it should look better
Related
My question is simple is a UI/UX design question. I want to get this model for my layout
I have no idea how is this called, want some help and idea for coding this one I tried few options but nothing.
To create this above layout You can use either of FrameLayout or Co-ordinator Layout or the new ConstraintLayout.
This will do it for you.
Refer this link to understand the above design.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="xyz.himanshusingh.cryptokoin.ui.display.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#drawable/toolbargradient" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_below="#+id/toolbar"
android:background="#drawable/toolbargradient" />
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="80dp"
app:cardCornerRadius="10dp">
</android.support.v7.widget.CardView>
</RelativeLayout>
and toolbargradient.xml,
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="linear"
android:startColor="#f7792e"
android:endColor="#ef246b"
android:angle="180"/>
</shape>
This XML code will almost make the design for you. In place of CardView you can use whatever you want.Like a RecyclerView, DatePicker etc.
Hope this helps :)
Try using a Relative Layout for the image & recycler view and put the recycler view in cardview. This should work for 1st & 2nd view & in 3rd inside a cardview add a calendar & a recycler view below it. Hope this helps
I am using a Google Places Autocomplete fragment in an Android app. When I use the fragment directly in the top level of a LinearLayout, everything works:
<LinearLayout ...>
<fragment
android:id="#+id/findRidePlaceAutocompleteFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"/>
</LinearLayout>
This layout leads to this UI:
As you can see, there is no border around the widget, whereas the TextView below it has a black border. From what I read, one trick to get a border around a fragment is to embed that fragment within a CardView. This method is actually recommended by Google's official documentation. Consider the following modified layout:
<LinearLayout ...>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_gravity="left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/main_border">
<fragment
android:id="#+id/findRidePlaceAutocompleteFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"/>
</android.support.v7.widget.CardView>
</LinearLayout>
The trick here is to give the CardView a background with the Google Places fragment above it, such that the former will appear as a border around the latter.
But this modified layout causes the app to crash. Does anyone know why this is crashing, or how I might place a border around a Google PlaceAutocompleteFragment ?
You can set a custom background for the enclosing LinearLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/main_border">
<fragment
android:id="#+id/findRidePlaceAutocompleteFragment"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
I'm using the same android:background="#drawable/main_border" that you have defined for your CardView. In my case main_border.xml (which lives on the res/drawable folder) looks like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#ffffff" />
<stroke android:width="1dip" android:color="#000000"/>
</shape>
I am trying to align an Object into the corner of my round_layout for a round android wear device.
As you can see here:
The digitalclock will be out of bounds.
I've seen the android wear documentation at the google IO 2014, and some guy showed, that there's a line of code, in order to align the objects correctly.
I want the digitalclock to be in the top left corner, but not out of the screen.
Has anyone got a suggestion?
Here's the XML file:
<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"
tools:context=".MyActivity"
tools:deviceIds="wear_round">
<DigitalClock
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text"
android:textSize="20sp"/>
</RelativeLayout>
Edit:
My xml layout file looks like this right now, for the round activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.wearable.view.BoxInsetLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1234567890"
app:layout_box="top"/>
</android.support.wearable.view.BoxInsetLayout>
As You can see, I tried to use the BoxInsetLayout, but still, the output is following:
Although I used
app:layout_box="top"
The TextView is out of the screen's bounds. What have I overseen?
According for things shown on Google IO 2014 you should use BoxInsetLayout:
Check out this video <- about 6:04
You can see the usage of BoxInsetLayout in DelayedConfirmation sample code. Here is a content of main_activity.xml file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.wearable.view.BoxInsetLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/grey"
app:layout_box="top">
[...]
</LinearLayout>
</android.support.wearable.view.BoxInsetLayout>
You can set the app:layout_box to following values: left|top|right|bottom or all. You can use all in your case, then all content will be kept within the box on every side. The effect for this layout is ignored when app is running on square watch.
EDIT:
I've just tested the code you've posted as "doesn't work":
<?xml version="1.0" encoding="utf-8"?>
<android.support.wearable.view.BoxInsetLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1234567890"
app:layout_box="all"/>
</android.support.wearable.view.BoxInsetLayout>
With activity:
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
I've told you to use the all value in layout_box, but even with top it works as should:
app:layout_box="top": (only offset from top)
app:layout_box="all": (offset from any side)
I want to code this dialog layout: http://fooh.pl/pokaz/348687655.png
Green containner is in orange container. At the top of the dialogue is TextView. In the upper right corner is a button.
I know the types of layouts, but I failed.
Can anyone help me? Please.
Here you go:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rounded_orange">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_margin="8dp"
android:text="Text"/>
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="32dp"
android:background="#drawable/rounded_green">
</RelativeLayout>
</RelativeLayout>
Where the drawables (only green shown here) are laid out like this:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#0F0"/>
<corners android:radius="16dp"/>
</shape>
If you need help applying the custom layout.xml file to your dialog, read up on 'Creating a Custom Dialog' in the official docs of Dialog.
Here's a link to the documentation with good examples or how to create a dialog fragment based on a layout.
And here is a good SO answer that shows how to inflate a layout for use in a dialog fragment.
I have a pattern-based background drawable:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/back"
android:tileMode="repeat"/>
On this activity I'm displaying a background-pattern:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/back"
android:scrollbars="vertical"
>
</LinearLayout
Have a result like:
http://img525.imageshack.us/img525/2257/63411225.jpg
Need result:
http://img811.imageshack.us/img811/4894/12572985.jpg
You are not including the necessary code (the layout that has both your background, and the image).
The problem has nothing to do with your background, and (probably) everything to do with how you are actually laying out your image.
If this is you complete code, you need to add a attribute, which would include you Image.