Quotes app using android Studio

In this tutorial, I’m going to share with you how to create a beautiful Quotes app using Android Studio. This is my first attempt at making a Quotes app, and I’m excited to show you the steps involved in its creation. Below are the details, including some screenshots of the app.

 

Step-by-Step Guide to Create a Quotes App

Step 1: Create a New Project

• Start by creating a new Android project in Android Studio and naming it Quotes. Choose Empty Activity as the template.

Step 2: Design the XML Layout

The layout for this app will consist of a scrollable view displaying an image, quotes, and buttons for social media sharing. The main layout is written in activity_main.xml as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:orientation="vertical"
tools:context=".MainActivity">

<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<ImageView
android:id="@+id/imageView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="TODO"
android:scaleType="centerCrop"
app:srcCompat="@drawable/background" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:gravity="center_horizontal"
android:orientation="vertical">

<TextView
android:id="@+id/textView4"
android:layout_width="327dp"
android:layout_height="wrap_content"
android:layout_marginStart="-20dp"
android:background="@drawable/textview_bg"
android:fontFamily="cursive"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="10sp"
android:text="Welcome to New World"
android:textColor="#fff"
android:textSize="35sp" />

<TextView
android:id="@+id/textView5"
android:layout_width="159dp"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:background="@drawable/textview_bg"
android:fontFamily="@font/qwigley"
android:gravity="center|center_horizontal"
android:text="Love Quotes"
android:textColor="#FFFFFF"
android:textSize="28sp" />

<TextView
android:id="@+id/quote"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:fontFamily="@font/qwigley"
android:gravity="center_horizontal"
android:paddingTop="10dp"
android:text="@string/in_all_the_world_there_is_no_heart_for_me_like_yours_in_all_the_world_there_is_no_love_for_you_like_mine"
android:textColor="#434545"
android:textSize="40sp" />

<Button
android:id="@+id/btnshare"
android:layout_width="345dp"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:background="@drawable/textview_bg"
android:drawableRight="@drawable/share"
android:drawableTint="#fff"
android:fontFamily="cursive"
android:foregroundGravity="center|center_horizontal"
android:gravity="center"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:text="Share"
android:textSize="18sp"
android:textStyle="bold"
app:backgroundTint="#EF598C" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:layout_marginBottom="30dp"
android:background="@drawable/botamshape"
android:gravity="center|center_horizontal"
android:orientation="horizontal"
android:padding="5dp">

<ImageView
android:id="@+id/img1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_weight="1"
app:srcCompat="@drawable/facebook" />

<ImageView
android:id="@+id/img2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_weight="1"
app:srcCompat="@drawable/instagram" />

<ImageView
android:id="@+id/img3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_weight="1"
app:srcCompat="@drawable/twitter" />

</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

 

Step 3: Write the Java Code for the Main Activity

Next, we add the logic for sharing the quotes. The app includes social media buttons that let users share the quotes via various platforms.

package com.example.quotes;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

Button share;
TextView quote;
ImageView img1, img2, img3;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().hide();

share = findViewById(R.id.btnshare);
quote = findViewById(R.id.quote);

img1 = findViewById(R.id.img1);
img2 = findViewById(R.id.img2);
img3 = findViewById(R.id.img3);

View.OnClickListener shareListener = new View.OnClickListener() {
@Override
public void onClick(View v) {
String sharetxt = quote.getText().toString();
Intent sharingIntent = new Intent(Intent.ACTION_SEND);
sharingIntent.setType("text/plain");
sharingIntent.putExtra(Intent.EXTRA_TEXT, sharetxt);
startActivity(Intent.createChooser(sharingIntent, "Share via"));
}
};

share.setOnClickListener(shareListener);
img1.setOnClickListener(shareListener);
img2.setOnClickListener(shareListener);
img3.setOnClickListener(shareListener);
}
}

In this code:

• A share button allows the user to share the displayed quote.
• Three social media buttons (Facebook, Instagram, Twitter) provide additional sharing options, all triggering the same share function.

 

Step 4: Modify the Manifest File

Finally, we need to make sure that our MainActivity is properly defined in the AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.quotes">

<uses-permission android:name="android.permission.INTERNET" />

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher"
android:supportsRtl="true"
android:theme="@style/Theme.Quotes">
<activity android:name=".SplashActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".MainActivity" />
</application>
</manifest>

 

Step 5: Run Your App

Now that everything is set up, build and run your app. You should see a simple interface displaying a welcome message, a quote, and buttons to share the quote via social media.

Conclusion
You’ve successfully created a basic Quotes app with a beautiful UI and the ability to share quotes on social media. Keep experimenting with additional features, like adding a database to store more quotes or allowing users to create their own quotes!