I have the following drawable: custom_yellow_button.xml in the drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="5dp"/>
<solid android:color="#color/yellow"/>
</shape>
</item>
</selector>
and I have these two different layouts which both identically use the button:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
android:background="#FFFFFF"
tools:context=".LogInActivity">
<Button
android:id="#+id/login_button"
android:layout_width="275dp"
android:layout_height="35dp"
android:layout_marginTop="20dp"
android:background="#drawable/custom_yellow_button"
android:fontFamily="#font/courierprime_regular"
android:includeFontPadding="false"
android:text="Log In"
android:textColor="#000000"
android:textSize="21sp"
app:backgroundTintMode="add" />
</androidx.constraintlayout.widget.ConstraintLayout>
and
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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=".RegistrazioneActivity">
<Button
android:id="#+id/login_button"
android:layout_width="275dp"
android:layout_height="35dp"
android:background="#drawable/custom_yellow_button"
android:fontFamily="#font/courierprime_regular"
android:includeFontPadding="false"
android:text="Log In"
android:textColor="#000000"
android:textSize="21sp" />
</androidx.constraintlayout.widget.ConstraintLayout>
In the first layout, it looks like this, which is how I want it :
while in the second layout, it looks like this:
.
Can anyone tell me why? I can provide more info if needed.
I am not sure what theme are you using, but with MaterialThemes you can do this and it's easy. First check this: https://material.io/components/buttons
Then, change your app theme to extend one of the material themes, like this:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
Then add implementations:
implementation 'com.google.android.material:material:1.2.1'
After that you can simply use this as your button inside your XML:
<com.google.android.material.button.MaterialButton/>
Inside this View you have a lot of attributes for your button. Simply check above link and see. For yours I would go with something like this:
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="60dp"
android:textAlignment="center"
android:textAllCaps="true"
android:padding="15dp"
android:backgroundTint="#color/yellow" //add background color
app:rippleColor="#color/colorPrimary" //ripple color - when button is pressed
style="#style/Widget.MaterialComponents.Button.TextButton" //material component style, many options to choose from
android:textColor="#color/colorPrimaryDark"
app:cornerRadius="15dp" //corner radius, so you can adjust how much oval you want your corners to be/>
And you get something like this:
See AndroidManifest.xml and make sure you have the same theme assigned to both of them.
The XML editor's preview also can be switched to all available themes, including custom themes.
When you provide the layout's Context to the XML editor alike this:
xmlns:tools="http://schemas.android.com/tools"
tools:context=".activity.MainActivity"
The XML editor will pick up that theme for the preview - and there's no need to switch them.
Related
I have some drawable resources that are used only in a single xml layout. I would like to insert them into the specific xml layout (inline) so i could have a better organization of my files and a less overloaded drawable folder
i found this topic:
https://developer.android.com/guide/topics/resources/complex-xml-resources
but this using an inline drawable as resource for another one... i would like to use it in a layout xml
EXAMPLE:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_corner"
android:orientation="horizontal"
android:padding="#dimen/smallMargin">
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/buttonDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:drawableTop="#drawable/code"
android:text="#string/delete"
/>
</androidx.appcompat.widget.LinearLayoutCompat>
where code.xml is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="#dimen/popupButtonSize"
android:height="#dimen/popupButtonSize"
android:drawable="#drawable/ic_population" />
</layer-list>
code is only used in that specific layout, is there any way to make it inline?
What seems to be the issue? If you follow the guide it works without a problem:
Add xmlns:aapt="http://schemas.android.com/aapt" to root node
Replace android:drawableTop="#drawable/code" attribute with aapt:attr child
Final XML will look like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_corner"
android:orientation="horizontal"
android:padding="#dimen/smallMargin">
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/buttonDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="#string/delete">
<aapt:attr name="android:drawableTop">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="#dimen/popupButtonSize"
android:height="#dimen/popupButtonSize"
android:drawable="#drawable/ic_population" />
</layer-list>
</aapt:attr>
</androidx.appcompat.widget.AppCompatButton>
</androidx.appcompat.widget.LinearLayoutCompat>
I've would like set to grey color(icons and text) but now is showing as white color.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="end">
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Titulo_ventana"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="end"
android:orientation="horizontal"
android:padding="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="#dimen/cardview_default_elevation">
<android.support.v7.widget.SearchView
android:id="#+id/mySearchview"
android:label="#string/app_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:theme="#style/Base.Widget.AppCompat.SearchView">
</android.support.v7.widget.SearchView>
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
I'd would like to reach something like this searchview within the toolbar and gray textcolor:
The left and right menu icons are optional.
The searchview is foldable by default, I don't mind if this feature should be changed.
The search view, that you want to achieve in fact is not a SearchView. It's a custom component. Here's the view tree that can be obtained using Hierarchy Viewer tool:
Here's the OverlaySearchPlateContainer:
As you can see from package name, it is shipped with Play Services, thus source code is not available.
Nevertheless, we can compare that tree with the tree of SearchView. Here's tree that can be obtained when ordinary SearchView is used:
Thus, you can see, that OverlaySearchPlateContainer is not a descendant of a SearchView, hence the UI you want to achieve cannot be accomplished using solely styles/themes.
I would recommend to not reinvent a wheel and to utilize 3rd party libraries, for example SearchBar-SearchView, where SearchView widget looks like this:
I have one solution its working fine in my application. You may try this.
EditText txtSearch = (EditText) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
txtSearch.setHint(getResources().getString(R.string.search));
txtSearch.setHintTextColor(Color.GRAY);
txtSearch.setTextColor(Color.GRAY);
You can set the background of search view
<android.support.v7.widget.SearchView
android:id="#+id/searchViewContact"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
app:searchIcon="#mipmap/icon_search"
app:closeIcon="#mipmap/icon_close"
android:background="#drawable/search_view_background"
android:layout_margin="5dp">
</android.support.v7.widget.SearchView>
search_view_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#dcdee1"/>
<stroke
android:color="#d7d3d3"
android:width="1dp"/>
<corners
android:radius="5dp"/>
</shape>
To change the text color, put this in your styles.xml:
<style name="MySearchView" parent="Base.Widget.AppCompat.SearchView">
<item name="android:editTextColor">#color/text_color</item>
<item name="android:textColorHint">#color/hint_color</item>
</style>
Replace #color/text_color and #color/hint_color to suit your needs.
And then change the SearchView theme attribute in your XML layout:
<android.support.v7.widget.SearchView
android:id="#+id/mySearchview"
android:label="#string/app_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:theme="#style/MySearchView">
</android.support.v7.widget.SearchView>
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>
Simple question that I don't find an answer for.
Is it possible to break line after the icon in a menu item making them not inline anymore? (The menu slides in from left by using NavigationView in Android support library)
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/cards"
android:checked="false"
android:icon="#drawable/card_icon"
android:title="Cards" />
...
...
...
</group>
This is how I want it to look like.
But instead they are aligned inline.
Update after answer:
Using a modified android.R.layout.activity_list_item (changed to vertical aligned left):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="1dip"
android:paddingBottom="1dip"
android:paddingStart="8dip"
android:paddingEnd="8dip"
android:orientation="vertical">
<TextView android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center_horizontal"
android:paddingStart="?android:attr/listPreferredItemPaddingStart" />
<ImageView android:id="#+id/icon"
android:layout_width="24dip"
android:layout_height="24dip"
android:layout_gravity="left" />
</LinearLayout>
And I added an actionLayout to the menu items:
<item
android:id="#+id/cards"
android:checked="false"
android:icon="#drawable/cards_icon"
android:actionLayout="#layout/vertical_menu_item"
android:title="Cards" />
But nothing happens. They are still inline. I also tried using app:showAsAction="always" and app:actionLayout="#layout/vertical_menu_item".
I suggest you to create a custom view (eg: vertical layout with ImageView and TextView), and in onCreateOptionsMenu() you can use setActionView() method of the MenuItem to use this custom view as Item view.
Or from menu xml:
android:actionLayout="#[package:]layout/layout_resource_name"
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.