how to have an inline drawable inside layout xml - android

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>

Related

Drawable behaves differently in different activity layouts in Android Studio

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.

Imported code from another developer: <No resource identifier found for attribute 'ProgressColor' in package...> error in one of my .xml files

This is the .xml file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:seekarc="http://schemas.android.com/apk/res/com.pelkinsoft.enpower"
android:layout_width="match_parent"
android:layout_height="match_parent" >
The errors occur at:
<com.triggertrap.seekarc.SeekArc
android:id="#+id/seekArc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="30dp"
seekarc:progressColor="#color/arc_color"
seekarc:rotation="180"
seekarc:startAngle="30"
seekarc:sweepAngle="300"
seekarc:touchInside="true" />
I am new to Android and this is keeping me from being able to effectively work on this app. Any help would be much appreciated.
You must add the Seek Arc library (https://github.com/neild001/SeekArc#adding-to-your-project) to your project
Inside res foder, create following file:
res/values/color.xml
Then, define the color used by SeekArc view:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="arc_color">#0000FF</color>
</resources>
OR
Manually set the color in the SeekArk view:
<com.triggertrap.seekarc.SeekArc
android:id="#+id/seekArc"
android:layout_width="match_parent"
....
seekarc:progressColor="#0000FF"
....
/>

Break line after Icon in Menu Item Android

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"

Android - merge and include

I want to use switch button in my app. As its API is 11 and switch needs API higher than 14, I decided to use merge and include method but I get this error in values-v14/compound_switch.xml file : Element merge must be declerd. here are my files, what is the problem?
Main layout:
<include layout="#layout/compound_switch" />
layout/compound_switch.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<CheckBox
android:id="#+id/night_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/textView20"
android:layout_toLeftOf="#+id/textView20"
android:layout_toStartOf="#+id/textView20"
android:layout_marginRight="5dp"
android:checked="false" />
</merge>
values-v14/compound_switch.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Switch
android:id="#+id/night_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/textView20"
android:layout_toLeftOf="#+id/textView20"
android:layout_toStartOf="#+id/textView20"
android:layout_marginRight="5dp" />
</merge>
Move your layout that has the switch from the folder values-v14 to a folder called layout-v14. Layouts should be in the layout folder. The values folder is for colors, dimensions, attributes, etc.

android how to code dialog layout

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.

Categories

Resources