View becomes invisible when I add attach custom view background to the view - android-custom-view

I am trying to add a custom background to a button to make two sides rounded. But when I attach or add custom view background, the button becomes invisible. Here is my xml code:
<android.support.constraint.ConstraintLayout
Have Some Code there
<Button
android:id="#+id/Top"
android:layout_width="30dp"
android:layout_height="34dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:drawableTop="#drawable/baseline_remove_24"
android:elevation="5dp"
android:paddingTop="5dp"
android:translationZ="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/mid_button"
android:layout_width="30dp"
android:layout_height="23dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:background="#drawable/button_mid"
android:text="2"
app:layout_constraintBottom_toBottomOf="#+id/bottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/Top" />
<Button
android:id="#+id/bottom"
android:layout_width="30dp"
android:layout_height="34dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/button_bottom_side"
//background added there
android:drawableBottom="#drawable/baseline_add_24"
android:elevation="5dp"
android:paddingBottom="5dp"
android:translationZ="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
</android.support.constraint.ConstraintLayout>
Code for custom view from drawable folder is here:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:topLeftRadius="0dp"
android:topRightRadius="0dp"
android:bottomLeftRadius="50dp"
android:bottomRightRadius="50dp" />
<stroke android:width="1dp" android:color="#BABABA" />
<solid android:color="#ffffff"/>
padding android:left="20dp" android:top="20dp"
android:right="20dp" android:bottom="20dp" />
</shape>
Image is below:
(https://imghostr.com/BwBwqrc1)

Related

Android Navigation Component: How do I style toolbar based on navigation graph

I have the following nav_graph.xml:
<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="#+id/nav_graph"
app:startDestination="#id/actualFragment">
<fragment
android:id="#+id/actualFragment"
android:name="com.online.view.ui.ActualFragment"
android:label="Актуальное"
tools:layout="#layout/fragment_actual" >
<action
android:id="#+id/action_actualFragment_to_actualEventFragment"
app:destination="#id/actualEventFragment"
app:enterAnim="#anim/nav_default_pop_enter_anim"
app:exitAnim="#anim/nav_default_pop_exit_anim" />
</fragment>
<fragment
android:id="#+id/actualEventFragment"
android:name="com.online.view.ui.detail.ActualEventFragment"
android:label="Актуальное"
tools:layout="#layout/actual_event_fragment" />
</navigation>
and I have MainActivity with the following layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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:id="#+id/coordinatorLayout"
android:layout_width="match_parent" android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".view.MainActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
android:background="#color/white"
android:paddingLeft="8dp"
app:contentInsetStart="8dp"
app:contentInsetStartWithNavigation="0dp"
app:titleTextAppearance="#style/TabTitles"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:theme="#style/ToolbarStyle"
/>
<fragment
android:id="#+id/content"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toTopOf="#+id/bottom_tabs"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.587"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar"
app:navGraph="#navigation/nav_graph" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_tabs"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
app:labelVisibilityMode="labeled"
app:itemTextColor="#drawable/bottom_nav_colors"
app:itemTextAppearanceActive="#style/bottomBarTextSelected"
app:itemTextAppearanceInactive="#style/bottomBarText"
app:itemIconTint="#drawable/bottom_nav_colors"
android:alpha="1.0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/tabs_navigation"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Now I want to have different styling for activity toolbar when top level fragment is loaded and when its child is loaded (showing back arrow in toolbar).
QUESTION: How can I achieve this different styling for toolbar (appbar) if I use Android Navigation Component and I navigate from root fragment to child fragment using the following code:
Bundle bundle = new Bundle();
bundle.putString("id", ei.id);
MainActivity)context).getNavController().navigate(R.id.action_actualFragment_to_actualEventFragment, bundle);
NavigationUI uses an AppBarConfiguration object to manage the behavior of the Navigation button. The Navigation button’s behavior changes depending on whether the user is at a top-level destination. Have a look at their documentation Update UI components with NavigationUI

Navigation View app:menu build gradle error

I am trying to use Navigation View in Drawer Layout, but I keep getting errors when building the file.
Here's what my xml looks like:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<FrameLayout
android:id="#+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<android.support.design.widget.NavigationView
android:id="#+id/navigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/navigation_items"
/>
</android.support.v4.widget.DrawerLayout>
This leads to a build gradle error. My menu looks like this:
<?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/menu_bookmark"
android:title="Bookmark" />
<item android:id="#+id/menu_save"
android:title="Save" />
<item android:id="#+id/menu_search"
android:title="Search" />
<item android:id="#+id/menu_share"
android:title="Share" />
</group>
</menu>
When I remove app:menu from the navigationView,the error goes away. What could be wrong?
My fix was that I needed to add app:headerLayout="#layout/my_header_layout" as well.

How do I stretch a Xamarin GridLayout's contents to fill the screen?

I'm using a GridLayout in Xamarin to create a Calculator app and am having trouble getting it to fill the screen. One possible solution I found was to use a LinearLayout for each row of the controls. The problem with this is that my = button spans two rows and I wasn't able to use it. I have also tried changing the GridLayout's layout_width and layout_height with no luck. What other options do I have? Here's my code and some screenshots:
<?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">
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:orientation="horizontal">
<TextView
android:text="0"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:gravity="right"
android:layout_gravity="fill"
android:id="#+id/resultView" />
<Button
android:text="Del"
android:id="#+id/button1" />
<Button
android:text="C"
android:id="#+id/button1" />
... <!-- Buttons continue -->
<Button
android:text="3"
android:id="#+id/button1" />
<Button
android:text="="
android:layout_gravity="fill"
android:layout_rowSpan="2"
android:id="#+id/button1" />
<Button
android:text="0"
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:id="#+id/button1" />
<Button
android:text="."
android:id="#+id/button1" />
</GridLayout>
</LinearLayout>
What I have:
What I want:
Edit: I know each button has the same id, but I'm only concerned with getting the layout right at the moment.

Layout is Orientation =vertical when device rotate it wont work

I have the following layout set to Orientation = vertical. But when I rotate the emulator to Landscape, it show the Layout in Landscape.
I want the Layout be in orientation vertical even the device rotate to Landscape.
How to solve this problem? Appreciate your help.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/myLinearLayout"
android:minWidth="25px"
android:minHeight="25px">
<TextView
android:id="#+id/myLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Put Your Name here :" />
<EditText
android:id="#+id/myEditBox"
android:inputType="textMultiLine"
android:textColor="#android:color/background_dark"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/myButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hey! Click Me" />
</LinearLayout>
android:orientation="vertical" means that the children are inserted into the layout vertically. So when you add more views they will stack underneath each other.
Vertical:
Horizontal:
This is the layout I used. Try change the orientation on your own and see the effect:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<View
android:background="#aabbdd"
android:layout_width="50dp"
android:layout_height="50dp" />
<View
android:background="#341233"
android:layout_width="50dp"
android:layout_height="50dp" />
<View
android:background="#123456"
android:layout_width="50dp"
android:layout_height="50dp" />
<View
android:background="#654321"
android:layout_width="50dp"
android:layout_height="50dp" />
<View
android:background="#550000"
android:layout_width="50dp"
android:layout_height="50dp" />
</LinearLayout>
If you want to lock rotation in your Activity, you need to add the following property to your ActivityAttribute:
ScreenOrientation = ScreenOrientation.Portrait
So it will look something like:
[Activity(Label = "Herp Derp", ScreenOrientation = ScreenOrientation.Portrait)]
public class HerpDerpActivity : Activity
{
// more stuff here
}

How to use selector with xamarin radiobutton to set background colors?

I have two radio buttons, which looks like a normal buttons. I would like to change their background color by using radio_button.xml with selector inside.
If I use little .png image to set background then it works fine.
But I tried similar code to use just colors (integers) and it doesn't work. What I'm doing wrong?
Code with background image:
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:text="LEFT"
android:id="#+id/radioLeft"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#drawable/radio_button"
android:checked="true" />
<RadioButton
android:text="RIGHT"
android:id="#+id/radioRight"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#drawable/radio_button" />
</RadioGroup>
radio_button.xml
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/gray_dot" />
<item android:state_checked="false"
android:drawable="#drawable/blue_dot" />
</selector>
button_colors.xml
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<color name="button_black">#000000</color>
<color name="button_white">#ffffff</color>
<color name="button_blue">#00afdb</color>
<color name="button_gray">#dcdcdc</color>
</resources>
I tried to replace
android:drawable="#drawable/blue_dot"
with
android:background="#color/button_blue"
but it's not working. How to fix?
I used shape xml with color to avoid background images.
radio_button.xml
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/rb_checked" />
<item android:state_checked="false"
android:drawable="#drawable/rb_unchecked" />
</selector>
rb_checked.xml
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/button_blue" />
</shape>
Main.axml
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:checked="true"
android:text="LEFT"
android:id="#+id/radioLeft"
android:button="#android:color/transparent"
android:background="#drawable/radio_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" />
<RadioButton
android:text="RIGHT"
android:id="#+id/radioRight"
android:button="#android:color/transparent"
android:background="#drawable/radio_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" />
</RadioGroup>
The trick that worked for me was
radioLeft.ButtonDrawable.SetTint(GetColor(Resource.Color.button_blue));
Or whatever color you wish to set, depending on the checked state, eg
radioLeft.ButtonDrawable.SetTint(GetColor(radioLeft.Checked ? Resource.Color.button_blue : Resource.Color.button_gray));

Resources